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;