Backed out changeset cde5fccb8538 (bug 1370513)

toolkit/content/aboutTelemetry.css

@@ -30,12 +30,8 @@ body {
   left: 0;
 }
 
-#category-raw.selected {
-   background-color: var(--in-content-category-background-active);
-}
-
 .heading {
-  padding-inline-start: 15px;
+  padding-inline-start: 21px;
   padding-inline-end: 21px;
   color: var(--in-content-category-text);
 }
@@ -47,45 +43,7 @@ body {
 .category {
   cursor: pointer;
   display: flex;
-  flex-direction: column;
-  min-height: 42px;
-}
-
-.category-name {
-  padding: 9px 0px;
-  vertical-align: middle;
-}
-
-.category.has-subsection {
-  padding-inline-start: 0px;
-}
-
-.category.has-subsection > span {
-  padding-inline-start: 11px;
-}
-
-.category.has-subsection.selected {
-  border-inline-start: none;
-}
-
-.category-subsection {
-  padding: 9px 0px;
-  padding-inline-start: 30px;
-  display: none;
-  -moz-user-select: none;
-}
-
-.category-subsection::first-letter {
-  text-transform: uppercase;
-}
-
-.category.selected > .category-subsection {
-  display: block;
-}
-
-.category-subsection.selected {
-  padding-inline-start: 26px;
-  border-inline-start: solid 4px var(--in-content-border-highlight);
+  align-items: center;
 }
 
 .category-name {
@@ -156,6 +114,27 @@ body {
   cursor: pointer;
 }
 
+
+.toggle-caption {
+  font-style: italic;
+  cursor: pointer;
+}
+
+.data-section:not(.has-data) .toggle-caption,
+.data-subsection:not(.has-subdata) .toggle-caption {
+  display: none;
+}
+
+
+.empty-caption {
+  font-style: italic;
+}
+
+.has-data .empty-caption,
+.has-subdata .empty-caption {
+  display: none; /* invisible when has-data */
+}
+
 .data,
 .subdata {
   margin: 15px;
@@ -308,7 +287,8 @@ body[dir="rtl"] .copy-node {
   padding: 5px 10px;
 }
 
-caption {
+/* addon subsection style */
+.addon-caption {
   font-size: larger;
   margin: 5px 0;
 }

toolkit/content/aboutTelemetry.js

@@ -329,7 +329,7 @@ var PingPicker = {
 
     let explanation = bundle.formatStringFromName("pingExplanation", [pingName], 1);
     pingExplanation.innerHTML = explanation;
-    GenericSubsection.deleteAllSubSections();
+    this.attachObservers();
   },
 
   async update() {
@@ -354,6 +354,7 @@ var PingPicker = {
         document.getElementById("archived-ping-picker").hidden = false;
       }
     }
+    this.render();
   },
 
   _updateCurrentPingData() {
@@ -1381,14 +1382,8 @@ var GenericSubsection = {
 
   addSubSectionToSidebar(id, title) {
     let category = document.querySelector("#categories > [value=" + id + "]");
-    category.classList.add("has-subsection");
     let subCategory = document.createElement("div");
-    subCategory.classList.add("category-subsection");
-    subCategory.setAttribute("value", id + "-" + title);
-    subCategory.addEventListener("click", (ev) => {
-      let section = ev.target;
-      showSubSection(section);
-    });
+    subCategory.setAttribute("class", "subsection");
     subCategory.appendChild(document.createTextNode(title))
     category.appendChild(subCategory);
   },
@@ -1397,7 +1392,7 @@ var GenericSubsection = {
     for (let [title, sectionData] of data) {
       let hasData = sectionData.size > 0;
       let s = this.renderSubsectionHeader(title, hasData, sectionID);
-      s.appendChild(this.renderSubsectionData(title, sectionData));
+      s.appendChild(this.renderSubsectionData(sectionData));
       dataDiv.appendChild(s);
     }
   },
@@ -1405,35 +1400,24 @@ var GenericSubsection = {
   renderSubsectionHeader(title, hasData, sectionID) {
     this.addSubSectionToSidebar(sectionID, title);
     let section = document.createElement("section");
-    section.setAttribute("id", sectionID + "-" + title);
-    section.classList.add("data-subsection", "expanded");
+    section.classList.add("data-subsection");
     if (hasData) {
       section.classList.add("has-subdata");
     }
     return section;
   },
 
-  renderSubsectionData(title, data) {
+  renderSubsectionData(data) {
     // Create data container
     let dataDiv = document.createElement("div");
     dataDiv.setAttribute("class", "subsection-data subdata");
     // Instanciate the data
     let table = GenericTable.render(data);
-    let caption = document.createElement("caption");
-    caption.textContent = title;
-    table.appendChild(caption);
     dataDiv.appendChild(table);
 
     return dataDiv;
   },
 
-  deleteAllSubSections() {
-    let subsections = document.querySelectorAll(".category-subsection");
-    subsections.forEach((el) => {
-      el.parentElement.removeChild(el);
-    })
-  },
-
 }
 
 var GenericTable = {
@@ -1730,40 +1714,19 @@ function setupPageHeader() {
  * Change the section displayed
  */
 function show(selected) {
-  let current_button = document.querySelector(".category.selected");
-  current_button.classList.remove("selected");
-  selected.classList.add("selected");
-  // Hack because subsection text appear selected. See Bug 1375114.
-  document.getSelection().empty();
+    let current_section = document.querySelector(".active");
+    let selected_section = document.getElementById(selected.getAttribute("value"));
+    if (current_section == selected_section)
+      return;
+    current_section.classList.remove("active");
+    current_section.hidden = true;
+    selected_section.classList.add("active");
+    selected_section.hidden = false;
 
-  let current_section = document.querySelector(".active");
-  let selected_section = document.getElementById(selected.getAttribute("value"));
-  if (current_section == selected_section)
-    return;
-  current_section.classList.remove("active");
-  current_section.hidden = true;
-  selected_section.classList.add("active");
-  selected_section.hidden = false;
-
-  let title = selected.querySelector(".category-name").textContent;
-  document.getElementById("sectionTitle").textContent = title;
-}
-
-function showSubSection(selected) {
-  let current_selection = document.querySelector(".category-subsection.selected");
-  if (current_selection)
-    current_selection.classList.remove("selected");
-  selected.classList.add("selected");
-
-  let section = document.getElementById(selected.getAttribute("value"));
-  section.parentElement.childNodes.forEach((element) => {
-    element.classList.remove("expanded");
-  }, this);
-  section.classList.add("expanded");
-
-  let title = selected.parentElement.querySelector(".category-name").textContent;
-  document.getElementById("sectionTitle").textContent = title + " - " + selected.textContent;
-  document.getSelection().empty(); // prevent subsection text selection
+    let current_button = document.querySelector("[selected=true]");
+    current_button.removeAttribute("selected");
+    selected.setAttribute("selected", "true");
+    document.getElementById("sectionTitle").textContent = selected.textContent;
 }
 
 /**
@@ -2163,7 +2126,6 @@ function displayPingData(ping, updatePayloadList = false) {
 
 
   try {
-    PingPicker.render();
     displayRichPingData(ping, updatePayloadList);
   } catch (err) {
     console.log(err);

toolkit/content/aboutTelemetry.xhtml

@@ -28,7 +28,7 @@
       <div class="heading">
         <h3>&aboutTelemetry.pageTitle;</h3>
       </div>
-      <div id="category-home" class="category has-data selected" value="home">
+      <div id="category-home" class="category has-data" selected="true" value="home">
         <span class="category-name">Home</span>
       </div>
       <div class="category" value="general-data-section">