commit b1323404cafad60b36eb1cf20a2b90de579c7f74
parent 55b9284ee7a5c453f111d5e2e76f7aeaeb504911
Author: hackademix <giorgio@maone.net>
Date: Wed, 2 Apr 2025 19:31:37 +0200
BB 41919: Letterboxing, add temporarily visible web content-size indicator on window resizing.
Diffstat:
3 files changed, 77 insertions(+), 5 deletions(-)
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
@@ -9425,6 +9425,7 @@ var StatusPanel = {
if (XULBrowserWindow.busyUI) {
types.push("status");
}
+ types.push("letterboxingStatus");
types.push("defaultStatus");
for (type of types) {
if ((text = XULBrowserWindow[type])) {
diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css
@@ -307,6 +307,7 @@ split-view-footer,
min-width: min(23em, 33%);
}
+ &[type="letterboxingStatus"],
&[type="overLink"] {
transition:
opacity 120ms ease-out,
@@ -317,12 +318,15 @@ split-view-footer,
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,
@@ -384,6 +388,25 @@ split-view-footer {
}
}
+#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 0.5em;
+
+ &:-moz-locale-dir(rtl) {
+ background-position-x: right 0.5em;
+ }
+
+ padding-inline-start: 2em;
+ -moz-context-properties: fill;
+ fill: var(--color-accent-primary);
+ @media (forced-colors) {
+ fill: var(--icon-color);
+ }
+}
+
/**
* Shortcuts
*/
diff --git a/toolkit/components/resistfingerprinting/RFPHelper.sys.mjs b/toolkit/components/resistfingerprinting/RFPHelper.sys.mjs
@@ -242,7 +242,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;
@@ -522,7 +522,7 @@ class _RFPHelper {
);
}
- _roundOrResetContentSize(aBrowser, isNewTab = false) {
+ _roundOrResetContentSize(aBrowser, context = {}) {
// We won't do anything for lazy browsers.
if (!aBrowser?.isConnected) {
return;
@@ -531,7 +531,7 @@ class _RFPHelper {
// this tab doesn't need letterboxing
this._resetContentSize(aBrowser);
} else {
- this._roundContentSize(aBrowser, isNewTab);
+ this._roundContentSize(aBrowser, context);
}
}
@@ -557,7 +557,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;
@@ -735,6 +736,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.
@@ -848,8 +878,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
