fix: Fixed deleting a space when its currently selected, b=no-bug, c=common, workspaces

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);

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,

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.
     */

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);
+  }
+}

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 {

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);
-}

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 */

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;
 

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();
       }
     });
 

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) {

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 {