Backed out changeset 811f94aea5ae (bug 1370513)

toolkit/content/aboutTelemetry.css

@@ -17,17 +17,15 @@ body {
 #categories {
   padding-top: 0px;
   min-width: 300px;
-  overflow-y: auto;
 }
 
 #category-raw {
   border-top: 1px solid var(--in-content-header-border-color);
   box-sizing: border-box;
-  background-color: inherit;
+  position: fixed;
-  min-width: inherit;
-  position: absolute;
   bottom: 0;
   left: 0;
+  min-width: inherit;
 }
 
 .heading {
@@ -52,15 +50,12 @@ body {
 
 .main-content {
   width: 100%;
-  font-size: 18px;
-  line-height:1.6;
 }
 
 #page-description {
   border: 1px solid threedshadow;
   margin: 0px;
   padding: 10px;
-  line-height: 1.2;
 }
 
 #settings {
@@ -68,25 +63,17 @@ body {
   padding: 5px;
 }
 
-.change-data-choices-link {
+.description-enabled,
-  border-bottom-width: 2px;
+.description-disabled {
-  border-bottom-style: solid;
+  margin: 0px;
 }
 
-.change-data-choices-link:hover {
+.description-enabled > span {
-  text-decoration: none;
+  color: green;
 }
 
-#ping-explanation > span {
+.description-disabled > span {
-  cursor: pointer;
+  color: red;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-}
-
-#ping-explanation > span:hover {
-  color: var(--in-content-page-color);
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
 }
 
 #ping-picker {

toolkit/content/aboutTelemetry.js

@@ -206,11 +206,15 @@ var Settings = {
     {
       pref: PREF_FHR_UPLOAD_ENABLED,
       defaultPrefValue: false,
+      descriptionEnabledId: "description-upload-enabled",
+      descriptionDisabledId: "description-upload-disabled",
     },
     // extended "Telemetry" recording
     {
       pref: PREF_TELEMETRY_ENABLED,
       defaultPrefValue: false,
+      descriptionEnabledId: "description-extended-recording-enabled",
+      descriptionDisabledId: "description-extended-recording-disabled",
     },
   ],
 
@@ -250,23 +254,22 @@ var Settings = {
     }
   },
 
-  getStatusStringForSetting(setting) {
-    let enabled = Preferences.get(setting.pref, setting.defaultPrefValue);
-    let status = bundle.GetStringFromName(enabled ? "enabled" : "disabled");
-    return status;
-  },
-
   /**
    * Updates the button & text at the top of the page to reflect Telemetry state.
    */
   render() {
-    let homeExplanation = document.getElementById("home-explanation");
+    for (let setting of this.SETTINGS) {
-    let fhrEnabled = this.getStatusStringForSetting(this.SETTINGS[0]);
+      let enabledElement = document.getElementById(setting.descriptionEnabledId);
-    let extendedEnabled = this.getStatusStringForSetting(this.SETTINGS[1]);
+      let disabledElement = document.getElementById(setting.descriptionDisabledId);
 
-    let explanation = bundle.formatStringFromName("homeExplanation", [fhrEnabled, extendedEnabled], 2);
+      if (Preferences.get(setting.pref, setting.defaultPrefValue)) {
-    homeExplanation.innerHTML = explanation;
+        enabledElement.hidden = false;
-    this.attachObservers()
+        disabledElement.hidden = true;
+      } else {
+        enabledElement.hidden = true;
+        disabledElement.hidden = false;
+      }
+    }
   }
 };
 
@@ -323,15 +326,6 @@ var PingPicker = {
     this.update();
   },
 
-  render() {
-    let pingExplanation = document.getElementById("ping-explanation");
-    let pingName = this._getSelectedPingName()
-
-    let explanation = bundle.formatStringFromName("pingExplanation", [pingName], 1);
-    pingExplanation.innerHTML = explanation;
-    this.attachObservers();
-  },
-
   async update() {
     let viewCurrent = document.getElementById("ping-source-current").checked;
     let currentChanged = viewCurrent !== this.viewCurrentPingData;
@@ -354,7 +348,6 @@ var PingPicker = {
         document.getElementById("archived-ping-picker").hidden = false;
       }
     }
-    this.render();
   },
 
   _updateCurrentPingData() {
@@ -458,14 +451,6 @@ var PingPicker = {
     }
   },
 
