BB 32308: Use direct browser sizing for letterboxing. (12d9184c) · Commits · henry / Mullvad Browser

browser/app/profile/001-base-profile.js

+4 −0

Original line number	Diff line number	Diff line
		@@ -450,6 +450,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#43402: Avoid a resize from the skeleton to the newwin size.
		// Should be fixed in ESR-140 with Bug 1448423.
		pref("browser.startup.blankWindow", false);

browser/components/tabbrowser/content/tabbrowser.js

+4 −0

Original line number	Diff line number	Diff line
		@@ -2232,6 +2232,10 @@
		stack.className = "browserStack";
		stack.appendChild(b);

		let decorator = document.createXULElement("hbox");
		decorator.className = "browserDecorator";
		stack.appendChild(decorator);

		let browserContainer = document.createXULElement("vbox");
		browserContainer.className = "browserContainer";
		browserContainer.appendChild(stack);

toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

+19 −0

Original line number	Diff line number	Diff line
		@@ -15,6 +15,10 @@ 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 kTopicDOMWindowClosed = "domwindowclosed";
		@@ -51,6 +55,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",
		@@ -82,6 +89,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._removeLanguagePrefObservers();
		@@ -133,6 +142,8 @@ class _RFPHelper {
		this._handleSpoofEnglishChanged();
		break;
		case kPrefLetterboxing:
		case kPrefLetterboxingVcenter:
		case kPrefLetterboxingGradient:
		this._handleLetterboxingPrefChanged();
		break;
		default:
		@@ -600,6 +611,14 @@ class _RFPHelper {
		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;

toolkit/components/resistfingerprinting/content/letterboxing.css

+93 −0

Original line number	Diff line number	Diff line
		@@ -10,6 +10,14 @@
		*/
		.letterboxing {
		--letterboxing-bgcolor: var(--tabpanel-background-color);
		--letterboxing-border-radius: 8px;
		--letterboxing-border-top-radius: 0;
		--letterboxing-vertical-alignment: start;
		--letterboxing-shadow-color: rgba(12, 12, 13, 0.10);
		--letterboxing-gradient-color1: var(--letterboxing-bgcolor);
		--letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor));
		--letterboxing-border-color: var(--letterboxing-bgcolor);
		--letterboxing-decorator-visibility: visible;

		.browserContainer {
		/*
		@@ -22,8 +30,13 @@
		}

		.browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
		box-shadow: 0 4px 8px 0 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);
		width: var(--letterboxing-width) !important;
		height: var(--letterboxing-height) !important;
		background: var(--letterboxing-gradient-color2);
		}
		}

		@@ -31,3 +44,83 @@
		> .browserStack:not(.exclude-letterboxing) {
		place-content: start center;
		}

		.browserDecorator {
		display: none;
		pointer-events: none;
		background: transparent;
		position: relative;
		z-index: 1;
		}

		.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);
		}

		:root:not([inDOMFullscreen]) .letterboxing .browserContainer:not(.responsive-mode)
		> .browserStack:not(.exclude-letterboxing)
		> .browserDecorator {
		display: initial;
		visibility: var(--letterboxing-decorator-visibility);
		border-radius: var(--letterboxing-border-radius);
		border-top-left-radius: var(--letterboxing-border-top-radius);
		border-top-right-radius: var(--letterboxing-border-top-radius);
		box-shadow: var(--letterboxing-border-color) 0 0 .1px inset, var(--letterboxing-border-color) 0 0 .1px;
		border: .1px solid var(--letterboxing-border-color);
		outline: .1px solid var(--letterboxing-bgcolor);
		height: calc(var(--letterboxing-height) + 1px);
		top: -1px;
		}

		.letterboxing-vcenter .browserDecorator {
		height: auto !important;
		top: 0 !important;
		}

		/*
		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;
		z-index: 2;
		--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);
		margin: 0;
		border: 1px solid var(--letterboxing-border-color);
		max-width: calc(var(--letterboxing-width) * .5);
		}

		browser:fullscreen {
		--letterboxing-border-top-radius: 0;
		--letterboxing-border-radius: 0;
		}

		:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
		> .browserStack:not(.exclude-letterboxing) {
		place-content: var(--letterboxing-vertical-alignment) center;
		}