fixup! BB 32308: Use direct browser sizing for letterboxing. (58b76aae) · Commits · The Tor Project / Applications / Mullvad Browser

toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

+19 −19

Original line number	Diff line number	Diff line
		@@ -559,26 +559,14 @@ class _RFPHelper {

		if (lastRoundedSize) {
		// Check whether 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")
		// and if so do not show an outline.
		const gapVertical = parentHeight - lastRoundedSize.height;
		const gapHorizontal = parentWidth - lastRoundedSize.width;
		browserParent.classList.toggle(
		"letterboxing-show-outline",
		gapVertical >= this._letterboxingBorderRadius \|\|
		gapHorizontal >= this._letterboxingBorderRadius
		);
		if (
		borderRadius &&
		parentWidth - lastRoundedSize.width < borderRadius &&
		parentHeight - lastRoundedSize.height < borderRadius
		) {
		borderRadius = 0;
		} else {
		borderRadius = "";
		}
		styleChanges.queueIfNeeded(browserParent, {
		"--letterboxing-decorator-visibility":
		borderRadius === 0 ? "hidden" : "",
		"--letterboxing-border-radius": borderRadius,
		});
		}

		// If the size of the content is already quantized, we do nothing.
		@@ -611,6 +599,7 @@ class _RFPHelper {

		_resetContentSize(aBrowser) {
		aBrowser.parentElement.classList.add("exclude-letterboxing");
		aBrowser.parentElement.classList.remove("letterboxing-show-outline");
		}

		_updateSizeForTabsInWindow(aWindow) {
		@@ -621,6 +610,17 @@ class _RFPHelper {
		"letterboxing-vcenter",
		Services.prefs.getBoolPref(kPrefLetterboxingVcenter, false)
		);
		if (this._letterboxingBorderRadius === undefined && tabBrowser.tabbox) {
		// Cache the value since it is not expected to change in a session for any
		// window.
		this._letterboxingBorderRadius = Math.ceil(
		parseFloat(
		aWindow
		.getComputedStyle(tabBrowser.tabbox)
		.getPropertyValue("--letterboxing-border-radius")
		)
		);
		}

		for (let tab of tabBrowser.tabs) {
		let browser = tab.linkedBrowser;

toolkit/components/resistfingerprinting/content/letterboxing.css

+7 −11

Original line number	Diff line number	Diff line
		@@ -24,7 +24,6 @@
		--letterboxing-vertical-alignment: start;
		--letterboxing-shadow-color: rgba(12, 12, 13, 0.1);
		--letterboxing-border-color: var(--letterboxing-bgcolor);
		--letterboxing-decorator-visibility: visible;

		.browserContainer {
		/*
		@@ -45,19 +44,21 @@
		.browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
		.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);
		}

		:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready & {
		place-content: var(--letterboxing-vertical-alignment) center;
		}

		:root:not([inDOMFullscreen]) .letterboxing & {
		:root:not([inDOMFullscreen]) .letterboxing &.letterboxing-show-outline {
		browser {
		border-radius: var(--letterboxing-border-radius);
		border-top-left-radius: var(--letterboxing-border-top-radius);
		border-top-right-radius: var(--letterboxing-border-top-radius);
		}

		.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);
		@@ -101,8 +102,3 @@
		position: relative;
		z-index: 1;
		}

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