[tbb-commits] [tor-browser] 03/05: fixup! Bug 25658: Replace security slider with security level UI

gitolite role git at cupani.torproject.org
Fri Jul 15 19:15:24 UTC 2022


This is an automated email from the git hooks/post-receive script.

richard pushed a commit to branch tor-browser-91.11.0esr-12.0-1
in repository tor-browser.

commit cd9ac3ca05934d61cda55952faf1e70e7a07a6ec
Author: Pier Angelo Vendrame <pierov at torproject.org>
AuthorDate: Mon Jul 11 15:50:25 2022 +0200

    fixup! Bug 25658: Replace security slider with security level UI
---
 browser/base/content/browser.xhtml                 |   1 +
 browser/components/preferences/preferences.xhtml   |   1 +
 .../securitylevel/content/securityLevel.js         | 383 +++++++++------------
 .../content/securityLevelButton.inc.xhtml          |   4 +-
 .../content/securityLevelPanel.inc.xhtml           |  18 +-
 .../content/securityLevelPreferences.inc.xhtml     |  59 ++--
 .../en-US/browser/base-browser/securityLevel.ftl   |  66 ++++
 7 files changed, 284 insertions(+), 248 deletions(-)

diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
index 394a464140186..21af5188c18d2 100644
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -85,6 +85,7 @@
   <link rel="localization" href="browser/places.ftl"/>
   <link rel="localization" href="toolkit/printing/printUI.ftl"/>
   <link rel="localization" href="browser/tabbrowser.ftl"/>
+  <link rel="localization" href="browser/base-browser/securityLevel.ftl"/>
 
   <title data-l10n-id="browser-main-window-title"></title>
 
diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml
index 30ce70079adb7..64a266a5756f5 100644
--- a/browser/components/preferences/preferences.xhtml
+++ b/browser/components/preferences/preferences.xhtml
@@ -57,6 +57,7 @@
   <link rel="localization" href="browser/preferences/siteDataSettings.ftl"/>
   <link rel="localization" href="browser/aboutDialog.ftl"/>
   <link rel="localization" href="browser/sanitize.ftl"/>
+  <link rel="localization" href="browser/base-browser/securityLevel.ftl"/>
   <link rel="localization" href="toolkit/updates/history.ftl"/>
   <link rel="localization" href="security/certificates/deviceManager.ftl"/>
   <link rel="localization" href="security/certificates/certManager.ftl"/>
diff --git a/browser/components/securitylevel/content/securityLevel.js b/browser/components/securitylevel/content/securityLevel.js
index 95770dbc6bed9..0e8f3c00be9bb 100644
--- a/browser/components/securitylevel/content/securityLevel.js
+++ b/browser/components/securitylevel/content/securityLevel.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* global AppConstants, Services, openPreferences, XPCOMUtils */
+
 ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 
@@ -8,11 +10,7 @@ XPCOMUtils.defineLazyModuleGetters(this, {
   PanelMultiView: "resource:///modules/PanelMultiView.jsm",
 });
 
