bug 1277504 - Support aggregated child histograms in about:telemetry r=gfritzsche
authorChris H-C <chutten@mozilla.com>
Tue, 23 Aug 2016 14:11:31 -0400
changeset 314450 762e238a73d064a497891f997347f10b6c2e8921
parent 314449 5d3383a8df5f53550e54f8132fdb69b4479f721c
child 314451 f3b858440d0112e121efd0080e2eaf9f081d6d36
push id20574
push usercbook@mozilla.com
push dateTue, 20 Sep 2016 10:05:16 +0000
treeherderfx-team@14705f779a46 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgfritzsche
bugs1277504
milestone51.0a1
bug 1277504 - Support aggregated child histograms in about:telemetry r=gfritzsche Throw some process selectors in the Histograms and Keyed Histograms sections to allow users to choose which process type's histograms they'd like to see.
toolkit/content/aboutTelemetry.css
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -224,16 +224,24 @@ body[dir="rtl"] .copy-node {
   padding-inline-start: 10em;
   display: none;
 }
 
 .has-data.expanded .filter-ui {
   display: inline;
 }
 
+.processes-ui {
+  display: none;
+}
+
+.has-data.expanded .processes-ui {
+  display: initial;
+}
+
 .filter-blocked {
   display: none;
 }
 
 #raw-ping-data-section {
   width: 100%;
   height: 100%;
   background-color:-moz-Dialog;
@@ -252,8 +260,12 @@ body[dir="rtl"] .copy-node {
   padding: 5px 10px;
 }
 
 /* addon subsection style */
 .addon-caption {
   font-size: larger;
   margin: 5px 0;
 }
+
+.process-picker {
+  margin: 0 0.5em;
+}
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -301,16 +301,20 @@ var PingPicker = {
     }, false);
 
     document.getElementById("newer-ping")
             .addEventListener("click", () => this._movePingIndex(-1), false);
     document.getElementById("older-ping")
             .addEventListener("click", () => this._movePingIndex(1), false);
     document.getElementById("choose-payload")
             .addEventListener("change", () => displayPingData(gPingData), false);
