Bug 1278556 - Enable child processes scalars in about:telemetry. r=chutten
authorAlessio Placitelli <alessio.placitelli@gmail.com>
Tue, 10 Jan 2017 09:06:00 +0100
changeset 462242 f60de5dd2579154891c5c858a286eddd69371a59
parent 462241 94b3eae2ea2b1ca56097ef4306f911a5f67e0cfd
child 462243 da40eaad661d01bcc0622e103f71a8915820acb2
push id41683
push userbmo:steffen.wilberg@web.de
push dateMon, 16 Jan 2017 21:50:32 +0000
reviewerschutten
bugs1278556
milestone53.0a1
Bug 1278556 - Enable child processes scalars in about:telemetry. r=chutten MozReview-Commit-ID: DWtro2brAw2
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
--- 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("scalars-processes")
+            .addEventListener("change", () => displayPingData(gPingData), false);
+    document.getElementById("keyed-scalars-processes")
+            .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() {
     this.update();
@@ -1642,23 +1646,28 @@ var Scalars = {
   /**
    * Render the scalar data - if present - from the payload in a simple key-value table.
    * @param aPayload A payload object to render the data from.
    */
   render(aPayload) {
     let scalarsSection = document.getElementById("scalars");
     removeAllChildNodes(scalarsSection);
 
-    if (!aPayload.processes || !aPayload.processes.parent) {
+    let processesSelect = document.getElementById("scalars-processes");
+    let selectedProcess = processesSelect.selectedOptions.item(0).getAttribute("value");
+
+    if (!aPayload.processes ||
+        !selectedProcess ||
+        !(selectedProcess in aPayload.processes)) {
       return;
     }
 
-    let scalars = aPayload.processes.parent.scalars;
+    let scalars = aPayload.processes[selectedProcess].scalars;
     const hasData = scalars && Object.keys(scalars).length > 0;
-    setHasData("scalars-section", hasData);
+    setHasData("scalars-section", hasData || processesSelect.options.length);
     if (!hasData) {
       return;
     }
 
     const headingName = bundle.GetStringFromName("namesHeader");
     const headingValue = bundle.GetStringFromName("valuesHeader");
     const table = KeyValueTable.render(scalars, headingName, headingValue);
     scalarsSection.appendChild(table);
@@ -1669,23 +1678,28 @@ var KeyedScalars = {
   /**
    * Render the keyed scalar data - if present - from the payload in a simple key-value table.
    * @param aPayload A payload object to render the data from.
    */
   render(aPayload) {
     let scalarsSection = document.getElementById("keyed-scalars");
     removeAllChildNodes(scalarsSection);
 
-    if (!aPayload.processes || !aPayload.processes.parent) {
+    let processesSelect = document.getElementById("keyed-scalars-processes");
+    let selectedProcess = processesSelect.selectedOptions.item(0).getAttribute("value");
+
+    if (!aPayload.processes ||
+        !selectedProcess ||
+        !(selectedProcess in aPayload.processes)) {
       return;
     }
 
-    let keyedScalars = aPayload.processes.parent.keyedScalars;
+    let keyedScalars = aPayload.processes[selectedProcess].keyedScalars;
     const hasData = keyedScalars && Object.keys(keyedScalars).length > 0;
-    setHasData("keyed-scalars-section", hasData);
+    setHasData("keyed-scalars-section", hasData || processesSelect.options.length);
     if (!hasData) {
       return;
     }
 
     const headingName = bundle.GetStringFromName("namesHeader");
     const headingValue = bundle.GetStringFromName("valuesHeader");
     for (let scalar in keyedScalars) {
       // Add the name of the scalar.
@@ -1960,29 +1974,29 @@ function sortStartupMilestones(aSimpleMe
 
   return result;
 }
 
 function renderProcessList(ping, selectEl) {
   removeAllChildNodes(selectEl);
   let option = document.createElement("option");
   option.appendChild(document.createTextNode("parent"));
-  option.setAttribute("value", "");
+  option.setAttribute("value", "parent");
   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:
+    // 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);
   }
@@ -2054,16 +2068,18 @@ function displayPingData(ping, updatePay
 
   // Update the structured data rendering.
   const keysHeader = bundle.GetStringFromName("keysHeader");
   const valuesHeader = bundle.GetStringFromName("valuesHeader");
 
   // Update the payload list and process lists
   if (updatePayloadList) {
     renderPayloadList(ping);
+    renderProcessList(ping, document.getElementById("scalars-processes"));
+    renderProcessList(ping, document.getElementById("keyed-scalars-processes"));
     renderProcessList(ping, document.getElementById("histograms-processes"));
     renderProcessList(ping, document.getElementById("keyed-histograms-processes"));
   }
 
   // Show general data.
   GeneralData.render(ping);
 
   // Show environment data.
@@ -2140,16 +2156,20 @@ function displayPingData(ping, updatePay
   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");
+  // "parent" histograms/keyedHistograms aren't under "parent". Fix that up.
+  if (hgramsProcess === "parent") {
+    hgramsProcess = "";
+  }
   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 || hgramsSelect.options.length);
@@ -2172,16 +2192,20 @@ function displayPingData(ping, updatePay
   let keyedDiv = document.getElementById("keyed-histograms");
   removeAllChildNodes(keyedDiv);
 
   let keyedHistograms = payload.keyedHistograms;
 
   let keyedHgramsSelect = document.getElementById("keyed-histograms-processes");
   let keyedHgramsOption = keyedHgramsSelect.selectedOptions.item(0);
   let keyedHgramsProcess = keyedHgramsOption.getAttribute("value");
+  // "parent" histograms/keyedHistograms aren't under "parent". Fix that up.
+  if (keyedHgramsProcess === "parent") {
+    keyedHgramsProcess = "";
+  }
   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) {
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -135,25 +135,31 @@
         </div>
       </section>
 
       <section id="scalars-section" class="data-section">
         <input type="checkbox" class="statebox"/>
         <h1 class="section-name">&aboutTelemetry.scalarsSection;</h1>
         <span class="toggle-caption">&aboutTelemetry.toggle;</span>
         <span class="empty-caption">&aboutTelemetry.emptySection;</span>
+        <div class="processes-ui">
+          <select id="scalars-processes" class="process-picker"></select>
+        </div>
         <div id="scalars" class="data">
         </div>
       </section>
 
       <section id="keyed-scalars-section" class="data-section">
         <input type="checkbox" class="statebox"/>
         <h1 class="section-name">&aboutTelemetry.keyedScalarsSection;</h1>
         <span class="toggle-caption">&aboutTelemetry.toggle;</span>
         <span class="empty-caption">&aboutTelemetry.emptySection;</span>
+        <div class="processes-ui">
+          <select id="keyed-scalars-processes" class="process-picker"></select>
+        </div>
         <div id="keyed-scalars" class="data">
         </div>
       </section>
 
       <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>