Add motion animation support and refine UI transitions for workspace interactions

src/browser/base/content/ZenUIManager.mjs

@@ -8,6 +8,10 @@ var gZenUIManager = {
     XPCOMUtils.defineLazyPreferenceGetter(this, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
     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" });
+    });
+
     new ResizeObserver(gZenCommonActions.throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
       document.getElementById('tabbrowser-tabs')
     );

src/browser/base/content/zen-assets.jar.inc.mn

@@ -75,3 +75,4 @@
 
         # JS Vendor
         content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)
+        content/browser/zen-vendor/motion.min.mjs                      (content/zen-vendor/motion.min.mjs)

src/browser/base/content/zen-styles/zen-animations.css

@@ -252,38 +252,6 @@
   }
 }
 
-@keyframes zen-glance-content-animation {
-  /* make the box appear from initial width/height and x/y coordinates */
-  0% {
-    opacity: 0;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) translateZ(0);
-    width: 0%;
-    height: 0%;
-  }
-
-  80% {
-    /* make the box grow to full width/height */
-    opacity: 1;
-    transform: translate(-50%, -50%) translateZ(0);
-    top: 50%;
-    left: 50%;
-    width: 87%;
-    height: 102%;
-  }
-
-  100% {
-    /* make the box shrink to final width/height and x/y coordinates */
-    transform: translate(-50%, -50%) translateZ(0);
-    opacity: 1;
-    width: 85%;
-    height: 100%;
-    top: 50%;
-    left: 50%;
-  }
-}
-
 @keyframes zen-glance-content-animation-out {
   0% {
     /* make the box shrink to final width/height and x/y coordinates */

src/browser/base/content/zen-styles/zen-glance.css

@@ -105,7 +105,6 @@
       height: 100%;
       opacity: 1;
       transition: opacity 0.2s ease-in-out;
-      transition-delay: 0.1s;
     }
 
     &[animate-full='true'] {
@@ -118,7 +117,8 @@
     }
 
     &[animate='true'] {
-      animation: zen-glance-content-animation 0.4s ease-in-out forwards;
+      position: absolute;
+      transform: translate(-50%, -50%);
 
       &:not([animate-end='true']) {
         pointer-events: none;

src/browser/base/content/zen-styles/zen-theme.css

@@ -103,7 +103,7 @@
   --zen-button-border-radius: 5px;
   --zen-button-padding: 0.6rem 1.2rem;
 
-  --zen-toolbar-element-bg: light-dark(rgba(255, 255, 255, 0.4), rgba(170, 170, 170, 0.2));
+  --zen-toolbar-element-bg: light-dark(rgba(255, 255, 255, 0.65), rgba(170, 170, 170, 0.2));
 
   /* Toolbar */
   --zen-toolbar-height: 38px;

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

@@ -102,19 +102,30 @@
       window.requestAnimationFrame(() => {
         this.quickOpenGlance();
 
-        this.browserWrapper.style.setProperty('--initial-x', `${initialX}px`);
-        this.browserWrapper.style.setProperty('--initial-y', `${initialY}px`);
-        this.browserWrapper.style.setProperty('--initial-width', initialWidth + 'px');
-        this.browserWrapper.style.setProperty('--initial-height', initialHeight + 'px');
-
         this.overlay.removeAttribute('fade-out');
         this.browserWrapper.setAttribute('animate', true);
-        setTimeout(() => {
+        this.browserWrapper.style.top = `${initialY}px`;
+        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;
-        }, 500);
+        });
       });
     }
 
@@ -286,6 +297,7 @@
       this.animatingFullOpen = true;
       this.currentParentTab._visuallySelected = false;
 
+      this.browserWrapper.removeAttribute('style');
       this.browserWrapper.removeAttribute('has-finished-animation');
       this.browserWrapper.setAttribute('animate-full', true);
       this.#currentTab.removeAttribute('zen-glance-tab');

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

@@ -1335,7 +1335,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       if (out) {
         for (let tab of tabs) {
           tab.animate([{ transform: 'translateX(0)' }, { transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }], {
-            duration: 150,
+            duration: 100,
             easing: 'ease',
             fill: 'both',
           }).onfinish = onAnimationEnd;
@@ -1344,7 +1344,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
       for (let tab of tabs) {
         tab.animate([{ transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }, { transform: 'translateX(0)' }], {
-          duration: 150,
+          duration: 100,
           easing: 'ease',
           fill: 'both',
         }).onfinish = onAnimationEnd;