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

gitolite role git at cupani.torproject.org
Wed Jul 27 14:23:12 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 0b894b41ed680d08700cabb3497c94cef123281e
Author: Pier Angelo Vendrame <pierov at torproject.org>
AuthorDate: Wed Jul 13 11:00:16 2022 +0200

    fixup! Bug 25658: Replace security slider with security level UI
    
    Switched from Fluent to properties
---
 browser/base/content/browser.xhtml                 |   1 -
 browser/components/preferences/preferences.xhtml   |   1 -
 .../securitylevel/content/securityLevel.js         | 146 +++++++++++++++++++--
 .../content/securityLevelPanel.inc.xhtml           |   7 +-
 .../content/securityLevelPreferences.inc.xhtml     |  42 +++---
 browser/components/securitylevel/jar.mn            |   5 +
 .../locale/en-US/securityLevel.properties          |  30 +++++
 browser/installer/package-manifest.in              |   7 +-
 .../en-US/browser/base-browser/securityLevel.ftl   |  66 ----------
 9 files changed, 190 insertions(+), 115 deletions(-)

diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
index 21af5188c18d2..394a464140186 100644
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -85,7 +85,6 @@
   <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 64a266a5756f5..30ce70079adb7 100644
--- a/browser/components/preferences/preferences.xhtml
+++ b/browser/components/preferences/preferences.xhtml
@@ -57,7 +57,6 @@
   <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 366814ac85666..dd54634472783 100644
