--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -201,25 +201,21 @@ function shortTimeString(date) {
}
var Settings = {
SETTINGS: [
// data upload
{
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",
},
],
attachObservers() {
for (let s of this.SETTINGS) {
let setting = s;
Preferences.observe(setting.pref, this.render, this);
}
@@ -243,33 +239,39 @@ var Settings = {
},
detachObservers() {
for (let setting of this.SETTINGS) {
Preferences.ignore(setting.pref, this.render, this);
}
},
+ 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() {
- for (let setting of this.SETTINGS) {
- let enabledElement = document.getElementById(setting.descriptionEnabledId);
- let disabledElement = document.getElementById(setting.descriptionDisabledId);
+ let homeExplanation = document.getElementById("home-explanation");
+ let fhrEnabled = this.getStatusStringForSetting(this.SETTINGS[0]);
+ let extendedEnabled = this.getStatusStringForSetting(this.SETTINGS[1]);
+ let parameters = [fhrEnabled, extendedEnabled].map(this.convertStringToLink);
- if (Preferences.get(setting.pref, setting.defaultPrefValue)) {
- enabledElement.hidden = false;
- disabledElement.hidden = true;
- } else {
- enabledElement.hidden = true;
- disabledElement.hidden = false;
- }
- }
- }
+ let explanation = bundle.formatStringFromName("homeExplanation", parameters, 2);
+ homeExplanation.innerHTML = explanation;
+ this.attachObservers()
+ },
+
+ convertStringToLink(string) {
+ return "<a href=\"\" class=\"change-data-choices-link\">" + string + "</a>";
+ },
};
var PingPicker = {
viewCurrentPingData: null,
_archivedPings: null,
attachObservers() {
let elements = document.getElementsByName("choose-ping-source");
@@ -315,16 +317,27 @@ var PingPicker = {
onPingSourceChanged() {
this.update();
},
onPingDisplayChanged() {
this.update();
},
+ render() {
+ let pings = bundle.GetStringFromName("pings");
+ let pingLink = "<a href=\"http://gecko.readthedocs.io/en/latest/toolkit/components/telemetry/telemetry/concepts/pings.html\">"" + pings + ""</a>";
+ let pingName = "<span class=\"change-ping\">" + this._getSelectedPingName() + "</span>";
+
+ let explanation = bundle.formatStringFromName("pingExplanation", [pingLink, pingName], 2);
+ let pingExplanation = document.getElementById("ping-explanation");
+ pingExplanation.innerHTML = explanation;
+ this.attachObservers();
+ },
+
async update() {
let viewCurrent = document.getElementById("ping-source-current").checked;
let currentChanged = viewCurrent !== this.viewCurrentPingData;
this.viewCurrentPingData = viewCurrent;
// If we have no archived pings, disable the ping archive selection.
// This can happen on new profiles or if the ping archive is disabled.
let archivedPingList = await TelemetryArchive.promiseArchivedPingList();
@@ -337,16 +350,17 @@ var PingPicker = {
document.getElementById("archived-ping-picker").hidden = true;
this._updateCurrentPingData();
} else {
document.getElementById("current-ping-picker").hidden = true;
await this._updateArchivedPingList(archivedPingList);
document.getElementById("archived-ping-picker").hidden = false;
}
}
+ this.render();
},
_updateCurrentPingData() {
const subsession = document.getElementById("show-subsession-data").checked;
const ping = TelemetryController.getCurrentPingData(subsession);
if (!ping) {
return;
}
@@ -440,16 +454,24 @@ var PingPicker = {
option.setAttribute("value", p.id);
if (id && p.id == id) {
option.selected = true;
}
pingSelector.appendChild(option);
}
},
+ _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);
return selected.getAttribute("value");
},
_movePingIndex(offset) {
const id = this._getSelectedPingId();
@@ -510,17 +532,17 @@ var EnvironmentData = {
setHasData("environment-data-section", hasData);
if (!hasData) {
return;
}
let ignore = ["addons"];
let env = filterObject(ping.environment, ignore);
let sections = sectionalizeObject(env);
- GenericSubsection.render(sections, dataDiv);
+ GenericSubsection.render(sections, dataDiv, "environment-data-section");
// We use specialized rendering here to make the addon and plugin listings
// more readable.
this.createAddonSection(dataDiv, ping);
},
renderPersona(addonObj, addonSection, sectionTitle) {
let table = document.createElement("table");
@@ -599,17 +621,17 @@ var EnvironmentData = {
this.renderAddonsObject(addons.activeAddons, addonSection, "activeAddons");
this.renderActivePlugins(addons.activePlugins, addonSection, "activePlugins");
this.renderKeyValueObject(addons.theme, addonSection, "theme");
this.renderKeyValueObject(addons.activeExperiment, addonSection, "activeExperiment");
this.renderAddonsObject(addons.activeGMPlugins, addonSection, "activeGMPlugins");
this.renderPersona(addons, addonSection, "persona");
let hasAddonData = Object.keys(ping.environment.addons).length > 0;
- let s = GenericSubsection.renderSubsectionHeader("addons", hasAddonData);
+ let s = GenericSubsection.renderSubsectionHeader("addons", hasAddonData, "environment-data-section");
s.appendChild(addonSection);
dataDiv.appendChild(s);
},
appendRow(table, id, value) {
let row = document.createElement("tr");
this.appendColumn(row, "td", id);
this.appendColumn(row, "td", value);
@@ -1354,56 +1376,40 @@ function RenderObject(aObject) {
for (let i = 1; i < keys.length; i++) {
output += ", \"" + keys[i] + "\":\u00A0" + JSON.stringify(aObject[keys[i]]);
}
return output + "}";
}
var GenericSubsection = {
- render(data, dataDiv) {
+ addSubSectionToSidebar(id, title) {
+ 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);
+ let s = this.renderSubsectionHeader(title, hasData, sectionID);
s.appendChild(this.renderSubsectionData(sectionData));
dataDiv.appendChild(s);
}
},
- renderSubsectionHeader(title, hasData) {
+ renderSubsectionHeader(title, hasData, sectionID) {
+ 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;
},
renderSubsectionData(data) {
// Create data container
let dataDiv = document.createElement("div");
dataDiv.setAttribute("class", "subsection-data subdata");
// Instanciate the data