+    document.getElementById("histograms-processes")
+            .addEventListener("change", () => displayPingData(gPingData), false);
+    document.getElementById("keyed-histograms-processes")
+            .addEventListener("change", () => displayPingData(gPingData), false);
   },
 
   onPingSourceChanged: function() {
     this.update();
   },
 
   onPingDisplayChanged: function() {
     this.update();
@@ -1777,16 +1781,43 @@ function sortStartupMilestones(aSimpleMe
   let result = {};
   for (let key of sortedKeys) {
     result[key] = aSimpleMeasurements[key];
   }
 
   return result;
 }
 
+function renderProcessList(ping, selectEl) {
+  removeAllChildNodes(selectEl);
+  let option = document.createElement("option");
+  option.appendChild(document.createTextNode("parent"));
+  option.setAttribute("value", "");
+  option.selected = true;
+  selectEl.appendChild(option);
+
+  if (!("processes" in ping.payload)) {
+    selectEl.disabled = true;
+    return;
+  }
+  selectEl.disabled = false;
+
+  for (let process of Object.keys(ping.payload.processes)) {
+    // TODO: parent hgrams are on root payload, not in payload.processes.parent
+    // When/If that gets moved, you'll need to remove this:
+    if (process === "parent") {
+      continue;
+    }
+    option = document.createElement("option");
+    option.appendChild(document.createTextNode(process));
+    option.setAttribute("value", process);
+    selectEl.appendChild(option);
+  }
+}
+
 function renderPayloadList(ping) {
   // Rebuild the payload select with options:
   //   Parent Payload (selected)
   //   Child Payload 1..ping.payload.childPayloads.length
   let listEl = document.getElementById("choose-payload");
   removeAllChildNodes(listEl);
 
   let option = document.createElement("option");
@@ -1845,19 +1876,21 @@ function displayPingData(ping, updatePay
   // Render raw ping data.
   let pre = document.getElementById("raw-ping-data");
   pre.textContent = JSON.stringify(gPingData, null, 2);
 
   // Update the structured data rendering.
   const keysHeader = bundle.GetStringFromName("keysHeader");
   const valuesHeader = bundle.GetStringFromName("valuesHeader");
 
-  // Update the payload list
+  // Update the payload list and process lists
   if (updatePayloadList) {
     renderPayloadList(ping);
+    renderProcessList(ping, document.getElementById("histograms-processes"));
+    renderProcessList(ping, document.getElementById("keyed-histograms-processes"));
   }
 
   // Show general data.
   GeneralData.render(ping);
 
   // Show environment data.
   EnvironmentData.render(ping);
 
@@ -1924,18 +1957,28 @@ function displayPingData(ping, updatePay
   // Show scalar data.
   Scalars.render(payload);
 
   // Show histogram data
   let hgramDiv = document.getElementById("histograms");
   removeAllChildNodes(hgramDiv);
 
   let histograms = payload.histograms;
+
+  let hgramsSelect = document.getElementById("histograms-processes");
+  let hgramsOption = hgramsSelect.selectedOptions.item(0);
+  let hgramsProcess = hgramsOption.getAttribute("value");
+  if (hgramsProcess &&
+      "processes" in ping.payload &&
+      hgramsProcess in ping.payload.processes) {
+    histograms = ping.payload.processes[hgramsProcess].histograms;
+  }
+
   hasData = Object.keys(histograms).length > 0;
-  setHasData("histograms-section", hasData);
+  setHasData("histograms-section", hasData || hgramsSelect.options.length);
 
   if (hasData) {
     for (let [name, hgram] of Object.entries(histograms)) {
       Histogram.render(hgramDiv, name, hgram, {unpacked: true});
     }
 
     let filterBox = document.getElementById("histograms-filter");
     filterBox.addEventListener("input", Histogram.histogramFilterChanged, false);
@@ -1945,27 +1988,37 @@ function displayPingData(ping, updatePay
 
     setHasData("histograms-section", true);
   }
 
   // Show keyed histogram data
   let keyedDiv = document.getElementById("keyed-histograms");
   removeAllChildNodes(keyedDiv);
 
-  setHasData("keyed-histograms-section", false);
   let keyedHistograms = payload.keyedHistograms;
+
+  let keyedHgramsSelect = document.getElementById("keyed-histograms-processes");
+  let keyedHgramsOption = keyedHgramsSelect.selectedOptions.item(0);
+  let keyedHgramsProcess = keyedHgramsOption.getAttribute("value");
+  if (keyedHgramsProcess &&
+      "processes" in ping.payload &&
+      keyedHgramsProcess in ping.payload.processes) {
+    keyedHistograms = ping.payload.processes[keyedHgramsProcess].keyedHistograms;
+  }
+
+  setHasData("keyed-histograms-section", keyedHgramsSelect.options.length);
   if (keyedHistograms) {
     let hasData = false;
     for (let [id, keyed] of Object.entries(keyedHistograms)) {
       if (Object.keys(keyed).length > 0) {
         hasData = true;
         KeyedHistogram.render(keyedDiv, id, keyed, {unpacked: true});
       }
     }
-    setHasData("keyed-histograms-section", hasData);
+    setHasData("keyed-histograms-section", hasData || keyedHgramsSelect.options.length);
   }
 
   // Show addon histogram data
   let addonDiv = document.getElementById("addon-histograms");
   removeAllChildNodes(addonDiv);
 
   let addonHistogramsRendered = false;
   let addonData = payload.addonHistograms;
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -147,25 +147,31 @@
       <section id="histograms-section" class="data-section">
         <input type="checkbox" class="statebox"/>
         <h1 class="section-name">&aboutTelemetry.histogramsSection;</h1>
         <span class="toggle-caption">&aboutTelemetry.toggle;</span>
         <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 class="processes-ui">
+          <select id="histograms-processes" class="process-picker"></select>
+        </div>
         <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 class="processes-ui">
+          <select id="keyed-histograms-processes" class="process-picker"></select>
+        </div>
         <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>