Bug 1382331 - Redesign histograms in about:telemetry r?chutten draft
authorflyingrub <flyinggrub@gmail.com>
Wed, 19 Jul 2017 21:28:07 +0200
changeset 611595 191c8eafc7d272feb6c9db0b710bf5afbff082cb
parent 610973 1b065ffd8a535a0ad4c39a912af18e948e6a42c1
child 638198 d6053c2919cadf57ce5658f99a73d48b13302a2f
push id69260
push userbmo:flyinggrub@gmail.com
push dateWed, 19 Jul 2017 21:39:45 +0000
reviewerschutten
bugs1382331
milestone56.0a1
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;
+  height: 274px;
 }
 
+
 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;
+}
+
+.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";
 
@@ -1314,23 +1314,25 @@ var Histogram = {
   renderValues: function Histogram_renderValues(aDiv, aHgram, aOptions) {
     let text = "";
     // 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;
+    let previousLongLabel = false;
 
     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;
 
@@ -1343,16 +1345,24 @@ var Histogram = {
 
       // Create the blue bar
       let bar = document.createElement("div");
       bar.className = "bar-inner";
       bar.style.height = belowEm + "em";
       barDiv.appendChild(bar);
 
       // Add bucket label
+      if (label.length > 3) {
+        if (previousLongLabel) {
+          bar.classList.add('long-label');
+          previousLongLabel = false;
+        } else {
+          previousLongLabel = true;
+        }
+      }
       barDiv.appendChild(document.createTextNode(label));
 
       aDiv.appendChild(barDiv);
     }
 
     return text.substr(EOL.length); // Trim the EOL before the first line
   },
 };
@@ -2355,18 +2365,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);