BB 41919: Letterboxing, add temporarily visible web content-size indicator on window resizing. (40ba6c98) · Commits · The Tor Project / Applications / Mullvad Browser

browser/components/tabbrowser/content/tabbrowser.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -8647,6 +8647,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

+23 −0

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

		&[type=letterboxingStatus],
		&[type=overLink] {
		transition: opacity 120ms ease-out, visibility 120ms;
		}
		@@ -184,12 +185,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;
		}
		@@ -238,6 +242,25 @@
		}
		}

		#statuspanel:is([type=letterboxingStatus], [previoustype=letterboxingStatus][inactive]) > #statuspanel-label {
		background-image: url("chrome://browser/skin/window.svg");
		background-size: 1em;
		background-repeat: no-repeat;
		background-position-y: center;
		background-position-x: left .5em;

		&:-moz-locale-dir(rtl) {
		background-position-x: right .5em;
		}

		padding-inline-start: 2em;
		-moz-context-properties: fill;
		fill: var(--color-accent-primary);
		@media (forced-colors) {
		fill: var(--icon-color);
		}
		}

		/**
		* Shortcuts
		*/

toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

+53 −5

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

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

		@@ -552,7 +552,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;
		@@ -730,6 +731,35 @@ class _RFPHelper {
		"letterboxing-show-sidebar-corner",
		gapHorizontal >= 4 * this._letterboxingBorderRadius
		);
		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.
		@@ -843,8 +873,26 @@ class _RFPHelper {
		aWindow.gBrowser.addTabsProgressListener(this);
		aWindow.addEventListener("TabOpen", this);
		let resizeObserver = new aWindow.ResizeObserver(entries => {
		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 (let { target } of entries) {
		this._roundOrResetContentSize(target.querySelector("browser"));
		this._roundOrResetContentSize(
		target.getElementsByTagName("browser")[0],
		context
		);
		}
		});
		// Observe resizing of each browser's parent (gets rid of RPC from content