ma1 pushed to branch base-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Tor Browser Commits: 444cf832 by hackademix at 2024-02-07T18:50:54+01:00 fixup! Bug 32308: use direct browser sizing for letterboxing. Bug 42387: hide visual artifacts and fix the status label on rounded letterboxing borders. - - - - - 1926178c by hackademix at 2024-02-07T18:51:02+01:00 fixup! Bug 32308: use direct browser sizing for letterboxing. Bug 42389: make the betterboxing gradient actually work. - - - - - 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) { @@ -154,7 +168,26 @@ body { .letterboxing.letterboxing-gradient .browserContainer { background: linear-gradient(283deg, var(--letterboxing-gradient-color1) 0%, var(--letterboxing-gradient-color2) 100%), var(--letterboxing-bgcolor); - 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; } /* @@ -167,6 +200,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,18 +218,19 @@ 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; + background: var(--letterboxing-gradient-color2); } :root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode) ===================================== 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/tor-browser/-/compare/f7199bf... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/f7199bf... You're receiving this email because of your account on gitlab.torproject.org.