feat: part 2 - Finish workspace creation form, refactor collapsed toolbar and update motion to v12.16.0, b=no-bug, c=workspaces, common, tabs, vendor

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -76,13 +76,13 @@
     }
 
     openThemePicker(event) {
-      const target = event.explicitOriginalTarget?.classList?.contains(
+      const position = event.explicitOriginalTarget?.classList?.contains(
         'zen-workspace-creation-edit-theme-button'
       )
-        ? event.explicitOriginalTarget
-        : this.toolbox;
-      PanelMultiView.openPopup(this.panel, target, {
-        position: 'bottomright topright',
+        ? 'end_before'
+        : 'topright topleft';
+      PanelMultiView.openPopup(this.panel, this.toolbox, {
+        position,
         triggerEvent: event,
       });
     }

src/zen/workspaces/ZenWorkspaceCreation.mjs

@@ -59,6 +59,18 @@
       return this.getAttribute('workspace-id');
     }
 
+    get elementsToAnimate() {
+      return [
+        this.querySelector('.zen-workspace-creation-title'),
+        this.querySelector('.zen-workspace-creation-label'),
+        this.querySelector('.zen-workspace-creation-name-wrapper'),
+        this.querySelector('.zen-workspace-creation-profile-wrapper'),
+        this.querySelector('.zen-workspace-creation-edit-theme-button'),
+        this.createButton,
+        this.cancelButton,
+      ];
+    }
+
     connectedCallback() {
       if (this.delayConnectedCallback()) {
         // If we are not ready yet, or if we have already connected, we
@@ -71,6 +83,16 @@
       this.appendChild(this.constructor.fragment);
       this.initializeAttributeInheritance();
 
+      this.inputName = this.querySelector('.zen-workspace-creation-name');
+      this.inputIcon = this.querySelector('.zen-workspace-creation-icon-label');
+      this.inputProfile = this.querySelector('.zen-workspace-creation-profile');
+      this.createButton = this.querySelector('.zen-workspace-creation-create-button');
+      this.cancelButton = this.querySelector('.zen-workspace-creation-cancel-button');
+
+      for (const element of this.elementsToAnimate) {
+        element.style.opacity = 0;
+      }
+
       this.#wasInCollapsedMode =
         document.documentElement.getAttribute('zen-sidebar-expanded') !== 'true';
 
@@ -103,12 +125,6 @@
         }
       }
 
-      this.inputName = this.querySelector('.zen-workspace-creation-name');
-      this.inputIcon = this.querySelector('.zen-workspace-creation-icon-label');
-      this.inputProfile = this.querySelector('.zen-workspace-creation-profile');
-      this.createButton = this.querySelector('.zen-workspace-creation-create-button');
-      this.cancelButton = this.querySelector('.zen-workspace-creation-cancel-button');
-
       this.createButton.addEventListener('command', this.onCreateButtonCommand.bind(this));
       this.cancelButton.addEventListener('command', this.onCancelButtonCommand.bind(this));
 
@@ -133,6 +149,20 @@
         this.inputProfile.parentNode.hidden = true;
       }
 
+      gZenUIManager.motion.animate(
+        this.elementsToAnimate,
+        {
+          y: [20, 0],
+          opacity: [0, 1],
+        },
+        {
+          duration: 0.9,
+          type: 'spring',
+          bounce: 0,
+          delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }),
+        }
+      );
+
       this.resolveInitialized();
     }
 
@@ -143,7 +173,7 @@
       workspace.containerTabId = this.currentProfile;
       await gZenWorkspaces.saveWorkspace(workspace);
 
-      this.#cleanup();
+      await this.#cleanup();
 
       await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
       await gZenWorkspaces.updateTabsContainers();
@@ -208,10 +238,24 @@
 
     async handleZenWorkspacesChange() {
       await gZenWorkspaces.removeWorkspace(this.workspaceId);
-      this.#cleanup();
+      await this.#cleanup();
     }
 
-    #cleanup() {
+    async #cleanup() {
+      await gZenUIManager.motion.animate(
+        this.elementsToAnimate.reverse(),
+        {
+          y: [0, 20],
+          opacity: [1, 0],
+        },
+        {
+          duration: 0.9,
+          type: 'spring',
+          bounce: 0,
+          delay: gZenUIManager.motion.stagger(0.05),
+        }
+      );
+
       gZenWorkspaces.removeChangeListeners(this.handleZenWorkspacesChangeBind);
       for (const element of this.constructor.elementsToDisable) {
         const el = document.getElementById(element);

src/zen/workspaces/ZenWorkspaces.mjs

@@ -643,7 +643,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   _handleSwipeMayStart(event) {
     if (this.privateWindowOrDisabled || this._inChangingWorkspace) return;
-    if (event.target.closest('#zen-sidebar-bottom-buttons')) return;
+    if (event.target.closest('#zen-sidebar-foot-buttons')) return;
 
     // Only handle horizontal swipes
     if (event.direction === event.DIRECTION_LEFT || event.direction === event.DIRECTION_RIGHT) {
@@ -2627,6 +2627,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   _initializeWorkspaceTabContextMenus() {
     if (this.privateWindowOrDisabled) {
+      document.getElementById('cmd_zenOpenWorkspaceCreation').setAttribute('disabled', true);
       return;
     }
     const menu = document.createXULElement('menu');
@@ -2639,10 +2640,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     menu.appendChild(menuPopup);
 
     document.getElementById('context_closeDuplicateTabs').after(menu);
-
-    document
-      .getElementById('cmd_zenOpenWorkspaceCreation')
-      .setAttribute('disabled', this.privateWindowOrDisabled);
   }
 
   async changeTabWorkspace(workspaceID) {

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

@@ -6,29 +6,30 @@
 
 zen-workspace-creation {
   flex: 1;
-  max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2);
+  max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
 
   & .zen-workspace-creation {
     justify-content: center;
 
     & .zen-workspace-creation-title {
       font-size: large;
+      margin-bottom: 5px;
     }
 
     & .zen-workspace-creation-label {
       margin: 0;
-      opacity: 0.6;
+      opacity: 0.4;
     }
 
     & form {
       --input-border-color: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
-      --input-bgcolor: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15));
+      --input-bgcolor: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
 
       display: flex;
       flex-direction: column;
       width: calc(100% - 10px);
       margin: auto;
-      gap: 1rem;
+      gap: 1.2rem;
 
       & .zen-workspace-creation-form {
         gap: 0.6rem;