Bug 1092176 - Add keyed histogram section in about:telemetry. r=froydnj, a=lmandel
authorGeorg Fritzsche <georg.fritzsche@googlemail.com>
Fri, 31 Oct 2014 21:47:13 +0100
changeset 225909 e6db2f014e26
parent 225908 aa11e337b8e3
child 225910 1ca39da5df9d
push id4063
push usergeorg.fritzsche@googlemail.com
push date2014-11-02 23:54 +0000
treeherdermozilla-beta@1ca39da5df9d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfroydnj, lmandel
bugs1092176
milestone34.0
Bug 1092176 - Add keyed histogram section in about:telemetry. r=froydnj, a=lmandel
toolkit/content/aboutTelemetry.css
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -112,16 +112,34 @@ body[dir="rtl"] .histogram {
 
 .histogram-title {
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
   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;
   text-align: center;
   float: left;
   font-family: monospace;
 }
 
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -825,16 +825,36 @@ let KeyValueTable = {
 
       let valueField = document.createElement("td");
       valueField.appendChild(document.createTextNode(value + "\n"));
       newRow.appendChild(valueField);
     }
   }
 };
 
+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"),
 
   /**
    * Render the addon details section as a series of headers followed by key/value tables
    * @param aSections Object containing the details sections to render
    */
@@ -992,16 +1012,27 @@ function onLoad() {
     filterBox.addEventListener("input", Histogram.histogramFilterChanged, false);
     if (filterBox.value.trim() != "") { // on load, no need to filter if empty
       Histogram.filterHistograms(hgramDiv, filterBox.value);
     }
 
     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;
   let addonData = Telemetry.addonHistogramSnapshots;
   for (let [addon, histograms] of Iterator(addonData)) {
     for (let [name, hgram] of Iterator(histograms)) {
       addonHistogramsRendered = true;
       Histogram.render(addonDiv, addon + ": " + name, hgram);
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -85,16 +85,25 @@
       <span class="empty-caption">&aboutTelemetry.emptySection;</span>
       <span class="filter-ui">
         &aboutTelemetry.filterText; <input type="text" class="filter" id="histograms-filter" target_id="histograms"/>
       </span>
       <div id="histograms" class="data">
       </div>
     </section>
 
+    <section id="keyed-histograms-section" class="data-section">
+      <input type="checkbox" class="statebox"/>
+      <h1 class="section-name">Keyed Histograms</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>
       <span class="toggle-caption">&aboutTelemetry.toggle;</span>
       <span class="empty-caption">&aboutTelemetry.emptySection;</span>
       <div id="simple-measurements" class="data">
       </div>
     </section>