Bug 1368667 - Generalize Subsection Renderer r?chutten draft
authorflyingrub <flyinggrub@gmail.com>
Thu, 01 Jun 2017 16:37:33 +0200
changeset 588287 2358f00b529b49b93fcd950b722a5de2857d9308
parent 588286 e65919c33936d78107d359c4065cb6bd377cfa41
child 631525 84a775d34caf83183b97fdf25594fde3ceb22331
push id61982
push userbmo:flyinggrub@gmail.com
push dateFri, 02 Jun 2017 13:39:34 +0000
reviewerschutten
bugs1368667
milestone55.0a1
Bug 1368667 - Generalize Subsection Renderer r?chutten Allow the use of the subsection render not just for the environment data. It could help future developer to display subsection for another special ping data. Also it will help with the redesign of the UI. MozReview-Commit-ID: DHoS7Zw7IyC
toolkit/content/aboutTelemetry.js
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -527,83 +527,26 @@ var EnvironmentData = {
     let dataDiv = document.getElementById("environment-data");
     removeAllChildNodes(dataDiv);
     const hasData = !!ping.environment;
     setHasData("environment-data-section", hasData);
     if (!hasData) {
       return;
     }
 
-    let data = sectionalizeObject(ping.environment);
-
-    for (let [section, sectionData] of data) {
-      if (section == "addons") {
-        break;
-      }
-
-      let table = document.createElement("table");
-      this.appendHeading(table);
-
-      for (let [path, value] of sectionData) {
-        let row = document.createElement("tr");
-        this.appendColumn(row, "td", path);
-        this.appendColumn(row, "td", value);
-        table.appendChild(row);
-      }
-
-      let hasData = sectionData.size > 0;
-      this.createSubsection(section, hasData, table, dataDiv);
-    }
+    let ignore = ["addons"];
+    let env = filterObject(ping.environment, ignore);
+    let sections = sectionalizeObject(env);
+    GenericSubsection.render(sections, dataDiv);
 
     // We use specialized rendering here to make the addon and plugin listings
     // more readable.
     this.createAddonSection(dataDiv, ping);
   },
 
-  createSubsection(title, hasSubdata, subSectionData, dataDiv) {
-    let dataSection = document.createElement("section");
-    dataSection.classList.add("data-subsection");
-
-    if (hasSubdata) {
-      dataSection.classList.add("has-subdata");
-    }
-
-    // Create section heading
-    let sectionName = document.createElement("h2");
-    sectionName.setAttribute("class", "section-name");
-    sectionName.appendChild(document.createTextNode(title));
-    sectionName.addEventListener("click", toggleSection);
-
-    // Create caption for toggling the subsection visibility.
-    let toggleCaption = document.createElement("span");
-    toggleCaption.setAttribute("class", "toggle-caption");
-    let toggleText = bundle.GetStringFromName("environmentDataSubsectionToggle");
-    toggleCaption.appendChild(document.createTextNode(" " + toggleText));
-    toggleCaption.addEventListener("click", toggleSection);
-
-    // Create caption for empty subsections.
-    let emptyCaption = document.createElement("span");
-    emptyCaption.setAttribute("class", "empty-caption");
-    let emptyText = bundle.GetStringFromName("environmentDataSubsectionEmpty");
-    emptyCaption.appendChild(document.createTextNode(" " + emptyText));
-
-    // Create data container
-    let data = document.createElement("div");
-    data.setAttribute("class", "subsection-data subdata");
-    data.appendChild(subSectionData);
-
-    // Append elements
-    dataSection.appendChild(sectionName);
-    dataSection.appendChild(toggleCaption);
-    dataSection.appendChild(emptyCaption);
-    dataSection.appendChild(data);
-
-    dataDiv.appendChild(dataSection);
-  },
-
   renderPersona(addonObj, addonSection, sectionTitle) {
     let table = document.createElement("table");
     table.setAttribute("id", sectionTitle);
     this.appendAddonSubsectionTitle(sectionTitle, table);
     this.appendRow(table, "persona", addonObj.persona);
     addonSection.appendChild(table);
   },
 
@@ -640,65 +583,55 @@ var EnvironmentData = {
       }
     }
 
     addonSection.appendChild(table);
   },
 
   renderKeyValueObject(addonObj, addonSection, sectionTitle) {
     let data = explodeObject(addonObj);
-    let table = document.createElement("table");
+    let table = GenericTable.render(data);
     table.setAttribute("class", sectionTitle);
     this.appendAddonSubsectionTitle(sectionTitle, table);
-    this.appendHeading(table);
-
-    for (let [key, value] of data) {
-      this.appendRow(table, key, value);
-    }
-
     addonSection.appendChild(table);
   },
 
   appendAddonID(table, addonID) {
     this.appendRow(table, "id", addonID);
   },
 
