commit 88fce639ea50689baefaa07e0af5813611ed4e79
parent cfb3ee7287daca75e9343f1fbf513250d74b5bcc
Author: Sam Foster <sfoster@mozilla.com>
Date: Mon, 10 Nov 2025 17:59:43 +0000
Bug 1941635 - Avoid clipping dialogs when rounding browser content container corners. r=jsudiaman,desktop-theme-reviewers,tabbrowser-reviewers,emilio
- Append the dialogStack-s to the .browserSidebarContainer rather than inside the browserStack
- Move the content's border-radius and overflow:clip down to the .browserContainer
- Apply the --tabpanel-background-color bgcolor to each panel rather than the tabpanels element
- Add the border-radius when needed to the dialog overlay
- When 'round-content-area' pref is true, apply radius to tab panel top border, except on the outer edges
- Clip inactive tab panels so dialogs are also clipped and don't show behind selected tab panel
- Leave split-view panels as-is apart from moving the border-radius to the .browserContainer
- Nudge non-content dialogs up a bit more when they are in split-view panels
Differential Revision: https://phabricator.services.mozilla.com/D268178
Diffstat:
3 files changed, 58 insertions(+), 28 deletions(-)
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
@@ -4261,7 +4261,7 @@ var PanicButtonNotifier = {
class TabDialogBox {
static _containerFor(browser) {
return browser.closest(
- ".browserStack, .webextension-popup-stack, .sidebar-browser-stack"
+ ".browserSidebarContainer, .webextension-popup-stack, .sidebar-browser-stack"
);
}
diff --git a/browser/base/content/test/tabPrompts/browser_openPromptInBackgroundTab.js b/browser/base/content/test/tabPrompts/browser_openPromptInBackgroundTab.js
@@ -52,9 +52,9 @@ add_task(async function test_modal_ui() {
// switch tab back, and check the checkbox is displayed:
await BrowserTestUtils.switchTab(gBrowser, openedTab);
// check the prompt is there
- let promptElements = openedTab.linkedBrowser.parentNode.querySelectorAll(
- ".content-prompt-dialog"
- );
+ let promptElements = openedTab.linkedBrowser
+ .closest(".browserSidebarContainer")
+ .querySelectorAll(".content-prompt-dialog");
let dialogBox = gBrowser.getTabDialogBox(openedTab.linkedBrowser);
let contentPromptManager = dialogBox.getContentDialogManager();
diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css
@@ -23,6 +23,7 @@
--tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%) !important;
}
}
+ --dialog-backdrop-color: rgba(28, 27, 34, 0.45);
}
#navigator-toolbox {
@@ -70,26 +71,6 @@
position: relative;
z-index: var(--browser-area-z-index-tabbox);
margin: 0;
-
- /* stylelint-disable-next-line media-query-no-invalid */
- @media -moz-pref("sidebar.revamp") {
- outline: 0.01px solid var(--chrome-content-separator-color);
- box-shadow: var(--content-area-shadow);
-
- /* stylelint-disable-next-line media-query-no-invalid */
- @media -moz-pref("sidebar.revamp.round-content-area") {
- :root:not([inDOMFullscreen]) &[sidebar-shown] {
- overflow: clip;
- border-start-end-radius: var(--border-radius-medium);
-
- /* stylelint-disable-next-line media-query-no-invalid */
- @media -moz-pref("sidebar.position_start") {
- border-start-start-radius: var(--border-radius-medium);
- border-start-end-radius: 0;
- }
- }
- }
- }
}
/* We set large flex on both containers to allow the devtools toolbox to
@@ -107,6 +88,31 @@
/* .browserContainer only contains the devtools when docked horizontally */
min-height: 0;
+
+ /* We want to be able to show the frame color behind the clipped radiused corner */
+ background: var(--tabpanel-background-color);
+
+ /* stylelint-disable-next-line media-query-no-invalid */
+ @media -moz-pref("sidebar.revamp") {
+ outline: 0.01px solid var(--chrome-content-separator-color);
+ box-shadow: var(--content-area-shadow);
+ }
+
+ /* stylelint-disable-next-line media-query-no-invalid */
+ @media -moz-pref("sidebar.revamp") and -moz-pref("sidebar.revamp.round-content-area") {
+ overflow: clip;
+
+ :root:not([inDOMFullscreen]) #tabbrowser-tabbox[sidebar-shown] & {
+ /* stylelint-disable-next-line media-query-no-invalid */
+ @media -moz-pref("sidebar.position_start") {
+ border-start-start-radius: var(--border-radius-medium);
+ }
+ /* stylelint-disable-next-line media-query-no-invalid */
+ @media not -moz-pref("sidebar.position_start") {
+ border-start-end-radius: var(--border-radius-medium);
+ }
+ }
+ }
}
.browserSidebarContainer {
@@ -129,7 +135,6 @@
appearance: none;
padding: 0;
color-scheme: unset;
- background: var(--tabpanel-background-color);
display: flex;
&[pendingpaint] {
@@ -161,13 +166,19 @@
max-width: calc(100% - var(--panel-min-width));
margin: var(--space-xsmall);
}
+ /* Ensure any dialogs are clipped in an inactive/not-selected panel. */
+ :root:not([inDOMFullscreen]) & > .split-view-panel:not(.deck-selected) {
+ overflow: clip;
+ }
- .browserStack {
+ .browserContainer {
border-radius: var(--border-radius-medium);
overflow: clip;
outline: var(--border-width) solid var(--border-color);
- .deck-selected > .browserContainer > & {
+ /* The selected panel's dialogs need to sit above the non-selected tab panels. */
+ .deck-selected > & {
+ z-index: 1;
outline: var(--focus-outline);
}
}
@@ -461,6 +472,11 @@ split-view-footer {
/* Make dialogs overlap with upper chrome UI. Not necessary for Spotlight
dialogs that are intended to be centered above the window or content area. */
margin-top: -5px;
+
+ /* When the dialog is in a splitview, the offset is a little larger */
+ .deck-selected.split-view-panel & {
+ margin-top: -8px;
+ }
}
/* Spotlight dialogs are full-size on the content or window area */
@@ -517,9 +533,23 @@ split-view-footer {
width: 34em;
}
+/* Radius the backdrop so it doesnt occlude the radiused .browserContainer below it */
+:root:not([inDOMFullscreen]) #tabbrowser-tabbox[sidebar-shown] .dialogOverlay[topmost="true"] {
+ /* stylelint-disable-next-line media-query-no-invalid */
+ @media -moz-pref("sidebar.revamp.round-content-area") {
+ border-start-end-radius: var(--border-radius-medium);
+
+ /* stylelint-disable-next-line media-query-no-invalid */
+ @media -moz-pref("sidebar.position_start") {
+ border-start-start-radius: var(--border-radius-medium);
+ border-start-end-radius: 0;
+ }
+ }
+}
+
.dialogOverlay[topmost="true"],
#window-modal-dialog::backdrop {
- background-color: rgba(28, 27, 34, 0.45);
+ background-color: var(--dialog-backdrop-color);
}
.dialogOverlay[hideContent="true"][topmost="true"] {
