Skip to content
Snippets Groups Projects
Verified Commit 8d25c1cc authored by ma1's avatar ma1
Browse files

fixup! Bug 32308: use direct browser sizing for letterboxing. 

Bug 41917: Make the appearance of letterboxing look more intentional
parent 478ddecb
No related branches found
No related tags found
1 merge request!886Bug 41917: Make the appearance of letterboxing look more intentional
Show whitespace changes
Inline Side-by-side
browser/app/profile/001-base-profile.js
+ 4
− 0
View file @ 8d25c1cc
......@@ -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
+ 57
− 13
View file @ 8d25c1cc
......@@ -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);
}
.exclude-letterboxing > browser {
outline: initial;
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);
}
: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
+ 42
− 7
View file @ 8d25c1cc
......@@ -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;
......
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment