Bug 40925: Implemented the Security Level component

This component adds a new Security Level toolbar button which visually
indicates the current global security level via icon (as defined by the
extensions.torbutton.security_slider pref), a drop-down hanger with a
short description of the current security level, and a new section in
the about:preferences#privacy page where users can change their current
security level. In addition, the hanger and the preferences page will
show a visual warning when the user has modified prefs associated with
the security level and provide a one-click 'Restore Defaults' button to
get the user back on recommended settings.

Bug 40125: Expose Security Level pref in GeckoView

browser/app/profile/001-base-profile.js

@@ -443,7 +443,7 @@ pref("intl.multilingual.downloadEnabled", false);
 pref("webextensions.storage.sync.enabled", false);
 
 // Toolbar layout
-pref("browser.uiCustomization.state", "{\"placements\":{\"widget-overflow-fixed-list\":[],\"PersonalToolbar\":[\"personal-bookmarks\"],\"nav-bar\":[\"back-button\",\"forward-button\",\"stop-reload-button\",\"urlbar-container\",\"downloads-button\"],\"TabsToolbar\":[\"tabbrowser-tabs\",\"new-tab-button\",\"alltabs-button\"],\"toolbar-menubar\":[\"menubar-items\"],\"PanelUI-contents\":[\"home-button\",\"edit-controls\",\"zoom-controls\",\"new-window-button\",\"save-page-button\",\"print-button\",\"bookmarks-menu-button\",\"history-panelmenu\",\"find-button\",\"preferences-button\",\"add-ons-button\",\"developer-button\"],\"addon-bar\":[\"addonbar-closebutton\",\"status-bar\"]},\"seen\":[\"developer-button\"],\"dirtyAreaCache\":[\"PersonalToolbar\",\"nav-bar\",\"TabsToolbar\",\"toolbar-menubar\"],\"currentVersion\":14,\"newElementCount\":1}");
+pref("browser.uiCustomization.state", "{\"placements\":{\"widget-overflow-fixed-list\":[],\"PersonalToolbar\":[\"personal-bookmarks\"],\"nav-bar\":[\"back-button\",\"forward-button\",\"stop-reload-button\",\"urlbar-container\",\"security-level-button\",\"downloads-button\"],\"TabsToolbar\":[\"tabbrowser-tabs\",\"new-tab-button\",\"alltabs-button\"],\"toolbar-menubar\":[\"menubar-items\"],\"PanelUI-contents\":[\"home-button\",\"edit-controls\",\"zoom-controls\",\"new-window-button\",\"save-page-button\",\"print-button\",\"bookmarks-menu-button\",\"history-panelmenu\",\"find-button\",\"preferences-button\",\"add-ons-button\",\"developer-button\"],\"addon-bar\":[\"addonbar-closebutton\",\"status-bar\"]},\"seen\":[\"developer-button\"],\"dirtyAreaCache\":[\"PersonalToolbar\",\"nav-bar\",\"TabsToolbar\",\"toolbar-menubar\"],\"currentVersion\":14,\"newElementCount\":1}");
 
 // Enforce certificate pinning, see: https://bugs.torproject.org/16206
 pref("security.cert_pinning.enforcement_level", 2);

browser/base/content/browser.js

@@ -223,6 +223,11 @@ XPCOMUtils.defineLazyScriptGetter(
   ["DownloadsButton", "DownloadsIndicatorView"],
   "chrome://browser/content/downloads/indicator.js"
 );
