Refactor toolbar settings and enhance UI animations for improved user experience

src/browser/app/profile/zen-browser.js

@@ -121,7 +121,7 @@ pref('zen.view.sidebar-height-throttle', 200); // in ms
 pref('zen.view.sidebar-expanded.max-width', 400);
 
 pref('zen.view.show-bottom-border', false);
-pref('zen.view.use-single-toolbar', true);
+pref('zen.view.use-single-toolbar', false, locked);
 
 #ifndef XP_MACOSX
 pref('zen.view.hide-window-controls', true);

src/browser/base/content/ZenUIManager.mjs

@@ -310,6 +310,8 @@ var gZenVerticalTabsManager = {
           navBar.prepend(windowButtons);
         }
       }
+    } else if (!isSingleToolbar && isCompactMode) {
+      navBar.appendChild(windowButtons);
     }
 
     // Always move the splitter next to the sidebar

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

@@ -220,23 +220,22 @@
 @keyframes zen-glance-content-animation {
   /* make the box appear from initial width/height and x/y coordinates */
   0% {
-    opacity: 1;
+    opacity: 0;
-  }
-
-  30% {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) translateZ(0);
+    width: 0%;
+    height: 0%;
   }
 
   70% {
     /* make the box grow to full width/height */
-    opacity: 1;
+    opacity: .5;
     transform: translate(-50%, -50%) translateZ(0);
     top: 50%;
     left: 50%;
     width: 87%;
-    height: calc(102% + 10px);
+    height: 102%;
   }
 
   100% {
@@ -244,7 +243,7 @@
     transform: translate(-50%, -50%) translateZ(0);
     opacity: 1;
     width: 85%;
-    height: calc(100% + 10px);
+    height: 100%;
     top: 50%;
     left: 50%;
   }
@@ -252,16 +251,33 @@
 
 @keyframes zen-glance-content-animation-out {
   0% {
-    border: none;
+    /* 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%;
+  }
+
+  50% {
+    /* 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% {
-    transform: translate(-50%, -50%);
+    /* make the box appear from initial width/height and x/y coordinates */
-    opacity: 1;
+    opacity: 0;
-    width: 85%;
-    height: calc(100% + 10px);
     top: 50%;
     left: 50%;
+    transform: translate(-50%, -50%) translateZ(0);
+    width: 0%;
+    height: 0%;
   }
 }
 

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

@@ -4,18 +4,11 @@
   visibility: inherit;
 }
 
-#tabbrowser-tabpanels {
+.zen-glance-background {
-  transition: transform 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
-}
-
-#tabbrowser-tabpanels:has(.zen-glance-background) {
   transform: scale(0.98);
   backdrop-filter: blur(5px);
-
+  opacity: 0.6;
-  & .zen-glance-background {
-    opacity: 0.6;
-    transition: opacity 0.1s ease-in-out;
-  }
 }
 
 #zen-glance-sidebar-container {
@@ -27,18 +20,19 @@
 }
 
 .browserSidebarContainer.zen-glance-overlay {
+  box-shadow: none !important;
+
   &[fade-out='true'] {
     background: transparent;
     opacity: 1;
 
     & .browserContainer {
-      opacity: 1 !important;
+      opacity: 1;
-      animation: zen-glance-content-animation-out .3s ease-out forwards !important;
+      animation: zen-glance-content-animation-out .5s ease-in-out forwards !important;
-      animation-direction: reverse !important;
 
       & browser {
         opacity: 0;
-        transition: opacity .1s ease-in-out;
+        transition: opacity .3s ease-in-out;
       }
 
       & #zen-glance-sidebar-container {
@@ -50,10 +44,6 @@
 
   & .browserContainer {
     background: var(--zen-dialog-background);
-    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
-    transform: translate(var(--initial-x), var(--initial-y));
-    width: var(--initial-width);
-    height: var(--initial-height);
     position: fixed;
     border-radius: var(--zen-border-radius);
     overflow: hidden;
@@ -68,7 +58,7 @@
       transition: 0s !important;
       transform: none !important;
       margin: auto !important;
-      top: -5px !important;
+      top: 0 !important;
       left: 0 !important;
     }
 
@@ -121,8 +111,7 @@
     }
 
     &[animate='true'] {
-      animation: zen-glance-content-animation .3s ease-in-out forwards;
+      animation: zen-glance-content-animation .4s ease-in-out forwards;
-      animation-delay: 0.1s;
 
       &:not([animate-end='true']) {
         pointer-events: none;

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

@@ -16,8 +16,3 @@ height: var(--zen-toolbar-height);
     }
   }
 }
-
-:root:not([zen-window-buttons-reversed='true']) & .titlebar-buttonbox-container {
-  margin-left: auto;
-  width: fit-content;
-}

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

@@ -25,6 +25,11 @@
     }
   }
 
+  :root:not([zen-window-buttons-reversed='true']) .titlebar-buttonbox-container {
+    margin-left: auto;
+    width: fit-content;
+  }
+
   #TabsToolbar > * {
     justify-content: center;
   }

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

@@ -41,7 +41,7 @@
 
 #urlbar-background {
   border: transparent !important;
-  margin: 1px 0;
+  margin: 1px;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
 }