commit 7d37cea0dc03f4100bb2edb7acf67b0b3f13dc59
parent 9dc94a003aacda9d2effa85fb6e6b25a1c0d85bc
Author: pstanciu <pstanciu@mozilla.com>
Date: Mon, 10 Nov 2025 03:07:25 +0200
Revert "Bug 1941635 - Avoid clipping dialogs when rounding browser content container corners. r=jsudiaman,desktop-theme-reviewers,tabbrowser-reviewers,emilio" for causing stylelint failure @content-area.css
This reverts commit 9dc94a003aacda9d2effa85fb6e6b25a1c0d85bc.
Diffstat:
3 files changed, 28 insertions(+), 56 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(
- ".browserSidebarContainer, .webextension-popup-stack, .sidebar-browser-stack"
+ ".browserStack, .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
- .closest(".browserSidebarContainer")
- .querySelectorAll(".content-prompt-dialog");
+ let promptElements = openedTab.linkedBrowser.parentNode.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,7 +23,6 @@
--tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%) !important;
}
}
- --dialog-backdrop-color: rgba(28, 27, 34, 0.45);
}
#navigator-toolbox {
@@ -71,6 +70,26 @@
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
@@ -88,29 +107,6 @@
/* .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.round-content-area") {
- overflow: clip;
-
- :root:not([inDOMFullscreen]) #tabbrowser-tabbox[sidebar-shown] & {
- @media -moz-pref("sidebar.position_start") {
- border-start-start-radius: var(--border-radius-medium);
- }
- @media not -moz-pref("sidebar.position_start") {
- border-start-end-radius: var(--border-radius-medium);
- }
- }
- }
- }
}
.browserSidebarContainer {
@@ -133,6 +129,7 @@
appearance: none;
padding: 0;
color-scheme: unset;
+ background: var(--tabpanel-background-color);
display: flex;
&[pendingpaint] {
@@ -164,19 +161,13 @@
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;
- }
- .browserContainer {
+ .browserStack {
border-radius: var(--border-radius-medium);
overflow: clip;
outline: var(--border-width) solid var(--border-color);
- /* The selected panel's dialogs need to sit above the non-selected tab panels. */
- .deck-selected > & {
- z-index: 1;
+ .deck-selected > .browserContainer > & {
outline: var(--focus-outline);
}
}
@@ -470,11 +461,6 @@ 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 */
@@ -531,23 +517,9 @@ 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: var(--dialog-backdrop-color);
+ background-color: rgba(28, 27, 34, 0.45);
}
.dialogOverlay[hideContent="true"][topmost="true"] {
