[tbb-commits] [Git][tpo/applications/tor-browser][tor-browser-115.7.0esr-13.5-1] 2 commits: fixup! Bug 32308: use direct browser sizing for letterboxing.
ma1 (@ma1)
git at gitlab.torproject.org
Mon Jan 29 15:30:19 UTC 2024
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");
+ at 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);
+}
+
+ at 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/478ddecbea33fcb11e9c8b1160ce37939be303e0...366c81df9da5b191a3c7459387c4a93e1853e0fc
--
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/478ddecbea33fcb11e9c8b1160ce37939be303e0...366c81df9da5b191a3c7459387c4a93e1853e0fc
You're receiving this email because of your account on gitlab.torproject.org.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tbb-commits/attachments/20240129/8550d069/attachment-0001.htm>
More information about the tbb-commits
mailing list