feat: Improved workspace creation animations, b=no-bug, c=workspaces

Author: mr-cheffy

src/zen/workspaces/ZenWorkspaceCreation.mjs

@@ -86,8 +86,6 @@
         return;
       }
 
-      document.documentElement.setAttribute('zen-creating-workspace', 'true');
-
       this.appendChild(this.constructor.fragment);
       this.initializeAttributeInheritance();
 
@@ -177,6 +175,7 @@
             {
               y: [20, 0],
               opacity: [0, 1],
+              filter: ['blur(2px)', 'blur(0)'],
             },
             {
               duration: 0.6,
@@ -197,16 +196,16 @@
       workspace.containerTabId = this.currentProfile;
       await gZenWorkspaces.saveWorkspace(workspace);
 
+      if (gZenVerticalTabsManager._canReplaceNewTab) {
+        BrowserCommands.openTab();
+      }
+
       await this.#cleanup();
 
       await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
       await gZenWorkspaces.updateTabsContainers();
 
       gBrowser.tabContainer._invalidateCachedTabs();
-
-      if (gZenVerticalTabsManager._canReplaceNewTab) {
-        BrowserCommands.openTab();
-      }
     }
 
     async onCancelButtonCommand() {
@@ -270,6 +269,7 @@
         {
           y: [0, 20],
           opacity: [1, 0],
+          filter: ['blur(0)', 'blur(2px)'],
         },
         {
           duration: 0.4,

src/zen/workspaces/ZenWorkspaces.mjs

@@ -1296,9 +1296,10 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await this._propagateWorkspaceData();
   }
 
-  async openWorkspaceCreation(event) {
+  async openWorkspaceCreation() {
     let createForm;
     const previousWorkspace = await this.getActiveWorkspace();
+    document.documentElement.setAttribute('zen-creating-workspace', 'true');
     await this.createAndSaveWorkspace('Space', undefined, false, 0, {
       beforeChangeCallback: async (workspace) => {
         createForm = document.createXULElement('zen-workspace-creation');
@@ -2180,7 +2181,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async onPinnedTabsResize(entries, forAnimation = false, animateContainer = false) {
-    if (!this._hasInitializedTabsStrip || (this._organizingWorkspaceStrip && !forAnimation)) {
+    if (
+      !this._hasInitializedTabsStrip ||
+      (this._organizingWorkspaceStrip && !forAnimation) ||
+      document.documentElement.hasAttribute('zen-creating-workspace')
+    ) {
       return;
     }
     if (document.documentElement.hasAttribute('customizing')) return;

src/zen/workspaces/create-workspace-form.css

@@ -32,8 +32,8 @@ zen-workspace-creation {
       flex-direction: column;
       width: calc(100% - 10px);
       margin: auto;
-      gap: 2.2rem;
-      margin-top: 2.2rem;
+      gap: 3.2rem;
+      margin-top: 1.2rem;
       height: 100%;
 
       & .zen-workspace-creation-form {

src/zen/workspaces/zen-workspaces.css

@@ -62,7 +62,8 @@
       opacity: 1;
     }
 
-    &:hover {
+    &:hover,
+    &[dragged='true']{
       background-color: var(--zen-toolbar-element-bg);
     }
 
@@ -90,7 +91,7 @@
 %include overflow-icons.inc.css
     }
 
-    &:has(toolbarbutton:hover) toolbarbutton[active='true'] {
+    &:has(toolbarbutton:hover) toolbarbutton[active='true']:not([dragged='true']) {
 %include overflow-icons.inc.css 
     }
   }