+XPCOMUtils.defineLazyScriptGetter(
+  this,
+  ["SecurityLevelButton"],
+  "chrome://browser/content/securitylevel/securityLevel.js"
+);
 XPCOMUtils.defineLazyScriptGetter(
   this,
   "gEditItemOverlay",
@@ -1772,6 +1777,9 @@ var gBrowserInit = {
     // doesn't flicker as the window is being shown.
     DownloadsButton.init();
 
+    // Init the SecuritySettingsButton
+    SecurityLevelButton.init();
+
     // Certain kinds of automigration rely on this notification to complete
     // their tasks BEFORE the browser window is shown. SessionStore uses it to
     // restore tabs into windows AFTER important parts like gMultiProcessBrowser
@@ -2492,6 +2500,8 @@ var gBrowserInit = {
 
     DownloadsButton.uninit();
 
+    SecurityLevelButton.uninit();
+
     gAccessibilityServiceIndicator.uninit();
 
     if (gToolbarKeyNavEnabled) {

browser/base/content/browser.xhtml

@@ -20,6 +20,8 @@
 <?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/tabbrowser.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/downloads/downloads.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/content/securitylevel/securityLevelPanel.css"?>
+<?xml-stylesheet href="chrome://browser/content/securitylevel/securityLevelButton.css"?>
 <?xml-stylesheet href="chrome://browser/content/places/places.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/usercontext/usercontext.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>

browser/base/content/main-popupset.inc.xhtml

@@ -534,6 +534,7 @@
 #include ../../components/controlcenter/content/protectionsPanel.inc.xhtml
 #include ../../components/downloads/content/downloadsPanel.inc.xhtml
 #include ../../../devtools/startup/enableDevToolsPopup.inc.xhtml
+#include ../../components/securitylevel/content/securityLevelPanel.inc.xhtml
 #include browser-allTabsMenu.inc.xhtml
 
   <tooltip id="dynamic-shortcut-tooltip"

browser/base/content/navigator-toolbox.inc.xhtml

@@ -405,6 +405,8 @@
         </box>
       </toolbarbutton>
 
+#include ../../components/securitylevel/content/securityLevelButton.inc.xhtml
+
       <toolbarbutton id="fxa-toolbar-menu-button" class="toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
                      badged="true"
                      onmousedown="gSync.toggleAccountPanel(this, event)"

browser/components/moz.build

@@ -49,6 +49,7 @@ DIRS += [
     "resistfingerprinting",
     "screenshots",
     "search",
+    "securitylevel",
     "sessionstore",
     "shell",
     "syncedtabs",

browser/components/preferences/preferences.xhtml

@@ -13,6 +13,7 @@
 <?xml-stylesheet href="chrome://browser/skin/preferences/search.css"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/containers.css"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/privacy.css"?>
+<?xml-stylesheet href="chrome://browser/content/securitylevel/securityLevelPreferences.css"?>
 
 <!DOCTYPE html>
 

browser/components/preferences/privacy.inc.xhtml

@@ -1038,6 +1038,8 @@
   <html:h1 data-l10n-id="security-header"/>
 </hbox>
 
+#include ../securitylevel/content/securityLevelPreferences.inc.xhtml
+
 <!-- addons, forgery (phishing) UI Security -->
 <groupbox id="browsingProtectionGroup" data-category="panePrivacy" hidden="true">
   <label><html:h2 data-l10n-id="security-browsing-protection"/></label>

browser/components/preferences/privacy.js

@@ -48,6 +48,13 @@ XPCOMUtils.defineLazyGetter(this, "AlertsServiceDND", function() {
   }
 });
 
+// TODO: module import via ChromeUtils.defineModuleGetter
+XPCOMUtils.defineLazyScriptGetter(
+  this,
+  ["SecurityLevelPreferences"],
+  "chrome://browser/content/securitylevel/securityLevel.js"
+);
+
 XPCOMUtils.defineLazyPreferenceGetter(
   this,
   "OS_AUTH_ENABLED",
@@ -314,6 +321,16 @@ function initTCPRolloutSection() {
 var gPrivacyPane = {
   _pane: null,
 
+  /**
+   * Show the Security Level UI
+   */
+  _initSecurityLevel() {
+    SecurityLevelPreferences.init();
+    window.addEventListener("unload", () => SecurityLevelPreferences.uninit(), {
+      once: true,
+    });
+  },
+
   /**
    * Whether the prompt to restart Firefox should appear when changing the autostart pref.
    */
@@ -523,6 +540,7 @@ var gPrivacyPane = {
     this.trackingProtectionReadPrefs();
     this.networkCookieBehaviorReadPrefs();
     this._initTrackingProtectionExtensionControl();
+    this._initSecurityLevel();
 
     Services.telemetry.setEventRecordingEnabled("pwmgr", true);
 

browser/components/securitylevel/content/securityLevel.js

+"use strict";
+
+/* global AppConstants, Services, openPreferences, XPCOMUtils */
+
+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_open_settings: "Settings…",
+    security_level_standard_summary:
+      "All 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_heading: "Custom security level configured",
+    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
+
+  Getters and Setters for relevant torbutton prefs
+*/
+var SecurityLevelPrefs = {
+  SecurityLevels: Object.freeze({
+    safest: 1,
+    safer: 2,
+    standard: 4,
+  }),
+  security_slider_pref: "browser.security_level.security_slider",
+  security_custom_pref: "browser.security_level.security_custom",
+
+  get securityLevel() {
+    // Set the default return value to 0, which won't match anything in
+    // SecurityLevels.
+    const val = Services.prefs.getIntPref(this.security_slider_pref, 0);
+    return Object.entries(this.SecurityLevels).find(
+      entry => entry[1] === val
+    )?.[0];
+  },
+
+  set securityLevel(level) {
+    const val = this.SecurityLevels[level];
+    if (val !== undefined) {
+      Services.prefs.setIntPref(this.security_slider_pref, val);
+    }
+  },
+
+  get securityCustom() {
+    return Services.prefs.getBoolPref(this.security_custom_pref);
+  },
+
+  set securityCustom(val) {
+    Services.prefs.setBoolPref(this.security_custom_pref, val);
+  },
+}; /* Security Level Prefs */
+
+/*
+  Security Level Button Code
+
+  Controls init and update of the security level toolbar button
+*/
+
+var SecurityLevelButton = {
+  _securityPrefsBranch: null,
+  /**
+   * Whether we have added popup listeners to the panel.
+   *
+   * @type {boolean}
+   */
+  _panelPopupListenersSetup: false,
+  /**
+   * The toolbar button element.
+   *
+   * @type {Element}
+   */
+  _button: null,
+  /**
+   * The button that the panel should point to. Either the toolbar button or the
+   * overflow button.
+   *
+   * @type {Element}
+   */
+  _anchorButton: null,
+
+  _configUIFromPrefs() {
+    const level = SecurityLevelPrefs.securityLevel;
+    if (!level) {
+      return;
+    }
+    const customStr = SecurityLevelPrefs.securityCustom ? "_custom" : "";
+    this._button.setAttribute("level", `${level}${customStr}`);
+    this._button.setAttribute(
+      "tooltiptext",
+      SecurityLevelStrings[`security_level_tooltip_${level}`]
+    );
+  },
+
+  /**
+   * Open the panel popup for the button.
+   */
+  openPopup() {
+    let anchorNode;
+    const overflowPanel = document.getElementById("widget-overflow");
+    if (overflowPanel.contains(this._button)) {
+      // We are in the overflow panel.
+      // We first close the overflow panel, otherwise focus will not return to
+      // the nav-bar-overflow-button if the security level panel is closed with
+      // "Escape" (the navigation toolbar does not track focus when a panel is
+      // opened whilst another is already open).
+      // NOTE: In principle, using PanelMultiView would allow us to open panels
+      // from within another panel. However, when using panelmultiview for the
+      // security level panel, tab navigation was broken within the security
+      // level panel. PanelMultiView may be set up to work with a menu-like
+      // panel rather than our dialog-like panel.
+      overflowPanel.hidePopup();
+      this._anchorButton = document.getElementById("nav-bar-overflow-button");
+      anchorNode = this._anchorButton.icon;
+    } else {
+      this._anchorButton = this._button;
+      anchorNode = this._button.badgeStack;
+    }
+
+    const panel = SecurityLevelPanel.panel;
+    if (!this._panelPopupListenersSetup) {
+      this._panelPopupListenersSetup = true;
+      // NOTE: We expect the _anchorButton to not change whilst the popup is
+      // open.
+      panel.addEventListener("popupshown", () => {
+        this._anchorButton.setAttribute("open", "true");
+      });
+      panel.addEventListener("popuphidden", () => {
+        this._anchorButton.removeAttribute("open");
+      });
+    }
+
+    panel.openPopup(anchorNode, "bottomcenter topright", 0, 0, false);
+  },
+
+  init() {
+    // We first search in the DOM for the security level button. If it does not
+    // exist it may be in the toolbox palette. We still want to return the
+    // button in the latter case to allow it to be initialized or adjusted in
+    // case it is added back through customization.
+    this._button =
+      document.getElementById("security-level-button") ||
+      window.gNavToolbox.palette.querySelector("#security-level-button");
+    // Set a label to be be used as the accessible name, and to be shown in the
+    // overflow menu and during customization.
+    this._button.setAttribute("label", SecurityLevelStrings.security_level);
+    this._button.addEventListener("command", () => this.openPopup());
+    // set the initial class based off of the current pref
+    this._configUIFromPrefs();
+
+    this._securityPrefsBranch = Services.prefs.getBranch(
+      "browser.security_level."
+    );
+    this._securityPrefsBranch.addObserver("", this);
+
+    SecurityLevelPanel.init();
+  },
+
+  uninit() {
+    this._securityPrefsBranch.removeObserver("", this);
+    this._securityPrefsBranch = null;
+
+    SecurityLevelPanel.uninit();
+  },
+
+  observe(subject, topic, data) {
+    switch (topic) {
+      case "nsPref:changed":
+        if (data === "security_slider" || data === "security_custom") {
+          this._configUIFromPrefs();
+        }
+        break;
+    }
+  },
+}; /* SecurityLevelButton */
+
+/*
+  Security Level Panel Code
+
+  Controls init and update of the panel in the security level hanger
+*/
+
+var SecurityLevelPanel = {
+  _securityPrefsBranch: null,
+  _populated: false,
+
+  _populateXUL() {
+    this._elements = {
+      panel: document.getElementById("securityLevel-panel"),
+      background: document.getElementById("securityLevel-background"),
+      levelName: document.getElementById("securityLevel-level"),
+      customName: document.getElementById("securityLevel-custom"),
+      summary: document.getElementById("securityLevel-summary"),
+      restoreDefaultsButton: document.getElementById(
+        "securityLevel-restoreDefaults"
+      ),
+      settingsButton: document.getElementById("securityLevel-settings"),
+    };
+
+    document.getElementById("securityLevel-header").textContent =
+      SecurityLevelStrings.security_level;
+    this._elements.customName.textContent =
+      SecurityLevelStrings.security_level_custom;
+    const learnMoreEl = document.getElementById("securityLevel-learnMore");
+    learnMoreEl.textContent = SecurityLevelStrings.security_level_learn_more;
+    learnMoreEl.addEventListener("click", event => {
+      window.openTrustedLinkIn(learnMoreEl.href, "tab");
+      this.hide();
+      event.preventDefault();
+    });
+    this._elements.restoreDefaultsButton.textContent =
+      SecurityLevelStrings.security_level_restore;
+    this._elements.settingsButton.textContent =
+      SecurityLevelStrings.security_level_open_settings;
+
+    this._elements.restoreDefaultsButton.addEventListener("command", () => {
+      this.restoreDefaults();
+    });
+    this._elements.settingsButton.addEventListener("command", () => {
+      this.openSecuritySettings();
+    });
+
+    this._elements.panel.addEventListener("popupshown", () => {
+      // Bring focus into the panel by focusing the default button.
+      this._elements.panel.querySelector('button[default="true"]').focus();
+    });
+
+    this._populated = true;
+    this._configUIFromPrefs();
+  },
+
+  _configUIFromPrefs() {
+    if (!this._populated) {
+      console.warn("_configUIFromPrefs before XUL was populated.");
+      return;
+    }
+
+    // get security prefs
+    const level = SecurityLevelPrefs.securityLevel;
+    const custom = SecurityLevelPrefs.securityCustom;
+
+    // only visible when user is using custom settings
+    this._elements.customName.hidden = !custom;
+    this._elements.restoreDefaultsButton.hidden = !custom;
+    if (custom) {
+      this._elements.settingsButton.removeAttribute("default");
+      this._elements.restoreDefaultsButton.setAttribute("default", "true");
+    } else {
+      this._elements.settingsButton.setAttribute("default", "true");
+      this._elements.restoreDefaultsButton.removeAttribute("default");
+    }
+
+    // Descriptions change based on security level
+    this._elements.background.setAttribute("level", level);
+    this._elements.levelName.textContent =
+      SecurityLevelStrings[`security_level_${level}`];
+    this._elements.summary.textContent = custom
+      ? SecurityLevelStrings.security_level_custom_summary
+      : SecurityLevelStrings[`security_level_${level}_summary`];
+  },
+
+  /**
+   * The popup element.
+   *
+   * @type {MozPanel}
+   */
+  get panel() {
+    if (!this._populated) {
+      this._populateXUL();
+    }
+    return this._elements.panel;
+  },
+
+  init() {
+    this._securityPrefsBranch = Services.prefs.getBranch(
+      "browser.security_level."
+    );
+    this._securityPrefsBranch.addObserver("", this);
+  },
+
+  uninit() {
+    this._securityPrefsBranch.removeObserver("", this);
+    this._securityPrefsBranch = null;
+  },
+
+  hide() {
+    this._elements.panel.hidePopup();
+  },
+
+  restoreDefaults() {
+    SecurityLevelPrefs.securityCustom = false;
+    // Move focus to the settings button since restore defaults button will
+    // become hidden.
+    this._elements.settingsButton.focus();
+  },
+
+  openSecuritySettings() {
+    openPreferences("privacy-securitylevel");
+    this.hide();
+  },
+
+  // callback when prefs change
+  observe(subject, topic, data) {
+    switch (topic) {
+      case "nsPref:changed":
+        if (data == "security_slider" || data == "security_custom") {
+          this._configUIFromPrefs();
+        }
+        break;
+    }
+  },
+}; /* SecurityLevelPanel */
+
+/*
+  Security Level Preferences Code
+
+  Code to handle init and update of security level section in about:preferences#privacy
+*/
+
+var SecurityLevelPreferences = {
+  _securityPrefsBranch: null,
+  /**
+   * The notification box shown when the user has a custom security setting.
+   *
+   * @type {Element}
+   */
+  _customNotification: null,
+  /**
+   * The radiogroup for this preference.
+   *
+   * @type {Element}
+   */
+  _radiogroup: null,
+  /**
+   * A list of radio options and their containers.
+   *
+   * @type {Array<Object>}
+   */
+  _radioOptions: null,
+
+  _populateXUL() {
+    this._customNotification = document.getElementById(
+      "securityLevel-customNotification"
+    );
+    this._radiogroup = document.getElementById("securityLevel-radiogroup");
+
+    document.querySelector("#securityLevel-groupbox h2").textContent =
+      SecurityLevelStrings.security_level;
+    document.getElementById("securityLevel-overview").textContent =
+      SecurityLevelStrings.security_level_overview;
+    document
+      .getElementById("securityLevel-learnMore")
+      .setAttribute("value", SecurityLevelStrings.security_level_learn_more);
+
+    document.getElementById("securityLevel-customHeading").textContent =
+      SecurityLevelStrings.security_level_custom_heading;
+    document.getElementById("securityLevel-customDescription").textContent =
+      SecurityLevelStrings.security_level_custom_summary;
+    const restoreDefaultsButton = document.getElementById(
+      "securityLevel-restoreDefaults"
+    );
+    restoreDefaultsButton.textContent =
+      SecurityLevelStrings.security_level_restore;
+
+    this._radioOptions = Array.from(
+      this._radiogroup.querySelectorAll(".securityLevel-radio-option"),
+      container => {
+        return { container, radio: container.querySelector("radio") };
+      }
+    );
+    const descListItemsMap = {
+      safer: [
+        SecurityLevelStrings.security_level_js_https_only,
+        SecurityLevelStrings.security_level_limit_typography,
+        SecurityLevelStrings.security_level_limit_media,
+      ],
+      safest: [
+        SecurityLevelStrings.security_level_js_disabled,
+        SecurityLevelStrings.security_level_limit_typography_svg,
+        SecurityLevelStrings.security_level_limit_media,
+      ],
+    };
+    for (const { container, radio } of this._radioOptions) {
+      const level = radio.value;
+      radio.setAttribute(
+        "label",
+        SecurityLevelStrings[`security_level_${level}`]
+      );
+      container.querySelector(".summary").textContent =
+        SecurityLevelStrings[`security_level_${level}_summary`];
+      const descListItems = descListItemsMap[level];
+      if (!descListItems) {
+        continue;
+      }
+      const descrList = container.querySelector(
+        ".securityLevel-descriptionList"
+      );
+      // TODO: Add the elements in securityLevelPreferences.inc.xhtml again
+      // when we switch to Fluent
+      for (const text of descListItems) {
+        let elem = document.createXULElement("description");
+        elem.textContent = text;
+        elem.className = "indent";
+        descrList.append(elem);
+      }
+    }
+
+    restoreDefaultsButton.addEventListener("command", () => {
+      SecurityLevelPrefs.securityCustom = false;
+    });
+    this._radiogroup.addEventListener("select", () => {
+      SecurityLevelPrefs.securityLevel = this._radiogroup.value;
+    });
+  },
+
+  _configUIFromPrefs() {
+    this._radiogroup.value = SecurityLevelPrefs.securityLevel;
+    const isCustom = SecurityLevelPrefs.securityCustom;
+    this._radiogroup.disabled = isCustom;
+    this._customNotification.hidden = !isCustom;
+    // Have the container's selection CSS class match the selection state of the
+    // radio elements.
+    for (const { container, radio } of this._radioOptions) {
+      container.classList.toggle(
+        "securityLevel-radio-option-selected",
+        radio.selected
+      );
+    }
+  },
+
+  init() {
+    // populate XUL with localized strings
+    this._populateXUL();
+
+    // read prefs and populate UI
+    this._configUIFromPrefs();
+
+    // register for pref chagnes
+    this._securityPrefsBranch = Services.prefs.getBranch(
+      "browser.security_level."
+    );
+    this._securityPrefsBranch.addObserver("", this);
+  },
+
+  uninit() {
+    // unregister for pref change events
+    this._securityPrefsBranch.removeObserver("", this);
+    this._securityPrefsBranch = null;
+  },
+
+  // callback for when prefs change
+  observe(subject, topic, data) {
+    switch (topic) {
+      case "nsPref:changed":
+        if (data == "security_slider" || data == "security_custom") {
+          this._configUIFromPrefs();
+        }
+        break;
+    }
+  },
+}; /* SecurityLevelPreferences */

browser/components/securitylevel/content/securityLevelButton.css

+toolbarbutton#security-level-button[level="standard"] {
+  list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");
+}
+toolbarbutton#security-level-button[level="safer"] {
+  list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");
+}
+toolbarbutton#security-level-button[level="safest"] {
+  list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");
+}
+toolbarbutton#security-level-button[level="standard_custom"] {
+  list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard_custom");
+}
+toolbarbutton#security-level-button[level="safer_custom"] {
+  list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer_custom");
+}
+toolbarbutton#security-level-button[level="safest_custom"] {
+  list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest_custom");
+}
\ No newline at end of file

browser/components/securitylevel/content/securityLevelButton.inc.xhtml

+<toolbarbutton id="security-level-button"
+               class="toolbarbutton-1 chromeclass-toolbar-additional"
+               badged="true"
+               removable="true"
+               cui-areatype="toolbar"/>

browser/components/securitylevel/content/securityLevelIcon.svg

+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+  </style>
+  <defs>
+    <g id="standard_icon" stroke="none" stroke-width="1">
+      <path clip-rule="evenodd" d="m8.49614.283505c-.30743-.175675-.68485-.175675-.99228.000001l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 4.0133-.9164 7-6 7-10v-1.41968c0-.35886-.1923-.6902-.5039-.86824zm-.49614 1.216495-5.75 3.28571v1.2746c0 1.71749.65238 3.7522 1.78726 5.46629 1.07287 1.6204 2.47498 2.8062 3.96274 3.2425 1.48776-.4363 2.8899-1.6221 3.9627-3.2425 1.1349-1.71409 1.7873-3.7488 1.7873-5.46629v-1.2746z" fill-rule="evenodd" />
+    </g>
+    <g id="safer_icon" stroke="none" stroke-width="1">
+      <path clip-rule="evenodd" d="m8.49614.283505c-.30743-.175675-.68485-.175675-.99228.000001l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 4.0133-.9164 7-6 7-10v-1.41968c0-.35886-.1923-.6902-.5039-.86824zm-.49614 1.216495-5.75 3.28571v1.2746c0 1.71749.65238 3.7522 1.78726 5.46629 1.07287 1.6204 2.47498 2.8062 3.96274 3.2425 1.48776-.4363 2.8899-1.6221 3.9627-3.2425 1.1349-1.71409 1.7873-3.7488 1.7873-5.46629v-1.2746z" fill-rule="evenodd"/>
+      <path d="m3.5 6.12062v-.40411c0-.08972.04807-.17255.12597-.21706l4-2.28572c.16666-.09523.37403.02511.37403.21707v10.0766c-1.01204-.408-2.054-1.3018-2.92048-2.6105-1.02134-1.54265-1.57952-3.34117-1.57952-4.77628z"/>
+    </g>
+    <g id="safest_icon" stroke="none" stroke-width="1">
+      <path clip-rule="evenodd" d="m8.49614.283505c-.30743-.175675-.68485-.175675-.99228.000001l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 4.0133-.9164 7-6 7-10v-1.41968c0-.35886-.1923-.6902-.5039-.86824zm-.49614 1.216495-5.75 3.28571v1.2746c0 1.71749.65238 3.7522 1.78726 5.46629 1.07287 1.6204 2.47498 2.8062 3.96274 3.2425 1.48776-.4363 2.8899-1.6221 3.9627-3.2425 1.1349-1.71409 1.7873-3.7488 1.7873-5.46629v-1.2746z" fill-rule="evenodd"/>
+      <path d="m3.5 6.12062v-.40411c0-.08972.04807-.17255.12597-.21706l4.25-2.42857c.07685-.04392.17121-.04392.24806 0l4.24997 2.42857c.0779.04451.126.12734.126.21706v.40411c0 1.43511-.5582 3.23363-1.5795 4.77628-.8665 1.3087-1.90846 2.2025-2.9205 2.6105-1.01204-.408-2.054-1.3018-2.92048-2.6105-1.02134-1.54265-1.57952-3.34117-1.57952-4.77628z"/>
+    </g>
+    <g id="standard_custom_icon" stroke="none" stroke-width="1">
+      <path d="m9.37255.784312-.87641-.500806c-.30743-.175676-.68485-.175676-.99228 0l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 3.7599-.8585 6.6186-5.3745 6.9647-9.23043-.4008.20936-.8392.35666-1.3024.42914-.2132 1.43414-.8072 2.98009-1.6996 4.32789-1.0728 1.6204-2.47494 2.8062-3.9627 3.2425-1.48776-.4363-2.88987-1.6221-3.96274-3.2425-1.13488-1.71409-1.78726-3.7488-1.78726-5.46629v-1.2746l5.75-3.28571.86913.49664c.10502-.43392.27664-.84184.50342-1.212328z"/>
+      <circle cx="13" cy="3" fill="#ffbd2e" r="3"/>
+    </g>
+    <g id="safer_custom_icon" stroke="none" stroke-width="1">
+      <path d="m9.37255.784312-.87641-.500806c-.30743-.175676-.68485-.175676-.99228 0l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 3.7599-.8585 6.6186-5.3745 6.9647-9.23043-.4008.20936-.8392.35666-1.3024.42914-.2132 1.43414-.8072 2.98009-1.6996 4.32789-1.0728 1.6204-2.47494 2.8062-3.9627 3.2425-1.48776-.4363-2.88987-1.6221-3.96274-3.2425-1.13488-1.71409-1.78726-3.7488-1.78726-5.46629v-1.2746l5.75-3.28571.86913.49664c.10502-.43392.27664-.84184.50342-1.212328z"/>
+      <path d="m3.5 6.12062v-.40411c0-.08972.04807-.17255.12597-.21706l4-2.28572c.16666-.09523.37403.02511.37403.21707v10.0766c-1.01204-.408-2.054-1.3018-2.92048-2.6105-1.02134-1.54265-1.57952-3.34117-1.57952-4.77628z"/>
+      <circle cx="13" cy="3" fill="#ffbd2e" r="3"/>
+    </g>
+    <g id="safest_custom_icon" stroke="none" stroke-width="1">
+      <path d="m9.37255.784312-.87641-.500806c-.30743-.175676-.68485-.175676-.99228 0l-6 3.428574c-.31157.17804-.50386.50938-.50386.86824v1.41968c0 4 2.98667 9.0836 7 10 3.7599-.8585 6.6186-5.3745 6.9647-9.23043-.4008.20936-.8392.35666-1.3024.42914-.2132 1.43414-.8072 2.98009-1.6996 4.32789-1.0728 1.6204-2.47494 2.8062-3.9627 3.2425-1.48776-.4363-2.88987-1.6221-3.96274-3.2425-1.13488-1.71409-1.78726-3.7488-1.78726-5.46629v-1.2746l5.75-3.28571.86913.49664c.10502-.43392.27664-.84184.50342-1.212328z"/>
+      <path d="m8.77266 3.44151-.64863-.37064c-.07685-.04392-.17121-.04392-.24806 0l-4.25 2.42857c-.0779.04451-.12597.12735-.12597.21706v.40412c0 1.4351.55818 3.23362 1.57952 4.77618.86648 1.3087 1.90844 2.2026 2.92048 2.6106 1.01204-.408 2.054-1.3018 2.9205-2.6106.7761-1.17217 1.2847-2.49215 1.4843-3.68816-1.9219-.26934-3.43158-1.82403-3.63214-3.76713z"/>
+      <circle cx="13" cy="3" fill="#ffbd2e" r="3"/>
+    </g>
+  </defs>
+  <use id="standard" fill="context-fill" fill-opacity="context-fill-opacity" href="#standard_icon" />
+  <use id="safer" fill="context-fill" fill-opacity="context-fill-opacity" href="#safer_icon" />
+  <use id="safest" fill="context-fill" fill-opacity="context-fill-opacity" href="#safest_icon" />
+  <use id="standard_custom" fill="context-fill" fill-opacity="context-fill-opacity" href="#standard_custom_icon" />
+  <use id="safer_custom" fill="context-fill" fill-opacity="context-fill-opacity" href="#safer_custom_icon" />
+  <use id="safest_custom" fill="context-fill" fill-opacity="context-fill-opacity" href="#safest_custom_icon" />
+</svg>

browser/components/securitylevel/content/securityLevelPanel.css

+/* Security Level CSS */
+
+#securityLevel-background {
+  /* xul:vbox with display: block will be correctly measured in size by the
+   * parent xul:panel, with line-wrapping taken into account, and allocated the
+   * required space. */
+  display: block;
+  min-height: 10em;
+  padding-inline: 16px;
+  background-repeat: no-repeat;
+  background-position-y: top 0.4em;
+  /* Icon center should be in-line with end padding.
+   * We set the right-to-left position here, and the left-to-right position
+   * below. */
+  --background-inline-offset: calc(16px - 4.5em);
+  background-position-x: left var(--background-inline-offset);
+  background-size: 9em 9em;
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 1;
+  fill: var(--button-bgcolor);
+}
+
+/* NOTE: Use ":dir" instead of ":-moz-locale-dir" when panel switches to HTML. */
+#securityLevel-background:-moz-locale-dir(ltr) {
+  background-position-x: right var(--background-inline-offset);
+}
+
+#securityLevel-background[level="standard"] {
+  background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");
+}
+
+#securityLevel-background[level="safer"] {
+  background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");
+}
+
+#securityLevel-background[level="safest"] {
+  background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");
+}
+
+/* Override margin in panelUI-shared.css */
+#securityLevel-panel toolbarseparator#securityLevel-separator {
+  margin-inline: 16px;
+}
+
+#securityLevel-level {
+  font-size: 1.25em;
+  font-weight: 600;
+}
+
+#securityLevel-custom {
+  border-radius: 4px;
+  background-color: var(--yellow-50);
+  color: black;
+  padding: 0.4em 0.5em;
+  margin-inline-start: 1em;
+}
+
+#securityLevel-summary {
+  padding-inline-end: 5em;
+  max-width: 20em;
+}

