Enhance animation logic for workspace transitions and refine CSS styles

.prettierignore

@@ -4,6 +4,8 @@ engine/
 **/*.xhtml
 **/*.inc.xhtml
 **/*.bundle.min.js
+**/*.min.js
+**/*.min.mjs
 
 **/*.svg
 

src/browser/base/content/ZenUIManager.mjs

@@ -9,7 +9,7 @@ var gZenUIManager = {
     XPCOMUtils.defineLazyPreferenceGetter(this, 'contentElementSeparation', 'zen.theme.content-element-separation', 0);
 
     ChromeUtils.defineLazyGetter(this, 'motion', () => {
-      return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: "current" });
+      return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: 'current' });
     });
 
     new ResizeObserver(gZenCommonActions.throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -131,9 +131,10 @@
           *:is([panelopen='true'], [open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)
         ) {
         &:not([animate='true']) {
+          --zen-compact-mode-func: cubic-bezier(.53,1.28,.43,1.03);
           transition:
-            left 0.25s ease,
-            right 0.25s ease;
+            left 0.35s var(--zen-compact-mode-func),
+            right 0.35s var(--zen-compact-mode-func);
           opacity: 1;
 
           left: -1px;

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -223,6 +223,7 @@
 #tabbrowser-tabs {
   margin-inline-start: 0 !important;
   padding-inline-start: 0 !important;
+  overflow-x: hidden;
 
   --tab-inner-inline-margin: 0;
 

src/browser/base/zen-components/ZenGlanceManager.mjs

@@ -108,24 +108,30 @@
         this.browserWrapper.style.left = `${initialX}px`;
         this.browserWrapper.style.width = `${initialWidth}px`;
         this.browserWrapper.style.height = `${initialHeight}px`;
-        gZenUIManager.motion.animate(this.browserWrapper, {
-          top: [`${initialY}px`, '50%'],
-          left: [`${initialX}px`, '50%'],
-          width: [`${initialWidth}px`, '85%'],
-          height: [`${initialHeight}px`, '100%'],
-          opacity: [.8, 1],
-        }, {
-          duration: .5,
-          ease: "easeIn",
-          type: "spring",
-          bounce: 0.25
-        }).then(() => {
-          this.browserWrapper.removeAttribute('animate');
-          this.browserWrapper.setAttribute('animate-end', true);
-          this.browserWrapper.setAttribute('has-finished-animation', true);
-          this._animating = false;
-          this.animatingOpen = false;
-        });
+        gZenUIManager.motion
+          .animate(
+            this.browserWrapper,
+            {
+              top: [`${initialY}px`, '50%'],
+              left: [`${initialX}px`, '50%'],
+              width: [`${initialWidth}px`, '85%'],
+              height: [`${initialHeight}px`, '100%'],
+              opacity: [0.8, 1],
+            },
+            {
+              duration: 0.5,
+              ease: 'easeIn',
+              type: 'spring',
+              bounce: 0.25,
+            }
+          )
+          .then(() => {
+            this.browserWrapper.removeAttribute('animate');
+            this.browserWrapper.setAttribute('animate-end', true);
+            this.browserWrapper.setAttribute('has-finished-animation', true);
+            this._animating = false;
+            this.animatingOpen = false;
+          });
       });
     }
 

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -1321,33 +1321,38 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
+  _animateElement(element, direction, out = false, callback) {
+    if (out) {
+      element.animate([{ transform: 'translateX(0)' }, { transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }], {
+        duration: 100,
+        easing: 'ease',
+        fill: 'both',
+      }).onfinish = callback;
+      return;
+    }
+    element.animate([{ transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }, { transform: 'translateX(0)' }], {
+      duration: 100,
+      easing: 'ease',
+      fill: 'both',
+    }).onfinish = callback;
+  }
+
   async _animateTabs(direction, out = false) {
     const tabs = gBrowser.visibleTabs.filter((tab) => !tab.hasAttribute('zen-essential'));
     return new Promise((resolve) => {
       let count = 0;
       const onAnimationEnd = () => {
         count++;
-        if (count >= tabs.length) {
+        // +1 for the workspace indicator tab
+        if (count >= tabs.length + 1) {
           resolve();
         }
       };
       this.tabContainer.removeAttribute('dont-animate-tabs');
-      if (out) {
-        for (let tab of tabs) {
-          tab.animate([{ transform: 'translateX(0)' }, { transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }], {
-            duration: 100,
-            easing: 'ease',
-            fill: 'both',
-          }).onfinish = onAnimationEnd;
-        }
-        return;
-      }
-      for (let tab of tabs) {
-        tab.animate([{ transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }, { transform: 'translateX(0)' }], {
-          duration: 100,
-          easing: 'ease',
-          fill: 'both',
-        }).onfinish = onAnimationEnd;
+      // Also animate the workspace indicator label
+      this._animateElement(document.getElementById('zen-current-workspace-indicator'), direction, out, () => onAnimationEnd());
+      for (const tab of tabs) {
+        this._animateElement(tab, direction, out, () => onAnimationEnd());
       }
     });
   }