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/common/ZenCustomizableUI.sys.mjs

@@ -20,7 +20,7 @@ export var ZenCustomizableUI = new (class {
       true
     );
     CustomizableUIInternal.registerArea(
-      'zen-sidebar-bottom-buttons',
+      'zen-sidebar-foot-buttons',
       {
         type: this.TYPE_TOOLBAR,
         defaultPlacements: this.defaultSidebarIcons,
@@ -148,7 +148,7 @@ export var ZenCustomizableUI = new (class {
   }
 
   _hideToolbarButtons(window) {
-    const wrapper = window.document.getElementById('zen-sidebar-bottom-buttons');
+    const wrapper = window.document.getElementById('zen-sidebar-foot-buttons');
     const elementsToHide = ['new-tab-button'];
     for (let id of elementsToHide) {
       const elem = window.document.getElementById(id);
@@ -167,7 +167,7 @@ export var ZenCustomizableUI = new (class {
       window.document.getElementById('zen-sidebar-top-buttons')
     );
     window.CustomizableUI.registerToolbarNode(
-      window.document.getElementById('zen-sidebar-bottom-buttons')
+      window.document.getElementById('zen-sidebar-foot-buttons')
     );
   }
 })();

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -423,20 +423,18 @@
 /* ==========================================================================
    Sidebar Bottom Buttons Area
    ========================================================================== */
-#zen-sidebar-bottom-buttons {
+#zen-sidebar-foot-buttons {
   background: transparent;
-  gap: 5px; /* Spacing between buttons */
-  align-items: center; /* Center vertically */
-  padding-top: var(--zen-element-separation); /* Add padding above */
-  --toolbarbutton-inner-padding: 5px; /* Define inner padding for buttons */
+  gap: 5px;
+  align-items: center;
+  padding-top: var(--zen-element-separation);
+  --toolbarbutton-inner-padding: 5px;
 
-  /* Remove padding from direct children (except workspaces button) */
   & > toolbarbutton:not(#zen-workspaces-button) {
     padding: 0 !important;
   }
 }
 
-/* Hide the default new tab button container */
 #newtab-button-container {
   display: none !important;
 }
@@ -445,7 +443,6 @@
    Tab Arrow Scrollbox Adjustments
    ========================================================================== */
 #tabbrowser-arrowscrollbox {
-  /* Remove gap within the scrollbox part */
   &::part(scrollbox) {
     gap: 0px !important;
   }
@@ -561,10 +558,10 @@
   }
 
   /* Style bottom buttons area when expanded */
-  & #zen-sidebar-bottom-buttons {
+  & #zen-sidebar-foot-buttons {
     display: flex;
-    flex-direction: row; /* Arrange buttons horizontally */
-    justify-content: space-between; /* Distribute space */
+    flex-direction: row;
+    justify-content: space-between;
     width: 100%;
     position: relative;
   }
@@ -780,10 +777,27 @@
   }
 
   /* Ensure bottom buttons container fits content during customization */
-  :root[customizing] & #zen-sidebar-bottom-buttons {
+  :root[customizing] & #zen-sidebar-foot-buttons {
     min-width: unset !important;
   }
 
+  #zen-sidebar-foot-buttons {
+    & > .toolbarbutton-1 {
+      min-height: var(--tab-min-height);
+      line-height: var(--tab-label-line-height);
+      border-radius: var(--border-radius-medium);
+      padding: 0 calc(var(--tab-inline-padding) - var(--tab-inner-inline-margin));
+      width: var(--tab-collapsed-background-width);
+      margin-inline: var(--tab-inner-inline-margin);
+
+      & .toolbarbutton-badge-stack {
+        justify-content: center;
+        padding: 8px;
+        width: var(--tab-collapsed-background-width);
+      }
+    }
+  }
+
   /* Center top buttons container */
   & #zen-sidebar-top-buttons {
     justify-content: center;
@@ -805,7 +819,7 @@
   }
 
   /* Style bottom buttons area when collapsed */
-  & #zen-sidebar-bottom-buttons {
+  & #zen-sidebar-foot-buttons {
     display: flex;
     flex-direction: column; /* Stack vertically */
     padding-top: var(--zen-element-separation);

src/zen/vendor/motion.dep

@@ -0,0 +1 @@
+https://cdn.jsdelivr.net/npm/motion@latest/+esm: v12.16.0

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;