Bug 1383837 - Remove unused classes in about:telemetry r=chutten
authorflyingrub <flyinggrub@gmail.com>
Thu, 27 Jul 2017 19:57:47 +0200
changeset 420376 960d5cf9540c3d00bee6b5b9cc566ea2ab642cb8
parent 420375 85ed2d9aef8516f4e00dbea606e7f366cdeee3de
child 420377 ceb431d84aabd7f011fbdd9f95feff1772b6aba4
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerschutten
bugs1383837
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1383837 - Remove unused classes in about:telemetry r=chutten Also : * fix the blacklist of section of the search * Cleanup the html code so that it takes less lines MozReview-Commit-ID: DITHGIqj6LE
toolkit/content/aboutTelemetry.css
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -134,37 +134,27 @@ body {
 .main-content {
   width: 100%;
   font-size: 18px;
   line-height:1.6;
   z-index: 1;
   position: relative;
 }
 
+section:not(.active) {
+  display: none;
+}
+
 #page-description {
   border: 1px solid threedshadow;
   margin: 0px;
   padding: 10px;
   line-height: 1.2;
 }
 
-#settings {
-  border: 1px solid lightgrey;
-  padding: 5px;
-}
-
-.change-data-choices-link {
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-}
-
-.change-data-choices-link:hover {
-  text-decoration: none;
-}
-
 #ping-explanation > span {
   cursor: pointer;
   border-bottom-width: 2px;
   border-bottom-style: solid;
 }
 
 #ping-explanation > span:hover {
   color: var(--in-content-page-color);
@@ -195,30 +185,16 @@ body {
   margin: 4px 0px;
 }
 
 #ping-source-picker {
   margin-left: 5px;
   margin-bottom: 10px;
 }
 
