Bug 1383837 - Save the state after a reload in about:telemetry r=chutten

Use window.location.hash to save the current section displayed
Filter the elements displayed after reload or a section change
Also save the state when switching between process

MozReview-Commit-ID: GYQEtS0As0k

--HG--
extra : rebase_source : f3bce2bb41dc92da2ef3cfef42d68beac12650a1

toolkit/content/aboutTelemetry.js

@@ -1853,13 +1853,31 @@ function displayProcessesSelector(selectedSection) {
   processes.hidden = !whitelist.includes(selectedSection);
 }
 
-function displaySearch(selectedSection) {
+function adjustSearchState() {
+  let selectedSection = document.querySelector("section.active").id;
   let blacklist = [
     "home",
   ];
   // TODO: Implement global search for the Home section
   let search = document.getElementById("search");
   search.hidden = blacklist.includes(selectedSection);
+  // Filter element on section change.
+  if (!blacklist.includes(selectedSection)) {
+    Search.search(search.value);
+  }
+}
+
+/**
+ * Change the url according to the current section displayed
+ * e.g about:telemetry#general-data
+ */
+function changeUrlPath(selectedSection, subSection) {
+  if (subSection) {
+    let hash = window.location.hash.split("_")[0] + "_" + selectedSection;
+    window.location.hash = hash;
+  } else {
+    window.location.hash = selectedSection.replace("-section", "-tab");
+  }
 }
 
 /**
@@ -1889,7 +1907,8 @@ function show(selected) {
   let placeholder = bundle.formatStringFromName("filterPlaceholder", [ title ], 1);
   search.setAttribute("placeholder", placeholder);
   displayProcessesSelector(selectedValue);
-  displaySearch(selectedValue);
+  adjustSearchState();
+  changeUrlPath(selectedValue);
 }
 
 function showSubSection(selected) {
@@ -1905,8 +1924,10 @@ function showSubSection(selected) {
   section.hidden = false;
 
   let title = selected.parentElement.querySelector(".category-name").textContent;
-  document.getElementById("sectionTitle").textContent = title + " - " + selected.textContent;
+  let subsection = selected.textContent;
+  document.getElementById("sectionTitle").textContent = title + " - " + subsection;
   document.getSelection().empty(); // prevent subsection text selection
+  changeUrlPath(subsection, true);
 }
 
 /**
@@ -2001,6 +2022,24 @@ function setupListeners() {
   });
 }
 
+// Restore sections states
+function urlStateRestore() {
+  if (window.location.hash) {
+    let section = window.location.hash.slice(1).replace("-tab", "-section");
+    let subsection = section.split("_")[1];
+    section = section.split("_")[0];
+    let category = document.querySelector(".category[value=" + section + "]");
+    if (category) {
+      show(category);
+      if (subsection) {
+        let selector = ".category-subsection[value=" + section + "-" + subsection + "]";
+        let subcategory = document.querySelector(selector);
+        showSubSection(subcategory);
+      }
+    }
+  }
+}
+
 function onLoad() {
   window.removeEventListener("load", onLoad);
 
@@ -2013,11 +2052,11 @@ function onLoad() {
   // Render settings.
   Settings.render();
 
-  // Restore sections states
-  // TODO
-
   // Update ping data when async Telemetry init is finished.
-  Telemetry.asyncFetchTelemetryData(() => PingPicker.update());
+  Telemetry.asyncFetchTelemetryData(async () => {
+    await PingPicker.update();
+    urlStateRestore();
+  });
 }
 
 var LateWritesSingleton = {
@@ -2269,6 +2308,7 @@ function displayPingData(ping, updatePayloadList = false) {
     console.log(err);
     PingPicker._showRawPingData();
   }
+  adjustSearchState();
 }
 
 function displayRichPingData(ping, updatePayloadList) {

toolkit/content/aboutTelemetry.xhtml

@@ -33,7 +33,7 @@
           <span id="newer-ping" hidden="true">&gt;&gt;</span>
         </div>
       </div>
-      <div id="category-home" class="category has-data selected" value="home">
+      <div id="category-home" class="category has-data selected" value="home-section">
         <span class="category-name">Home</span>
       </div>
       <div class="category" value="general-data-section">
@@ -137,7 +137,7 @@
           <select id="processes" hidden="true"></select>
       </div>
 
-      <div id="home" class="tab active">
+      <div id="home-section" class="tab active">
         <h3 id="page-subtitle"></h3>
         <p id="home-explanation"></p>
         <p id="ping-explanation"></p>