browser/components/securitylevel/content/securityLevelPanel.inc.xhtml

+<panel id="securityLevel-panel"
+       role="dialog"
+       aria-labelledby="securityLevel-header"
+       aria-describedby="securityLevel-subheading securityLevel-summary"
+       type="arrow"
+       orient="vertical"
+       level="top"
+       class="panel-no-padding">
+  <box class="panel-header">
+    <html:h1 id="securityLevel-header"></html:h1>
+  </box>
+  <toolbarseparator id="securityLevel-separator"></toolbarseparator>
+  <vbox id="securityLevel-background" class="panel-subview-body">
+    <html:p id="securityLevel-subheading">
+      <html:span id="securityLevel-level"></html:span>
+      <html:span id="securityLevel-custom"></html:span>
+    </html:p>
+    <html:p id="securityLevel-summary"></html:p>
+    <html:a id="securityLevel-learnMore" href="about:manual#security-settings">
+    </html:a>
+  </vbox>
+  <hbox class="panel-footer">
+    <button id="securityLevel-settings"/>
+    <button id="securityLevel-restoreDefaults"/>
+  </hbox>
+</panel>

browser/components/securitylevel/content/securityLevelPreferences.css

+#securityLevel-groupbox {
+  --section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent);
+}
+
+#securityLevel-customNotification {
+  /* Spacing similar to #fpiIncompatibilityWarning. */
+  margin-block: 16px;
+}
+
+.info-icon.securityLevel-custom-warning-icon {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+}
+
+#securityLevel-customHeading {
+  font-weight: bold;
+}
+
+/* Overwrite indent rule from preferences.css */
+#securityLevel-radiogroup description.indent {
+  color: var(--in-content-page-color);
+}
+
+#securityLevel-radiogroup radio {
+  font-weight: bold;
+}
+
+#securityLevel-radiogroup[disabled] {
+  opacity: 0.5;
+}
+
+/* Overwrite the rule in common-shared.css so we don't get 0.25 opacity overall
+ * on the radio text. */
+#securityLevel-radiogroup[disabled] radio[disabled] {
+  opacity: 1.0;
+}
+
+.securityLevel-radio-option {
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 4px;
+  margin: 3px 0;
+  padding: 9px;
+}
+
+.securityLevel-radio-option.securityLevel-radio-option-selected {
+  background-color: var(--section-highlight-background-color);
+  border: 1px solid var(--in-content-accent-color);
+
+}
+
+.securityLevel-radio-option:not(
+  .securityLevel-radio-option-selected
+) .securityLevel-descriptionList {
+  display: none;
+}
+
+.securityLevel-descriptionList description {
+  display: list-item;
+}

