diff --git a/src/toolkit/components/prompts/content/commonDialog-css.patch b/src/toolkit/components/prompts/content/commonDialog-css.patch new file mode 100644 index 000000000..d5e3bc8bf --- /dev/null +++ b/src/toolkit/components/prompts/content/commonDialog-css.patch @@ -0,0 +1,13 @@ +diff --git a/toolkit/components/prompts/content/commonDialog.css b/toolkit/components/prompts/content/commonDialog.css +index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..0095175bce6fb4520aca357e5209e1ad7329bbdb 100644 +--- a/toolkit/components/prompts/content/commonDialog.css ++++ b/toolkit/components/prompts/content/commonDialog.css +@@ -88,7 +88,7 @@ dialog[insecureauth] { + + /* Fix padding/spacing */ + dialog { +- --grid-padding: 16px; ++ --grid-padding: 24px; + /* 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); diff --git a/src/toolkit/themes/shared/design-system/tokens-brand-css.patch b/src/toolkit/themes/shared/design-system/tokens-brand-css.patch new file mode 100644 index 000000000..429c2ed41 --- /dev/null +++ b/src/toolkit/themes/shared/design-system/tokens-brand-css.patch @@ -0,0 +1,12 @@ +diff --git a/toolkit/themes/shared/design-system/tokens-brand.css b/toolkit/themes/shared/design-system/tokens-brand.css +index 3ad65bc44fe06be77c4e5e679bb52bd0813cc972..3906b0bbcbbe6149ed7131460305074f079090a7 100644 +--- a/toolkit/themes/shared/design-system/tokens-brand.css ++++ b/toolkit/themes/shared/design-system/tokens-brand.css +@@ -6,6 +6,7 @@ + * and run `npm run build` to see your changes. */ + + @import url("chrome://global/skin/design-system/tokens-shared.css"); ++@import url("chrome://browser/content/zen-styles/zen-theme.css"); + + @layer tokens-foundation { + :root, 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 3a658eac0..89ad2aba0 100644 --- a/src/toolkit/themes/shared/in-content/common-shared-css.patch +++ b/src/toolkit/themes/shared/in-content/common-shared-css.patch @@ -1,16 +1,7 @@ diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css -index 41f65a1f2c3065631780b02d820f632abdf542af..c01c2957367da968d106c83117e45800bb6b15e5 100644 +index 41f65a1f2c3065631780b02d820f632abdf542af..d15ff979c5d2deecca3d232f68551bec10ba6b8f 100644 --- a/toolkit/themes/shared/in-content/common-shared.css +++ b/toolkit/themes/shared/in-content/common-shared.css -@@ -4,7 +4,7 @@ - - @import url("chrome://global/skin/design-system/tokens-brand.css"); - @import url("chrome://global/skin/design-system/text-and-typography.css"); -- -+@import url("chrome://browser/content/zen-styles/zen-theme.css"); - @namespace html "http://www.w3.org/1999/xhtml"; - @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; - @@ -66,7 +66,7 @@ * this in forced colors mode, as we should be using system colours then. */ diff --git a/src/zen/common/styles/zen-animations.css b/src/zen/common/styles/zen-animations.css index ae77e9502..d3c0cc10b 100644 --- a/src/zen/common/styles/zen-animations.css +++ b/src/zen/common/styles/zen-animations.css @@ -86,3 +86,15 @@ box-shadow: 0 0 250px color-mix(in srgb, var(--zen-primary-color), transparent 100%); } } + +@keyframes zen-dialog-fade-in { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/src/zen/common/styles/zen-buttons.css b/src/zen/common/styles/zen-buttons.css index 8a5b9065a..615f19f97 100644 --- a/src/zen/common/styles/zen-buttons.css +++ b/src/zen/common/styles/zen-buttons.css @@ -11,6 +11,8 @@ /** These types of buttons look INSAINELY bad in the preferences page */ xul|button { + --size-item-large: 34px; + border-radius: var(--zen-button-border-radius) !important; padding: var(--zen-button-padding) !important; transition: 0.1s; @@ -18,6 +20,7 @@ xul|button { font-weight: 500 !important; border: 1px solid var(--zen-colors-border); + border-bottom-width: 2px; } button:not(#zen-workspaces-button):active { diff --git a/src/zen/common/styles/zen-panels/dialog.css b/src/zen/common/styles/zen-panels/dialog.css index 5fe371f03..b6e764a64 100644 --- a/src/zen/common/styles/zen-panels/dialog.css +++ b/src/zen/common/styles/zen-panels/dialog.css @@ -3,12 +3,14 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/* Zen Welcome dialog override */ -@media (prefers-color-scheme: dark) { - .dialogBox:not(.spotlightBox) { - border: 1px solid var(--zen-colors-border); +.dialogBox { + border: none; + outline: 1px solid #a8a8a9; + 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; } } -.dialogBox:not(.spotlightBox) { - min-width: min(80vw, 376px); -} diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css index f6af00b6b..7378c0097 100644 --- a/src/zen/common/styles/zen-single-components.css +++ b/src/zen/common/styles/zen-single-components.css @@ -281,7 +281,7 @@ body > #confetti { /* Customizable modes */ #customization-container { - --toolbar-bgcolor: var(--zen-dialog-background); + --toolbar-bgcolor: var(--arrowpanel-background); } /* Site Data popup */ diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index 2187501c3..3acee7cdb 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -17,8 +17,8 @@ --zen-background-opacity: 1; /* Branding */ - --zen-branding-dark: #1d1d1d; - --zen-branding-paper: #ebebeb; + --zen-branding-dark: #101010; + --zen-branding-paper: #e2e2e2; --zen-branding-bg: light-dark(var(--zen-branding-paper), var(--zen-branding-dark)); --zen-branding-bg-reverse: light-dark(var(--zen-branding-dark), var(--zen-branding-paper)); @@ -46,8 +46,8 @@ color-mix(in srgb, var(--zen-primary-color) 80%, white 20%) ); --zen-colors-border: light-dark( - color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%), - color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79) 80%) + color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent), + color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79)) ); --zen-colors-border-contrast: light-dark( color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(181, 181, 181, 0.11) 90%), @@ -59,7 +59,7 @@ color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-branding-bg) 99%) ); - --zen-dialog-background: light-dark(rgb(244, 244, 244), rgb(31, 31, 31)); + --zen-dialog-background: light-dark(#FAFBFF, #161C31); --zen-urlbar-background: light-dark( color-mix(in srgb, var(--zen-primary-color) 3%, #f4f4f4 97%), color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%) @@ -113,6 +113,9 @@ --button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important; --button-primary-color: var(--in-content-primary-button-text-color) !important; + /* For dialogs / modals */ + --button-background-color-primary: var(--button-primary-bgcolor) !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; @@ -247,7 +250,7 @@ } --toolbar-field-background-color: var(--zen-colors-input-bg) !important; - --arrowpanel-background: var(--zen-dialog-background) !important; + --arrowpanel-background: light-dark(rgb(244, 244, 244), rgb(31, 31, 31)) !important; --panel-separator-color: color-mix(in srgb, currentColor 15%, transparent) !important; diff --git a/src/zen/workspaces/ZenWorkspace.mjs b/src/zen/workspaces/ZenWorkspace.mjs index 88f629562..2eb6e9438 100644 --- a/src/zen/workspaces/ZenWorkspace.mjs +++ b/src/zen/workspaces/ZenWorkspace.mjs @@ -158,9 +158,9 @@ export class nsZenWorkspace extends MozXULElement { }); this.indicator.addEventListener('click', (event) => { - if (this.hasPinnedTabs) { + if (this.hasPinnedTabs && event.button === 0) { event.stopPropagation(); - this.collapsiblePins.collapsed = !this.collapsiblePins.collapsed; + this.collapsiblePins.toggle(); } }); diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 87aa0f796..fd13cac1f 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -1334,7 +1334,7 @@ class nsZenWorkspaces { propagateWorkspaces(aWorkspaces) { const previousWorkspaces = this._workspaceCache || []; - this._workspaceCache = aWorkspaces; + let promises = []; let hasChanged = false; // Remove any workspace elements here that no longer exist for (const previousWorkspace of previousWorkspaces) { @@ -1342,14 +1342,18 @@ class nsZenWorkspaces { this.workspaceElement(previousWorkspace.uuid) && !aWorkspaces.find((w) => w.uuid === previousWorkspace.uuid) ) { + let promise = Promise.resolve(); if (this.isWorkspaceActive(previousWorkspace)) { // If the removed workspace was active, switch to another one const newActiveWorkspace = aWorkspaces.find((w) => w.uuid !== previousWorkspace.uuid) || null; - this.changeWorkspace(newActiveWorkspace); + promise = this.changeWorkspace(newActiveWorkspace); } - this.workspaceElement(previousWorkspace.uuid)?.remove(); - delete this.lastSelectedWorkspaceTabs[previousWorkspace.uuid]; + promise = promise.then(() => { + this.workspaceElement(previousWorkspace.uuid)?.remove(); + delete this.lastSelectedWorkspaceTabs[previousWorkspace.uuid]; + }); + promises.push(promise); hasChanged = true; } } @@ -1376,13 +1380,16 @@ class nsZenWorkspaces { previousElement = workspaceElement; } } - if (hasChanged) { - this.#fireSpaceUIUpdate(); - } - this._organizeWorkspaceStripLocations(this.getActiveWorkspaceFromCache()).finally(() => { - this.updateTabsContainers(); + return Promise.all(promises).then(() => { + this._workspaceCache = aWorkspaces; + if (hasChanged) { + this.#fireSpaceUIUpdate(); + } + this._organizeWorkspaceStripLocations(this.getActiveWorkspaceFromCache()).finally(() => { + this.updateTabsContainers(); + }); + this.updateWorkspacesChangeContextMenu(); }); - this.updateWorkspacesChangeContextMenu(); } async reorderWorkspace(id, newPosition) { diff --git a/src/zen/workspaces/create-workspace-form.css b/src/zen/workspaces/create-workspace-form.css index 35d14e021..b6ad9c060 100644 --- a/src/zen/workspaces/create-workspace-form.css +++ b/src/zen/workspaces/create-workspace-form.css @@ -41,9 +41,12 @@ zen-workspace-creation { } & xul|button { - border: none; margin: 0; font-weight: 400 !important; + + &:not(.footer-button.primary) { + border: none; + } } & .zen-workspace-creation-name-wrapper {