richard pushed to branch mullvad-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Mullvad Browser

Commits: f74a854e by hackademix at 2024-01-31T13:44:56+00:00 fixup! Bug 32308: use direct browser sizing for letterboxing.

Bug 42387: hide visual artifacts and fix the status label on rounded letterboxing borders.

- - - - -

3 changed files:

- browser/base/content/browser.css - browser/base/content/tabbrowser.js - toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

Changes:

===================================== browser/base/content/browser.css ===================================== @@ -127,6 +127,11 @@ body { -moz-window-dragging: drag; }

+/** + Never modify the following selector without synchronizing + LETTERBOX_CSS_SELECTOR in RFPHelper.sys.jsm, where + --letterboxing-width & --letterboxing-height are actually set. +**/ .letterboxing .browserContainer { /* From Firefox 115 on, .browserContainer layout is flex / column, @@ -137,6 +142,14 @@ body { background: var(--letterboxing-bgcolor); }

+.browserDecorator { + display: none; + pointer-events: none; + background: transparent; + position: relative; + z-index: 1; +} + .letterboxing { --letterboxing-border-radius: 8px; --letterboxing-border-top-radius: 0; @@ -145,6 +158,7 @@ body { --letterboxing-bgcolor: var(--tabpanel-background-color); --letterboxing-gradient-color1: var(--letterboxing-bgcolor); --letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor)); + --letterboxing-border-color: var(--letterboxing-bgcolor); }

.letterboxing.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) { @@ -157,6 +171,26 @@ body { box-shadow: rgba(0, 0, 0, 0.5) 0px -1px 2px; }

+:root:not([inDOMFullscreen]) .letterboxing .browserContainer:not(.responsive-mode) + > .browserStack:not(.exclude-letterboxing) + > .browserDecorator { + display: initial; + visibility: visible; + border-radius: var(--letterboxing-border-radius); + border-top-left-radius: var(--letterboxing-border-top-radius); + border-top-right-radius: var(--letterboxing-border-top-radius); + box-shadow: var(--letterboxing-border-color) 0px 0px .1px inset, var(--letterboxing-border-color) 0 0 .1px; + border: .1px solid var(--letterboxing-border-color); + outline: .1px solid var(--letterboxing-bgcolor); + height: calc(var(--letterboxing-height) + 1px); + top: -1px; +} + +.letterboxing-vcenter .browserDecorator { + height: auto !important; + top: 0 !important; +} + /* Align status bar with content. TODO: switch to nested CSS selectors for conciseness when available (Firefox >= 117) @@ -167,6 +201,7 @@ body { place-self: end left; left: 0; right: 0; + z-index: 2; --letterboxing-status-left-radius: var(--letterboxing-border-radius); --letterboxing-status-right-radius: 0; } @@ -184,23 +219,24 @@ body { .letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) #statuspanel-label { border-radius: 0 0 var(--letterboxing-status-right-radius) var(--letterboxing-status-left-radius); + margin: 0; + border: 1px solid var(--letterboxing-border-color); + max-width: calc(var(--letterboxing-width) * .5); }

-/** - Never modify the following selector without synchronizing - LETTERBOX_CSS_SELECTOR in RFPHelper.jsm! -**/ .letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser { - /* width & height to be dynamically set by RFPHelper.jsm */ box-shadow: 0px 4px 8px 0px var(--letterboxing-shadow-color); border-radius: var(--letterboxing-border-radius); border-top-left-radius: var(--letterboxing-border-top-radius); border-top-right-radius: var(--letterboxing-border-top-radius); + width: var(--letterboxing-width) !important; + height: var(--letterboxing-height) !important; }

:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)

.browserStack:not(.exclude-letterboxing) {

place-content: var(--letterboxing-vertical-alignment) center; + background: var(--letterboxing-bgcolor); }

#toolbar-menubar[autohide="true"] {

===================================== browser/base/content/tabbrowser.js ===================================== @@ -2238,6 +2238,10 @@ stack.className = "browserStack"; stack.appendChild(b);

+ let decorator = document.createXULElement("hbox"); + decorator.className = "browserDecorator"; + stack.appendChild(decorator); + let browserContainer = document.createXULElement("vbox"); browserContainer.className = "browserContainer"; browserContainer.appendChild(notificationbox);

===================================== toolkit/components/resistfingerprinting/RFPHelper.sys.mjs ===================================== @@ -447,8 +447,7 @@ class _RFPHelper { // find the rule applying the default letterboxing styles to browsers // preemptively in order to beat race conditions on tab/window creation const LETTERBOX_CSS_URL = "chrome://browser/content/browser.css"; - const LETTERBOX_CSS_SELECTOR = - ".letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser"; + const LETTERBOX_CSS_SELECTOR = ".letterboxing .browserContainer"; for (let ss of document.styleSheets) { if (ss.href !== LETTERBOX_CSS_URL) { continue; @@ -572,8 +571,8 @@ class _RFPHelper { const r = (width, height) => { lastRoundedSize = {width, height}; return { - width: `var(--rdm-width, ${width}px)`, - height: `var(--rdm-height, ${height}px)`, + "--letterboxing-width": `var(--rdm-width, ${width}px)`, + "--letterboxing-height": `var(--rdm-height, ${height}px)`, } };

@@ -637,7 +636,7 @@ class _RFPHelper { for (let [name, value] of Object.entries(props)) { if (style[name] !== value) { this.push(() => { - style.setProperty(name, value, "important"); + style.setProperty(name, value); }); } } @@ -668,8 +667,11 @@ class _RFPHelper { ? // optional UI components such as the notification box, the find bar // or devtools are constraining this browser's size: recompute custom roundDimensions(parentWidth, parentHeight) - : { width: "", height: "" }; // otherwise we can keep the default (rounded) size - styleChanges.queueIfNeeded(aBrowser, roundedInline); + : { + "--letterboxing-width": "", + "--letterboxing-height": "", + }; // otherwise we can keep the default (rounded) size + styleChanges.queueIfNeeded(browserParent, roundedInline);

if (lastRoundedSize) { // check wether the letterboxing margin is less than the border radius, and if so flatten the borders

View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/f74a...