GitLab

at 2025-07-30T16:08:38+01:00

fixup! BB 40925: Implemented the Security Level component

TB 43844: Flip the security level shield icon for RTL.

We also do some minor clean up in the areas we touch.

   _populateXUL() {

     this._elements = {

       panel: document.getElementById("securityLevel-panel"),

-      background: document.getElementById("securityLevel-background"),

       levelName: document.getElementById("securityLevel-level"),

       summary: document.getElementById("securityLevel-summary"),

     };

     const level = SecurityLevelPrefs.securityLevelSummary;

     // Descriptions change based on security level

-    this._elements.background.setAttribute("level", level);

+    this._elements.panel.setAttribute("level", level);

     let l10nIdLevel;

     let l10nIdSummary;

     switch (level) {

-toolbarbutton#security-level-button[level="standard"] {

+#security-level-button[level="standard"] {

   list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");

 }

-toolbarbutton#security-level-button[level="safer"] {

+

+#security-level-button[level="safer"] {

   list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");

 }

-toolbarbutton#security-level-button[level="safest"] {

+

+#security-level-button[level="safest"] {

   list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");

 }

-toolbarbutton#security-level-button[level="custom"] {

+

+#security-level-button[level="custom"] {

   list-style-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard_custom");

 }

+

+#security-level-button:-moz-locale-dir(rtl) .toolbarbutton-icon {

+  transform: scaleX(-1);

+}
 #securityLevel-background {

   min-height: 10em;

   padding-inline: 16px;

-  padding-block: 16px 8px;

-  gap: 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;

+  column-gap: 0.5em;

+  display: grid;

+  grid-template:

+    "top-pad icon" 16px

+    "title icon" auto

+    "body icon" auto

+    "learn-more icon" auto

+    "bottom-pad icon" minmax(8px, 1fr)

+    / auto auto;

+}

+

+#securityLevel-background-image {

+  grid-area: icon;

+  --security-level-icon-size: 9em;

+  width: var(--security-level-icon-size);

+  height: var(--security-level-icon-size);

+  margin-block: 0.4em;

+  /* Middle of shield aligns with the panel padding: */

+  margin-inline-end: calc(-0.5 * var(--security-level-icon-size));

+  align-self: start;

+  justify-self: end;

+  /* This icon is meant to act as background, so disable dragging or interfering

+   * with clicks. */

+  pointer-events: none;

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

   fill-opacity: 1;

   fill: var(--border-color-card);

 }

 /* 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-image:-moz-locale-dir(rtl) {

+  transform: scaleX(-1);

 }

-#securityLevel-background:is([level="standard"], [level="custom"]) {

-  background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");

+#securityLevel-panel:is([level="standard"], [level="custom"]) #securityLevel-background-image {

+  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#standard");

 }

-#securityLevel-background[level="safer"] {

-  background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");

+#securityLevel-panel[level="safer"] #securityLevel-background-image {

+  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safer");

 }

-#securityLevel-background[level="safest"] {

-  background-image: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");

+#securityLevel-panel[level="safest"] #securityLevel-background-image {

+  content: url("chrome://browser/content/securitylevel/securityLevelIcon.svg#safest");

 }

 #securityLevel-background p {

-  margin: 0;

+  margin-block: 0 16px;

 }

 /* Override margin in panelUI-shared.css */

 #securityLevel-level {

   font-size: 1.25em;

   font-weight: 600;

+  grid-area: title;

 }

 #securityLevel-summary {

-  padding-inline-end: 5em;

   max-width: 20em;

+  grid-area: body;

 }

 #securityLevel-learnMore {

   align-self: start;

+  grid-area: learn-more;

 }
 <panel id="securityLevel-panel"

        role="dialog"

        aria-labelledby="securityLevel-header"

-       aria-describedby="securityLevel-subheading securityLevel-summary"

+       aria-describedby="securityLevel-level securityLevel-summary"

        type="arrow"

        orient="vertical"

        class="cui-widget-panel panel-no-padding">

   </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:p>

+    <html:p id="securityLevel-level"></html:p>

     <html:p id="securityLevel-summary"></html:p>

     <html:a

       is="moz-support-link"

       tor-manual-page="security-settings"

       data-l10n-id="security-level-panel-learn-more-link"

     ></html:a>

+    <html:img id="securityLevel-background-image" alt="" />

   </vbox>

   <html:moz-button-group class="panel-footer">

     <button

   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;

henry pushed to branch tor-browser-140.1.0esr-15.0-1 at The Tor Project / Applications / Tor Browser

Commits:

5 changed files:

Changes: