Bug 1515009 Deduplicate code for displaying multi-store data in about:telemetry r=janerik

Differential Revision: https://phabricator.services.mozilla.com/D20083

--HG--
extra : moz-landing-system : lando

toolkit/content/aboutTelemetry.js

@@ -1678,6 +1678,11 @@ var Scalars = {
       return;
     }
 
+    const headings = [
+      "namesHeader",
+      "valuesHeader",
+    ].map(h => bundle.GetStringFromName(h));
+
     let payload = aPayload.stores;
     if (payload) { // Check for stores in the current ping data first
       let hasData = false;
@@ -1693,11 +1698,6 @@ var Scalars = {
           return sclrs && Object.keys(sclrs).length > 0;
         });
         if (Object.keys(scalars).length > 0) {
-          const headings = [
-            "namesHeader",
-            "valuesHeader",
-          ].map(h => bundle.GetStringFromName(h));
-
           let s = GenericSubsection.renderSubsectionHeader(store, true, "scalars-section");
           let table = GenericTable.render(explodeObject(scalars), headings);
           let caption = document.createElement("caption");
@@ -1723,10 +1723,6 @@ var Scalars = {
 
       setHasData("scalars-section", hasData);
       if (Object.keys(scalars).length > 0) {
-        const headings = [
-          "namesHeader",
-          "valuesHeader",
-        ].map(h => bundle.GetStringFromName(h));
         const table = GenericTable.render(explodeObject(scalars), headings);
         scalarsSection.appendChild(table);
       }
@@ -1734,6 +1730,21 @@ var Scalars = {
   },
 };
 
+function createScalarContainer(scalarId, scalarData, headings) {
+  // Add the name of the scalar.
+  let container = document.createElement("div");
+  container.classList.add("keyed-scalar");
+  container.id = scalarId;
+  let scalarNameSection = document.createElement("p");
+  scalarNameSection.classList.add("keyed-title");
+  scalarNameSection.appendChild(document.createTextNode(scalarId));
+  container.appendChild(scalarNameSection);
+  // Populate the section with the key-value pairs from the scalar.
+  const table = GenericTable.render(explodeObject(scalarData), headings);
+  container.appendChild(table);
+  return container;
+}
+
 var KeyedScalars = {
   /**
    * Render the keyed scalar data - if present - from the payload in a simple key-value table.
@@ -1750,6 +1761,11 @@ var KeyedScalars = {
       return;
     }
 
+    const headings = [
+      "namesHeader",
+      "valuesHeader",
+    ].map(h => bundle.GetStringFromName(h));
+
     let payload = aPayload.stores;
     if (payload) { // Check for stores in the current ping data first
       let hasData = false;
@@ -1773,22 +1789,9 @@ var KeyedScalars = {
         heading.textContent = store;
         s.appendChild(heading);
 
-        const headings = [
-          "namesHeader",
-          "valuesHeader",
-        ].map(h => bundle.GetStringFromName(h));
         for (let scalar in keyedScalars) {
           // Add the name of the scalar.
-          let container = document.createElement("div");
-          container.classList.add("keyed-scalar");
-          container.id = scalar;
-          let scalarNameSection = document.createElement("p");
-          scalarNameSection.classList.add("keyed-title");
-          scalarNameSection.appendChild(document.createTextNode(scalar));
-          container.appendChild(scalarNameSection);
-          // Populate the section with the key-value pairs from the scalar.
-          const table = GenericTable.render(explodeObject(keyedScalars[scalar]), headings);
-          container.appendChild(table);
+          const container = createScalarContainer(scalar, keyedScalars[scalar], headings);
           s.appendChild(container);
         }
 
@@ -1813,22 +1816,8 @@ var KeyedScalars = {
         return;
       }
 
-      const headings = [
-        "namesHeader",
-        "valuesHeader",
-      ].map(h => bundle.GetStringFromName(h));
       for (let scalar in keyedScalars) {
-        // Add the name of the scalar.
-        let container = document.createElement("div");
-        container.classList.add("keyed-scalar");
-        container.id = scalar;
-        let scalarNameSection = document.createElement("p");
-        scalarNameSection.classList.add("keyed-title");
-        scalarNameSection.appendChild(document.createTextNode(scalar));
-        container.appendChild(scalarNameSection);
-        // Populate the section with the key-value pairs from the scalar.
-        const table = GenericTable.render(explodeObject(keyedScalars[scalar]), headings);
-        container.appendChild(table);
+        const container = createScalarContainer(scalar, keyedScalars[scalar], headings);
         scalarsSection.appendChild(container);
       }
     }