-  appendHeading(table) {
-    let headings = document.createElement("tr");
-    this.appendColumn(headings, "th", bundle.GetStringFromName("namesHeader"));
-    this.appendColumn(headings, "th", bundle.GetStringFromName("valuesHeader"));
-    table.appendChild(headings);
-  },
-
   appendHeadingName(table, name) {
     let headings = document.createElement("tr");
     this.appendColumn(headings, "th", name);
     headings.cells[0].colSpan = 2;
     table.appendChild(headings);
   },
 
   appendAddonSubsectionTitle(section, table) {
     let caption = document.createElement("caption");
     caption.setAttribute("class", "addon-caption");
     caption.appendChild(document.createTextNode(section));
     table.appendChild(caption);
   },
 
   createAddonSection(dataDiv, ping) {
     let addonSection = document.createElement("div");
+    addonSection.setAttribute("class", "subsection-data subdata");
     let addons = ping.environment.addons;
     this.renderAddonsObject(addons.activeAddons, addonSection, "activeAddons");
     this.renderActivePlugins(addons.activePlugins, addonSection, "activePlugins");
     this.renderKeyValueObject(addons.theme, addonSection, "theme");
     this.renderKeyValueObject(addons.activeExperiment, addonSection, "activeExperiment");
     this.renderAddonsObject(addons.activeGMPlugins, addonSection, "activeGMPlugins");
     this.renderPersona(addons, addonSection, "persona");
 
     let hasAddonData = Object.keys(ping.environment.addons).length > 0;
-    this.createSubsection("addons", hasAddonData, addonSection, dataDiv);
+    let s = GenericSubsection.renderSubsectionHeader("addons", hasAddonData);
+    s.appendChild(addonSection);
+    dataDiv.appendChild(s);
   },
 
   appendRow(table, id, value) {
     let row = document.createElement("tr");
     this.appendColumn(row, "td", id);
     this.appendColumn(row, "td", value);
     table.appendChild(row);
   },
@@ -1439,16 +1372,74 @@ function RenderObject(aObject) {
   }
   output = "{\"" + keys[0] + "\":\u00A0" + JSON.stringify(aObject[keys[0]]);
   for (let i = 1; i < keys.length; i++) {
     output += ", \"" + keys[i] + "\":\u00A0" + JSON.stringify(aObject[keys[i]]);
   }
   return output + "}";
 }
 
+var GenericSubsection = {
+
+  render(data, dataDiv) {
+    for (let [title, sectionData] of data) {
+      let hasData = sectionData.size > 0;
+      let s = this.renderSubsectionHeader(title, hasData);
+      s.appendChild(this.renderSubsectionData(sectionData));
+      dataDiv.appendChild(s);
+    }
+  },
+
+  renderSubsectionHeader(title, hasData) {
+    let section = document.createElement("section");
+    section.classList.add("data-subsection");
+    if (hasData) {
+      section.classList.add("has-subdata");
+    }
+
+    // Create section heading
+    let sectionName = document.createElement("h2");
+    sectionName.setAttribute("class", "section-name");
+    sectionName.appendChild(document.createTextNode(title));
+    sectionName.addEventListener("click", toggleSection);
+
+    // Create caption for toggling the subsection visibility.
+    let toggleCaption = document.createElement("span");
+    toggleCaption.setAttribute("class", "toggle-caption");
+    let toggleText = bundle.GetStringFromName("environmentDataSubsectionToggle");
+    toggleCaption.appendChild(document.createTextNode(" " + toggleText));
+    toggleCaption.addEventListener("click", toggleSection);
+
+    // Create caption for empty subsections.
+    let emptyCaption = document.createElement("span");
+    emptyCaption.setAttribute("class", "empty-caption");
+    let emptyText = bundle.GetStringFromName("environmentDataSubsectionEmpty");
+    emptyCaption.appendChild(document.createTextNode(" " + emptyText));
+
+    // Append elements
+    section.appendChild(sectionName);
+    section.appendChild(toggleCaption);
+    section.appendChild(emptyCaption);
+
+    return section;
+  },
+
+  renderSubsectionData(data) {
+    // Create data container
+    let dataDiv = document.createElement("div");
+    dataDiv.setAttribute("class", "subsection-data subdata");
+    // Instanciate the data
+    let table = GenericTable.render(data);
+    dataDiv.appendChild(table);
+
+    return dataDiv;
+  },
+
+}
+
 var GenericTable = {
 
   defaultHeadings: [
     bundle.GetStringFromName("keysHeader"),
     bundle.GetStringFromName("valuesHeader")
   ],
 
   /**