-  <link rel="stylesheet" href="chrome://browser/content/securitylevel/securityLevelPreferences.css" />

-#include ../securitylevel/content/securityLevelPreferences.inc.xhtml

-// TODO: module import via ChromeUtils.defineModuleGetter

-XPCOMUtils.defineLazyScriptGetter(

-  this,

-  ["SecurityLevelPreferences"],

-  "chrome://browser/content/securitylevel/securityLevel.js"

-);

-

-  /**

-   * Show the Security Level UI

-   */

-  _initSecurityLevel() {

-    SecurityLevelPreferences.init();

-    window.addEventListener("unload", () => SecurityLevelPreferences.uninit(), {

-      once: true,

-    });

-  },

-

-    this._initSecurityLevel();

-/**

- * Common methods for the desktop security level components.

- */

-export const SecurityLevelUIUtils = {

-  /**

-   * Create an element that gives a description of the security level. To be

-   * used in the settings.

-   *

-   * @param {string} level - The security level to describe.

-   * @param {Document} doc - The document where the element will be inserted.

-   *

-   * @returns {Element} - The newly created element.

-   */

-  createDescriptionElement(level, doc) {

-    const el = doc.createElement("div");

-    el.classList.add("security-level-description");

-

-    let l10nIdSummary;

-    let bullets;

-    switch (level) {

-      case "standard":

-        l10nIdSummary = "security-level-summary-standard";

-        break;

-      case "safer":

-        l10nIdSummary = "security-level-summary-safer";

-        bullets = [

-          "security-level-preferences-bullet-https-only-javascript",

-          "security-level-preferences-bullet-limit-font-and-symbols",

-          "security-level-preferences-bullet-limit-media",

-        ];

-        break;

-      case "safest":

-        l10nIdSummary = "security-level-summary-safest";

-        bullets = [

-          "security-level-preferences-bullet-disabled-javascript",

-          "security-level-preferences-bullet-limit-font-and-symbols-and-images",

-          "security-level-preferences-bullet-limit-media",

-        ];

-        break;

-      case "custom":

-        l10nIdSummary = "security-level-summary-custom";

-        break;

-      default:

-        throw Error(`Unhandled level: ${level}`);

-    }

-

-    const summaryEl = doc.createElement("div");

-    summaryEl.classList.add("security-level-summary");

-    doc.l10n.setAttributes(summaryEl, l10nIdSummary);

-

-    el.append(summaryEl);

-

-    if (!bullets) {

-      return el;

-    }

-

-    const listEl = doc.createElement("ul");

-    listEl.classList.add("security-level-description-extra");

-    // Add a mozilla styling class as well:

-    listEl.classList.add("privacy-extra-information");

-    for (const l10nId of bullets) {

-      const bulletEl = doc.createElement("li");

-      bulletEl.classList.add("security-level-description-bullet");

-

-      doc.l10n.setAttributes(bulletEl, l10nId);

-

-      listEl.append(bulletEl);

-    }

-

-    el.append(listEl);

-    return el;

-  },

-};

-  SecurityLevelUIUtils:

-    "moz-src:///browser/components/securitylevel/SecurityLevelUIUtils.sys.mjs",

-

-/*

-  Security Level Preferences Code

-

-  Code to handle init and update of security level section in about:preferences#privacy

-*/

-

