henry pushed to branch mullvad-browser-150.0a1-16.0-2 at The Tor Project / Applications / Mullvad Browser Commits: fbb6188c by Henry Wilkes at 2026-04-28T09:56:05+01:00 fixup! BB 32308: Use direct browser sizing for letterboxing. BB 44685: Use border radius for letterboxing. This allows us to drop browserDecorator. BB 44847: Drop the custom sidebar border radius logic since upstream now permanently uses a rounded corner for the browserContainer element when the sidebar is shown. We move the letterboxing background styling to browserContainer as well, so it does not leak out the corners. - - - - - 3 changed files: - browser/components/tabbrowser/content/tabbrowser.js - toolkit/components/resistfingerprinting/RFPHelper.sys.mjs - toolkit/components/resistfingerprinting/content/letterboxing.css Changes: ===================================== browser/components/tabbrowser/content/tabbrowser.js ===================================== @@ -2684,10 +2684,6 @@ 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(stack); ===================================== toolkit/components/resistfingerprinting/RFPHelper.sys.mjs ===================================== @@ -26,8 +26,6 @@ const kPrefLetterboxingRememberSize = const kTopicDOMWindowOpened = "domwindowopened"; const kTopicDOMWindowClosed = "domwindowclosed"; -const kTopicFullscreenNavToolbox = "fullscreen-nav-toolbox"; - const kPrefVerticalTabs = "sidebar.verticalTabs"; const kPrefResizeWarnings = "privacy.resistFingerprinting.resizeWarnings"; @@ -166,7 +164,6 @@ class _RFPHelper { Services.prefs.addObserver(kPrefLetterboxing, this); Services.prefs.addObserver(kPrefLetterboxingVcenter, this); Services.prefs.addObserver(kPrefVerticalTabs, this); - Services.obs.addObserver(this, kTopicFullscreenNavToolbox); XPCOMUtils.defineLazyPreferenceGetter( this, @@ -202,7 +199,6 @@ class _RFPHelper { Services.prefs.removeObserver(kPrefLetterboxingVcenter, this); Services.prefs.removeObserver(kPrefLetterboxing, this); Services.prefs.removeObserver(kPrefVerticalTabs, this); - Services.obs.removeObserver(this, kTopicFullscreenNavToolbox); // Remove the RFP observers, swallowing exceptions if they weren't present this._removeLanguagePrefObservers(); } @@ -224,15 +220,6 @@ class _RFPHelper { case kTopicDOMWindowClosed: this._handleDOMWindowClosed(subject); break; - case kTopicFullscreenNavToolbox: - // The `subject` is the gNavToolbox. - // Record whether the toobox has been hidden when the browser (not - // content) is in fullscreen. - subject.ownerGlobal.gBrowser.tabbox.classList.toggle( - "letterboxing-nav-toolbox-hidden", - data === "hidden" - ); - break; default: break; } @@ -728,14 +715,6 @@ class _RFPHelper { gapVertical >= this._letterboxingBorderRadius || gapHorizontal >= this._letterboxingBorderRadius ); - // When the Letterboxing area is top-aligned, only show the sidebar corner - // if there is enough horizontal space. - // The factor of 4 is from the horizontal centre-alignment and wanting - // enough space for twice the corner radius. - browserParent.classList.toggle( - "letterboxing-show-sidebar-corner", - gapHorizontal >= 4 * this._letterboxingBorderRadius - ); if (win.gBrowser.selectedBrowser == aBrowser) { const updateStatus = async args => { win.XULBrowserWindow.letterboxingStatus = args @@ -797,10 +776,7 @@ class _RFPHelper { _resetContentSize(aBrowser) { aBrowser.parentElement.classList.add("exclude-letterboxing"); - aBrowser.parentElement.classList.remove( - "letterboxing-show-outline", - "letterboxing-show-sidebar-corner" - ); + aBrowser.parentElement.classList.remove("letterboxing-show-outline"); } _updateSizeForTabsInWindow(aWindow) { ===================================== toolkit/components/resistfingerprinting/content/letterboxing.css ===================================== @@ -66,45 +66,12 @@ } } - background: var(--letterboxing-bgcolor); - - &:has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-outline) { - /* Letterboxing outline is visible for the current tab. Replace the usual - * outline to match the Letterboxing outline. For most scenarios, this - * should be mostly the same colour as when Letterboxing is not visible. But - * it may make a difference for some theme combinations. */ - outline-color: var(--letterboxing-outline-color); - outline-width: var(--letterboxing-outline-width); - } - /* Override the --tabpanel-background-color. */ /* TODO: FIX this for newtab pages. tor-browser#44085 */ --tabpanel-background-color: transparent; - /* stylelint-disable-next-line media-query-no-invalid */ - @media -moz-pref("sidebar.revamp") { - :root:not([inDOMFullscreen]) &[sidebar-shown]:not(.letterboxing-nav-toolbox-hidden):is( - /* When the Letterboxing area is aligned to the top, show the rounded - * corner if there is enough vertical space between the sidebar and the - * browser element, which is not rounded at the top. */ - :not(.letterboxing-vcenter):has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-sidebar-corner), - /* When the Letterboxing area is aligned to the centre, show the rounded - * corner if the Letterboxing border is shown. */ - .letterboxing-vcenter:has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-outline) - ) { - /* stylelint-disable-next-line media-query-no-invalid */ - @media -moz-pref("sidebar.position_start") { - border-start-start-radius: var(--letterboxing-border-radius); - } - - /* stylelint-disable-next-line media-query-no-invalid */ - @media not -moz-pref("sidebar.position_start") { - border-start-end-radius: var(--letterboxing-border-radius); - } - } - } - .browserContainer { + background: var(--letterboxing-bgcolor); /* * From Firefox 115 on, .browserContainer layout is flex / column, * and without this trick the .browserStack's resize observer @@ -119,29 +86,22 @@ } } -.browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) { - :root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready & { +.letterboxing .deck-selected .browserContainer:not(.responsive-mode):has(> .browserStack:not(.exclude-letterboxing).letterboxing-show-outline) { + /* Letterboxing outline is visible for the current tab. Replace the usual + * outline to match the Letterboxing outline. For most scenarios, this + * should be mostly the same colour as when Letterboxing is not visible. But + * it may make a difference for some theme combinations. */ + outline-color: var(--letterboxing-outline-color); + outline-width: var(--letterboxing-outline-width); +} + +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) { + :root:not([inDOMFullscreen]) .letterboxing-ready & { place-content: var(--letterboxing-vertical-alignment) center; } - :root:not([inDOMFullscreen]) .letterboxing &.letterboxing-show-outline { + :root:not([inDOMFullscreen]) &.letterboxing-show-outline { browser { - /* We use clip-path rather than border-radius because border-radius on its - * own leads to rendering artefacts in the corners (tested with GNOME). - * See tor-browser#44214 (comment 3262962). */ - /* TODO: Use border-radius once bugzilla bug 1991874 is resolved. */ - clip-path: rect( - auto auto auto auto round var(--letterboxing-border-radius-top) var(--letterboxing-border-radius-top) var(--letterboxing-border-radius) - var(--letterboxing-border-radius) - ); - } - - .browserDecorator { - /* Need a separate browserDecorator element because the clip-path on the - * browser would exclude the outline and box-shadow. */ - /* TODO: Move these rules to the browser element once bugzilla bug 1991874 - * is resolved, and drop browserDecorator. */ - display: block; border-radius: var(--letterboxing-border-radius-top) var(--letterboxing-border-radius-top) var(--letterboxing-border-radius) var(--letterboxing-border-radius); /* NOTE: The top outline will not be visible when this is aligned to the @@ -175,11 +135,3 @@ max-width: calc(var(--letterboxing-width) * 0.5); } } - -.browserDecorator { - display: none; - pointer-events: none; - background: transparent; - position: relative; - z-index: 1; -} View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/fbb6... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/fbb6... You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications: https://gitlab.torproject.org/-/profile/notifications | Help: https://gitlab.torproject.org/help