BB 41919: Letterboxing, add temporarily visible web content-size indicator on window resizing. (dfe3bf8c) · Commits · henry / Mullvad Browser

browser/components/tabbrowser/content/tabbrowser.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -7543,6 +7543,7 @@ var StatusPanel = {
		if (XULBrowserWindow.busyUI) {
		types.push("status");
		}
		types.push("letterboxingStatus");
		types.push("defaultStatus");
		for (type of types) {
		if ((text = XULBrowserWindow[type])) {

browser/themes/shared/tabbrowser/content-area.css

+19 −0

Original line number	Diff line number	Diff line
		@@ -115,6 +115,7 @@
		min-width: min(23em, 33%);
		}

		&[type=letterboxingStatus],
		&[type=overLink] {
		transition: opacity 120ms ease-out, visibility 120ms;
		}
		@@ -123,12 +124,15 @@
		direction: ltr;
		}

		.browserStack:not(.letterboxingStatus) &[type=letterboxingStatus],
		.exclude-letterboxing &[type=letterboxingStatus],
		&[inactive],
		:root[inDOMFullscreen] &:not([type=overLink]) {
		transition: none;
		opacity: 0;
		visibility: hidden;

		&[previoustype=letterboxingStatus],
		&[previoustype=overLink] {
		transition: opacity 200ms ease-out, visibility 200ms;
		}
		@@ -177,6 +181,21 @@
		}
		}

		#statuspanel[type=letterboxingStatus] > #statuspanel-label,
		#statuspanel[previoustype=letterboxingStatus][inactive] > #statuspanel-label {
		background-image: url("chrome://browser/skin/window.svg");
		background-size: 1em;
		background-repeat: no-repeat;
		background-position-x: .5em;
		background-position-y: center;
		padding-inline-start: 2em;
		-moz-context-properties: fill;
		fill: var(--color-accent-primary);
		@media (forced-colors) {
		fill: var(--icon-color);
		}
		}

		/**
		* Dialogs
		*/

toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

+54 −6

Original line number	Diff line number	Diff line
		@@ -165,7 +165,7 @@ class _RFPHelper {
		switch (aMessage.type) {
		case "TabOpen": {
		let browser = aMessage.target.linkedBrowser;
		this._roundOrResetContentSize(browser, /* isNewTab = */ true);
		this._roundOrResetContentSize(browser, { isNewTab: true });
		browser.ownerGlobal._rfpResizeObserver.observe(browser.parentElement);
		break;
		}
		@@ -429,7 +429,7 @@ class _RFPHelper {
		);
		}

		_roundOrResetContentSize(aBrowser, isNewTab = false) {
		_roundOrResetContentSize(aBrowser, context = {}) {
		// We won't do anything for lazy browsers.
		if (!aBrowser?.isConnected) {
		return;
		@@ -438,7 +438,7 @@ class _RFPHelper {
		// this tab doesn't need letterboxing
		this._resetContentSize(aBrowser);
		} else {
		this._roundContentSize(aBrowser, isNewTab);
		this._roundContentSize(aBrowser, context);
		}
		}

		@@ -464,7 +464,8 @@ class _RFPHelper {
		/**
		* The function will round the given browser size
		*/
		async _roundContentSize(aBrowser, isNewTab = false) {
		async _roundContentSize(aBrowser, context) {
		const { isResize, isNewTab } = context;
		let logPrefix = `_roundContentSize[${Math.random()}]`;
		log(logPrefix);
		let win = aBrowser.ownerGlobal;
		@@ -636,6 +637,35 @@ class _RFPHelper {
		borderRadius === 0 ? "hidden" : "",
		"--letterboxing-border-radius": borderRadius,
		});
		if (win.gBrowser.selectedBrowser == aBrowser) {
		const updateStatus = async args => {
		win.XULBrowserWindow.letterboxingStatus = args
		? await win.document.l10n.formatValue(
		"letterboxing-size-status",
		args
		)
		: "";
		win.StatusPanel.update();
		};
		if (
		isResize &&
		this.letterboxingEnabled &&
		(parentWidth > lastRoundedSize.width \|\|
		parentHeight > lastRoundedSize.height)
		) {
		const clazz = "letterboxingStatus";
		const currentParent = win.document.getElementsByClassName(clazz)[0];
		if (currentParent != browserParent) {
		currentParent?.classList.remove(clazz);
		browserParent.classList.add(clazz);
		}
		updateStatus(lastRoundedSize);
		win.clearTimeout(win._letterboxingStatusTimeout);
		win._letterboxingStatusTimeout = win.setTimeout(updateStatus, 1000);
		} else {
		updateStatus("");
		}
		}
		}

		// If the size of the content is already quantized, we do nothing.
		@@ -729,8 +759,26 @@ class _RFPHelper {
		aWindow.addEventListener("TabOpen", this);
		const resizeObserver = (aWindow._rfpResizeObserver =
		new aWindow.ResizeObserver(entries => {
		for (let { target } of entries) {
		this._roundOrResetContentSize(target.querySelector("browser"));
		const context = { isResize: true };
		if (entries.length == 1) {
		const { target } = entries[0];
		if (!("_letterboxingNew" in target)) {
		target._letterboxingNew = !entries[0].contentRect.width;
		if (target._letterboxingNew) {
		return;
		}
		context.isResize = false;
		} else if (target._letterboxingNew) {
		target._letterboxingNew = false;
		context.isResize = false;
		}
		}

		for (const { target } of entries) {
		this._roundOrResetContentSize(
		target.getElementsByTagName("browser")[0],
		context
		);
		}
		}));
		// observe resizing of each browser's parent (gets rid of RPC from content windows)