Bug 1437446 : Make probe process choice more visible in about:telemetry , r?chutten draft
authorakriti <akriti.v10@gmail.com>
Sat, 23 Jun 2018 15:53:48 +0530
changeset 809845 fb71429463615a66cebda2a6fe1a5a2cb6089236
parent 782064 ceac91dc08bef5d099c10dda632fc3651b23c897
push id113829
push userbmo:akriti.v10@gmail.com
push dateSat, 23 Jun 2018 10:33:51 +0000
reviewerschutten
bugs1437446
milestone61.0a1
Bug 1437446 : Make probe process choice more visible in about:telemetry , r?chutten MozReview-Commit-ID : 7DLhmRPCn2k MozReview-Commit-ID: F3yfYngW4pi
toolkit/content/aboutTelemetry.js
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -41,16 +41,22 @@ const isWindows = (Services.appinfo.OS =
 const EOL = isWindows ? "\r\n" : "\n";
 
 // This is the ping object currently displayed in the page.
 var gPingData = null;
 
 // Cached value of document's RTL mode
 var documentRTLMode = "";
 
+<<<<<<< local
+=======
+// Data Collection Processes
+var gProcessTypes = ["parent", "content", "extension", "dynamic", "gpu"];
+
+>>>>>>> histedit
 /**
  * Helper function for determining whether the document direction is RTL.
  * Caches result of check on first invocation.
  */
 function isRTL() {
   if (!documentRTLMode)
     documentRTLMode = window.getComputedStyle(document.body).direction;
   return (documentRTLMode == "rtl");
@@ -1700,31 +1706,63 @@ 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(aPayload) {
+<<<<<<< local
+=======
+    this.scalarSelect("parent", aPayload);
+    this.addSubsectionsForProcessData("scalars-section", aPayload);
+  },
+
+  addSubsectionsForProcessData(aId, aPayload) {
+    let processNames = [];
+    for (let processType of gProcessTypes) {
+      if (processType === "parent" && aPayload.scalars) {
+         processNames.push(processType);
+      } else if ("processes" in aPayload && processType in aPayload.processes &&
+               "scalars" in aPayload.processes[processType]) {
+           let scalars = aPayload.processes[processType].scalars;
+           if (Object.keys(scalars).length > 0 && scalars) {
+              processNames.push(processType);
+           }
+        }
+    }
+
+   addSubSection(aId, aPayload, processNames, Scalars.scalarSelect);
+
+  },
+
+  scalarSelect(aProcess, aPayload) {
+>>>>>>> histedit
     let scalarsSection = document.getElementById("scalars");
     removeAllChildNodes(scalarsSection);
 
     let processesSelect = document.getElementById("processes");
     let selectedProcess = processesSelect.selectedOptions.item(0).getAttribute("value");
 
     if (!aPayload.processes ||
         !selectedProcess ||
         !(selectedProcess in aPayload.processes)) {
       return;
     }
 
+<<<<<<< local
     let scalars = aPayload.processes[selectedProcess].scalars || {};
     let hasData = Array.from(processesSelect.options).some((option) => {
       let value = option.getAttribute("value");
+=======
+    let scalars = aPayload.processes[aProcess].scalars || {};
+    let hasData = gProcessTypes.some((option) => {
+      let value = aProcess;
+>>>>>>> histedit
       let sclrs = aPayload.processes[value].scalars;
       return sclrs && Object.keys(sclrs).length > 0;
     });
     setHasData("scalars-section", hasData);
     if (Object.keys(scalars).length > 0) {
       const headings = [
         "namesHeader",
         "valuesHeader",
@@ -1736,31 +1774,63 @@ var Scalars = {
 };
 
 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) {
+<<<<<<< local
+=======
+    this.keyedScalarSelect("parent", aPayload);
+    this.addSubsectionsForProcessData("keyed-scalars-section", aPayload);
+  },
+
+  addSubsectionsForProcessData(aId, aPayload) {
+    let processNames = [];
+    for (let processType of gProcessTypes) {
+      if (processType === "parent" && aPayload.keyedScalars) {
+         processNames.push(processType);
+      } else if ("processes" in aPayload && processType in aPayload.processes &&
+               "keyedScalars" in aPayload.processes[processType]) {
+           let keyedScalars = aPayload.processes[processType].keyedScalars;
+           if (Object.keys(keyedScalars).length > 0 && keyedScalars) {
+              processNames.push(processType);
+           }
+        }
+    }
+
+   addSubSection(aId, aPayload, processNames, KeyedScalars.keyedScalarSelect);
+
+  },
+
+  keyedScalarSelect(aProcess, aPayload) {
+>>>>>>> histedit
     let scalarsSection = document.getElementById("keyed-scalars");
     removeAllChildNodes(scalarsSection);
 
     let processesSelect = document.getElementById("processes");
     let selectedProcess = processesSelect.selectedOptions.item(0).getAttribute("value");
 
     if (!aPayload.processes ||
         !selectedProcess ||
         !(selectedProcess in aPayload.processes)) {
       return;
     }
 
+<<<<<<< local
     let keyedScalars = aPayload.processes[selectedProcess].keyedScalars || {};
     let hasData = Array.from(processesSelect.options).some((option) => {
       let value = option.getAttribute("value");
+=======
+    let keyedScalars = aPayload.processes[aProcess].keyedScalars || {};
+    let hasData = gProcessTypes.some((option) => {
+      let value = aProcess;
+>>>>>>> histedit
       let keyedS = aPayload.processes[value].keyedScalars;
       return keyedS && Object.keys(keyedS).length > 0;
     });
     setHasData("keyed-scalars-section", hasData);
     if (!Object.keys(keyedScalars).length > 0) {
       return;
     }
 
@@ -1786,31 +1856,63 @@ var KeyedScalars = {
 };
 
 var Events = {
   /**
    * Render the event data - if present - from the payload in a simple table.
    * @param aPayload A payload object to render the data from.
    */
   render(aPayload) {
+<<<<<<< local
+=======
+    this.eventsSelect("parent", aPayload);
+    this.addSubsectionsForProcessData("events-section", aPayload);
+  },
+
+  addSubsectionsForProcessData(aId, aPayload) {
+    let processNames = [];
+    for (let processType of gProcessTypes) {
+      if (processType === "parent" && aPayload.events) {
+         processNames.push(processType);
+      } else if ("processes" in aPayload && processType in aPayload.processes &&
+               "events" in aPayload.processes[processType]) {
+           let events = aPayload.processes[processType].events;
+           if (Object.keys(events).length > 0 && events) {
+              processNames.push(processType);
+           }
+        }
+    }
+
+   addSubSection(aId, aPayload, processNames, Events.eventsSelect);
+
+  },
+
+  eventsSelect(aProcess, aPayload) {
+>>>>>>> histedit
     let eventsSection = document.getElementById("events");
     removeAllChildNodes(eventsSection);
 
     let processesSelect = document.getElementById("processes");
     let selectedProcess = processesSelect.selectedOptions.item(0).getAttribute("value");
 
     if (!aPayload.processes ||
         !selectedProcess ||
         !(selectedProcess in aPayload.processes)) {
       return;
     }
 
+<<<<<<< local
     let events = aPayload.processes[selectedProcess].events || {};
     let hasData = Array.from(processesSelect.options).some((option) => {
       let value = option.getAttribute("value");
+=======
+    let events = aPayload.processes[aProcess].events || {};
+    let hasData = gProcessTypes.some((option) => {
+      let value = aProcess;
+>>>>>>> histedit
       let evts = aPayload.processes[value].events;
       return evts && Object.keys(evts).length > 0;
     });
     setHasData("events-section", hasData);
     if (Object.keys(events).length > 0) {
       const headings = [
         "timestampHeader",
         "categoryHeader",
@@ -1994,16 +2096,55 @@ function show(selected) {
   selected_section.classList.add("active");
 
   adjustHeaderState();
   displayProcessesSelector(selectedValue);
   adjustSearchState();
   changeUrlPath(selectedValue);
 }
 
+<<<<<<< local
+=======
+/**
+ * This function only highlights the selected sub-section by attaching the "selected" class
+ */
+function showSection(aSectionId) {
+  if (!aSectionId) {
+    return;
+  }
+  let current_selection = document.querySelector(".category-subsection.selected");
+  if (current_selection) {
+    current_selection.classList.remove("selected");
+  }
+
+  document.getElementById(aSectionId).classList.add("selected");
+}
+
+/**
+ * Adds sub-sections
+ */
+function addSubSection(aId, aPayload, aProcessNames, aCallFunc) {
+  let category = document.querySelector("#categories > [value=" + aId + "]");
+  category.classList.add("has-subsection");
+  for (let f of aProcessNames) {
+    let subCategory = document.createElement("div");
+    subCategory.classList.add("category-subsection");
+    subCategory.setAttribute("value", aId + "-" + f);
+    subCategory.setAttribute("id", aId + "-" + f);
+    subCategory.addEventListener("click", () => {
+      let sectionId = aId + "-" + f;
+      showSection(sectionId);
+      aCallFunc(f, aPayload);
+    });
+   subCategory.appendChild(document.createTextNode(f));
+   category.appendChild(subCategory);
+  }
+}
+
+>>>>>>> histedit
 function showSubSection(selected) {
   if (!selected) {
     return;
   }
   let current_selection = document.querySelector(".category-subsection.selected");
   if (current_selection)
     current_selection.classList.remove("selected");
   selected.classList.add("selected");
@@ -2194,33 +2335,64 @@ var LateWritesSingleton = {
     let memoryMap = lateWrites.memoryMap;
     StackRenderer.renderStacks("late-writes", stacks, memoryMap,
                                LateWritesSingleton.renderHeader);
   },
 };
 
 var HistogramSection = {
   render(aPayload) {
+<<<<<<< local
+=======
+    this.histogramSelect("parent", aPayload);
+    this.addSubsectionsForProcessData("histograms-section", aPayload);
+  },
+
+  addSubsectionsForProcessData(aId, aPayload) {
+    let processNames = [];
+    for (let processType of gProcessTypes) {
+      if (processType === "parent" && aPayload.histograms) {
+         processNames.push(processType);
+      } else if ("processes" in aPayload && processType in aPayload.processes &&
+               "histograms" in aPayload.processes[processType]) {
+           let histograms = aPayload.processes[processType].histograms;
+           if (Object.keys(histograms).length > 0 && histograms) {
+              processNames.push(processType);
+           }
+        }
+    }
+
+   addSubSection(aId, aPayload, processNames, HistogramSection.histogramSelect);
+
+  },
+
+  histogramSelect(aProcess, aPayload) {
+>>>>>>> histedit
     let hgramDiv = document.getElementById("histograms");
     removeAllChildNodes(hgramDiv);
 
     let histograms = {};
     let hgramsSelect = document.getElementById("processes");
     let hgramsOption = hgramsSelect.selectedOptions.item(0);
     let hgramsProcess = hgramsOption.getAttribute("value");
 
     if (hgramsProcess === "parent") {
       histograms = aPayload.histograms;
     } else if ("processes" in aPayload && hgramsProcess in aPayload.processes &&
                "histograms" in aPayload.processes[hgramsProcess]) {
       histograms = aPayload.processes[hgramsProcess].histograms;
     }
 
+<<<<<<< local
     let hasData = Array.from(hgramsSelect.options).some((option) => {
       let value = option.getAttribute("value");
+=======
+    let hasData = gProcessTypes.some((option) => {
+      let value = aProcess;
+>>>>>>> histedit
       if (value == "parent") {
         return Object.keys(aPayload.histograms).length > 0;
       }
       let histos = aPayload.processes[value].histograms;
       return histos && Object.keys(histos).length > 0;
     });
     setHasData("histograms-section", hasData);
 
@@ -2229,32 +2401,63 @@ var HistogramSection = {
         Histogram.render(hgramDiv, name, hgram, {unpacked: true});
       }
     }
   },
 };
 
 var KeyedHistogramSection = {
   render(aPayload) {
+<<<<<<< local
+=======
+    this.keyedHistogramSelect("parent", aPayload);
+    this.addSubsectionsForProcessData("keyed-histograms-section", aPayload);
+  },
+
+  addSubsectionsForProcessData(aId, aPayload) {
+    let processNames = [];
+    for (let processType of gProcessTypes) {
+      if (processType === "parent" && aPayload.keyedHistograms) {
+         processNames.push(processType);
+      } else if ("processes" in aPayload && processType in aPayload.processes &&
+               "keyedHistograms" in aPayload.processes[processType]) {
+           let keyedHistograms = aPayload.processes[processType].keyedHistograms;
+           if (Object.keys(keyedHistograms).length > 0 && keyedHistograms) {
+              processNames.push(processType);
+           }
+        }
+    }
+
+   addSubSection(aId, aPayload, processNames, KeyedHistogramSection.keyedHistogramSelect);
+
+  },
+
+  keyedHistogramSelect(aProcess, aPayload) {
+>>>>>>> histedit
     let keyedDiv = document.getElementById("keyed-histograms");
     removeAllChildNodes(keyedDiv);
 
     let keyedHistograms = {};
     let keyedHgramsSelect = document.getElementById("processes");
     let keyedHgramsOption = keyedHgramsSelect.selectedOptions.item(0);
     let keyedHgramsProcess = keyedHgramsOption.getAttribute("value");
     if (keyedHgramsProcess === "parent") {
       keyedHistograms = aPayload.keyedHistograms;
     } else if ("processes" in aPayload && keyedHgramsProcess in aPayload.processes &&
                "keyedHistograms" in aPayload.processes[keyedHgramsProcess]) {
       keyedHistograms = aPayload.processes[keyedHgramsProcess].keyedHistograms;
     }
 
+<<<<<<< local
     let hasData = Array.from(keyedHgramsSelect.options).some((option) => {
       let value = option.getAttribute("value");
+=======
+    let hasData = gProcessTypes.some((option) => {
+      let value = aProcess;
+>>>>>>> histedit
       if (value == "parent") {
         return Object.keys(aPayload.keyedHistograms).length > 0;
       }
       let keyedHistos = aPayload.processes[value].keyedHistograms;
       return keyedHistos && Object.keys(keyedHistos).length > 0;
     });
     setHasData("keyed-histograms-section", hasData);
     if (Object.keys(keyedHistograms).length > 0) {
@@ -2338,43 +2541,16 @@ var SimpleMeasurements = {
     for (let key of sortedKeys) {
       result[key] = aSimpleMeasurements[key];
     }
 
     return result;
   },
 };
 
-function renderProcessList(ping, selectEl) {
-  removeAllChildNodes(selectEl);
-  let option = document.createElement("option");
-  option.appendChild(document.createTextNode("parent"));
-  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
-    if (process === "parent") {
-      continue;
-    }
-    option = document.createElement("option");
-    option.appendChild(document.createTextNode(process));
-    option.setAttribute("value", process);
-    selectEl.appendChild(option);
-  }
-}
-
 function togglePingSections(isMainPing) {
   // We always show the sections that are "common" to all pings.
   let commonSections = new Set(["heading",
                                 "home-section",
                                 "general-data-section",
                                 "environment-data-section",
                                 "raw-json-viewer"]);