Bug 1092176 - Add keyed histogram section in about:telemetry. r=froydnj
authorGeorg Fritzsche <georg.fritzsche@googlemail.com>
Fri, 31 Oct 2014 21:47:13 +0100
changeset 213456 304be83fb3c6b643fc6971ef18b37ca1a4bf803b
parent 213455 238e8cc15a713faae792589f216b763521ca7c5c
child 213457 44660ec332db03da956e511ef2e6a5804f4ee61b
push id51230
push usergeorg.fritzsche@googlemail.com
push dateFri, 31 Oct 2014 20:47:33 +0000
treeherdermozilla-inbound@44660ec332db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfroydnj
bugs1092176
milestone36.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 1092176 - Add keyed histogram section in about:telemetry. r=froydnj
toolkit/content/aboutTelemetry.css
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
--- 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">&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>
       <span class="toggle-caption">&aboutTelemetry.toggle;</span>
       <span class="empty-caption">&aboutTelemetry.emptySection;</span>
       <div id="simple-measurements" class="data">
       </div>
     </section>
--- a/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
+++ b/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
@@ -27,16 +27,20 @@
 <!ENTITY aboutTelemetry.threadHangStatsSection "
   Thread Hangs
 ">
 
 <!ENTITY aboutTelemetry.histogramsSection "
   Histograms
 ">
 
+<!ENTITY aboutTelemetry.keyedHistogramsSection "
+  Keyed Histograms
+">
+
 <!ENTITY aboutTelemetry.simpleMeasurementsSection "
   Simple Measurements
 ">
 
 <!ENTITY aboutTelemetry.addonDetailsSection "
   Add-on Details
 ">