-.data-section:not(.has-data),
-.data-subsection:not(.has-subdata) {
-  color: gray;
-}
-
-.section-name {
-  font-size: x-large;
-  display: inline;
-}
-
-.has-data .section-name {
-  cursor: pointer;
-}
-
 .stack-title {
   font-size: medium;
   font-weight: bold;
   text-decoration: underline;
 }
 
 #histograms, #thread-hang-stats>div {
   overflow: hidden;
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -1445,17 +1445,17 @@ var Search = {
   searchHandler(e) {
     if (this.idleTimeout) {
       clearTimeout(this.idleTimeout);
     }
     this.idleTimeout = setTimeout(() => Search.search(e.target.value), FILTER_IDLE_TIMEOUT);
   },
 
   search(text) {
-    let selectedSection = document.querySelector(".data-section.active");
+    let selectedSection = document.querySelector("section.active");
     if (selectedSection.id === "histograms-section") {
       let histograms = selectedSection.getElementsByClassName("histogram");
       this.filterElements(histograms, text);
     } else if (selectedSection.id === "keyed-histograms-section") {
       let keyedElements = [];
       let keyedHistograms = selectedSection.getElementsByClassName("keyed-histogram");
       for (let key of keyedHistograms) {
         let datas = key.getElementsByClassName("histogram");
@@ -1530,18 +1530,19 @@ var GenericSubsection = {
       let s = this.renderSubsectionHeader(title, hasData, sectionID);
       s.appendChild(this.renderSubsectionData(title, sectionData));
       dataDiv.appendChild(s);
     }
   },
 
   renderSubsectionHeader(title, hasData, sectionID) {
     this.addSubSectionToSidebar(sectionID, title);
-    let section = document.createElement("section");
+    let section = document.createElement("div");
     section.setAttribute("id", sectionID + "-" + title);
+    section.classList.add("sub-section");
     if (hasData) {
       section.classList.add("has-subdata");
     }
     return section;
   },
 
   renderSubsectionData(title, data) {
     // Create data container
@@ -1851,17 +1852,18 @@ function displayProcessesSelector(select
   ];
   let processes = document.getElementById("processes");
   processes.hidden = !whitelist.includes(selectedSection);
 }
 
 function adjustSearchState() {
   let selectedSection = document.querySelector("section.active").id;
   let blacklist = [
-    "home",
+    "home-section",
+    "raw-ping-data-section"
   ];
   // 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);
   }
@@ -1886,24 +1888,22 @@ function changeUrlPath(selectedSection, 
 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 selectedValue = selected.getAttribute("value");
-  let current_section = document.querySelector(".active");
+  let current_section = document.querySelector("section.active");
   let selected_section = document.getElementById(selectedValue);
   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.trim();
   document.getElementById("sectionTitle").textContent = title;
 
   let search = document.getElementById("search");
   let placeholder = bundle.formatStringFromName("filterPlaceholder", [ title ], 1);
   search.setAttribute("placeholder", placeholder);
   displayProcessesSelector(selectedValue);
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -132,118 +132,106 @@
       <div class="header">
           <div id="sectionTitle" class="header-name">
               &aboutTelemetry.pageTitle;
           </div>
           <input type="text" id="search" placeholder="" hidden="true"/>
           <select id="processes" hidden="true"></select>
       </div>
 
-      <div id="home-section" class="tab active">
+      <section id="home-section" class="active">
         <h3 id="page-subtitle"></h3>
         <p id="home-explanation"></p>
         <p id="ping-explanation"></p>
-      </div>
+      </section>
 
-      <div id="raw-ping-data-section" class="tab" hidden="true">
+      <section id="raw-ping-data-section">
         <pre id="raw-ping-data"></pre>
-      </div>
+      </section>
 
-      <section id="general-data-section" class="tab data-section" hidden="true">
-        <div id="general-data" class="data">
-        </div>
+      <section id="general-data-section">
+        <div id="general-data" class="data"></div>
       </section>
 
-      <section id="environment-data-section" class="tab data-section" hidden="true">
-        <div id="environment-data" class="data">
-        </div>
+      <section id="environment-data-section">
+        <div id="environment-data" class="data"></div>
       </section>
 
-      <section id="session-info-section" class="tab data-section" hidden="true">
-        <div id="session-info" class="data">
-        </div>
+      <section id="session-info-section">
+        <div id="session-info" class="data"></div>
       </section>
 
-      <section id="scalars-section" class="tab data-section" hidden="true">
-        <div id="scalars" class="data">
-        </div>
+      <section id="scalars-section">
+        <div id="scalars" class="data"></div>
       </section>
 
-      <section id="keyed-scalars-section" class="tab data-section" hidden="true">
-        <div id="keyed-scalars" class="data">
-        </div>
+      <section id="keyed-scalars-section">
+        <div id="keyed-scalars" class="data"></div>
       </section>
 
-      <section id="histograms-section" class="tab data-section" hidden="true">
-        <div id="histograms" class="data">
-        </div>
+      <section id="histograms-section">
+        <div id="histograms" class="data"></div>
       </section>
 
-      <section id="keyed-histograms-section" class="tab data-section" hidden="true">
-        <div id="keyed-histograms" class="data">
-        </div>
+      <section id="keyed-histograms-section">
+        <div id="keyed-histograms" class="data"></div>
       </section>
 
-      <section id="events-section" class="tab data-section" hidden="true">
-        <div id="events" class="data">
-        </div>
+      <section id="events-section">
+        <div id="events" class="data"></div>
       </section>
 
-      <section id="simple-measurements-section" class="tab data-section" hidden="true">
-        <div id="simple-measurements" class="data">
-        </div>
+      <section id="simple-measurements-section">
+        <div id="simple-measurements" class="data"></div>
       </section>
 
-      <section id="telemetry-log-section" class="tab data-section" hidden="true">
-        <div id="telemetry-log" class="data">
-        </div>
+      <section id="telemetry-log-section">
+        <div id="telemetry-log" class="data"></div>
       </section>
 
-      <section id="slow-sql-section" class="tab data-section" hidden="true">
+      <section id="slow-sql-section">
         <div id="slow-sql-tables" class="data">
           <p id="sql-warning" class="hidden">&aboutTelemetry.fullSqlWarning;</p>
         </div>
       </section>
 
-      <section id="chrome-hangs-section" class="tab data-section" hidden="true">
+      <section id="chrome-hangs-section">
         <div id="chrome-hangs" class="data">
-          <a id="chrome-hangs-fetch-symbols" href="#">&aboutTelemetry.fetchStackSymbols;</a>
-          <a id="chrome-hangs-hide-symbols" class="hidden" href="#">&aboutTelemetry.hideStackSymbols;</a>
+          <a id="chrome-hangs-fetch-symbols" href="">&aboutTelemetry.fetchStackSymbols;</a>
+          <a id="chrome-hangs-hide-symbols" class="hidden" href="">&aboutTelemetry.hideStackSymbols;</a>
           <br/>
           <br/>
           <div id="chrome-hangs-data">
           </div>
         </div>
       </section>
 
-      <section id="thread-hang-stats-section" class="tab data-section" hidden="true">
-        <div id="thread-hang-stats" class="data">
-        </div>
+      <section id="thread-hang-stats-section">
+        <div id="thread-hang-stats" class="data"></div>
       </section>
 
-      <section id="late-writes-section" class="tab data-section" hidden="true">
+      <section id="late-writes-section">
         <div id="late-writes" class="data">
-          <a id="late-writes-fetch-symbols" href="#">&aboutTelemetry.fetchStackSymbols;</a>
-          <a id="late-writes-hide-symbols" class="hidden" href="#">&aboutTelemetry.hideStackSymbols;</a>
+          <a id="late-writes-fetch-symbols" href="">&aboutTelemetry.fetchStackSymbols;</a>
+          <a id="late-writes-hide-symbols" class="hidden" href="">&aboutTelemetry.hideStackSymbols;</a>
           <br/>
           <br/>
           <div id="late-writes-data">
           </div>
         </div>
       </section>
 
-      <section id="addon-details-section" class="tab data-section" hidden="true">
-        <div id="addon-details" class="data">
-        </div>
+      <section id="addon-details-section">
+        <div id="addon-details" class="data"></div>
       </section>
 
-      <section id="captured-stacks-section" class="tab data-section" hidden="true">
+      <section id="captured-stacks-section">
         <div id="captured-stacks" class="data">
-          <a id="captured-stacks-fetch-symbols" href="#">&aboutTelemetry.fetchStackSymbols;</a>
-          <a id="captured-stacks-hide-symbols" class="hidden" href="#">&aboutTelemetry.hideStackSymbols;</a>
+          <a id="captured-stacks-fetch-symbols" href="">&aboutTelemetry.fetchStackSymbols;</a>
+          <a id="captured-stacks-hide-symbols" class="hidden" href="">&aboutTelemetry.hideStackSymbols;</a>
           <br/>
           <br/>
           <div id="captured-stacks-data">
           </div>
         </div>
       </section>
     </div>