Bug 1092176 - Add keyed histogram section in about:telemetry. r=froydnj

toolkit/content/aboutTelemetry.css

@@ -117,6 +117,24 @@ body[dir="rtl"] .histogram {
   overflow: hidden;
 }
 
+.keyed-histogram {
+  white-space: nowrap;
+  padding: 15px;
+  position: relative; /* required for position:absolute of the contained .copy-node */
+  display: block;
+}
+
+.keyed-histogram-title {
+  text-overflow: ellipsis;
+  width: 100%;
+  margin: 10px;
+  font-weight: bold;
+  font-size: 120%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+
 .bar {
   width: 2em;
   margin: 2px;

toolkit/content/aboutTelemetry.js

@@ -830,6 +830,26 @@ let KeyValueTable = {
   }
 };
 
+let KeyedHistogram = {
+  render: function(parent, id, keyedHistogram) {
+    let outerDiv = document.createElement("div");
+    outerDiv.className = "keyed-histogram";
+    outerDiv.id = id;
+
+    let divTitle = document.createElement("div");
+    divTitle.className = "keyed-histogram-title";
+    divTitle.appendChild(document.createTextNode(id));
+    outerDiv.appendChild(divTitle);
+
+    for (let [name, hgram] of Iterator(keyedHistogram)) {
+      Histogram.render(outerDiv, name, hgram);
+    }
+
+    parent.appendChild(outerDiv);
+    return outerDiv;
+  },
+};
+
 let AddonDetails = {
   tableIDTitle: bundle.GetStringFromName("addonTableID"),
   tableDetailsTitle: bundle.GetStringFromName("addonTableDetails"),
@@ -997,6 +1017,17 @@ function onLoad() {
     setHasData("histograms-section", true);
   }
 
+  // Show keyed histogram data
+  let keyedHistograms = Telemetry.keyedHistogramSnapshots;
+  if (Object.keys(keyedHistograms).length) {
+    let keyedDiv = document.getElementById("keyed-histograms");
+    for (let [id, keyed] of Iterator(keyedHistograms)) {
+      KeyedHistogram.render(keyedDiv, id, keyed);
+    }
+
+    setHasData("keyed-histograms-section", true);
+  }
+
   // Show addon histogram data
   let addonDiv = document.getElementById("addon-histograms");
   let addonHistogramsRendered = false;

toolkit/content/aboutTelemetry.xhtml

@@ -90,6 +90,15 @@
       </div>
     </section>
 
+    <section id="keyed-histograms-section" class="data-section">
+      <input type="checkbox" class="statebox"/>
+      <h1 class="section-name">&aboutTelemetry.keyedHistogramsSection;</h1>
+      <span class="toggle-caption">&aboutTelemetry.toggle;</span>
+      <span class="empty-caption">&aboutTelemetry.emptySection;</span>
+      <div id="keyed-histograms" class="data">
+      </div>
+    </section>
+
     <section id="simple-measurements-section" class="data-section">
       <input type="checkbox" class="statebox"/>
       <h1 class="section-name">&aboutTelemetry.simpleMeasurementsSection;</h1>

toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd

@@ -32,6 +32,10 @@
   Histograms
 ">
 
+<!ENTITY aboutTelemetry.keyedHistogramsSection "
+  Keyed Histograms
+">
+
 <!ENTITY aboutTelemetry.simpleMeasurementsSection "
   Simple Measurements
 ">