ma1 pushed to branch mullvad-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Mullvad Browser
Commits: c55896fb by hackademix at 2024-01-29T16:33:56+01:00 fixup! Bug 32308: use direct browser sizing for letterboxing.
Bug 41917: Make the appearance of letterboxing look more intentional
- - - - -
3 changed files:
- browser/app/profile/001-base-profile.js - browser/base/content/browser.css - toolkit/components/resistfingerprinting/RFPHelper.sys.mjs
Changes:
===================================== browser/app/profile/001-base-profile.js ===================================== @@ -375,6 +375,10 @@ pref("security.remote_settings.intermediates.enabled", false); pref("dom.use_components_shim", false); // Enable letterboxing pref("privacy.resistFingerprinting.letterboxing", true); +// tor-browser#41917 center letterboxed area vertically +pref("privacy.resistFingerprinting.letterboxing.vcenter", true); +// tor-browser#41917 letterboxing gradient background +pref("privacy.resistFingerprinting.letterboxing.gradient", true); // tor-browser#41695: how many warnings we show if user closes them without restoring the window size pref("privacy.resistFingerprinting.resizeWarnings", 3); // tor-browser#33282: new windows start at 1400x900 when there's enough screen space, otherwise down by 200x100 blocks
===================================== browser/base/content/browser.css ===================================== @@ -134,6 +134,56 @@ body { doesn't get notified on horizontal shrinking. */ overflow-x: hidden; + background: var(--letterboxing-bgcolor); +} + +.letterboxing { + --letterboxing-border-radius: 8px; + --letterboxing-border-top-radius: 0; + --letterboxing-vertical-alignment: start; + --letterboxing-shadow-color: rgba(12, 12, 13, 0.10); + --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.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) { + --letterboxing-border-top-radius: var(--letterboxing-border-radius); + --letterboxing-vertical-alignment: center; +} + +.letterboxing.letterboxing-gradient .browserContainer { + background: linear-gradient(283deg, var(--letterboxing-gradient-color1) 0%, var(--letterboxing-gradient-color2) 100%), var(--letterboxing-bgcolor); + box-shadow: rgba(0, 0, 0, 0.5) 0px -1px 2px; +} + +/* + Align status bar with content. + TODO: switch to nested CSS selectors for conciseness when available (Firefox >= 117) +*/ +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) + > #statuspanel:not([hidden]) { + position: relative; + place-self: end left; + left: 0; + right: 0; + --letterboxing-status-left-radius: var(--letterboxing-border-radius); + --letterboxing-status-right-radius: 0; +} +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) + > #statuspanel:not([mirror]):-moz-locale-dir(rtl), +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) + > #statuspanel[mirror]:-moz-locale-dir(ltr) { + left: 0; + right: 0; + --letterboxing-status-right-radius: var(--letterboxing-border-radius); + --letterboxing-status-left-radius: 0; + justify-self: right; +} + +.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); }
/** @@ -142,21 +192,15 @@ body { **/ .letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser { /* width & height to be dynamically set by RFPHelper.jsm */ - outline: 1px solid var(--chrome-content-separator-color); + 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); }
-.exclude-letterboxing > browser { - outline: initial; -} - -:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) { - place-content: start center; -} - -/* extend down the toolbar's colors when letterboxing is enabled */ -.letterboxing { - background-color: var(--toolbar-bgcolor); - background-image: var(--toolbar-bgimage); +:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode) + > .browserStack:not(.exclude-letterboxing) { + place-content: var(--letterboxing-vertical-alignment) center; }
#toolbar-menubar[autohide="true"] {
===================================== toolkit/components/resistfingerprinting/RFPHelper.sys.mjs ===================================== @@ -14,6 +14,11 @@ const kPrefLetterboxingDimensions = "privacy.resistFingerprinting.letterboxing.dimensions"; const kPrefLetterboxingTesting = "privacy.resistFingerprinting.letterboxing.testing"; +const kPrefLetterboxingVcenter = + "privacy.resistFingerprinting.letterboxing.vcenter"; +const kPrefLetterboxingGradient = + "privacy.resistFingerprinting.letterboxing.gradient"; + const kTopicDOMWindowOpened = "domwindowopened";
const kPrefResizeWarnings = "privacy.resistFingerprinting.resizeWarnings"; @@ -140,6 +145,9 @@ class _RFPHelper { // Add unconditional observers Services.prefs.addObserver(kPrefResistFingerprinting, this); Services.prefs.addObserver(kPrefLetterboxing, this); + Services.prefs.addObserver(kPrefLetterboxingVcenter, this); + Services.prefs.addObserver(kPrefLetterboxingGradient, this); + XPCOMUtils.defineLazyPreferenceGetter( this, "_letterboxingDimensions", @@ -171,6 +179,8 @@ class _RFPHelper {
// Remove unconditional observers Services.prefs.removeObserver(kPrefResistFingerprinting, this); + Services.prefs.removeObserver(kPrefLetterboxingGradient, this); + Services.prefs.removeObserver(kPrefLetterboxingVcenter, this); Services.prefs.removeObserver(kPrefLetterboxing, this); // Remove the RFP observers, swallowing exceptions if they weren't present this._removeRFPObservers(); @@ -218,6 +228,8 @@ class _RFPHelper { this._handleSpoofEnglishChanged(); break; case kPrefLetterboxing: + case kPrefLetterboxingVcenter: + case kPrefLetterboxingGradient: this._handleLetterboxingPrefChanged(); break; default: @@ -429,8 +441,7 @@ class _RFPHelper { }); }
- getLetterboxingDefaultRule(aBrowser) { - let document = aBrowser.ownerDocument; + getLetterboxingDefaultRule(document) { return (document._letterBoxingSizingRule ||= (() => { // If not already cached on the document object, traverse the CSSOM and // find the rule applying the default letterboxing styles to browsers @@ -555,11 +566,16 @@ class _RFPHelper { return; }
+ let lastRoundedSize; + const roundDimensions = (aWidth, aHeight) => { - const r = (aWidth, aHeight) => ({ - width: `var(--rdm-width, ${aWidth}px)`, - height: `var(--rdm-height, ${aHeight}px)`, - }); + const r = (width, height) => { + lastRoundedSize = {width, height}; + return { + width: `var(--rdm-width, ${width}px)`, + height: `var(--rdm-height, ${height}px)`, + } + };
let result;
@@ -642,7 +658,7 @@ class _RFPHelper { const roundedDefault = roundDimensions(containerWidth, containerHeight);
styleChanges.queueIfNeeded( - this.getLetterboxingDefaultRule(aBrowser), + this.getLetterboxingDefaultRule(aBrowser.ownerDocument), roundedDefault );
@@ -655,6 +671,21 @@ class _RFPHelper { : { width: "", height: "" }; // otherwise we can keep the default (rounded) size styleChanges.queueIfNeeded(aBrowser, roundedInline);
+ if (lastRoundedSize) { + // check wether the letterboxing margin is less than the border radius, and if so flatten the borders + let borderRadius = parseInt(win.getComputedStyle(browserContainer).getPropertyValue("--letterboxing-border-radius")); + if (borderRadius && + (parentWidth - lastRoundedSize.width < borderRadius && + parentHeight - lastRoundedSize.height < borderRadius)) { + borderRadius = 0; + } else { + borderRadius = ""; + } + styleChanges.queueIfNeeded(browserParent, { + '--letterboxing-border-radius': borderRadius + }); + } + // If the size of the content is already quantized, we do nothing. if (!styleChanges.length) { log(`${logPrefix} is_rounded == true`); @@ -690,6 +721,10 @@ class _RFPHelper { _updateSizeForTabsInWindow(aWindow) { let tabBrowser = aWindow.gBrowser; tabBrowser.tabpanels?.classList.add("letterboxing"); + tabBrowser.tabpanels?.classList.toggle("letterboxing-vcenter", + Services.prefs.getBoolPref(kPrefLetterboxingVcenter, false)); + tabBrowser.tabpanels?.classList.toggle("letterboxing-gradient", + Services.prefs.getBoolPref(kPrefLetterboxingGradient, false));
for (let tab of tabBrowser.tabs) { let browser = tab.linkedBrowser;
View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/c558...