--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -41,16 +41,19 @@ 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 = "";
 
+// Data Collection Processes
+var pOptions = ["parent", "content", "extension", "dynamic", "gpu"];
+
 /**
  * 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,21 +1703,54 @@ 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);
+    let sectionid = "scalars-section";
+    this.checkProcessData(sectionid, aPayload);
+  },
+
+  checkProcessData(id, aPayload) {
+    let prOptions = [];
+    var i = 0;
+    for (let f of pOptions) {
+    if (f === "parent") {
+      prOptions[i] = f;
+      i = i + 1;
+    } else if ("processes" in aPayload && f in aPayload.processes &&
+               "scalars" in aPayload.processes[f]) {
+      let scalars = aPayload.processes[f].scalars;
+      if (Object.keys(scalars).length > 0 && scalars) {
+       prOptions[i] = f;
+       i = i + 1;
+      }
+    }
+   }
+   addSubSection(id, aPayload, prOptions, Scalars.scalarSelect);
+  },
+
+  scalarSelect(hprocess, aPayload) {
+>>>>>>> histedit
     let scalarsSection = document.getElementById("scalars");
     removeAllChildNodes(scalarsSection);
 
+<<<<<<< local
     let processesSelect = document.getElementById("processes");
     let selectedProcess = processesSelect.selectedOptions.item(0).getAttribute("value");
+=======
+    let selectedProcess = hprocess;
+    let scalarOptions = pOptions;
+>>>>>>> histedit
 
     if (!aPayload.processes ||
         !selectedProcess ||
         !(selectedProcess in aPayload.processes)) {
       return;
     }
 
     let scalars = aPayload.processes[selectedProcess].scalars || {};
@@ -1736,21 +1772,53 @@ 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);
+    let sectionid = "keyed-scalars-section";
+    this.checkProcessData(sectionid, aPayload);
+  },
+
+  checkProcessData(id, aPayload) {
+    let prOptions = [];
+    var i = 0;
+    for (let f of pOptions) {
+    if (f === "parent") {
+      prOptions[i] = f;
+      i = i + 1;
+    } else if ("processes" in aPayload && f in aPayload.processes &&
+               "keyedScalars" in aPayload.processes[f]) {
+      let keyedScalars = aPayload.processes[f].keyedScalars;
+      if (Object.keys(keyedScalars).length > 0 && keyedScalars) {
+       prOptions[i] = f;
+       i = i + 1;
+      }
+    }
+   }
+   addSubSection(id, aPayload, prOptions, KeyedScalars.keyedScalarSelect);
+  },
+  keyedScalarSelect(hprocess, aPayload) {
+>>>>>>> histedit
     let scalarsSection = document.getElementById("keyed-scalars");
     removeAllChildNodes(scalarsSection);
 
+<<<<<<< local
     let processesSelect = document.getElementById("processes");
     let selectedProcess = processesSelect.selectedOptions.item(0).getAttribute("value");
+=======
+    let selectedProcess = hprocess;
+    let keyedScalarOptions = pOptions;
+>>>>>>> histedit
 
     if (!aPayload.processes ||
         !selectedProcess ||
         !(selectedProcess in aPayload.processes)) {
       return;
     }
 
     let keyedScalars = aPayload.processes[selectedProcess].keyedScalars || {};
@@ -1861,20 +1929,16 @@ function setupPageHeader() {
   let htmlLink = document.querySelectorAll("#home-section > ul > li > a");
   htmlLink.forEach((a, index) => {
     a.href = links[index];
   });
 }
 
 function displayProcessesSelector(selectedSection) {
   let whitelist = [
-    "scalars-section",
-    "keyed-scalars-section",
-    "histograms-section",
-    "keyed-histograms-section",
     "events-section"
   ];
   let processes = document.getElementById("processes");
   processes.hidden = !whitelist.includes(selectedSection);
 }
 
 function refreshSearch() {
   removeSearchSectionTitles();
@@ -1994,16 +2058,50 @@ function show(selected) {
   selected_section.classList.add("active");
 
   adjustHeaderState();
   displayProcessesSelector(selectedValue);
   adjustSearchState();
   changeUrlPath(selectedValue);
 }
 
+/**
+ * Shows the selected sub-section
+ */
+function showSection(sectionid) {
+  if (!sectionid) {
+    return;
+  }
+  let current_selection = document.querySelector(".category-subsection.selected");
+  if (current_selection)
+    current_selection.classList.remove("selected");
+  document.getElementById(sectionid).classList.add("selected");
+}
+
+/**
+ * Adds sub-sections
+ */
+function addSubSection(id, aPayload, processList, callFunc) {
+  let category = document.querySelector("#categories > [value=" + id + "]");
+  category.classList.add("has-subsection");
+  for (let f of processList) {
+    let subCategory = document.createElement("div");
+    subCategory.classList.add("category-subsection");
+    subCategory.setAttribute("value", id + "-" + f);
+    subCategory.setAttribute("id", id + "-" + f);
+    subCategory.addEventListener("click", () => {
+      let sectionId = id + "-" + f;
+      showSection(sectionId);
+      callFunc(f, aPayload);
+    });
+   subCategory.appendChild(document.createTextNode(f));
+   category.appendChild(subCategory);
+  }
+}
+
 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,23 +2292,56 @@ var LateWritesSingleton = {
     let memoryMap = lateWrites.memoryMap;
     StackRenderer.renderStacks("late-writes", stacks, memoryMap,
                                LateWritesSingleton.renderHeader);
   },
 };
 
 var HistogramSection = {
   render(aPayload) {
+<<<<<<< local
+=======
+    this.histogramSelect("parent", aPayload);
+    let sectionid = "histograms-section";
+    this.checkProcessData(sectionid, aPayload);
+  },
+
+  checkProcessData(id, aPayload) {
+    let prOptions = [];
+    var i = 0;
+    for (let f of pOptions) {
+    if (f === "parent") {
+      prOptions[i] = f;
+      i = i + 1;
+    } else if ("processes" in aPayload && f in aPayload.processes &&
+               "histograms" in aPayload.processes[f]) {
+      let histograms = aPayload.processes[f].histograms;
+      if (Object.keys(histograms).length > 0 && histograms) {
+       prOptions[i] = f;
+       i = i + 1;
+      }
+    }
+   }
+   addSubSection(id, aPayload, prOptions, HistogramSection.histogramSelect);
+  },
+
+  histogramSelect(hprocess, aPayload) {
+>>>>>>> histedit
     let hgramDiv = document.getElementById("histograms");
     removeAllChildNodes(hgramDiv);
 
     let histograms = {};
+<<<<<<< local
     let hgramsSelect = document.getElementById("processes");
     let hgramsOption = hgramsSelect.selectedOptions.item(0);
     let hgramsProcess = hgramsOption.getAttribute("value");
+=======
+    let hgramsProcess = hprocess;
+    let hgramsOptions = pOptions;
+>>>>>>> histedit
 
     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;
     }
 
@@ -2229,23 +2360,57 @@ var HistogramSection = {
         Histogram.render(hgramDiv, name, hgram, {unpacked: true});
       }
     }
   },
 };
 
 var KeyedHistogramSection = {
   render(aPayload) {
+<<<<<<< local
+=======
+    this.keyedHistogramSelect("parent", aPayload);
+    let sectionid = "keyed-histograms-section";
+    this.checkProcessData(sectionid, aPayload);
+  },
+
+  checkProcessData(id, aPayload) {
+    let prOptions = [];
+    var i = 0;
+    for (let f of pOptions) {
+    if (f === "parent") {
+      prOptions[i] = f;
+      i = i + 1;
+    } else if ("processes" in aPayload && f in aPayload.processes &&
+               "keyedHistograms" in aPayload.processes[f]) {
+      let keyedHistograms = aPayload.processes[f].keyedHistograms;
+      if (Object.keys(keyedHistograms).length > 0 && keyedHistograms) {
+       prOptions[i] = f;
+       i = i + 1;
+      }
+    }
+   }
+   addSubSection(id, aPayload, prOptions, KeyedHistogramSection.keyedHistogramSelect);
+  },
+
+  keyedHistogramSelect(hprocess, aPayload) {
+>>>>>>> histedit
     let keyedDiv = document.getElementById("keyed-histograms");
     removeAllChildNodes(keyedDiv);
 
     let keyedHistograms = {};
+<<<<<<< local
     let keyedHgramsSelect = document.getElementById("processes");
     let keyedHgramsOption = keyedHgramsSelect.selectedOptions.item(0);
     let keyedHgramsProcess = keyedHgramsOption.getAttribute("value");
+=======
+    let keyedHgramsProcess = hprocess;
+    let keyedHgramsOptions = pOptions;
+
+>>>>>>> histedit
     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;
     }
 
     let hasData = Array.from(keyedHgramsSelect.options).some((option) => {