ma1 pushed to branch tor-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Tor Browser

Commits: 8d25c1cc by hackademix at 2024-01-29T16:28:12+01:00 fixup! Bug 32308: use direct browser sizing for letterboxing.

Bug 41917: Make the appearance of letterboxing look more intentional

- - - - - 366c81df by hackademix at 2024-01-29T16:28:18+01:00 Bug 41917: Tor brand-specific styles.

- - - - -

6 changed files:

- browser/app/profile/001-base-profile.js - browser/base/content/browser.css - browser/themes/shared/browser-shared.css - browser/themes/shared/jar.inc.mn - + browser/themes/shared/tor-branding.css - toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

Changes:

===================================== browser/app/profile/001-base-profile.js ===================================== @@ -376,6 +376,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"] {

===================================== browser/themes/shared/browser-shared.css ===================================== @@ -24,6 +24,7 @@ @import url("chrome://browser/skin/UITour.css"); @import url("chrome://global/skin/browser-colors.css"); @import url("chrome://browser/skin/tor-urlbar-button.css"); +@import url("chrome://browser/skin/tor-branding.css"); @import url("chrome://browser/skin/onionlocation.css");

@namespace html url("http://www.w3.org/1999/xhtml");

===================================== browser/themes/shared/jar.inc.mn ===================================== @@ -29,6 +29,7 @@ skin/classic/browser/tabs.css (../shared/tabs.css) skin/classic/browser/toolbarbuttons.css (../shared/toolbarbuttons.css) skin/classic/browser/toolbarbutton-icons.css (../shared/toolbarbutton-icons.css) + skin/classic/browser/tor-branding.css (../shared/tor-branding.css) skin/classic/browser/tor-urlbar-button.css (../shared/tor-urlbar-button.css) skin/classic/browser/urlbar-dynamic-results.css (../shared/urlbar-dynamic-results.css) skin/classic/browser/urlbar-searchbar.css (../shared/urlbar-searchbar.css)

===================================== browser/themes/shared/tor-branding.css ===================================== @@ -0,0 +1,13 @@ +.letterboxing { + --letterboxing-bgcolor: var(--color-grey-light-20, #F0F0F4); + --letterboxing-gradient-color1: rgba(0, 219, 222, 0.02); + --letterboxing-gradient-color2: rgba(252, 0, 255, 0.02); +} + +@media (prefers-color-scheme: dark) { + .letterboxing { + --letterboxing-bgcolor: var(--color-grey-dark-10, #52525E); + --letterboxing-gradient-color1: rgba(0, 219, 222, 0.06); + --letterboxing-gradient-color2: rgba(252, 0, 255, 0.06); + } +} \ No newline at end of file

===================================== 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/tor-browser/-/compare/478ddec...