-var SecurityLevelPreferences = {

-  _securityPrefsBranch: null,

-

-  /**

-   * The element that shows the current security level.

-   *

-   * @type {?Element}

-   */

-  _currentEl: null,

-

-  _populateXUL() {

-    this._currentEl = document.getElementById("security-level-current");

-    const changeButton = document.getElementById("security-level-change");

-    const badgeEl = this._currentEl.querySelector(

-      ".security-level-current-badge"

-    );

-

-    for (const { level, nameId } of [

-      { level: "standard", nameId: "security-level-panel-level-standard" },

-      { level: "safer", nameId: "security-level-panel-level-safer" },

-      { level: "safest", nameId: "security-level-panel-level-safest" },

-      { level: "custom", nameId: "security-level-panel-level-custom" },

-    ]) {

-      // Classes that control visibility:

-      // security-level-current-standard

-      // security-level-current-safer

-      // security-level-current-safest

-      // security-level-current-custom

-      const visibilityClass = `security-level-current-${level}`;

-      const nameEl = document.createElement("div");

-      nameEl.classList.add("security-level-name", visibilityClass);

-      document.l10n.setAttributes(nameEl, nameId);

-

-      const descriptionEl = SecurityLevelUIUtils.createDescriptionElement(

-        level,

-        document

-      );

-      descriptionEl.classList.add(visibilityClass);

-

-      this._currentEl.insertBefore(nameEl, badgeEl);

-      this._currentEl.insertBefore(descriptionEl, changeButton);

-    }

-

-    changeButton.addEventListener("click", () => {

-      this._openDialog();

-    });

-  },

-

-  _openDialog() {

-    gSubDialog.open(

-      "chrome://browser/content/securitylevel/securityLevelDialog.xhtml",

-      { features: "resizable=yes" }

-    );

-  },

-

-  _configUIFromPrefs() {

-    // Set a data-current-level attribute for showing the current security

-    // level, and hiding the rest.

-    this._currentEl.dataset.currentLevel =

-      SecurityLevelPrefs.securityLevelSummary;

-  },

-

-  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 */

-const { SecurityLevelUIUtils } = ChromeUtils.importESModule(

-  "moz-src:///browser/components/securitylevel/SecurityLevelUIUtils.sys.mjs"

-);

-   * A list of radio options and their containers.

-   * @type {?Array<{ container: Element, radio: Element }>}

-      this._radiogroup.querySelectorAll(".security-level-radio-container"),

-      container => {

-        return {

-          container,

-          radio: container.querySelector(".security-level-radio"),

-        };

-    for (const { container, radio } of this._radioOptions) {

-      const level = radio.value;

-      radio.id = `security-level-radio-${level}`;

-      const currentEl = container.querySelector(

-        ".security-level-current-badge"

-      );

-      currentEl.id = `security-level-current-badge-${level}`;

-      const descriptionEl = SecurityLevelUIUtils.createDescriptionElement(

-        level,

-        document

-      );

-      descriptionEl.classList.add("indent");

-      descriptionEl.id = `security-level-description-${level}`;

-

-      // Wait for the full translation of the element before adding it to the

-      // DOM. In particular, we want to make sure the elements have text before

-      // we measure the maxHeight below.

-      await document.l10n.translateFragment(descriptionEl);

-      document.l10n.pauseObserving();

-      container.append(descriptionEl);

-      document.l10n.resumeObserving();

-

-      if (level === this._prevLevel) {

-        currentEl.hidden = false;

-        // When the currentEl is visible, include it in the accessible name for

-        // the radio option.

-        // NOTE: The currentEl has an accessible name which includes punctuation

-        // to help separate it's content from the security level name.

-        // E.g. "Standard (Current level)".

-        radio.setAttribute("aria-labelledby", `${radio.id} ${currentEl.id}`);

-      } else {

-        currentEl.hidden = true;

-      }

-      // We point the accessible description to the wrapping

-      // .security-level-description element, rather than its children

-      // that define the actual text content. This means that when the

-      // privacy-extra-information is shown or hidden, its text content is

-      // included or excluded from the accessible description, respectively.

-      radio.setAttribute("aria-describedby", descriptionEl.id);

-    // We want to reserve the maximum height of the radiogroup so that the

-    // NOTE: At the time of implementation, at this point the dialog may not

-    // yet have the "subdialog" attribute, which means it is missing the

-    // common.css stylesheet from its shadow root, which effects the size of the

-    // .radio-check element and the font. Therefore, we have duplicated the

-    // import of common.css in SecurityLevelDialog.xhtml to ensure it is applied

-    // at this earlier stage.

-    for (const { container } of this._radioOptions) {

-      container.classList.add("selected");

-      container.classList.remove("selected");

-    } else {

-      this._radiogroup.selectedItem = null;

-    this._radiogroup.addEventListener("select", () => {

-    // Have the container's `selected` CSS class match the selection state of

-    // the radio elements.

-    for (const { container, radio } of this._radioOptions) {

-      container.classList.toggle("selected", radio.selected);

-      <!-- NOTE: We include common.css explicitly, rather than relying on

-         - the dialog's shadowroot importing it, which is late loaded in

-         - response to the dialog's "subdialog" attribute, which is set

-         - in response to DOMFrameContentLoaded.

-         - In particular, we need the .radio-check rule and font rules from

-         - common-shared.css to be in place when gSecurityLevelDialog.init is

-         - called, which will help ensure that the radio element has the correct

-         - size when we measure its bounding box. -->

-      <html:link

-        rel="stylesheet"

-        href="chrome://global/skin/in-content/common.css"

-      />

-        href="chrome://browser/content/securitylevel/securityLevelPreferences.css"

-    <radiogroup id="security-level-radiogroup" class="highlighting-group">

-      <html:div

-        class="security-level-radio-container security-level-grid privacy-detailedoption info-box-container"

-      >

-        <radio

-          class="security-level-radio security-level-name"

-          data-l10n-id="security-level-preferences-level-standard"

-        />

-        <html:div

-          class="security-level-current-badge"

-          data-l10n-id="security-level-preferences-current-badge"

-        ></html:div>

-      </html:div>

-      <html:div

-        class="security-level-radio-container security-level-grid privacy-detailedoption info-box-container"

-      >

-        <radio

-          class="security-level-radio security-level-name"

-          data-l10n-id="security-level-preferences-level-safer"

-        />

-        <html:div

-          class="security-level-current-badge"

-          data-l10n-id="security-level-preferences-current-badge"

-        ></html:div>

-      </html:div>

-      <html:div

-        class="security-level-radio-container security-level-grid privacy-detailedoption info-box-container"

-      >

-        <radio

-          class="security-level-radio security-level-name"

-          data-l10n-id="security-level-preferences-level-safest"

-        />

-        <html:div

-          class="security-level-current-badge"

-          data-l10n-id="security-level-preferences-current-badge"

-        ></html:div>

-      </html:div>

-    </radiogroup>

-.security-level-grid {

-  display: grid;

-  grid-template:

-    "icon name badge button" min-content

-    "icon summary summary button" auto

-    "icon extra extra ." auto

-    / max-content max-content 1fr max-content;

-}

-

-.security-level-icon {

-  grid-area: icon;

-  align-self: start;

-  width: var(--icon-size-large);

-  height: var(--icon-size-large);

-  -moz-context-properties: fill, stroke;

-  fill: var(--icon-color);

-  stroke: var(--icon-color-warning);

-  margin-block-start: var(--space-xsmall);

-  margin-inline-end: var(--space-large);

-}

-

-:-moz-locale-dir(rtl) .security-level-icon {

-  transform: scaleX(-1);

-}

-

-.security-level-current-badge {

-  grid-area: badge;

-  align-self: center;

-  justify-self: start;

-  white-space: nowrap;

-  background: var(--background-color-information);

-  color: inherit;

-  font-size: var(--font-size-small);

-  border-radius: var(--border-radius-circle);

-  margin-inline-start: var(--space-small);

-  padding-block: var(--space-xsmall);

-  padding-inline: var(--space-small);

-}

-

-.security-level-current-badge span {

-  /* Still accessible to screen reader, but not visual.

-   * Keep inline, but with no layout width. */

-  display: inline-block;

-  width: 1px;

-  margin-inline-end: -1px;

-  clip-path: inset(50%);

-}

-

-@media (prefers-contrast) and (not (forced-colors)) {

-  .security-level-current-badge {

-    /* Match the checkbox/radio colors. */

-    background: var(--color-accent-primary);

-    color: var(--button-text-color-primary);

-  }

-}

-

-@media (forced-colors) {

-  .security-level-current-badge {

-    /* Match the checkbox/radio/selected colors. */

-    background: SelectedItem;

-    color: SelectedItemText;

-  }

-}

-

-.security-level-name {

-  grid-area: name;

-  font-weight: var(--font-weight-bold);

-  align-self: center;

-  white-space: nowrap;

-}

-

-.security-level-description {

-  display: grid;

-  grid-column: summary-start / extra-end;

-  grid-row: summary-start / extra-end;

-  grid-template-rows: subgrid;

-  grid-template-columns: subgrid;

-  margin-block-start: var(--space-small);

-}

-

-.security-level-summary {

-  grid-area: summary;

-}

-

-.security-level-description-extra {

-  grid-area: extra;

-  margin-block: var(--space-medium) 0;

-  margin-inline: var(--space-large) 0;

-  padding: 0;

-}

-

-.security-level-description-bullet:not(:last-child) {

-  margin-block-end: var(--space-medium);

-}

-

-/* Tweak current security level display. */

-

-#security-level-current {

-  margin-block-start: var(--space-large);

-  background: var(--background-color-box);