ma1 pushed to branch base-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Tor Browser
Commits:
-
0cb13087
by hackademix at 2024-01-29T16:32:32+01:00
3 changed files:
- browser/app/profile/001-base-profile.js
- browser/base/content/browser.css
- toolkit/components/resistfingerprinting/RFPHelper.sys.mjs
Changes:
... | ... | @@ -376,6 +376,10 @@ pref("security.remote_settings.intermediates.enabled", false); |
376 | 376 | pref("dom.use_components_shim", false);
|
377 | 377 | // Enable letterboxing
|
378 | 378 | pref("privacy.resistFingerprinting.letterboxing", true);
|
379 | +// tor-browser#41917 center letterboxed area vertically
|
|
380 | +pref("privacy.resistFingerprinting.letterboxing.vcenter", true);
|
|
381 | +// tor-browser#41917 letterboxing gradient background
|
|
382 | +pref("privacy.resistFingerprinting.letterboxing.gradient", true);
|
|
379 | 383 | // tor-browser#41695: how many warnings we show if user closes them without restoring the window size
|
380 | 384 | pref("privacy.resistFingerprinting.resizeWarnings", 3);
|
381 | 385 | // tor-browser#33282: new windows start at 1400x900 when there's enough screen space, otherwise down by 200x100 blocks
|
... | ... | @@ -134,6 +134,56 @@ body { |
134 | 134 | doesn't get notified on horizontal shrinking.
|
135 | 135 | */
|
136 | 136 | overflow-x: hidden;
|
137 | + background: var(--letterboxing-bgcolor);
|
|
138 | +}
|
|
139 | + |
|
140 | +.letterboxing {
|
|
141 | + --letterboxing-border-radius: 8px;
|
|
142 | + --letterboxing-border-top-radius: 0;
|
|
143 | + --letterboxing-vertical-alignment: start;
|
|
144 | + --letterboxing-shadow-color: rgba(12, 12, 13, 0.10);
|
|
145 | + --letterboxing-bgcolor: var(--tabpanel-background-color);
|
|
146 | + --letterboxing-gradient-color1: var(--letterboxing-bgcolor);
|
|
147 | + --letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor));
|
|
148 | +}
|
|
149 | + |
|
150 | +.letterboxing.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
|
|
151 | + --letterboxing-border-top-radius: var(--letterboxing-border-radius);
|
|
152 | + --letterboxing-vertical-alignment: center;
|
|
153 | +}
|
|
154 | + |
|
155 | +.letterboxing.letterboxing-gradient .browserContainer {
|
|
156 | + background: linear-gradient(283deg, var(--letterboxing-gradient-color1) 0%, var(--letterboxing-gradient-color2) 100%), var(--letterboxing-bgcolor);
|
|
157 | + box-shadow: rgba(0, 0, 0, 0.5) 0px -1px 2px;
|
|
158 | +}
|
|
159 | + |
|
160 | +/*
|
|
161 | + Align status bar with content.
|
|
162 | + TODO: switch to nested CSS selectors for conciseness when available (Firefox >= 117)
|
|
163 | +*/
|
|
164 | +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
|
|
165 | + > #statuspanel:not([hidden]) {
|
|
166 | + position: relative;
|
|
167 | + place-self: end left;
|
|
168 | + left: 0;
|
|
169 | + right: 0;
|
|
170 | + --letterboxing-status-left-radius: var(--letterboxing-border-radius);
|
|
171 | + --letterboxing-status-right-radius: 0;
|
|
172 | +}
|
|
173 | +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
|
|
174 | + > #statuspanel:not([mirror]):-moz-locale-dir(rtl),
|
|
175 | +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
|
|
176 | + > #statuspanel[mirror]:-moz-locale-dir(ltr) {
|
|
177 | + left: 0;
|
|
178 | + right: 0;
|
|
179 | + --letterboxing-status-right-radius: var(--letterboxing-border-radius);
|
|
180 | + --letterboxing-status-left-radius: 0;
|
|
181 | + justify-self: right;
|
|
182 | +}
|
|
183 | + |
|
184 | +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
|
|
185 | +#statuspanel-label {
|
|
186 | + border-radius: 0 0 var(--letterboxing-status-right-radius) var(--letterboxing-status-left-radius);
|
|
137 | 187 | }
|
138 | 188 | |
139 | 189 | /**
|
... | ... | @@ -142,21 +192,15 @@ body { |
142 | 192 | **/
|
143 | 193 | .letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
|
144 | 194 | /* width & height to be dynamically set by RFPHelper.jsm */
|
145 | - outline: 1px solid var(--chrome-content-separator-color);
|
|
195 | + box-shadow: 0px 4px 8px 0px var(--letterboxing-shadow-color);
|
|
196 | + border-radius: var(--letterboxing-border-radius);
|
|
197 | + border-top-left-radius: var(--letterboxing-border-top-radius);
|
|
198 | + border-top-right-radius: var(--letterboxing-border-top-radius);
|
|
146 | 199 | }
|
147 | 200 | |
148 | -.exclude-letterboxing > browser {
|
|
149 | - outline: initial;
|
|
150 | -}
|
|
151 | - |
|
152 | -:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
|
|
153 | - place-content: start center;
|
|
154 | -}
|
|
155 | - |
|
156 | -/* extend down the toolbar's colors when letterboxing is enabled */
|
|
157 | -.letterboxing {
|
|
158 | - background-color: var(--toolbar-bgcolor);
|
|
159 | - background-image: var(--toolbar-bgimage);
|
|
201 | +:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
|
|
202 | + > .browserStack:not(.exclude-letterboxing) {
|
|
203 | + place-content: var(--letterboxing-vertical-alignment) center;
|
|
160 | 204 | }
|
161 | 205 | |
162 | 206 | #toolbar-menubar[autohide="true"] {
|
... | ... | @@ -14,6 +14,11 @@ const kPrefLetterboxingDimensions = |
14 | 14 | "privacy.resistFingerprinting.letterboxing.dimensions";
|
15 | 15 | const kPrefLetterboxingTesting =
|
16 | 16 | "privacy.resistFingerprinting.letterboxing.testing";
|
17 | +const kPrefLetterboxingVcenter =
|
|
18 | + "privacy.resistFingerprinting.letterboxing.vcenter";
|
|
19 | +const kPrefLetterboxingGradient =
|
|
20 | + "privacy.resistFingerprinting.letterboxing.gradient";
|
|
21 | + |
|
17 | 22 | const kTopicDOMWindowOpened = "domwindowopened";
|
18 | 23 | |
19 | 24 | const kPrefResizeWarnings = "privacy.resistFingerprinting.resizeWarnings";
|
... | ... | @@ -140,6 +145,9 @@ class _RFPHelper { |
140 | 145 | // Add unconditional observers
|
141 | 146 | Services.prefs.addObserver(kPrefResistFingerprinting, this);
|
142 | 147 | Services.prefs.addObserver(kPrefLetterboxing, this);
|
148 | + Services.prefs.addObserver(kPrefLetterboxingVcenter, this);
|
|
149 | + Services.prefs.addObserver(kPrefLetterboxingGradient, this);
|
|
150 | + |
|
143 | 151 | XPCOMUtils.defineLazyPreferenceGetter(
|
144 | 152 | this,
|
145 | 153 | "_letterboxingDimensions",
|
... | ... | @@ -171,6 +179,8 @@ class _RFPHelper { |
171 | 179 | |
172 | 180 | // Remove unconditional observers
|
173 | 181 | Services.prefs.removeObserver(kPrefResistFingerprinting, this);
|
182 | + Services.prefs.removeObserver(kPrefLetterboxingGradient, this);
|
|
183 | + Services.prefs.removeObserver(kPrefLetterboxingVcenter, this);
|
|
174 | 184 | Services.prefs.removeObserver(kPrefLetterboxing, this);
|
175 | 185 | // Remove the RFP observers, swallowing exceptions if they weren't present
|
176 | 186 | this._removeRFPObservers();
|
... | ... | @@ -218,6 +228,8 @@ class _RFPHelper { |
218 | 228 | this._handleSpoofEnglishChanged();
|
219 | 229 | break;
|
220 | 230 | case kPrefLetterboxing:
|
231 | + case kPrefLetterboxingVcenter:
|
|
232 | + case kPrefLetterboxingGradient:
|
|
221 | 233 | this._handleLetterboxingPrefChanged();
|
222 | 234 | break;
|
223 | 235 | default:
|
... | ... | @@ -429,8 +441,7 @@ class _RFPHelper { |
429 | 441 | });
|
430 | 442 | }
|
431 | 443 | |
432 | - getLetterboxingDefaultRule(aBrowser) {
|
|
433 | - let document = aBrowser.ownerDocument;
|
|
444 | + getLetterboxingDefaultRule(document) {
|
|
434 | 445 | return (document._letterBoxingSizingRule ||= (() => {
|
435 | 446 | // If not already cached on the document object, traverse the CSSOM and
|
436 | 447 | // find the rule applying the default letterboxing styles to browsers
|
... | ... | @@ -555,11 +566,16 @@ class _RFPHelper { |
555 | 566 | return;
|
556 | 567 | }
|
557 | 568 | |
569 | + let lastRoundedSize;
|
|
570 | + |
|
558 | 571 | const roundDimensions = (aWidth, aHeight) => {
|
559 | - const r = (aWidth, aHeight) => ({
|
|
560 | - width: `var(--rdm-width, ${aWidth}px)`,
|
|
561 | - height: `var(--rdm-height, ${aHeight}px)`,
|
|
562 | - });
|
|
572 | + const r = (width, height) => {
|
|
573 | + lastRoundedSize = {width, height};
|
|
574 | + return {
|
|
575 | + width: `var(--rdm-width, ${width}px)`,
|
|
576 | + height: `var(--rdm-height, ${height}px)`,
|
|
577 | + }
|
|
578 | + };
|
|
563 | 579 | |
564 | 580 | let result;
|
565 | 581 | |
... | ... | @@ -642,7 +658,7 @@ class _RFPHelper { |
642 | 658 | const roundedDefault = roundDimensions(containerWidth, containerHeight);
|
643 | 659 | |
644 | 660 | styleChanges.queueIfNeeded(
|
645 | - this.getLetterboxingDefaultRule(aBrowser),
|
|
661 | + this.getLetterboxingDefaultRule(aBrowser.ownerDocument),
|
|
646 | 662 | roundedDefault
|
647 | 663 | );
|
648 | 664 | |
... | ... | @@ -655,6 +671,21 @@ class _RFPHelper { |
655 | 671 | : { width: "", height: "" }; // otherwise we can keep the default (rounded) size
|
656 | 672 | styleChanges.queueIfNeeded(aBrowser, roundedInline);
|
657 | 673 | |
674 | + if (lastRoundedSize) {
|
|
675 | + // check wether the letterboxing margin is less than the border radius, and if so flatten the borders
|
|
676 | + let borderRadius = parseInt(win.getComputedStyle(browserContainer).getPropertyValue("--letterboxing-border-radius"));
|
|
677 | + if (borderRadius &&
|
|
678 | + (parentWidth - lastRoundedSize.width < borderRadius &&
|
|
679 | + parentHeight - lastRoundedSize.height < borderRadius)) {
|
|
680 | + borderRadius = 0;
|
|
681 | + } else {
|
|
682 | + borderRadius = "";
|
|
683 | + }
|
|
684 | + styleChanges.queueIfNeeded(browserParent, {
|
|
685 | + '--letterboxing-border-radius': borderRadius
|
|
686 | + });
|
|
687 | + }
|
|
688 | + |
|
658 | 689 | // If the size of the content is already quantized, we do nothing.
|
659 | 690 | if (!styleChanges.length) {
|
660 | 691 | log(`${logPrefix} is_rounded == true`);
|
... | ... | @@ -690,6 +721,10 @@ class _RFPHelper { |
690 | 721 | _updateSizeForTabsInWindow(aWindow) {
|
691 | 722 | let tabBrowser = aWindow.gBrowser;
|
692 | 723 | tabBrowser.tabpanels?.classList.add("letterboxing");
|
724 | + tabBrowser.tabpanels?.classList.toggle("letterboxing-vcenter",
|
|
725 | + Services.prefs.getBoolPref(kPrefLetterboxingVcenter, false));
|
|
726 | + tabBrowser.tabpanels?.classList.toggle("letterboxing-gradient",
|
|
727 | + Services.prefs.getBoolPref(kPrefLetterboxingGradient, false));
|
|
693 | 728 | |
694 | 729 | for (let tab of tabBrowser.tabs) {
|
695 | 730 | let browser = tab.linkedBrowser;
|