browser/components/securitylevel/content/securityLevelPreferences.inc.xhtml

+<groupbox id="securityLevel-groupbox"
+          data-category="panePrivacy"
+          data-subcategory="securitylevel"
+          hidden="true">
+  <label><html:h2></html:h2></label>
+  <vbox flex="1">
+    <description flex="1">
+      <html:span id="securityLevel-overview" class="tail-with-learn-more">
+      </html:span>
+      <label id="securityLevel-learnMore"
+             class="learnMore text-link"
+             is="text-link"
+             href="about:manual#security-settings"
+             useoriginprincipal="true"/>
+    </description>
+    <hbox id="securityLevel-customNotification"
+          class="info-box-container"
+          flex="1">
+      <hbox class="info-icon-container">
+        <image class="info-icon securityLevel-custom-warning-icon"/>
+      </hbox>
+      <vbox flex="1">
+        <label id="securityLevel-customHeading"/>
+        <description id="securityLevel-customDescription" flex="1"/>
+      </vbox>
+      <hbox align="center">
+        <button id="securityLevel-restoreDefaults"/>
+      </hbox>
+    </hbox>
+    <radiogroup id="securityLevel-radiogroup">
+      <vbox class="securityLevel-radio-option">
+        <radio value="standard"
+               aria-describedby="securityLevelSummary-standard"/>
+        <vbox id="securityLevelSummary-standard">
+          <description class="summary indent" flex="1"/>
+        </vbox>
+      </vbox>
+      <vbox class="securityLevel-radio-option">
+        <!-- NOTE: We point the accessible description to the wrapping vbox
+          - rather than its first description element. This means that when the
+          - securityLevel-descriptionList is shown or hidden, its text content
+          - is included or excluded from the accessible description,
+          - respectively. -->
+        <radio value="safer"
+               aria-describedby="securityLevelSummary-safer"/>
+        <vbox id="securityLevelSummary-safer">
+          <description class="summary indent" flex="1"/>
+          <vbox class="securityLevel-descriptionList indent"/>
+        </vbox>
+      </vbox>
+      <vbox class="securityLevel-radio-option">
+        <radio value="safest"
+               aria-describedby="securityLevelSummary-safest"/>
+        <vbox id="securityLevelSummary-safest">
+          <description class="summary indent" flex="1"/>
+          <vbox class="securityLevel-descriptionList indent"/>
+        </vbox>
+      </vbox>
+    </radiogroup>
+  </vbox>
+</groupbox>

browser/components/securitylevel/jar.mn

+browser.jar:
+    content/browser/securitylevel/securityLevel.js             (content/securityLevel.js)
+    content/browser/securitylevel/securityLevelPanel.css       (content/securityLevelPanel.css)
+    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)

browser/components/securitylevel/locale/en-US/securityLevel.properties

+# 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 button that takes the user to the security level settings in
+# about:preferences#privacy
+security_level_open_settings = Settings…
+security_level_change = Change…
+security_level_standard_summary = All 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_heading = Custom security level configured
+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.

browser/components/securitylevel/moz.build

+JAR_MANIFESTS += ["jar.mn"]