Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
  • 6 commits
  • 5 files changed
  • 0 commit comments
  • 5 contributors
View
20 css/fonts.css
@@ -1,21 +1,21 @@
@font-face {
font-family: 'Open Sans Light';
- src: url('../fonts/OpenSans-light-webfont.eot');
- src: url('../fonts/OpenSans-light-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/OpenSans-light-webfont.woff') format('woff'),
- url('../fonts/OpenSans-light-webfont.ttf') format('truetype'),
- url('../fonts/OpenSans-light-webfont.svg#OpenSansLight') format('svg');
+ src: url('../fonts/opensans-light-webfont.eot');
+ src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/opensans-light-webfont.woff') format('woff'),
+ url('../fonts/opensans-light-webfont.ttf') format('truetype'),
+ url('../fonts/opensans-light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
- src: url('../fonts/OpenSans-regular-webfont.eot');
- src: url('../fonts/OpenSans-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/OpenSans-regular-webfont.woff') format('woff'),
- url('../fonts/OpenSans-regular-webfont.ttf') format('truetype'),
- url('../fonts/OpenSans-regular-webfont.svg#OpenSansRegular') format('svg');
+ src: url('../fonts/opensans-regular-webfont.eot');
+ src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/opensans-regular-webfont.woff') format('woff'),
+ url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
+ url('../fonts/opensans-regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
View
141 css/styles.css
@@ -2,7 +2,7 @@
/* --- General --- */
html {
- height: 100%;
+ height: 100%;
}
body {
background-color: #fafafa;
@@ -42,55 +42,47 @@ h3 {
font-size: 1.5rem;
font-weight: lighter;
}
-.spacer {
- flex: 1;
-}
/* --- Main Layout --- */
.persistentHeader {
- width: 100%;
- height: 110px;
- background-color: #f2f4f5;
- background-image: url(../img/noise.png);
- box-shadow: 0 -1px 4px hsla(210,35%,8%,.03) inset,
- 0 -1px 0 hsla(210,35%,8%,.05) inset;
- z-index: 100;
+ position: relative;
+ background-color: #f2f4f5;
+ width: 100%;
+ height: 110px;
+ box-shadow: 0 -1px 4px hsla(210,35%,8%,.03) inset,
+ 0 -1px 0 hsla(210,35%,8%,.05) inset;
+ z-index: 100;
}
.outerContainer {
- display: flex;
width: 100%;
max-width: 1200px;
margin: 0 auto;
+ overflow: visible;
}
.innerContainer {
- display: flex;
- flex: 1;
margin-top: 110px;
min-height: 50px;
width: 100%;
}
.sidebar,
.sidebar_tabs {
- flex: 0;
- min-width: 360px;
- background-image: url(../img/sidebarSeparator.png);
- background-repeat: no-repeat;
- background-position: right center;
- background-size: 13px 100%;
+ float: left;
+ background-image: url(../img/sidebarSeparator.png);
+ background-repeat: no-repeat;
+ background-position: right center;
+ background-size: 13px 100%;
+ width: 360px;
}
/* Only displayed for viewports 768px or less */
.menu_toggle {
display: none;
}
.mainContent {
- flex: 1;
- flex-direction: column;
- margin-top: 30px;
- min-width: 320px;
+ float: right;
+ margin-top: 30px;
+ min-width: 320px;
}
.statsBox {
- display: flex;
- flex-direction: column;
width: 240px;
margin: 30px 60px;
color: #5c6166;
@@ -144,7 +136,6 @@ h3 {
/* --- Header --- */
.headerContainer {
- display: flex;
margin: 0 auto;
padding: 0 20px 0 40px;
width: auto;
@@ -152,16 +143,26 @@ h3 {
min-width: 600px;
}
.navAndBlurb {
- flex: 1;
height: 100px;
}
.nav {
- display: flex;
margin: 0;
padding: 0;
}
.nav li {
- list-style: none;
+ display: inline;
+ list-style: none;
+}
+.nav li a {
+ display: inline-block;
+ color: #5c6166;
+ padding: 20px 0 20px;
+ font-size: 24px;
+ line-height: 24px;
+ font-weight: lighter;
+}
+.nav li a.active {
+ border-top: 3px solid #C13832;
}
.nav-category {
padding: 20px 0 20px;
@@ -173,51 +174,43 @@ h3 {
.nav-category a:hover {
text-decoration: none;
}
-.nav-category.active {
- background-image: -moz-linear-gradient(top, #ffac06 1px, #f27900 2px, transparent 2px);
- background-repeat: no-repeat;
-}
.nav-category.active a {
color: #333;
}
.nav-separator {
- flex: 0;
- margin: 10px 20px 10px;
- min-width: 3px;
- width: 3px;
- height: 40px;
- background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), hsla(0,0%,100%,.4) 35%, hsla(0,0%,100%,.4) 65%, hsla(0,0%,100%,0)),
- -moz-linear-gradient(top, hsla(0,0%,10%,0), hsla(0,0%,10%,.2) 35%, hsla(0,0%,10%,.2) 65%, hsla(0,0%,10%,0)),
- -moz-linear-gradient(top, hsla(0,0%,100%,0), hsla(0,0%,100%,.4) 35%, hsla(0,0%,100%,.4) 65%, hsla(0,0%,100%,0));
- background-size: 1px auto, 1px auto, 1px auto;
- background-position: 0 center, 1px center, 2px center;
- background-repeat: no-repeat;
- align-self: flex-end;
+ background-size: 1px auto, 1px auto, 1px auto;
+ background-position: 0 center, 1px center, 2px center;
+ background-repeat: no-repeat;
+ margin: 10px 20px 10px;
+ border-right: 1px solid #999;
+ min-width: 3px;
+ width: 3px;
+ height: 40px;
}
/* Activation Widget */
.activationWidget {
- position: relative;
- display: flex;
- flex: 0;
- min-width: 180px;
+ position: absolute;
+ top: 20px;
+ right: 10%;
+ width: 150px;
height: 100px;
- align-items: center;
- -moz-user-select: none;
cursor: default;
}
.activationTextContainer {
- margin-right: 10px;
- color: #737980;
- font-size: 13px;
- line-height: 13px;
- text-align: right;
+ float: left;
+ color: #737980;
+ margin-right: 10px;
+ padding-top: 10px;
+ font-size: 13px;
+ line-height: 13px;
+ text-align: right;
}
.activationTabContainer {
- flex: 0;
- min-width: 60px;
- width: 60px;
- overflow: hidden;
+ float: right;
+ min-width: 60px;
+ width: 60px;
+ overflow: hidden;
}
.activationTabOverlay {
position: absolute;
@@ -338,7 +331,6 @@ h3 {
}
.tipBox-header {
- display: flex;
min-height: 32px;
height: 32px;
padding: 0 20px;
@@ -402,11 +394,6 @@ h3 {
.icon.closeTip:hover:active {
background-position: center right;
}
-
-.tipBox-header > .text {
- flex: 1;
-}
-
.tipBox-content {
padding: 10px 20px 10px 20px;
font-size: .8rem;
@@ -421,7 +408,6 @@ h3 {
}
.tipBox.buttonRow {
- display: flex;
padding: 0 20px 14px;
transition-duration: 250ms;
}
@@ -432,7 +418,6 @@ h3 {
}
.buttonRow .separator {
- flex: 0;
margin: 0 -1px;
min-width: 3px;
width: 3px;
@@ -556,8 +541,6 @@ figcaption {
}
.panelContainerBase {
- display: flex;
- flex-direction: column;
width: 300px;
margin-top: -1px;
background-image: -moz-linear-gradient(#fcfeff, hsla(210,35%,97%,.97));
@@ -575,7 +558,6 @@ figcaption {
}
.panelContainerContent {
- flex: 1;
padding: 16px;
border-bottom: 1px solid hsla(0,0%,100%,.2);
}
@@ -597,8 +579,7 @@ figcaption {
.rawdata-display {
clear:both;
margin: 0 0 30px 20px;
- width: 91%;
- flex-direction: column;
+ width: 815px;
}
/* Table styles */
table {
@@ -647,6 +628,13 @@ tr:nth-child(odd) td {
width: 25px;
height: 30px;
}
+ .mainContent {
+ float: left;
+ margin-top: 10px;
+ }
+ .tipBox-container {
+ width: auto;
+ }
.statsBox {
background-color: #fff;
width: 0;
@@ -675,8 +663,11 @@ tr:nth-child(odd) td {
.statsBoxSection-content {
padding-bottom: .7rem;
}
+ .rawdata-display {
+ width: 700px;
+ }
.rawdata-container h2 {
- margin: 0px 60px 30px
+ margin: 0 60px 30px
}
}
View
141 js/data.js
@@ -1,5 +1,4 @@
-var FIVE_MINUTES = 5 * (60 * 1000),
- ONE_DAY = 1000 * 60 * 60 * 24,
+var ONE_DAY = 1000 * 60 * 60 * 24,
ONE_WEEK = ONE_DAY * 7,
TWO_WEEKS = ONE_DAY * 14,
payload = null,
@@ -7,68 +6,6 @@ var FIVE_MINUTES = 5 * (60 * 1000),
// Is this the first load for the document?
isFirstLoad = true;
-
-// Function object that contains the count, sum,
-// minimum, quartiles, maximum, mean, variance, and
-// standard deviation of the series of numbers stored
-// in the specified array of sorted numbers.
-// Thanks @deinspanjer
-var Stats = function(data) {
- var result = {};
-
- data.sort(function(a,b) {
- return a-b;
- });
-
- result.count = data.length;
-
- // Since the data is sorted, the minimum value
- // is at the beginning of the array, the median
- // value is in the middle of the array, and the
- // maximum value is at the end of the array.
- result.min = data[0];
- result.max = data[data.length - 1];
-
- var ntileFunc = function(percentile) {
-
- if (data.length == 1) {
- return data[0];
- }
-
- var ntileRank = (percentile / 100) * (data.length + 1),
- integralRank = Math.floor(ntileRank),
- fractionalRank = ntileRank - integralRank,
- lowerValue = data[integralRank-1],
- upperValue = percentile === 99 ? result.max : data[integralRank];
-
- return (fractionalRank * (upperValue - lowerValue)) + lowerValue;
- };
-
- result.percentile25 = ntileFunc(25);
- result.median = ntileFunc(50);
- result.percentile75 = ntileFunc(75);
- result.percentile99 = ntileFunc(99);
-
- // Compute the mean and variance using a
- // numerically stable algorithm.
- var sqsum = 0;
- result.mean = data[0];
- result.sum = result.mean * result.count;
- for (var i = 1; i < data.length; ++i) {
- var x = data[i];
- var delta = x - result.mean;
- var sweep = i + 1.0;
- result.mean += delta / sweep;
- sqsum += delta * delta * (i / sweep);
- result.sum += x;
- }
- result.variance = sqsum / result.count;
- result.sdev = Math.sqrt(result.variance);
-
-
- return result;
-};
-
// Converts the day passed to a Date object and checks
// whether the current month is equal to the month of the
// day argument passed.
@@ -78,10 +15,6 @@ var isCurrentMonth = function(day) {
return thisDate === currentMonth ? true : false;
},
-// A better typeof thanks to @angus-c
-toType = function(obj) {
- return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
-},
// Gets all dates from the object, sort in the specified
// oder and returns the new array.
sortDates = function(days, descending) {
@@ -252,38 +185,6 @@ getSessionsCount = function(customPayload) {
return cleanSessions + abortedSessions;
},
-// Takes an array of paintTimes or, an individual paintTime,
-// and filters it so it contains no negative values and only times
-// within the 99th percentile (when appropriate) to avoid far outliers.
-// @see https://bugzilla.mozilla.org/show_bug.cgi?id=856315
-filterStartupTimes = function(unfiltered) {
- if(toType(unfiltered) === 'array') {
- var stats = Stats(unfiltered),
- filteredPaintTimes = [];
-
- for(var paintTime in unfiltered) {
- var currentPaintTime = unfiltered[paintTime];
-
- // Is the 99th percentile is greater than our ceiling, filter
- // negatives and anything above the 99th percentile.
- if(unfiltered.hasOwnProperty(paintTime) && stats.percentile99 > FIVE_MINUTES) {
- if(currentPaintTime > 0 && currentPaintTime < stats.percentile99) {
- filteredPaintTimes.push(currentPaintTime);
- }
- } else {
- // Just filter out negatives.
- if(currentPaintTime > 0) {
- filteredPaintTimes.push(currentPaintTime);
- }
- }
- }
- return filteredPaintTimes;
- } else {
- // For individual pantTimes, ensure this value is not negative and
- // falls within our ceiling.
- return (unfiltered > 0 && unfiltered <= FIVE_MINUTES) ? true : false;
- }
-},
// Gets all startup times (paintTimes), or the median for each day over
// the past 14 days. Data will be returned as an obejct as follows:
// graphData = {
@@ -310,7 +211,6 @@ getAllStartupTimes = function(median) {
if(currentDayAsDate >= twoWeeksAgo && sortedDates.hasOwnProperty(day)) {
var sessionsInfo = days[currentDay]['org.mozilla.appSessions.previous'],
paintTimes = null,
- filteredPaintTimes = [],
paintTimesLength = 0,
paintTime = 0,
startupTimesTotal = 0;
@@ -319,16 +219,11 @@ getAllStartupTimes = function(median) {
// or crash data. If so, increment the session count.
if(typeof sessionsInfo !== 'undefined') {
paintTimes = sessionsInfo.firstPaint;
+ paintTimesLength = paintTimes.length;
// For each day for which we have data, increase the dateCount.
++graphData.dateCount;
- if(paintTimesLength > 1) {
- filteredPaintTimes = filterStartupTimes(paintTimes);
- }
- // Only get the array length after it has been filtered.
- paintTimesLength = filteredPaintTimes.length;
-
// First test whether we need to return the median startup times.
if(median) {
// If we have more than one sessions paint time for the day
@@ -337,45 +232,41 @@ getAllStartupTimes = function(median) {
var divisor = paintTimesLength,
startupTimeMedian = 0;
- for(paintTime in filteredPaintTimes) {
- if(filteredPaintTimes.hasOwnProperty(paintTime)) {
- startupTimesTotal = startupTimesTotal + filteredPaintTimes[paintTime];
+ for(paintTime in paintTimes) {
+ if(paintTimes.hasOwnProperty(paintTime) && paintTimes[paintTime]>0) {
+ startupTimesTotal = startupTimesTotal + paintTimes[paintTime];
}
}
// Calculate the median, convert to seconds and push onto array
startupTimeMedian = Math.round((startupTimesTotal / divisor) / 1000);
graphData.startupTimes.push([new Date(currentDay).getTime(), startupTimeMedian]);
} else {
- // This day only has one session, ensure it is not negative, and falls within our ceiling.
- // Convert to seconds, no need to calculate a median.
- if (filterStartupTimes(paintTimes[paintTime])) {
+ // This day only has one session, convert to seconds, no need to calculate
+ // a median.
+ if (paintTimes[paintTime]>0) {
graphData.startupTimes.push([new Date(currentDay).getTime(), paintTimes[paintTime] / 1000]);
}
}
} else {
- for(paintTime in filteredPaintTimes) {
- if(filteredPaintTimes.hasOwnProperty(paintTime)) {
- graphData.startupTimes.push([new Date(currentDay).getTime(), filteredPaintTimes[paintTime] / 1000]);
+ for(paintTime in paintTimes) {
+ if (paintTimes[paintTime]>0) {
+ graphData.startupTimes.push([new Date(currentDay).getTime(), paintTimes[paintTime] / 1000]);
}
}
}
}
}
}
-
- var currentSessionStartupTime = payload.data.last['org.mozilla.appSessions.current'].firstPaint,
- latest = new Date().getTime();
-
- // Ensure current session's paintTime fall within our ceiling
- // and, is not negative.
- if(filterStartupTimes(currentSessionStartupTime)) {
+ var latest = new Date().getTime();
+ // Add one more for the current day.
+ if (payload.data.last['org.mozilla.appSessions.current'].firstPaint > 0) {
graphData.dateCount = graphData.dateCount + 1;
// Add the current session's startup time to the end of the array
graphData.startupTimes.push([
latest,
- currentSessionStartupTime / 1000
+ payload.data.last['org.mozilla.appSessions.current'].firstPaint / 1000
]);
- }
+ }
return graphData;
},
View
21 js/fhr.js
@@ -1,4 +1,5 @@
$(function() {
+
var navListItems = $('.nav li'),
rawTabs = $('#raw_selector').find('li a'),
navItems = navListItems.find('a'),
@@ -9,11 +10,9 @@ $(function() {
var showContainer = function(anchor) {
// Get the id of the container to show from the href.
var containerId = anchor.attr('href'),
- container = document.querySelector(containerId);
- // Because we are working with flex containers,
- // we cannot simply use jQuery's show as it will set
- // the box to display:block and we want display:flex
- container.setAttribute('style', 'display:flex');
+ container = $(containerId);
+
+ container.show();
};
// Handle clicks on the main presistent header
@@ -22,9 +21,9 @@ $(function() {
// Ensure all content containers are hidden.
contentContainers.hide();
// Remove the active class from all links
- navListItems.removeClass('active');
- // Set the clicked links parent list item to active
- $(this).parents('li').addClass('active');
+ navItems.removeClass('active');
+ // Set the clicked links to active
+ $(this).addClass('active');
showContainer($(this));
});
@@ -149,9 +148,9 @@ $(function() {
if(getSessionsCount() < 5) {
$('#hungryfox').show('slow');
} else {
- // We have enough data, show the graph UI and
- // draw the graph. By default, we draw average
- // startup times.
+ // We have enough data, show the graph UI
+ // and draw the graph. By default, we draw
+ // the average startup times.
$('.graphbox').show();
drawGraph(true);
}
View
8 templates/index.html
@@ -12,7 +12,7 @@
<div class="headerContainer">
<div class="navAndBlurb">
<ul class="nav">
- <li class="nav-category active"><a href="#health">{{ _('Firefox Health Report') }}</a></li>
+ <li class="nav-category"><a href="#health" class="active">{{ _('Firefox Health Report') }}</a></li>
<li class="nav-separator"></li>
<li class="nav-category"><a href="#raw">{{ _('Raw Data') }}</a></li>
</ul>
@@ -20,11 +20,11 @@
</div>
<div class="activationWidget">
- <div class="activationTextContainer">{{ _('Data Sharing') }}<br><span class="statusText">{{ _('ON') }}</span></div>
- <div class="activationTabContainer">
+ <p class="activationTextContainer">{{ _('Data Sharing') }}<br><span class="statusText">{{ _('ON') }}</span></p>
+ <span class="activationTabContainer">
<div class="activationTabOverlay"></div>
<div class="activationTab"></div>
- </div>
+ </span>
<div class="panelContainer disabledPanel">
<div class="panelContainerArrow"></div>

No commit comments for this range

Something went wrong with that request. Please try again.