Bug 1276198 - Update about:telemetry to show scalar measurements. r=dexter

toolkit/content/aboutTelemetry.js

@@ -1550,6 +1550,29 @@ var AddonDetails = {
   }
 };
 
+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: function(aPayload) {
+    let scalarsSection = document.getElementById("scalars");
+    removeAllChildNodes(scalarsSection);
+
+    let scalars = aPayload.scalars;
+    const hasData = scalars && Object.keys(scalars).length > 0;
+    setHasData("scalars-section", hasData);
+    if (!hasData) {
+      return;
+    }
+
+    const headingName = bundle.GetStringFromName("namesHeader");
+    const headingValue = bundle.GetStringFromName("valuesHeader");
+    const table = KeyValueTable.render(scalars, headingName, headingValue);
+    scalarsSection.appendChild(table);
+  }
+};
+
 /**
  * Helper function for showing either the toggle element or "No data collected" message for a section
  *
@@ -1895,6 +1918,9 @@ function displayPingData(ping, updatePayloadList = false) {
                                                  keysHeader, valuesHeader));
   }
 
+  // Show scalar data.
+  Scalars.render(payload);
+
   // Show histogram data
   let hgramDiv = document.getElementById("histograms");
   removeAllChildNodes(hgramDiv);

toolkit/content/aboutTelemetry.xhtml

@@ -178,6 +178,15 @@
         </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 id="scalars" class="data">
+        </div>
+      </section>
+
       <section id="histograms-section" class="data-section">
         <input type="checkbox" class="statebox"/>
         <h1 class="section-name">&aboutTelemetry.histogramsSection;</h1>

toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd

@@ -100,6 +100,10 @@ Ping
   Thread Hangs
 ">
 
+<!ENTITY aboutTelemetry.scalarsSection "
+  Scalars
+">
+
 <!ENTITY aboutTelemetry.histogramsSection "
   Histograms
 ">

toolkit/locales/en-US/chrome/global/aboutTelemetry.properties

@@ -64,6 +64,8 @@ histogramCopy = Copy
 
 keysHeader = Property
 
+namesHeader = Name
+
 valuesHeader = Value
 
 addonTableID = Add-on ID