From 391cb1424a10980f8bc05ebca97de5adfc288162 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Thu, 15 Jan 2026 18:13:01 +0100 Subject: [PATCH] feat: Improved dialog UI and colors, b=no-bug, c=common, workspaces --- src/browser/base/content/zen-assets.inc.xhtml | 1 - .../shared/tabbrowser/content-area-css.patch | 11 +++++++- .../prompts/content/commonDialog-css.patch | 16 +++++++++--- .../shared/in-content/common-shared-css.patch | 11 +++++++- src/zen/common/styles/zen-browser-ui.css | 4 +-- src/zen/common/styles/zen-buttons.css | 26 +++++++++---------- src/zen/common/styles/zen-panels/dialog.css | 9 +++---- .../common/styles/zen-single-components.css | 4 +-- src/zen/common/styles/zen-theme.css | 22 ++++++++-------- src/zen/drag-and-drop/ZenDragAndDrop.js | 10 ++----- src/zen/workspaces/create-workspace-form.css | 1 + src/zen/workspaces/zen-workspaces.css | 2 +- 12 files changed, 67 insertions(+), 50 deletions(-) diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml index 7d6102e1f..0ad4b1f6f 100644 --- a/src/browser/base/content/zen-assets.inc.xhtml +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -8,7 +8,6 @@ - diff --git a/src/browser/themes/shared/tabbrowser/content-area-css.patch b/src/browser/themes/shared/tabbrowser/content-area-css.patch index f946818be..e69d643fe 100644 --- a/src/browser/themes/shared/tabbrowser/content-area-css.patch +++ b/src/browser/themes/shared/tabbrowser/content-area-css.patch @@ -1,5 +1,5 @@ diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css -index b00139d7af878326ff303c08d5ddd47501b8c7db..dbd8a9124fb159fa59012a6c06899a8ec74a1f27 100644 +index b00139d7af878326ff303c08d5ddd47501b8c7db..52bad3e978004f3322f3d504cbd663e7b620b69f 100644 --- a/browser/themes/shared/tabbrowser/content-area.css +++ b/browser/themes/shared/tabbrowser/content-area.css @@ -90,7 +90,6 @@ @@ -27,3 +27,12 @@ index b00139d7af878326ff303c08d5ddd47501b8c7db..dbd8a9124fb159fa59012a6c06899a8e inset: 0; /* Hide tab-modal dialogs when a window-modal one is up. */ +@@ -553,7 +551,7 @@ split-view-footer { + + .dialogOverlay[topmost="true"], + #window-modal-dialog::backdrop { +- background-color: var(--dialog-backdrop-color); ++ background-color: light-dark(rgba(255, 255, 255, .2), rgba(0, 0, 0, .2)); + } + + .dialogOverlay[hideContent="true"][topmost="true"] { diff --git a/src/toolkit/components/prompts/content/commonDialog-css.patch b/src/toolkit/components/prompts/content/commonDialog-css.patch index c9aaeec87..ad3ab9c8c 100644 --- a/src/toolkit/components/prompts/content/commonDialog-css.patch +++ b/src/toolkit/components/prompts/content/commonDialog-css.patch @@ -1,13 +1,23 @@ diff --git a/toolkit/components/prompts/content/commonDialog.css b/toolkit/components/prompts/content/commonDialog.css -index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..a34363a6a8bf5db6826738dbad0ec6b75b633474 100644 +index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..9aa4dc90c73e2f1e2fdcb6bdc26a505402a5c28f 100644 --- a/toolkit/components/prompts/content/commonDialog.css +++ b/toolkit/components/prompts/content/commonDialog.css -@@ -91,7 +91,7 @@ dialog[insecureauth] { +@@ -3,7 +3,8 @@ + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + + :root { +- min-width: 29em; ++ min-width: 32em; ++ min-height: 12rem; + } + + dialog[insecureauth] { +@@ -91,7 +92,7 @@ dialog[insecureauth] { --grid-padding: 16px; /* All the inner items should have 4px inline margin, leading to 1.16em spacing * between the dialog and its contents, and 8px horizontal spacing between items. */ - padding: var(--grid-padding) calc(var(--grid-padding) - 4px); -+ padding: 24px 20px; ++ padding: 26px 22px; &::part(dialog-button) { /* Adjust vertical margins for buttons in subdialogs. */ diff --git a/src/toolkit/themes/shared/in-content/common-shared-css.patch b/src/toolkit/themes/shared/in-content/common-shared-css.patch index 6edb65368..26025fee5 100644 --- a/src/toolkit/themes/shared/in-content/common-shared-css.patch +++ b/src/toolkit/themes/shared/in-content/common-shared-css.patch @@ -1,5 +1,5 @@ diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css -index c1acf2d6ab3c9a260e73d43af027f34a807e01dc..dbef9778a1582881dd83f4a1dde455308719b2be 100644 +index c1acf2d6ab3c9a260e73d43af027f34a807e01dc..af2b4c430a7101af1fb8a3bc0e2959626cf04bfb 100644 --- a/toolkit/themes/shared/in-content/common-shared.css +++ b/toolkit/themes/shared/in-content/common-shared.css @@ -63,7 +63,7 @@ @@ -11,6 +11,15 @@ index c1acf2d6ab3c9a260e73d43af027f34a807e01dc..dbef9778a1582881dd83f4a1dde45530 } } +@@ -177,7 +177,7 @@ xul|menulist { + border-radius: var(--button-border-radius); + background-color: var(--button-background-color); + font-weight: normal; +- padding: 0.45em 1em; ++ padding: 0.6em 1em; + text-decoration: none; + margin: 4px 8px; + /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ @@ -696,7 +696,7 @@ html|*#categories[last-input-type="mouse"] > html|button.category:focus-visible fill-opacity: 1; } diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css index 28dbfe1ed..e5c1a624b 100644 --- a/src/zen/common/styles/zen-browser-ui.css +++ b/src/zen/common/styles/zen-browser-ui.css @@ -265,7 +265,7 @@ &::before { height: 50px; width: 2px; - background: var(--button-primary-bgcolor); + background: var(--button-background-color-primary); border-radius: 2px; content: ""; position: absolute; @@ -284,7 +284,7 @@ &::before { height: 2px; width: 50px; - background: var(--button-primary-bgcolor); + background: var(--button-background-color-primary); border-radius: 2px; content: ""; position: absolute; diff --git a/src/zen/common/styles/zen-buttons.css b/src/zen/common/styles/zen-buttons.css index 39d43de75..9604bd9ba 100644 --- a/src/zen/common/styles/zen-buttons.css +++ b/src/zen/common/styles/zen-buttons.css @@ -13,27 +13,25 @@ xul|button { --size-item-large: 34px; - border-radius: var(--zen-button-border-radius) !important; padding: var(--zen-button-padding) !important; transition: 0.1s; - min-width: 100px !important; - font-weight: 500 !important; - - border: 1px solid var(--zen-colors-border); - border-bottom-width: 2px; } -button:not(#zen-workspaces-button):active { +button[dlgtype] { + --button-background-color: light-dark(white, #302f63); + --button-background-color-hover: color-mix(in srgb, var(--button-background-color) 90%, transparent); + --button-background-color-active: color-mix(in srgb, var(--button-background-color) 80%, transparent); + --button-background-color-primary: #3138fc; + --button-background-color-primary-hover: color-mix(in srgb, var(--button-background-color-primary) 95%, transparent); + --in-content-primary-button-text-color: white; + border-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)) !important; + border-bottom-width: 2px !important; +} + +xul|button:not(#zen-workspaces-button):active { transform: scale(0.98); } -html|button:not(:is(.tab-button, .ghost-button, .button-toggle, .button-edit, .button-add, )), -xul|button:is(.expander-down) { - transition: 0.2s; - min-width: unset !important; - border-radius: 6px !important; -} - .footer-button { transition: scale 0.2s; &:active { diff --git a/src/zen/common/styles/zen-panels/dialog.css b/src/zen/common/styles/zen-panels/dialog.css index b6e764a64..ad12f9c3a 100644 --- a/src/zen/common/styles/zen-panels/dialog.css +++ b/src/zen/common/styles/zen-panels/dialog.css @@ -5,12 +5,9 @@ */ .dialogBox { border: none; - outline: 1px solid #a8a8a9; + outline: 1px solid light-dark(transparent, #646464); animation: zen-dialog-fade-in 0.3s ease-out; border-radius: 12px !important; - @media (prefers-color-scheme: dark) { - outline-color: #44495a; - outline-offset: -2px; - border: 1px solid black; - } + border: 1px solid light-dark(#a8a8a9, black); + outline-offset: -1.5px; } diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css index 9138b19e3..0bb128a96 100644 --- a/src/zen/common/styles/zen-single-components.css +++ b/src/zen/common/styles/zen-single-components.css @@ -435,7 +435,7 @@ border-radius: 99px; width: 32px; height: 32px; - background: var(--button-primary-bgcolor); + background: var(--button-background-color-primary); opacity: 0.6; transition: transform 0.12s ease-in-out, @@ -554,7 +554,7 @@ color: var(--button-primary-color); &::before { - background: var(--button-primary-bgcolor); + background: var(--button-background-color-primary); } } diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index ede27f9df..9e36ca3e8 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -83,7 +83,6 @@ var(--zen-primary-color) 40%, var(--zen-branding-bg-reverse) 60% ) !important; - --button-text-color-primary: var(--zen-branding-bg) !important; --in-content-primary-button-text-color: var(--zen-branding-bg) !important; --in-content-primary-button-border-color: transparent !important; --in-content-primary-button-border-hover: transparent !important; @@ -100,27 +99,27 @@ currentColor, transparent 85% ) !important; - --button-bgcolor: var(--in-content-button-background) !important; - --button-hover-bgcolor: var(--in-content-button-background-hover) !important; - --button-hover-color: var(--in-content-button-text-color-hover) !important; --focus-outline-color: var(--color-accent-primary) !important; --toolbarbutton-icon-fill-attention: var(--toolbar-color) !important; --toolbarbutton-icon-fill: currentColor !important; - --button-primary-bgcolor: var(--in-content-primary-button-background) !important; + --button-background-color-primary: var(--in-content-primary-button-background) !important; --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important; --button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important; --button-primary-color: var(--in-content-primary-button-text-color) !important; + --button-border-color-primary: var(--in-content-primary-button-border-color) !important; - /* For dialogs / modals */ - --button-background-color-primary: var(--button-primary-bgcolor) !important; + --button-border-color: var(--in-content-primary-button-border-color) !important; + + --button-border-radius: 6px; + --button-text-color-primary: var(--in-content-primary-button-text-color) !important; --button-background-color: var(--in-content-button-background) !important; - --button-background-color-hover: var(--in-content-button-background-hover) !important; - --button-background-color-active: color-mix(in srgb, currentColor 5%, transparent 95%) !important; + --button-background-color-hover: color-mix(in srgb, var(--button-background-color) 95%, transparent) !important; + --button-background-color-active: color-mix(in srgb, var(--button-background-color) 90%, transparent) !important; - --color-accent-primary: var(--button-primary-bgcolor) !important; + --color-accent-primary: var(--button-background-color-primary) !important; --color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important; --color-accent-primary-active: var(--button-primary-active-bgcolor) !important; @@ -138,7 +137,6 @@ var(--zen-branding-bg) ); - --zen-button-border-radius: 5px; --zen-button-padding: 0.6rem 1.2rem; --zen-toolbar-element-bg: light-dark( @@ -344,3 +342,5 @@ %include schemes/light.inc.css } } + +%include zen-buttons.css diff --git a/src/zen/drag-and-drop/ZenDragAndDrop.js b/src/zen/drag-and-drop/ZenDragAndDrop.js index 77de1188f..6f4f23086 100644 --- a/src/zen/drag-and-drop/ZenDragAndDrop.js +++ b/src/zen/drag-and-drop/ZenDragAndDrop.js @@ -109,16 +109,15 @@ } const draggingTabs = tab.multiselected ? gBrowser.selectedTabs : [tab]; const { offsetX, offsetY } = this.#getDragImageOffset(event, tab, draggingTabs); - const dragImage = this.#createDragImageForTabs(tab, draggingTabs); + const dragImage = this.#createDragImageForTabs(draggingTabs); this.originalDragImageArgs = [dragImage, offsetX, offsetY]; dt.updateDragImage(...this.originalDragImageArgs); } - #createDragImageForTabs(draggedTab, movingTabs) { + #createDragImageForTabs(movingTabs) { const periphery = gZenWorkspaces.activeWorkspaceElement.querySelector( "#tabbrowser-arrowscrollbox-periphery" ); - const dragData = draggedTab._dragData; const tabRect = window.windowUtils.getBoundsWithoutFlushing(movingTabs[0]); const wrapper = document.createElement("div"); wrapper.style.width = tabRect.width + "px"; @@ -140,11 +139,6 @@ tabClone.style.opacity = "0.2"; tabClone.style.zIndex = `${-i}`; } - // Apply a transform translate to the tab in order to center it within the drag image - // based on the event coordinates. - if (!movingTabs.length > 1) { - tabClone.style.transform = `translate(${(tabRect.width - dragData.offsetX) / 2}px, ${(tabRect.height - dragData.offsetY) / 2}px)`; - } tabClone.setAttribute("drag-image", "true"); wrapper.appendChild(tabClone); if (isTab(tabClone)) { diff --git a/src/zen/workspaces/create-workspace-form.css b/src/zen/workspaces/create-workspace-form.css index 62e6fb0cd..4e3ad350f 100644 --- a/src/zen/workspaces/create-workspace-form.css +++ b/src/zen/workspaces/create-workspace-form.css @@ -138,6 +138,7 @@ zen-workspace-creation { background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); margin-left: auto; min-width: unset !important; + border-radius: 6px; } } diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index ee6d8ae77..5ddbf6bad 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -22,7 +22,7 @@ display: none !important; } - border-radius: var(--zen-button-border-radius) !important; + border-radius: var(--button-border-radius) !important; background: transparent; appearance: unset !important; height: fit-content;