[tbb-commits] [Git][tpo/applications/mullvad-browser][mullvad-browser-115.7.0esr-13.5-1] fixup! Bug 32308: use direct browser sizing for letterboxing.
richard (@richard)
git at gitlab.torproject.org
Wed Jan 31 13:45:14 UTC 2024
richard pushed to branch mullvad-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Mullvad Browser
Commits:
f74a854e by hackademix at 2024-01-31T13:44:56+00:00
fixup! Bug 32308: use direct browser sizing for letterboxing.
Bug 42387: hide visual artifacts and fix the status label on rounded letterboxing borders.
- - - - -
3 changed files:
- browser/base/content/browser.css
- browser/base/content/tabbrowser.js
- toolkit/components/resistfingerprinting/RFPHelper.sys.mjs
Changes:
=====================================
browser/base/content/browser.css
=====================================
@@ -127,6 +127,11 @@ body {
-moz-window-dragging: drag;
}
+/**
+ Never modify the following selector without synchronizing
+ LETTERBOX_CSS_SELECTOR in RFPHelper.sys.jsm, where
+ --letterboxing-width & --letterboxing-height are actually set.
+**/
.letterboxing .browserContainer {
/*
From Firefox 115 on, .browserContainer layout is flex / column,
@@ -137,6 +142,14 @@ body {
background: var(--letterboxing-bgcolor);
}
+.browserDecorator {
+ display: none;
+ pointer-events: none;
+ background: transparent;
+ position: relative;
+ z-index: 1;
+}
+
.letterboxing {
--letterboxing-border-radius: 8px;
--letterboxing-border-top-radius: 0;
@@ -145,6 +158,7 @@ body {
--letterboxing-bgcolor: var(--tabpanel-background-color);
--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.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
@@ -157,6 +171,26 @@ body {
box-shadow: rgba(0, 0, 0, 0.5) 0px -1px 2px;
}
+:root:not([inDOMFullscreen]) .letterboxing .browserContainer:not(.responsive-mode)
+ > .browserStack:not(.exclude-letterboxing)
+ > .browserDecorator {
+ display: initial;
+ visibility: visible;
+ 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) 0px 0px .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)
@@ -167,6 +201,7 @@ body {
place-self: end left;
left: 0;
right: 0;
+ z-index: 2;
--letterboxing-status-left-radius: var(--letterboxing-border-radius);
--letterboxing-status-right-radius: 0;
}
@@ -184,23 +219,24 @@ body {
.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);
}
-/**
- Never modify the following selector without synchronizing
- LETTERBOX_CSS_SELECTOR in RFPHelper.jsm!
-**/
.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
- /* width & height to be dynamically set by RFPHelper.jsm */
box-shadow: 0px 4px 8px 0px 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;
}
:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
> .browserStack:not(.exclude-letterboxing) {
place-content: var(--letterboxing-vertical-alignment) center;
+ background: var(--letterboxing-bgcolor);
}
#toolbar-menubar[autohide="true"] {
=====================================
browser/base/content/tabbrowser.js
=====================================
@@ -2238,6 +2238,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(notificationbox);
=====================================
toolkit/components/resistfingerprinting/RFPHelper.sys.mjs
=====================================
@@ -447,8 +447,7 @@ class _RFPHelper {
// find the rule applying the default letterboxing styles to browsers
// preemptively in order to beat race conditions on tab/window creation
const LETTERBOX_CSS_URL = "chrome://browser/content/browser.css";
- const LETTERBOX_CSS_SELECTOR =
- ".letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser";
+ const LETTERBOX_CSS_SELECTOR = ".letterboxing .browserContainer";
for (let ss of document.styleSheets) {
if (ss.href !== LETTERBOX_CSS_URL) {
continue;
@@ -572,8 +571,8 @@ class _RFPHelper {
const r = (width, height) => {
lastRoundedSize = {width, height};
return {
- width: `var(--rdm-width, ${width}px)`,
- height: `var(--rdm-height, ${height}px)`,
+ "--letterboxing-width": `var(--rdm-width, ${width}px)`,
+ "--letterboxing-height": `var(--rdm-height, ${height}px)`,
}
};
@@ -637,7 +636,7 @@ class _RFPHelper {
for (let [name, value] of Object.entries(props)) {
if (style[name] !== value) {
this.push(() => {
- style.setProperty(name, value, "important");
+ style.setProperty(name, value);
});
}
}
@@ -668,8 +667,11 @@ class _RFPHelper {
? // optional UI components such as the notification box, the find bar
// or devtools are constraining this browser's size: recompute custom
roundDimensions(parentWidth, parentHeight)
- : { width: "", height: "" }; // otherwise we can keep the default (rounded) size
- styleChanges.queueIfNeeded(aBrowser, roundedInline);
+ : {
+ "--letterboxing-width": "",
+ "--letterboxing-height": "",
+ }; // otherwise we can keep the default (rounded) size
+ styleChanges.queueIfNeeded(browserParent, roundedInline);
if (lastRoundedSize) {
// check wether the letterboxing margin is less than the border radius, and if so flatten the borders
View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/f74a854ec9c05c9b941bee1f20fe8aff12cf6209
--
View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/f74a854ec9c05c9b941bee1f20fe8aff12cf6209
You're receiving this email because of your account on gitlab.torproject.org.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tbb-commits/attachments/20240131/cb3ca1c6/attachment-0001.htm>
More information about the tbb-commits
mailing list