--- a/browser/components/securitylevel/content/securityLevel.js
+++ b/browser/components/securitylevel/content/securityLevel.js
@@ -12,6 +12,64 @@ XPCOMUtils.defineLazyModuleGetters(this, {
 
 const SecurityLevels = Object.freeze(["", "safest", "safer", "", "standard"]);
 
+XPCOMUtils.defineLazyGetter(this, "SecurityLevelStrings", () => {
+  let strings = {
+    // Generic terms
+    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_custom: "Custom",
+    security_level_restore: "Restore Defaults",
+    security_level_learn_more: "Learn more",
+    // Panel
+    security_level_change: "Change…",
+    security_level_standard_summary:
+      "All Tor Browser and website features are enabled.",
+    security_level_safer_summary:
+      "Disables website features that are often dangerous, causing some sites to lose functionality.",
+    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_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 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: "At the safer setting:",
+    security_level_list_safest: "At the safest setting:",
+    // 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.",
+  };
+  let bundle = null;
+  try {
+    bundle = Services.strings.createBundle(
+      "chrome://securitylevel/locale/securityLevel.properties"
+    );
+  } catch (e) {
+    console.warn("Could not load the Security Level strings");
+  }
+  if (bundle) {
+    for (const key of Object.keys(strings)) {
+      try {
+        strings[key] = bundle.GetStringFromName(key);
+      } catch (e) {}
+    }
+  }
+  return strings;
+});
+
 /*
   Security Level Prefs
 
@@ -77,9 +135,9 @@ const SecurityLevelButton = {
       }
       const customStr = SecurityLevelPrefs.securityCustom ? "_custom" : "";
       securityLevelButton.setAttribute("level", `${level}${customStr}`);
-      document.l10n.setAttributes(
-        securityLevelButton,
-        `security-level-button-${level}`
+      securityLevelButton.setAttribute(
+        "tooltiptext",
+        SecurityLevelStrings[`security_level_tooltip_${level}`]
       );
     }
   },
@@ -199,6 +257,9 @@ const SecurityLevelPanel = {
     summary: "description#securityLevel-summary",
     restoreDefaults: "button#securityLevel-restoreDefaults",
     advancedSecuritySettings: "button#securityLevel-advancedSecuritySettings",
+    // Selectors used only for l10n - remove them when switching to Fluent
+    header: "#securityLevel-header",
+    learnMore: "#securityLevel-panel .learnMore",
   }),
 
   _populateXUL() {
@@ -214,7 +275,24 @@ const SecurityLevelPanel = {
       advancedSecuritySettings: document.querySelector(
         selectors.advancedSecuritySettings
       ),
+      header: document.querySelector(selectors.header),
+      learnMore: document.querySelector(selectors.learnMore),
     };
+
+    this._elements.header.textContent = SecurityLevelStrings.security_level;
+    this._elements.labelCustom.setAttribute(
+      "value",
+      SecurityLevelStrings.security_level_custom
+    );
+    this._elements.learnMore.setAttribute(
+      "value",
+      SecurityLevelStrings.security_level_learn_more
+    );
+    this._elements.restoreDefaultsButton.textContent =
+      SecurityLevelStrings.security_level_restore;
+    this._elements.advancedSecuritySettings.textContent =
+      SecurityLevelStrings.security_level_change;
+
     this._elements.panel.addEventListener("onpopupshown", e => {
       this.onPopupShown(e);
     });
@@ -251,15 +329,16 @@ const SecurityLevelPanel = {
     // Descriptions change based on security level
     if (level) {
       this._elements.icon.setAttribute("level", level);
-      document.l10n.setAttributes(
-        this._elements.labelLevel,
-        `security-level-${level}-label`
+      this._elements.labelLevel.setAttribute(
+        "value",
+        SecurityLevelStrings[`security_level_${level}`]
       );
-      document.l10n.setAttributes(summary, `security-level-${level}-summary`);
+      summary.textContent =
+        SecurityLevelStrings[`security_level_${level}_summary`];
     }
     // override the summary text with custom warning
     if (custom) {
-      document.l10n.setAttributes(summary, "security-level-custom-summary");
+      summary.textContent = SecurityLevelStrings.security_level_custom_summary;
     }
   },
 
@@ -349,19 +428,58 @@ const SecurityLevelPreferences = {
       SecurityLevelPreferences.selectSecurityLevel
     );
 
-    const populateRadioElements = vboxQuery => {
-      const vbox = groupbox.querySelector(vboxQuery);
+    groupbox.querySelector("h2").textContent =
+      SecurityLevelStrings.security_level;
+    groupbox.querySelector("#securityLevel-overview").textContent =
+      SecurityLevelStrings.security_level_overview;
+    groupbox
+      .querySelector("#securityLevel-learnMore")
+      .setAttribute("value", SecurityLevelStrings.security_level_learn_more);
+
+    const populateRadioElements = (level, descr) => {
+      const vbox = groupbox.querySelector(`#securityLevel-vbox-${level}`);
+      vbox
+        .querySelector("radio")
+        .setAttribute("label", SecurityLevelStrings[`security_level_${level}`]);
+      vbox
+        .querySelector(".securityLevel-customWarning")
+        .setAttribute("value", SecurityLevelStrings.security_level_custom);
+      vbox.querySelector(".summary").textContent =
+        SecurityLevelStrings[`security_level_${level}_summary`];
       const labelRestoreDefaults = vbox.querySelector(
         ".securityLevel-restoreDefaults"
       );
+      labelRestoreDefaults.setAttribute(
+        "value",
+        SecurityLevelStrings.security_level_restore
+      );
       labelRestoreDefaults.addEventListener(
         "click",
-        SecurityLevelPreferences.restoreDefaults
+        SecurityLevelStrings.restoreDefaults
       );
+      if (descr) {
+        const descrList = vbox.querySelector(".securityLevel-descriptionList");
+        // TODO: Add the elements in securityLevelPreferences.inc.xhtml again
+        // when we switch to Fluent
+        for (const text of descr) {
+          let elem = document.createXULElement("description");
+          elem.textContent = text;
+          elem.className = "indent";
+          descrList.append(elem);
+        }
+      }
     };
-    populateRadioElements("#securityLevel-vbox-standard");
-    populateRadioElements("#securityLevel-vbox-safer");
-    populateRadioElements("#securityLevel-vbox-safest");
+    populateRadioElements("standard");
+    populateRadioElements("safer", [
+      SecurityLevelStrings.security_level_js_https_only,
+      SecurityLevelStrings.security_level_limit_typography,
+      SecurityLevelStrings.security_level_limit_media,
+    ]);
+    populateRadioElements("safest", [
+      SecurityLevelStrings.security_level_js_disabled,
+      SecurityLevelStrings.security_level_limit_typography_svg,
+      SecurityLevelStrings.security_level_limit_media,
+    ]);
   },
 
   _configUIFromPrefs() {
diff --git a/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml b/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml
index 05a127dd98f24..0347ab5e70854 100644
--- a/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml
+++ b/browser/components/securitylevel/content/securityLevelPanel.inc.xhtml
@@ -9,7 +9,7 @@
     <panelview id="securityLevel-panelview" descriptionheightworkaround="true">
       <vbox id="securityLevel-vbox">
         <box class="panel-header">
-          <html:h1 data-l10n-id="security-level-header" />
+          <html:h1 id="securityLevel-header"/>
         </box>
         <toolbarseparator></toolbarseparator>
         <vbox>
@@ -17,7 +17,7 @@
             <label id="securityLevel-level"/>
             <vbox>
               <spacer flex="1"/>
-              <label id="securityLevel-custom" data-l10n-id="security-level-custom"/>
+              <label id="securityLevel-custom"/>
               <spacer flex="1"/>
             </vbox>
             <spacer flex="1"/>
@@ -29,8 +29,7 @@
               href="about:manual#security-settings"
               useoriginprincipal="true"
               onclick="SecurityLevelPanel.hide();"
-              is="text-link"
-              data-l10n-id="security-level-learn-more"/>
+              is="text-link"/>
             <spacer/>
           </hbox>
         </vbox>
diff --git a/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml b/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml
index 8439e581af133..07d9a1d3b32d2 100644
--- a/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml
+++ b/browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml
@@ -1,9 +1,9 @@
 <groupbox id="securityLevel-groupbox" data-category="panePrivacy" hidden="true">
-  <label><html:h2 data-l10n-id="security-level-header"/></label>
+  <label><html:h2/></label>
   <vbox data-subcategory="securitylevel" flex="1">
     <description flex="1">
-      <html:span data-l10n-id="security-level-overview" class="tail-with-learn-more"/>
-      <label data-l10n-id="security-level-learn-more"
+      <html:span id="securityLevel-overview" class="tail-with-learn-more"/>
+      <label id="securityLevel-learnMore"
              class="learnMore text-link"
              is="text-link"
              href="about:manual#security-settings"
@@ -12,61 +12,49 @@
     <radiogroup id="securityLevel-radiogroup">
       <vbox id="securityLevel-vbox-standard">
         <hbox>
-          <radio value="standard" data-l10n-id="security-level-standard-radio"/>
+          <radio value="standard"/>
           <vbox>
             <spacer flex="1"/>
-            <label class="securityLevel-customWarning" data-l10n-id="security-level-custom"/>
+            <label class="securityLevel-customWarning"/>
             <spacer flex="1"/>
           </vbox>
           <spacer flex="1"/>
         </hbox>
         <description flex="1" class="indent">
-          <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"/>
+          <html:span class="summary tail-with-learn-more"/>
+          <label class="securityLevel-restoreDefaults learnMore text-link"/>
         </description>
       </vbox>
       <vbox id="securityLevel-vbox-safer">
         <hbox>
-          <radio value="safer" data-l10n-id="security-level-safer-radio"/>
+          <radio value="safer"/>
           <vbox>
             <spacer flex="1"/>
-            <label class="securityLevel-customWarning" data-l10n-id="security-level-custom"/>
+            <label class="securityLevel-customWarning"/>
             <spacer flex="1"/>
           </vbox>
         </hbox>
         <description flex="1" class="indent">
-          <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"/>
+          <html:span class="summary tail-with-learn-more"/>
+          <label class="securityLevel-restoreDefaults learnMore text-link"/>
         </description>
         <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" data-l10n-id="security-level-safest-radio"/>
+          <radio value="safest"/>
           <vbox>
             <spacer flex="1"/>
-            <label class="securityLevel-customWarning" data-l10n-id="security-level-custom"/>
+            <label class="securityLevel-customWarning"/>
             <spacer flex="1"/>
           </vbox>
         </hbox>
         <description flex="1" class="indent">
-          <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"/>
+          <html:span class="summary tail-with-learn-more"/>
+          <label class="securityLevel-restoreDefaults learnMore text-link"/>
         </description>
         <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/components/securitylevel/jar.mn b/browser/components/securitylevel/jar.mn
index 61aa4169f9ece..ac8df00b15747 100644
--- a/browser/components/securitylevel/jar.mn
+++ b/browser/components/securitylevel/jar.mn
@@ -4,3 +4,8 @@ browser.jar:
     content/browser/securitylevel/securityLevelButton.css      (content/securityLevelButton.css)
     content/browser/securitylevel/securityLevelPreferences.css (content/securityLevelPreferences.css)
     content/browser/securitylevel/securityLevelIcon.svg        (content/securityLevelIcon.svg)
+
+securitylevel.jar:
+# See New Identity for further information on how this works
+% locale securitylevel en-US %locale/en-US/
+    locale/en-US/securityLevel.properties                      (locale/en-US/securityLevel.properties)
diff --git a/browser/components/securitylevel/locale/en-US/securityLevel.properties b/browser/components/securitylevel/locale/en-US/securityLevel.properties
new file mode 100644
index 0000000000000..01a51e67f7f5b
--- /dev/null
+++ b/browser/components/securitylevel/locale/en-US/securityLevel.properties
@@ -0,0 +1,30 @@
+# Generic terms
+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_custom = Custom
+security_level_restore = Restore Defaults
+security_level_learn_more = Learn more
+
+# Panel
+security_level_change = Change…
+security_level_standard_summary = All Tor Browser and website features are enabled.
+security_level_safer_summary = Disables website features that are often dangerous, causing some sites to lose functionality.
+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_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 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 = At the safer setting:
+security_level_list_safest = At the safest setting:
+# 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.
diff --git a/browser/installer/package-manifest.in b/browser/installer/package-manifest.in
index f32d574813a74..7b1ea43f8ef0e 100644
--- a/browser/installer/package-manifest.in
+++ b/browser/installer/package-manifest.in
@@ -261,6 +261,11 @@
 #endif
 @RESPATH@/browser/features/*
 
+; Base Browser
+ at RESPATH@/browser/chrome/securitylevel.manifest
+ at RESPATH@/browser/chrome/securitylevel/
+ at RESPATH@/browser/components/SecurityLevel.manifest
+
 ; [DevTools Startup Files]
 @RESPATH@/browser/chrome/devtools-startup at JAREXT@
 @RESPATH@/browser/chrome/devtools-startup.manifest
@@ -486,5 +491,3 @@ i686/gmp-clearkey/0.1/clearkey.dll
 ; build, which, practically speaking, is the case.
 @BINPATH@/gmp-clearkey/0.1/manifest.json
 #endif
-
- at RESPATH@/browser/components/SecurityLevel.manifest
diff --git a/browser/locales/en-US/browser/base-browser/securityLevel.ftl b/browser/locales/en-US/browser/base-browser/securityLevel.ftl
deleted file mode 100644
index ef1ca39a3d492..0000000000000
--- a/browser/locales/en-US/browser/base-browser/securityLevel.ftl
+++ /dev/null
@@ -1,66 +0,0 @@
--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