Bug 1308415 - Update about:telemetry to show keyed scalars. r=gfritzsche, a=gchang
authorAlessio Placitelli <alessio.placitelli@gmail.com>
Fri, 07 Oct 2016 03:35:00 +0200
changeset 340949 72de7d38da9e827e1e3bfa3204f8f0270477c9c9
parent 340948 58cf57f2c147a9a52c8075d5b6bf1a769616c69b
child 340950 d19d0c48a96f79cd7244a106a31df13ef4490a15
push id10261
push useralessio.placitelli@gmail.com
push dateWed, 09 Nov 2016 14:59:11 +0000
treeherdermozilla-aurora@3da399e85ae5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgfritzsche, gchang
bugs1308415
milestone51.0a2
Bug 1308415 - Update about:telemetry to show keyed scalars. r=gfritzsche, a=gchang
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -1571,16 +1571,50 @@ var Scalars = {
 
     const headingName = bundle.GetStringFromName("namesHeader");
     const headingValue = bundle.GetStringFromName("valuesHeader");
     const table = KeyValueTable.render(scalars, headingName, headingValue);
     scalarsSection.appendChild(table);
   }
 };
 
+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: function(aPayload) {
+    let scalarsSection = document.getElementById("keyed-scalars");
+    removeAllChildNodes(scalarsSection);
+
+    if (!aPayload.processes || !aPayload.processes.parent) {
+      return;
+    }
+
+    let keyedScalars = aPayload.processes.parent.keyedScalars;
+    const hasData = keyedScalars && Object.keys(keyedScalars).length > 0;
+    setHasData("keyed-scalars-section", hasData);
+    if (!hasData) {
+      return;
+    }
+
+    const headingName = bundle.GetStringFromName("namesHeader");
+    const headingValue = bundle.GetStringFromName("valuesHeader");
+    for (let scalar in keyedScalars) {
+      // Add the name of the scalar.
+      let scalarNameSection = document.createElement("h2");
+      scalarNameSection.appendChild(document.createTextNode(scalar));
+      scalarsSection.appendChild(scalarNameSection);
+      // Populate the section with the key-value pairs from the scalar.
+      const table = KeyValueTable.render(keyedScalars[scalar], headingName, headingValue);
+      scalarsSection.appendChild(table);
+    }
+  }
+};
+
 /**
  * Helper function for showing either the toggle element or "No data collected" message for a section
  *
  * @param aSectionID ID of the section element that needs to be changed
  * @param aHasData true (default) indicates that toggle should be displayed
  */
 function setHasData(aSectionID, aHasData) {
   let sectionElement = document.getElementById(aSectionID);
@@ -1918,16 +1952,17 @@ function displayPingData(ping, updatePay
 
   if (hasData) {
     infoSection.appendChild(KeyValueTable.render(ping.payload.info,
                                                  keysHeader, valuesHeader));
   }
 
   // Show scalar data.
   Scalars.render(payload);
+  KeyedScalars.render(payload);
 
   // Show histogram data
   let hgramDiv = document.getElementById("histograms");
   removeAllChildNodes(hgramDiv);
 
   let histograms = payload.histograms;
   hasData = Object.keys(histograms).length > 0;
   setHasData("histograms-section", hasData);
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -139,16 +139,25 @@
         <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 id="scalars" class="data">
         </div>
       </section>
 
+      <section id="keyed-scalars-section" class="data-section">
+        <input type="checkbox" class="statebox"/>
+        <h1 class="section-name">Keyed Scalars</h1>
+        <span class="toggle-caption">&aboutTelemetry.toggle;</span>
+        <span class="empty-caption">&aboutTelemetry.emptySection;</span>
+        <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>
         <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>