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

--HG--
extra : rebase_source : 59374f2bd4a6c95744409c6278f7e5efcb50ea02

toolkit/content/aboutTelemetry.css

@@ -237,12 +237,18 @@ body {
 
 .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;
 }
@@ -283,8 +289,13 @@ body[dir="rtl"] .bar {
 }
 
 .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 {

toolkit/content/aboutTelemetry.js

@@ -29,7 +29,7 @@ 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";
@@ -1321,11 +1321,12 @@ var Histogram = {
     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
@@ -1347,6 +1348,10 @@ var Histogram = {
       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));
 
@@ -2358,8 +2363,6 @@ function displayRichPingData(ping, updatePayloadList) {
     payload = ping.payload.childPayloads[payloadIndex - 1];
   }
 
-  console.log(payload);
-
   // Show chrome hang stacks
   ChromeHangs.render(payload);