-ChromeUtils.defineModuleGetter(
-  this,
-  "TorStrings",
-  "resource:///modules/TorStrings.jsm"
-);
+const SecurityLevels = Object.freeze(["", "safest", "safer", "", "standard"]);
 
 /*
   Security Level Prefs
@@ -20,13 +18,13 @@ ChromeUtils.defineModuleGetter(
   Getters and Setters for relevant torbutton prefs
 */
 const SecurityLevelPrefs = {
-  security_slider_pref : "extensions.torbutton.security_slider",
-  security_custom_pref : "extensions.torbutton.security_custom",
+  security_slider_pref: "extensions.torbutton.security_slider",
+  security_custom_pref: "extensions.torbutton.security_custom",
 
   get securitySlider() {
     try {
       return Services.prefs.getIntPref(this.security_slider_pref);
-    } catch(e) {
+    } catch (e) {
       // init pref to 4 (standard)
       const val = 4;
       Services.prefs.setIntPref(this.security_slider_pref, val);
@@ -38,10 +36,18 @@ const SecurityLevelPrefs = {
     Services.prefs.setIntPref(this.security_slider_pref, val);
   },
 
+  get securitySliderLevel() {
+    const slider = this.securitySlider;
+    if (slider >= 1 && slider <= 4 && SecurityLevels[slider]) {
+      return SecurityLevels[slider];
+    }
+    return null;
+  },
+
   get securityCustom() {
     try {
       return Services.prefs.getBoolPref(this.security_custom_pref);
-    } catch(e) {
+    } catch (e) {
       // init custom to false
       const val = false;
       Services.prefs.setBoolPref(this.security_custom_pref, val);
@@ -61,34 +67,20 @@ const SecurityLevelPrefs = {
 */
 
 const SecurityLevelButton = {
-  _securityPrefsBranch : null,
-
-  _populateXUL : function(securityLevelButton) {
-    if (securityLevelButton != null) {
-      securityLevelButton.setAttribute("tooltiptext", TorStrings.securityLevel.securityLevel);
-      securityLevelButton.setAttribute("label", TorStrings.securityLevel.securityLevel);
-    }
-  },
+  _securityPrefsBranch: null,
 
-  _configUIFromPrefs : function(securityLevelButton) {
+  _configUIFromPrefs(securityLevelButton) {
     if (securityLevelButton != null) {
-      let securitySlider = SecurityLevelPrefs.securitySlider;
-      securityLevelButton.removeAttribute("level");
-      const securityCustom = SecurityLevelPrefs.securityCustom;
-      switch(securitySlider) {
-        case 4:
-          securityLevelButton.setAttribute("level", `standard${securityCustom ? "_custom" : ""}`);
-          securityLevelButton.setAttribute("tooltiptext", TorStrings.securityLevel.standard.tooltip);
-          break;
-        case 2:
-          securityLevelButton.setAttribute("level", `safer${securityCustom ? "_custom" : ""}`);
-          securityLevelButton.setAttribute("tooltiptext", TorStrings.securityLevel.safer.tooltip);
-          break;
-        case 1:
-          securityLevelButton.setAttribute("level", `safest${securityCustom ? "_custom" : ""}`);
-          securityLevelButton.setAttribute("tooltiptext", TorStrings.securityLevel.safest.tooltip);
-          break;
+      const level = SecurityLevelPrefs.securitySliderLevel;
+      if (!level) {
+        return;
       }
+      const customStr = SecurityLevelPrefs.securityCustom ? "_custom" : "";
+      securityLevelButton.setAttribute("level", `${level}${customStr}`);
+      document.l10n.setAttributes(
+        securityLevelButton,
+        `security-level-button-${level}`
+      );
     }
   },
 
@@ -110,21 +102,22 @@ const SecurityLevelButton = {
     return anchor;
   },
 
-  init : function() {
+  init() {
     // set the initial class based off of the current pref
     let button = this.button;
-    this._populateXUL(button);
     this._configUIFromPrefs(button);
 
-    this._securityPrefsBranch = Services.prefs.getBranch("extensions.torbutton.");
-    this._securityPrefsBranch.addObserver("", this, false);
+    this._securityPrefsBranch = Services.prefs.getBranch(
+      "extensions.torbutton."
+    );
+    this._securityPrefsBranch.addObserver("", this);
 
     CustomizableUI.addListener(this);
 
     SecurityLevelPanel.init();
   },
 
-  uninit : function() {
+  uninit() {
     CustomizableUI.removeListener(this);
 
     this._securityPrefsBranch.removeObserver("", this);
@@ -133,8 +126,8 @@ const SecurityLevelButton = {
     SecurityLevelPanel.uninit();
   },
 
-  observe : function(subject, topic, data) {
-    switch(topic) {
+  observe(subject, topic, data) {
+    switch (topic) {
       case "nsPref:changed":
         if (data === "security_slider" || data === "security_custom") {
           this._configUIFromPrefs(this.button);
@@ -144,17 +137,17 @@ const SecurityLevelButton = {
   },
 
   // callback for entering the 'Customize Firefox' screen to set icon
-  onCustomizeStart : function(window) {
+  onCustomizeStart(window) {
     let navigatorToolbox = document.getElementById("navigator-toolbox");
-    let button = navigatorToolbox.palette.querySelector("#security-level-button");
-    this._populateXUL(button);
+    let button = navigatorToolbox.palette.querySelector(
+      "#security-level-button"
+    );
     this._configUIFromPrefs(button);
   },
 
   // callback when CustomizableUI modifies DOM
-  onWidgetAfterDOMChange : function(aNode, aNextNode, aContainer, aWasRemoval) {
+  onWidgetAfterDOMChange(aNode, aNextNode, aContainer, aWasRemoval) {
     if (aNode.id == "security-level-button" && !aWasRemoval) {
-      this._populateXUL(aNode);
       this._configUIFromPrefs(aNode);
     }
   },
@@ -165,7 +158,7 @@ const SecurityLevelButton = {
   // onmousedown. We do this to match the behavior of other panel spawning buttons such as Downloads,
   // Library, and the Hamburger menus. Using oncommand alone would result in only getting fired
   // after onclick, which is mousedown followed by mouseup.
-  onCommand : function(aEvent) {
+  onCommand(aEvent) {
     // snippet borrowed from /browser/components/downloads/content/indicator.js DownloadsIndicatorView.onCommand(evt)
     if (
       // On Mac, ctrl-click will send a context menu event from the widget, so
@@ -193,142 +186,128 @@ const SecurityLevelButton = {
 */
 
 const SecurityLevelPanel = {
-  _securityPrefsBranch : null,
-  _panel : null,
-  _anchor : null,
-  _populated : false,
+  _securityPrefsBranch: null,
+  _panel: null,
+  _anchor: null,
+  _populated: false,
 
   _selectors: Object.freeze({
     panel: "panel#securityLevel-panel",
     icon: "vbox#securityLevel-vbox>vbox",
-    header: "h1#securityLevel-header",
-    level: "label#securityLevel-level",
-    custom: "label#securityLevel-custom",
+    labelLevel: "label#securityLevel-level",
+    labelCustom: "label#securityLevel-custom",
     summary: "description#securityLevel-summary",
-    learnMore: "label#securityLevel-learnMore",
     restoreDefaults: "button#securityLevel-restoreDefaults",
     advancedSecuritySettings: "button#securityLevel-advancedSecuritySettings",
   }),
 
-  _populateXUL : function() {
+  _populateXUL() {
     let selectors = this._selectors;
 
     this._elements = {
       panel: document.querySelector(selectors.panel),
       icon: document.querySelector(selectors.icon),
-      header: document.querySelector(selectors.header),
-      levelLabel: document.querySelector(selectors.level),
-      customLabel: document.querySelector(selectors.custom),
+      labelLevel: document.querySelector(selectors.labelLevel),
+      labelCustom: document.querySelector(selectors.labelCustom),
       summaryDescription: document.querySelector(selectors.summary),
-      learnMoreLabel: document.querySelector(selectors.learnMore),
       restoreDefaultsButton: document.querySelector(selectors.restoreDefaults),
-      changeButton: document.querySelector(selectors.advancedSecuritySettings),
+      advancedSecuritySettings: document.querySelector(
+        selectors.advancedSecuritySettings
+      ),
     };
-    let elements = this._elements;
-
-    elements.header.textContent = TorStrings.securityLevel.securityLevel;
-    elements.customLabel.setAttribute("value", TorStrings.securityLevel.customWarning);
-    elements.learnMoreLabel.setAttribute("value", TorStrings.securityLevel.learnMore);
-    elements.learnMoreLabel.setAttribute("href", TorStrings.securityLevel.learnMoreURL);
-    if (TorStrings.securityLevel.learnMoreURL.startsWith("about:")) {
-      elements.learnMoreLabel.setAttribute("useoriginprincipal", "true");
-    }
-    elements.restoreDefaultsButton.setAttribute("label", TorStrings.securityLevel.restoreDefaults);
-    elements.changeButton.setAttribute("label", TorStrings.securityLevel.change);
-
+    this._elements.panel.addEventListener("onpopupshown", e => {
+      this.onPopupShown(e);
+    });
+    this._elements.panel.addEventListener("onpopuphidden", e => {
+      this.onPopupHidden(e);
+    });
+    this._elements.restoreDefaultsButton.addEventListener("command", () => {
+      this.restoreDefaults();
+    });
+    this._elements.advancedSecuritySettings.addEventListener("command", () => {
+      this.openAdvancedSecuritySettings();
+    });
     this._configUIFromPrefs();
     this._populated = true;
   },
 
-  _configUIFromPrefs : function() {
+  _configUIFromPrefs() {
     // get security prefs
-    let securitySlider = SecurityLevelPrefs.securitySlider;
-    let securityCustom = SecurityLevelPrefs.securityCustom;
-
-    // get the panel elements we need to populate
-    let elements = this._elements;
-    let icon = elements.icon;
-    let labelLevel = elements.levelLabel;
-    let labelCustomWarning = elements.customLabel;
-    let summary = elements.summaryDescription;
-    let buttonRestoreDefaults = elements.restoreDefaultsButton;
-    let buttonAdvancedSecuritySettings = elements.changeButton;
+    const level = SecurityLevelPrefs.securitySliderLevel;
+    const custom = SecurityLevelPrefs.securityCustom;
 
     // only visible when user is using custom settings
-    labelCustomWarning.hidden = !securityCustom;
-    buttonRestoreDefaults.hidden = !securityCustom;
+    let labelCustomWarning = this._elements.labelCustom;
+    labelCustomWarning.hidden = !custom;
+    let buttonRestoreDefaults = this._elements.restoreDefaultsButton;
+    buttonRestoreDefaults.hidden = !custom;
 
+    const summary = this._elements.summaryDescription;
     // Descriptions change based on security level
-    switch(securitySlider) {
-      // standard
-      case 4:
-        icon.setAttribute("level", "standard");
-        labelLevel.setAttribute("value", TorStrings.securityLevel.standard.level);
-        summary.textContent = TorStrings.securityLevel.standard.summary;
-        break;
-      // safer
-      case 2:
-        icon.setAttribute("level", "safer");
-        labelLevel.setAttribute("value", TorStrings.securityLevel.safer.level);
-        summary.textContent = TorStrings.securityLevel.safer.summary;
-        break;
-      // safest
-      case 1:
-        icon.setAttribute("level", "safest");
-        labelLevel.setAttribute("value", TorStrings.securityLevel.safest.level);
-        summary.textContent = TorStrings.securityLevel.safest.summary;
-        break;
+    if (level) {
+      this._elements.icon.setAttribute("level", level);
+      document.l10n.setAttributes(
+        this._elements.labelLevel,
+        `security-level-${level}-label`
+      );
+      document.l10n.setAttributes(summary, `security-level-${level}-summary`);
     }
-
     // override the summary text with custom warning
-    if (securityCustom) {
-      summary.textContent = TorStrings.securityLevel.custom.summary;
+    if (custom) {
+      document.l10n.setAttributes(summary, "security-level-custom-summary");
     }
   },
 
-  init : function() {
-    this._securityPrefsBranch = Services.prefs.getBranch("extensions.torbutton.");
-    this._securityPrefsBranch.addObserver("", this, false);
+  init() {
+    this._securityPrefsBranch = Services.prefs.getBranch(
+      "extensions.torbutton."
+    );
+    this._securityPrefsBranch.addObserver("", this);
   },
 
-  uninit : function() {
+  uninit() {
     this._securityPrefsBranch.removeObserver("", this);
     this._securityPrefsBranch = null;
   },
 
-  show : function() {
-    // we have to defer this until after the browser has finished init'ing before
-    // we can populate the panel
+  show() {
+    // we have to defer this until after the browser has finished init'ing
+    // before we can populate the panel
     if (!this._populated) {
       this._populateXUL();
     }
 
-    let panel = document.getElementById("securityLevel-panel");
-    panel.hidden = false;
-    PanelMultiView.openPopup(panel, SecurityLevelButton.anchor, "bottomcenter topright",
-                             0, 0, false, null).catch(Cu.reportError);
+    this._elements.panel.hidden = false;
+    PanelMultiView.openPopup(
+      this._elements.panel,
+      SecurityLevelButton.anchor,
+      "bottomcenter topright",
+      0,
+      0,
+      false,
+      null
+    ).catch(Cu.reportError);
   },
 
-  hide : function() {
-    let panel = document.getElementById("securityLevel-panel");
-    PanelMultiView.hidePopup(panel);
+  hide() {
+    PanelMultiView.hidePopup(this._elements.panel);
   },
 
-  restoreDefaults : function() {
+  restoreDefaults() {
     SecurityLevelPrefs.securityCustom = false;
     // hide and reshow so that layout re-renders properly
     this.hide();
     this.show(this._anchor);
   },
 
-  openAdvancedSecuritySettings : function() {
+  openAdvancedSecuritySettings() {
     openPreferences("privacy-securitylevel");
     this.hide();
   },
 
   // callback when prefs change
-  observe : function(subject, topic, data) {
-    switch(topic) {
+  observe(subject, topic, data) {
+    switch (topic) {
       case "nsPref:changed":
         if (data == "security_slider" || data == "security_custom") {
           this._configUIFromPrefs();
@@ -338,14 +317,14 @@ const SecurityLevelPanel = {
   },
 
   // callback when the panel is displayed
-  onPopupShown : function(event) {
+  onPopupShown(event) {
     SecurityLevelButton.button.setAttribute("open", "true");
   },
 
   // callback when the panel is hidden
-  onPopupHidden : function(event) {
+  onPopupHidden(event) {
     SecurityLevelButton.button.removeAttribute("open");
-  }
+  },
 }; /* Security Level Panel */
 
 /*
@@ -354,79 +333,58 @@ const SecurityLevelPanel = {
   Code to handle init and update of security level section in about:preferences#privacy
 */
 
-const SecurityLevelPreferences =
-{
-  _securityPrefsBranch : null,
-
-  _populateXUL : function() {
-    let groupbox = document.getElementById("securityLevel-groupbox");
-
-    let labelHeader = groupbox.querySelector("#securityLevel-header");
-    labelHeader.textContent = TorStrings.securityLevel.securityLevel;
-
-    let spanOverview = groupbox.querySelector("#securityLevel-overview");
-    spanOverview.textContent = TorStrings.securityLevel.overview;
-
-    let labelLearnMore = groupbox.querySelector("#securityLevel-learnMore");
-    labelLearnMore.setAttribute("value", TorStrings.securityLevel.learnMore);
-    labelLearnMore.setAttribute("href", TorStrings.securityLevel.learnMoreURL);
-    if (TorStrings.securityLevel.learnMoreURL.startsWith("about:")) {
-      labelLearnMore.setAttribute("useoriginprincipal", "true");
-    }
-
-    let radiogroup =  document.getElementById("securityLevel-radiogroup");
-    radiogroup.addEventListener("command", SecurityLevelPreferences.selectSecurityLevel);
-
-    let populateRadioElements = function(vboxQuery, stringStruct) {
-      let vbox = groupbox.querySelector(vboxQuery);
-
-      let radio = vbox.querySelector("radio");
-      radio.setAttribute("label", stringStruct.level);
-
-      let customWarning = vbox.querySelector("#securityLevel-customWarning");
-      customWarning.setAttribute("value", TorStrings.securityLevel.customWarning);
-
-      let labelSummary = vbox.querySelector("#securityLevel-summary");
-      labelSummary.textContent = stringStruct.summary;
-
-      let labelRestoreDefaults = vbox.querySelector("#securityLevel-restoreDefaults");
-      labelRestoreDefaults.setAttribute("value", TorStrings.securityLevel.restoreDefaults);
-      labelRestoreDefaults.addEventListener("click",  SecurityLevelPreferences.restoreDefaults);
-
-      let description1 = vbox.querySelector("#securityLevel-description1");
-      if (description1) {
-        description1.textContent = stringStruct.description1;
-      }
-      let description2 = vbox.querySelector("#securityLevel-description2");
-      if (description2) {
-        description2.textContent = stringStruct.description2;
-      }
-      let description3 = vbox.querySelector("#securityLevel-description3");
-      if (description3) {
-        description3.textContent = stringStruct.description3;
-      }
+const SecurityLevelPreferences = {
+  _securityPrefsBranch: null,
+
+  _populateXUL() {
+    const groupbox = document.querySelector("#securityLevel-groupbox");
+    const radiogroup = groupbox.querySelector("#securityLevel-radiogroup");
+    radiogroup.addEventListener(
+      "command",
+      SecurityLevelPreferences.selectSecurityLevel
+    );
+
+    const populateRadioElements = vboxQuery => {
+      const vbox = groupbox.querySelector(vboxQuery);
+      const labelRestoreDefaults = vbox.querySelector(
+        ".securityLevel-restoreDefaults"
+      );
+      labelRestoreDefaults.addEventListener(
+        "click",
+        SecurityLevelPreferences.restoreDefaults
+      );
     };
-
-    populateRadioElements("#securityLevel-vbox-standard", TorStrings.securityLevel.standard);
-    populateRadioElements("#securityLevel-vbox-safer", TorStrings.securityLevel.safer);
-    populateRadioElements("#securityLevel-vbox-safest", TorStrings.securityLevel.safest);
+    populateRadioElements("#securityLevel-vbox-standard");
+    populateRadioElements("#securityLevel-vbox-safer");
+    populateRadioElements("#securityLevel-vbox-safest");
   },
 
-  _configUIFromPrefs : function() {
+  _configUIFromPrefs() {
     // read our prefs
-    let securitySlider = SecurityLevelPrefs.securitySlider;
-    let securityCustom = SecurityLevelPrefs.securityCustom;
+    const securitySlider = SecurityLevelPrefs.securitySlider;
+    const securityCustom = SecurityLevelPrefs.securityCustom;
 
     // get our elements
-    let groupbox = document.getElementById("securityLevel-groupbox");
-
-    let radiogroup =  groupbox.querySelector("#securityLevel-radiogroup");
-    let labelStandardCustom = groupbox.querySelector("#securityLevel-vbox-standard label#securityLevel-customWarning");
-    let labelSaferCustom = groupbox.querySelector("#securityLevel-vbox-safer label#securityLevel-customWarning");
-    let labelSafestCustom = groupbox.querySelector("#securityLevel-vbox-safest label#securityLevel-customWarning");
-    let labelStandardRestoreDefaults = groupbox.querySelector("#securityLevel-vbox-standard label#securityLevel-restoreDefaults");
-    let labelSaferRestoreDefaults = groupbox.querySelector("#securityLevel-vbox-safer label#securityLevel-restoreDefaults");
-    let labelSafestRestoreDefaults = groupbox.querySelector("#securityLevel-vbox-safest label#securityLevel-restoreDefaults");
+    const groupbox = document.querySelector("#securityLevel-groupbox");
+    let radiogroup = groupbox.querySelector("#securityLevel-radiogroup");
+    let labelStandardCustom = groupbox.querySelector(
+      "#securityLevel-vbox-standard label.securityLevel-customWarning"
+    );
+    let labelSaferCustom = groupbox.querySelector(
+      "#securityLevel-vbox-safer label.securityLevel-customWarning"
+    );
+    let labelSafestCustom = groupbox.querySelector(
+      "#securityLevel-vbox-safest label.securityLevel-customWarning"
+    );
+    let labelStandardRestoreDefaults = groupbox.querySelector(
+      "#securityLevel-vbox-standard label.securityLevel-restoreDefaults"
+    );
+    let labelSaferRestoreDefaults = groupbox.querySelector(
+      "#securityLevel-vbox-safer label.securityLevel-restoreDefaults"
+    );
+    let labelSafestRestoreDefaults = groupbox.querySelector(
+      "#securityLevel-vbox-safest label.securityLevel-restoreDefaults"
+    );
 
     // hide custom label by default until we know which level we're at
     labelStandardCustom.hidden = true;
@@ -437,7 +395,7 @@ const SecurityLevelPreferences =
     labelSaferRestoreDefaults.hidden = true;
     labelSafestRestoreDefaults.hidden = true;
 
-    switch(securitySlider) {
+    switch (securitySlider) {
       // standard
       case 4:
         radiogroup.value = "standard";
@@ -459,7 +417,7 @@ const SecurityLevelPreferences =
     }
   },
 
-  init : function() {
+  init() {
     // populate XUL with localized strings
     this._populateXUL();
 
@@ -467,31 +425,32 @@ const SecurityLevelPreferences =
     this._configUIFromPrefs();
 
     // register for pref chagnes
-    this._securityPrefsBranch = Services.prefs.getBranch("extensions.torbutton.");
-    this._securityPrefsBranch.addObserver("", this, false);
+    this._securityPrefsBranch = Services.prefs.getBranch(
+      "extensions.torbutton."
+    );
+    this._securityPrefsBranch.addObserver("", this);
   },
 
-  uninit : function() {
+  uninit() {
     // unregister for pref change events
     this._securityPrefsBranch.removeObserver("", this);
     this._securityPrefsBranch = null;
   },
 
   // callback for when prefs change
-  observe : function(subject, topic, data) {
-    switch(topic) {
+  observe(subject, topic, data) {
+    switch (topic) {
       case "nsPref:changed":
-        if (data == "security_slider" ||
-            data == "security_custom") {
+        if (data == "security_slider" || data == "security_custom") {
           this._configUIFromPrefs();
         }
         break;
     }
   },
 
-  selectSecurityLevel : function() {
+  selectSecurityLevel() {
     // radio group elements
-    let radiogroup =  document.getElementById("securityLevel-radiogroup");
+    let radiogroup = document.getElementById("securityLevel-radiogroup");
 
     // update pref based on selected radio option
     switch (radiogroup.value) {
@@ -509,7 +468,7 @@ const SecurityLevelPreferences =
     SecurityLevelPreferences.restoreDefaults();
   },
 
-  restoreDefaults : function() {
+  restoreDefaults() {
     SecurityLevelPrefs.securityCustom = false;
   },
 }; /* Security Level Prefereces */
@@ -517,17 +476,17 @@ const SecurityLevelPreferences =
 Object.defineProperty(this, "SecurityLevelButton", {
   value: SecurityLevelButton,
   enumerable: true,
-  writable: false
+  writable: false,
 });
 
 Object.defineProperty(this, "SecurityLevelPanel", {
   value: SecurityLevelPanel,
   enumerable: true,
-  writable: false
+  writable: false,
 });
 
 Object.defineProperty(this, "SecurityLevelPreferences", {
   value: SecurityLevelPreferences,
   enumerable: true,
-  writable: false
+  writable: false,
 });
diff --git a/browser/components/securitylevel/content/securityLevelButton.inc.xhtml b/browser/components/securitylevel/content/securityLevelButton.inc.xhtml
index 96ee1ec0ca499..2ca8fcde945c1 100644
--- a/browser/components/securitylevel/content/securityLevelButton.inc.xhtml
+++ b/browser/components/securitylevel/content/securityLevelButton.inc.xhtml
@@ -4,4 +4,6 @@
                onmousedown="SecurityLevelButton.onCommand(event);"
                onkeypress="SecurityLevelButton.onCommand(event);"
                closemenu="none"
-               cui-areatype="toolbar"/>
+               cui-areatype="toolbar"
+               data-l10n-id="security-level-button"
+               />
diff --git a/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml b/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml
index 02d93b738ff50..05a127dd98f24 100644
--- a/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml
+++ b/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml
@@ -4,14 +4,12 @@
        orient="vertical"
        level="top"
        hidden="true"
-       class="panel-no-padding"
-       onpopupshown="SecurityLevelPanel.onPopupShown(event);"
-       onpopuphidden="SecurityLevelPanel.onPopupHidden(event);">
+       class="panel-no-padding">
   <panelmultiview mainViewId="securityLevel-panelview">
     <panelview id="securityLevel-panelview" descriptionheightworkaround="true">
       <vbox id="securityLevel-vbox">
         <box class="panel-header">
-          <html:h1 id="securityLevel-header"/>
+          <html:h1 data-l10n-id="security-level-header" />
         </box>
         <toolbarseparator></toolbarseparator>
         <vbox>
@@ -19,7 +17,7 @@
             <label id="securityLevel-level"/>
             <vbox>
               <spacer flex="1"/>
-              <label id="securityLevel-custom"/>
+              <label id="securityLevel-custom" data-l10n-id="security-level-custom"/>
               <spacer flex="1"/>
             </vbox>
             <spacer flex="1"/>
@@ -27,19 +25,21 @@
           <description id="securityLevel-summary"/>
           <hbox>
             <label
-              id="securityLevel-learnMore"
               class="learnMore text-link"
+              href="about:manual#security-settings"
+              useoriginprincipal="true"
               onclick="SecurityLevelPanel.hide();"
-              is="text-link"/>
+              is="text-link"
+              data-l10n-id="security-level-learn-more"/>
             <spacer/>
           </hbox>
         </vbox>
         <hbox class="panel-footer">
             <button id="securityLevel-restoreDefaults"
-                    oncommand="SecurityLevelPanel.restoreDefaults();"/>
+                    data-l10n-id="security-level-restore-defaults"/>
             <button id="securityLevel-advancedSecuritySettings"
                     default="true"
-                    oncommand="SecurityLevelPanel.openAdvancedSecuritySettings();"/>
+                    data-l10n-id="security-level-change"/>
         </hbox>
       </vbox>
     </panelview>
diff --git a/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml b/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml
index b050dad81621a..8439e581af133 100644
--- a/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml
+++ b/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml
@@ -1,65 +1,72 @@
 <groupbox id="securityLevel-groupbox" data-category="panePrivacy" hidden="true">
-  <label><html:h2 id="securityLevel-header"/></label>
+  <label><html:h2 data-l10n-id="security-level-header"/></label>
   <vbox data-subcategory="securitylevel" flex="1">
     <description flex="1">
-      <html:span id="securityLevel-overview" class="tail-with-learn-more"/>
-      <label id="securityLevel-learnMore" class="learnMore text-link" is="text-link"/>
+      <html:span data-l10n-id="security-level-overview" class="tail-with-learn-more"/>
+      <label data-l10n-id="security-level-learn-more"
+             class="learnMore text-link"
+             is="text-link"
+             href="about:manual#security-settings"
+             useoriginprincipal="true"/>
     </description>
     <radiogroup id="securityLevel-radiogroup">
       <vbox id="securityLevel-vbox-standard">
         <hbox>
-          <radio value="standard"/>
+          <radio value="standard" data-l10n-id="security-level-standard-radio"/>
           <vbox>
             <spacer flex="1"/>
-            <label id="securityLevel-customWarning"/>
+            <label class="securityLevel-customWarning" data-l10n-id="security-level-custom"/>
             <spacer flex="1"/>
           </vbox>
           <spacer flex="1"/>
         </hbox>
         <description flex="1" class="indent">
-          <html:span id="securityLevel-summary" class="tail-with-learn-more"/>
-          <label id="securityLevel-restoreDefaults"
-                 class="learnMore text-link"/>
+          <html:span data-l10n-id="security-level-standard-summary"
+                     class="tail-with-learn-more"/>
+          <label class="securityLevel-restoreDefaults learnMore text-link"
+                 data-l10n-id="security-level-restore-link"/>
         </description>
       </vbox>
       <vbox id="securityLevel-vbox-safer">
         <hbox>
-          <radio value="safer"/>
+          <radio value="safer" data-l10n-id="security-level-safer-radio"/>
           <vbox>
             <spacer flex="1"/>
-            <label id="securityLevel-customWarning"/>
+            <label class="securityLevel-customWarning" data-l10n-id="security-level-custom"/>
             <spacer flex="1"/>
           </vbox>
         </hbox>
         <description flex="1" class="indent">
-          <html:span id="securityLevel-summary" class="tail-with-learn-more"/>
-          <label id="securityLevel-restoreDefaults"
-                 class="learnMore text-link"/>
+          <html:span data-l10n-id="security-level-safer-summary"
+                     class="tail-with-learn-more"/>
+          <label class="securityLevel-restoreDefaults learnMore text-link"
+                 data-l10n-id="security-level-restore-link"/>
         </description>
-        <vbox id="securityLevel-descriptionList" class="indent">
-          <description id="securityLevel-description1" class="indent"/>
-          <description id="securityLevel-description2" class="indent"/>
-          <description id="securityLevel-description3" class="indent"/>
+        <vbox class="securityLevel-descriptionList indent">
+          <description data-l10n-id="security-level-js-https-only" class="indent"/>
+          <description data-l10n-id="security-level-limit-typography" class="indent"/>
+          <description data-l10n-id="security-level-limit-media" class="indent"/>
         </vbox>
       </vbox>
       <vbox id="securityLevel-vbox-safest">
         <hbox>
-          <radio value="safest"/>
+          <radio value="safest" data-l10n-id="security-level-safest-radio"/>
           <vbox>
             <spacer flex="1"/>
-            <label id="securityLevel-customWarning"/>
+            <label class="securityLevel-customWarning" data-l10n-id="security-level-custom"/>
             <spacer flex="1"/>
           </vbox>
         </hbox>
         <description flex="1" class="indent">
-          <html:span id="securityLevel-summary" class="tail-with-learn-more"/>
-          <label id="securityLevel-restoreDefaults"
-                 class="learnMore text-link"/>
+          <html:span data-l10n-id="security-level-safest-summary"
+                     class="tail-with-learn-more"/>
+          <label class="securityLevel-restoreDefaults learnMore text-link"
+                 data-l10n-id="security-level-restore-link"/>
         </description>
-        <vbox id="securityLevel-descriptionList" class="indent">
-          <description id="securityLevel-description1" class="indent"/>
-          <description id="securityLevel-description2" class="indent"/>
-          <description id="securityLevel-description3" class="indent"/>
+        <vbox class="securityLevel-descriptionList indent">
+          <description data-l10n-id="security-level-js-disabled" class="indent"/>
+          <description data-l10n-id="security-level-limit-typography-svg" class="indent"/>
+          <description data-l10n-id="security-level-limit-media" class="indent"/>
         </vbox>
       </vbox>
     </radiogroup>
diff --git a/browser/locales/en-US/browser/base-browser/securityLevel.ftl b/browser/locales/en-US/browser/base-browser/securityLevel.ftl
new file mode 100644
index 0000000000000..ef1ca39a3d492
--- /dev/null
+++ b/browser/locales/en-US/browser/base-browser/securityLevel.ftl
@@ -0,0 +1,66 @@
+-security-level = Security Level
+-security-level-standard = Standard
+-security-level-safer = Safer
+-security-level-safest = Safest
+-security-level-tooltip-standard = Security Level: Standard
+-security-level-tooltip-safer = Security Level: Safer
+-security-level-tooltip-safest = Security Level: Safest
+# Shown only for custom level
+-security-level-restore = Restore Defaults
+
+## Security level button: when changing level, the id will be updated accordingly
+# Not yet loaded (generic placeholders)
+security-level-button =
+  .tooltiptext = { -security-level }
+  .label = { -security-level }
+security-level-button-standard =
+  .tooltiptext = { -security-level-tooltip-standard }
+  .label = { -security-level-tooltip-standard }
+security-level-button-safer =
+  .tooltiptext = { -security-level-tooltip-safer }
+  .label = { -security-level-tooltip-safer }
+security-level-button-safest =
+  .tooltiptext = { -security-level-tooltip-safest }
+  .label = { -security-level-tooltip-safest }
+
+## Security level panel
+security-level-change = Change…
+security-level-standard-label =
+  .value = { -security-level-standard }
+security-level-standard-radio =
+  .label = { -security-level-standard }
+security-level-standard-summary = All Tor Browser and website features are enabled.
+security-level-safer-label =
+  .value = { -security-level-safer }
+security-level-safer-radio =
+  .label = { -security-level-safer }
+security-level-safer-summary = Disables website features that are often dangerous, causing some sites to lose functionality.
+security-level-safest-label =
+  .value = { -security-level-safest }
+security-level-safest-radio =
+  .label = { -security-level-safest }
+security-level-safest-summary = Only allows website features required for static sites and basic services. These changes affect images, media, and scripts.
+security-level-custom =
+  .value = Custom
+security-level-custom-summary = Your custom browser preferences have resulted in unusual security settings. For security and privacy reasons, we recommend you choose one of the default security levels.
+security-level-restore-defaults = { -security-level-restore }
+
+## Security level section in about:preferences#privacy
+security-level-overview = Disable certain web features that can be used to attack your security and anonymity.
+security-level-list-safer =
+  .value = At the safer setting:
+security-level-list-safest =
+  .value = At the safest setting:
+security-level-restore-link =
+  .value = { -security-level-restore }
+# Strings for descriptions
+security-level-js-https-only = JavaScript is disabled on non-HTTPS sites.
+security-level-js-disabled = JavaScript is disabled by default on all sites.
+security-level-limit-typography = Some fonts and math symbols are disabled.
+security-level-limit-typography-svg = Some fonts, icons, math symbols, and images are disabled.
+security-level-limit-media = Audio and video (HTML5 media), and WebGL are click-to-play.
+
+## Shared strings (both panel and preferences)
+security-level-header = { -security-level }
+security-level-learn-more =
+  .value = Learn more

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.


More information about the tbb-commits mailing list