-  _getSelectedPingName() {
-    if (this.viewCurrentPingData) return "current";
-
-    let pingSelector = document.getElementById("choose-ping-id");
-    let selected = pingSelector.selectedOptions.item(0);
-    return selected.textContent;
-  },
-
   _getSelectedPingId() {
     let pingSelector = document.getElementById("choose-ping-id");
     let selected = pingSelector.selectedOptions.item(0);
@@ -536,7 +521,7 @@ var EnvironmentData = {
     let ignore = ["addons"];
     let env = filterObject(ping.environment, ignore);
     let sections = sectionalizeObject(env);
-    GenericSubsection.render(sections, dataDiv, "environment-data-section");
+    GenericSubsection.render(sections, dataDiv);
 
     // We use specialized rendering here to make the addon and plugin listings
     // more readable.
@@ -625,7 +610,7 @@ var EnvironmentData = {
     this.renderPersona(addons, addonSection, "persona");
 
     let hasAddonData = Object.keys(ping.environment.addons).length > 0;
-    let s = GenericSubsection.renderSubsectionHeader("addons", hasAddonData, "environment-data-section");
+    let s = GenericSubsection.renderSubsectionHeader("addons", hasAddonData);
     s.appendChild(addonSection);
     dataDiv.appendChild(s);
   },
@@ -1380,30 +1365,46 @@ function RenderObject(aObject) {
 
 var GenericSubsection = {
 
-  addSubSectionToSidebar(id, title) {
+  render(data, dataDiv) {
-    let category = document.querySelector("#categories > [value=" + id + "]");
-    let subCategory = document.createElement("div");
-    subCategory.setAttribute("class", "subsection");
-    subCategory.appendChild(document.createTextNode(title))
-    category.appendChild(subCategory);
-  },
-
-  render(data, dataDiv, sectionID) {
     for (let [title, sectionData] of data) {
       let hasData = sectionData.size > 0;
-      let s = this.renderSubsectionHeader(title, hasData, sectionID);
+      let s = this.renderSubsectionHeader(title, hasData);
       s.appendChild(this.renderSubsectionData(sectionData));
       dataDiv.appendChild(s);
     }
   },
 
-  renderSubsectionHeader(title, hasData, sectionID) {
+  renderSubsectionHeader(title, hasData) {
-    this.addSubSectionToSidebar(sectionID, title);
     let section = document.createElement("section");
     section.classList.add("data-subsection");
     if (hasData) {
       section.classList.add("has-subdata");
     }
+
+    // Create section heading
+    let sectionName = document.createElement("h2");
+    sectionName.setAttribute("class", "section-name");
+    sectionName.appendChild(document.createTextNode(title));
+    sectionName.addEventListener("click", toggleSection);
+
+    // Create caption for toggling the subsection visibility.
+    let toggleCaption = document.createElement("span");
+    toggleCaption.setAttribute("class", "toggle-caption");
+    let toggleText = bundle.GetStringFromName("environmentDataSubsectionToggle");
+    toggleCaption.appendChild(document.createTextNode(" " + toggleText));
+    toggleCaption.addEventListener("click", toggleSection);
+
+    // Create caption for empty subsections.
+    let emptyCaption = document.createElement("span");
+    emptyCaption.setAttribute("class", "empty-caption");
+    let emptyText = bundle.GetStringFromName("environmentDataSubsectionEmpty");
+    emptyCaption.appendChild(document.createTextNode(" " + emptyText));
+
+    // Append elements
+    section.appendChild(sectionName);
+    section.appendChild(toggleCaption);
+    section.appendChild(emptyCaption);
+
     return section;
   },
 

toolkit/content/aboutTelemetry.xhtml

@@ -99,8 +99,27 @@
       <div id="home" class="tab active">
 
         <h3 id="page-subtitle"></h3>
-        <p id="home-explanation"></p>
+
-        <p id="ping-explanation"></p>
+        <table id="settings">
+          <tr>
+            <td>
+              <p id="description-upload-enabled" class="description-enabled">&aboutTelemetry.uploadEnabled;</p>
+              <p id="description-upload-disabled" class="description-disabled">&aboutTelemetry.uploadDisabled;</p>
+            </td>
+            <td>
+              <a href="" class="change-data-choices-link">&aboutTelemetry.changeDataChoices;</a>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <p id="description-extended-recording-enabled" class="description-enabled">&aboutTelemetry.extendedRecordingEnabled;</p>
+              <p id="description-extended-recording-disabled" class="description-disabled">&aboutTelemetry.extendedRecordingDisabled;</p>
+            </td>
+            <td>
+              <a href="" class="change-data-choices-link">&aboutTelemetry.changeDataChoices;</a>
+            </td>
+          </tr>
+        </table>
 
         <div id="ping-picker">
           <div id="ping-source-picker">

toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd

@@ -8,6 +8,22 @@
   Change
 ">
 
+<!ENTITY aboutTelemetry.uploadEnabled "
+  FHR data upload is <span>enabled</span>.
+">
+
+<!ENTITY aboutTelemetry.uploadDisabled "
+  FHR data upload is <span>disabled</span>.
+">
+
+<!ENTITY aboutTelemetry.extendedRecordingEnabled "
+  Extended Telemetry recording is <span>enabled</span>.
+">
+
+<!ENTITY aboutTelemetry.extendedRecordingDisabled "
+  Extended Telemetry recording is <span>disabled</span>.
+">
+
 <!ENTITY aboutTelemetry.pingDataSource "
 Ping data source:
 ">

toolkit/locales/en-US/chrome/global/aboutTelemetry.properties

@@ -7,19 +7,6 @@
 # - %2$S will be replaced with the value of the toolkit.telemetry.server_owner preference
 pageSubtitle = This page shows the information about performance, hardware, usage and customizations collected by Telemetry. This information is submitted to %1$S to help improve %2$S.
 
-# Note to translators:
-# - %1$S will be replaced by either enabled or disabled
-# - %2$S will be replaced by either enabled or disabled
-homeExplanation = Telemetry is <a href="" class="change-data-choices-link">%1$S</a> and extended telemetry is <a href="" class="change-data-choices-link">%2$S</a>.
-
-# Note to translators:
-# - %1$S will be replaced by the ping name
-pingExplanation = Each piece of information is sent bundled into <a href="http://gecko.readthedocs.io/en/latest/toolkit/components/telemetry/telemetry/concepts/pings.html">"pings"</a>. You are looking at the <span class="change-ping">%1$S</span> ping.
-
-enabled = enabled
-
-disabled = disabled
-
 generalDataTitle = General Data
 
 environmentDataSubsectionToggle = Click to toggle section