Bug 1382331 - Redesign histograms in about:telemetry r=chutten
authorflyingrub <flyinggrub@gmail.com>
Wed, 19 Jul 2017 21:28:07 +0200
changeset 419356 0f63a6b51c1be3f196283db97264728b2c0b6e73
parent 419355 64d4132ab907740f97e398da56aaccc2d75ec42a
child 419357 e65165b95208af1cfbd4fa2813d2a4269a95ccae
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerschutten
bugs1382331
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1382331 - Redesign histograms in about:telemetry r=chutten Divide the current height by two to improve the readability. Change the colors so that they match the firefox color palette. Also prevent the label of histogram's bar to overlap. MozReview-Commit-ID: 5FLgFXk94ng
toolkit/content/aboutTelemetry.css
toolkit/content/aboutTelemetry.js
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -232,22 +232,28 @@ body {
 }
 
 #histograms, #thread-hang-stats>div {
   overflow: hidden;
 }
 
 .histogram {
   float: left;
-  border: 1px solid gray;
   white-space: nowrap;
   padding: 10px;
   position: relative; /* required for position:absolute of the contained .copy-node */
+  padding: 12px 20px 12px 20px;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 2px;
+  margin-bottom: 24px;
+  margin-right: 24px;
+  min-height: 284px;
 }
 
+
 body[dir="rtl"] .histogram {
   float: right;
 }
 
 .histogram-title {
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
@@ -278,18 +284,23 @@ body[dir="rtl"] .histogram {
   font-family: monospace;
 }
 
 body[dir="rtl"] .bar {
   float: right;
 }
 
 .bar-inner {
-  background-color: DeepSkyBlue;
-  border: 1px solid #0000b0;
+  background-color: #0095DD;
+  border: 1px solid #00539F;
+  border-radius: 2px;
+}
+
+.bar:nth-child(even) .long-label  {
+  margin-bottom: 1em;
 }
 
 th, td, table {
   text-align: start;
   border-collapse: collapse;
 }
 
 table {
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -24,17 +24,17 @@ XPCOMUtils.defineLazyModuleGetter(this, 
 
 const Telemetry = Services.telemetry;
 const bundle = Services.strings.createBundle(
   "chrome://global/locale/aboutTelemetry.properties");
 const brandBundle = Services.strings.createBundle(
   "chrome://branding/locale/brand.properties");
 
 // Maximum height of a histogram bar (in em for html, in chars for text)
-const MAX_BAR_HEIGHT = 18;
+const MAX_BAR_HEIGHT = 8;
 const MAX_BAR_CHARS = 25;
 const PREF_TELEMETRY_SERVER_OWNER = "toolkit.telemetry.server_owner";
 const PREF_TELEMETRY_ENABLED = "toolkit.telemetry.enabled";
 const PREF_DEBUG_SLOW_SQL = "toolkit.telemetry.debugSlowSql";
 const PREF_SYMBOL_SERVER_URI = "profiler.symbolicationUrl";
 const DEFAULT_SYMBOL_SERVER_URI = "http://symbolapi.mozilla.org";
 const PREF_FHR_UPLOAD_ENABLED = "datareporting.healthreport.uploadEnabled";
 
@@ -1316,21 +1316,22 @@ var Histogram = {
     // If the last label is not the longest string, alignment will break a little
     let labelPadTo = 0;
     if (aHgram.values.length) {
       labelPadTo = String(aHgram.values[aHgram.values.length - 1][0]).length;
     }
     let maxBarValue = aOptions.exponential ? this.getLogValue(aHgram.max) : aHgram.max;
 
     for (let [label, value] of aHgram.values) {
+      label = String(label);
       let barValue = aOptions.exponential ? this.getLogValue(value) : value;
 
       // Create a text representation: <right-aligned-label> |<bar-of-#><value>  <percentage>
       text += EOL
-              + " ".repeat(Math.max(0, labelPadTo - String(label).length)) + label // Right-aligned label
+              + " ".repeat(Math.max(0, labelPadTo - label.length)) + label // Right-aligned label
               + " |" + "#".repeat(Math.round(MAX_BAR_CHARS * barValue / maxBarValue)) // Bar
               + "  " + value // Value
               + "  " + Math.round(100 * value / aHgram.sample_count) + "%"; // Percentage
 
       // Construct the HTML labels + bars
       let belowEm = Math.round(MAX_BAR_HEIGHT * (barValue / maxBarValue) * 10) / 10;
       let aboveEm = MAX_BAR_HEIGHT - belowEm;
 
@@ -1342,16 +1343,20 @@ var Histogram = {
       barDiv.appendChild(document.createTextNode(value ? value : "\u00A0"));
 
       // Create the blue bar
       let bar = document.createElement("div");
       bar.className = "bar-inner";
       bar.style.height = belowEm + "em";
       barDiv.appendChild(bar);
 
+      // Add a special class to move the text down to prevent text overlap
+      if (label.length > 3) {
+          bar.classList.add("long-label");
+      }
       // Add bucket label
       barDiv.appendChild(document.createTextNode(label));
 
       aDiv.appendChild(barDiv);
     }
 
     return text.substr(EOL.length); // Trim the EOL before the first line
   },
@@ -2353,18 +2358,16 @@ function displayRichPingData(ping, updat
   let payloadSelect = document.getElementById("choose-payload");
   let payloadOption = payloadSelect.selectedOptions.item(0);
   let payloadIndex = payloadOption.getAttribute("value");
 
   if (payloadIndex > 0) {
     payload = ping.payload.childPayloads[payloadIndex - 1];
   }
 
-  console.log(payload);
-
   // Show chrome hang stacks
   ChromeHangs.render(payload);
 
   // Show telemetry log.
   TelLog.render(payload);
 
   // Show thread hang stats
   ThreadHangStats.render(payload);