Bug 1395091 - about:telemetry global search should have headings before section results. r=gfritzsche draft
authorJeremy Lempereur <jeremy.lempereur@gmail.com>
Thu, 04 Jan 2018 00:26:23 +0100
changeset 715467 d7d644761b0982a4f16317720ef8ac7262d1e04d
parent 715271 ac93fdadf1022211eec62258ad22b42cb37a6d14
child 744799 7db6b9f7837e61b25aa6cda6201908044b6f4767
push id94166
push userbmo:jeremy.lempereur@gmail.com
push dateWed, 03 Jan 2018 23:26:44 +0000
reviewersgfritzsche
bugs1395091
milestone59.0a1
Bug 1395091 - about:telemetry global search should have headings before section results. r=gfritzsche Put a table heading to each search section in the about:telemetry homepage. MozReview-Commit-ID: 7DaFjy6lbcq
toolkit/content/aboutTelemetry.js
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -1454,32 +1454,39 @@ var Search = {
     adjustHeaderState();
     Array.from(document.querySelectorAll("section")).forEach((section) => {
       section.classList.toggle("active", section.id == "home-section");
     });
   },
 
   homeSearch(text) {
     changeUrlSearch(text);
+    removeSearchSectionTitles();
     if (text === "") {
       this.resetHome();
       return;
     }
     document.getElementById("main").classList.add("search");
     let title = bundle.formatStringFromName("resultsForSearch", [text], 1);
     adjustHeaderState(title);
     let noSearchResults = true;
     Array.from(document.querySelectorAll("section")).forEach((section) => {
       if (section.id == "home-section" || section.id == "raw-payload-section") {
         section.classList.remove("active");
         return;
       }
       section.classList.add("active");
       let sectionHidden = this.search(text, section);
-      if (noSearchResults && !sectionHidden) {
+      if (!sectionHidden) {
+        let sectionTitle = document.querySelector(`.category[value="${section.id}"] .category-name`).textContent;
+        let sectionDataDiv = document.querySelector(`#${section.id}.has-data.active .data`);
+        let titleDiv = document.createElement("h1");
+        titleDiv.classList.add("data", "search-section-title");
+        titleDiv.textContent = sectionTitle;
+        section.insertBefore(titleDiv, sectionDataDiv);
         noSearchResults = false;
       }
     });
     this.updateNoResults(text, noSearchResults);
   }
 };
 
 /*
@@ -1868,32 +1875,40 @@ function displayProcessesSelector(select
     "keyed-histograms-section",
     "events-section"
   ];
   let processes = document.getElementById("processes");
   processes.hidden = !whitelist.includes(selectedSection);
 }
 
 function refreshSearch() {
+  removeSearchSectionTitles();
   let selectedSection = document.querySelector(".category.selected").getAttribute("value");
   let search = document.getElementById("search");
   if (!Search.blacklist.includes(selectedSection)) {
     Search.search(search.value);
   }
 }
 
 function adjustSearchState() {
+  removeSearchSectionTitles();
   let selectedSection = document.querySelector(".category.selected").getAttribute("value");
   let search = document.getElementById("search");
   search.value = "";
   search.hidden = Search.blacklist.includes(selectedSection);
   document.getElementById("no-search-results").classList.add("hidden");
   Search.search(""); // reinitialize search state.
 }
 
+function removeSearchSectionTitles() {
+    for (let sectionTitleDiv of Array.from(document.getElementsByClassName("search-section-title"))) {
+        sectionTitleDiv.remove();
+    }
+}
+
 function adjustSection() {
   let selectedCategory = document.querySelector(".category.selected");
   if (!selectedCategory.classList.contains("has-data")) {
     PingPicker._showStructuredPingData();
   }
 }
 
 function adjustHeaderState(title = null) {