ma1 pushed to branch mullvad-browser-128.9.0esr-14.5-1 at The Tor Project / Applications / Mullvad Browser

Commits: 8e3b1f41 by hackademix at 2025-04-08T00:13:48+02:00 BB 41919: Letterboxing, add temporarily visible web content-size indicator on window resizing.

- - - - -

3 changed files:

- browser/components/tabbrowser/content/tabbrowser.js - browser/themes/shared/tabbrowser/content-area.css - toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

Changes:

===================================== browser/components/tabbrowser/content/tabbrowser.js ===================================== @@ -7513,6 +7513,7 @@ var StatusPanel = { if (XULBrowserWindow.busyUI) { types.push("status"); } + types.push("letterboxingStatus"); types.push("defaultStatus"); for (type of types) { if ((text = XULBrowserWindow[type])) {

===================================== browser/themes/shared/tabbrowser/content-area.css ===================================== @@ -115,6 +115,7 @@ min-width: min(23em, 33%); }

+ &[type=letterboxingStatus], &[type=overLink] { transition: opacity 120ms ease-out, visibility 120ms; } @@ -123,12 +124,14 @@ direction: ltr; }

+ .exclude-letterboxing &[type=letterboxingStatus], &[inactive], :root[inDOMFullscreen] &:not([type=overLink]) { transition: none; opacity: 0; visibility: hidden;

+ &[previoustype=letterboxingStatus], &[previoustype=overLink] { transition: opacity 200ms ease-out, visibility 200ms; } @@ -177,6 +180,21 @@ } }

+#statuspanel[type=letterboxingStatus] > #statuspanel-label, +#statuspanel[previoustype=letterboxingStatus][inactive] > #statuspanel-label { + background-image: url("chrome://browser/skin/window.svg"); + background-size: 1em; + background-repeat: no-repeat; + background-position-x: .5em; + background-position-y: center; + padding-inline-start: 2em; + -moz-context-properties: fill; + fill: var(--color-accent-primary); + @media (forced-colors) { + fill: var(--icon-color); + } +} + /** * Dialogs */

===================================== toolkit/components/resistfingerprinting/RFPHelper.sys.mjs ===================================== @@ -245,7 +245,7 @@ class _RFPHelper { switch (aMessage.type) { case "TabOpen": { let browser = aMessage.target.linkedBrowser; - this._roundOrResetContentSize(browser, /* isNewTab = */ true); + this._roundOrResetContentSize(browser, { isNewTab: true }); browser.ownerGlobal._rfpResizeObserver.observe(browser.parentElement); break; } @@ -509,7 +509,7 @@ class _RFPHelper { ); }

- _roundOrResetContentSize(aBrowser, isNewTab = false) { + _roundOrResetContentSize(aBrowser, context = {}) { // We won't do anything for lazy browsers. if (!aBrowser?.isConnected) { return; @@ -518,7 +518,7 @@ class _RFPHelper { // this tab doesn't need letterboxing this._resetContentSize(aBrowser); } else { - this._roundContentSize(aBrowser, isNewTab); + this._roundContentSize(aBrowser, context); } }

@@ -544,7 +544,8 @@ class _RFPHelper { /** * The function will round the given browser size */ - async _roundContentSize(aBrowser, isNewTab = false) { + async _roundContentSize(aBrowser, context) { + const { isResize, isNewTab } = context; let logPrefix = `_roundContentSize[${Math.random()}]`; log(logPrefix); let win = aBrowser.ownerGlobal; @@ -716,6 +717,26 @@ class _RFPHelper { borderRadius === 0 ? "hidden" : "", "--letterboxing-border-radius": borderRadius, }); + + if ( + isResize && + this.letterboxingEnabled && + (parentWidth > lastRoundedSize.width || + parentHeight > lastRoundedSize.height) + ) { + const updateStatus = async args => { + win.XULBrowserWindow.letterboxingStatus = args + ? await win.document.l10n.formatValue( + "letterboxing-size-status", + args + ) + : ""; + win.StatusPanel.update(); + }; + updateStatus(lastRoundedSize); + win.clearTimeout(win._letterboxingStatusTimeout); + win._letterboxingStatusTimeout = win.setTimeout(updateStatus, 1000); + } }

// If the size of the content is already quantized, we do nothing. @@ -818,8 +839,12 @@ class _RFPHelper { aWindow.addEventListener("TabOpen", this); const resizeObserver = (aWindow._rfpResizeObserver = new aWindow.ResizeObserver(entries => { + const context = { isResize: true }; for (let { target } of entries) { - this._roundOrResetContentSize(target.querySelector("browser")); + this._roundOrResetContentSize( + target.querySelector("browser"), + context + ); } })); // observe resizing of each browser's parent (gets rid of RPC from content windows)

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