henry pushed to branch mullvad-browser-140.1.0esr-15.0-1 at The Tor Project / Applications / Mullvad Browser Commits: f9f53b49 by henry at 2025-07-30T17:32:14+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. (cherry picked from commit d116014b401543a20ff66efc0027c65a74cf9d16) Co-authored-by: Henry Wilkes <henry@torproject.org> - - - - - 5 changed files: - browser/components/securitylevel/content/securityLevel.js - browser/components/securitylevel/content/securityLevelButton.css - browser/components/securitylevel/content/securityLevelPanel.css - browser/components/securitylevel/content/securityLevelPanel.inc.xhtml - browser/components/securitylevel/content/securityLevelPreferences.css Changes: ===================================== browser/components/securitylevel/content/securityLevel.js ===================================== @@ -156,7 +156,6 @@ var SecurityLevelPanel = { _populateXUL() { this._elements = { panel: document.getElementById("securityLevel-panel"), - background: document.getElementById("securityLevel-background"), levelName: document.getElementById("securityLevel-level"), summary: document.getElementById("securityLevel-summary"), }; @@ -190,7 +189,7 @@ var SecurityLevelPanel = { 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) { ===================================== browser/components/securitylevel/content/securityLevelButton.css ===================================== @@ -1,12 +1,19 @@ -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); +} ===================================== browser/components/securitylevel/content/securityLevelPanel.css ===================================== @@ -3,40 +3,54 @@ #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 */ @@ -47,13 +61,15 @@ #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; } ===================================== browser/components/securitylevel/content/securityLevelPanel.inc.xhtml ===================================== @@ -1,7 +1,7 @@ <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"> @@ -13,9 +13,7 @@ </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" @@ -23,6 +21,7 @@ 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 ===================================== browser/components/securitylevel/content/securityLevelPreferences.css ===================================== @@ -18,6 +18,10 @@ 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; View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/f9f5... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/f9f5... You're receiving this email because of your account on gitlab.torproject.org.