Enhance sidebar behavior and styles: force expanded sidebar on initialization, adjust margins, and refine transition effects for compact mode

src/browser/base/content/ZenUIManager.mjs

@@ -211,6 +211,8 @@ var gZenVerticalTabsManager = {
 
   _preCustomize() {
     this._updateEvent({ forceMultipleToolbar: true });
+    this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
+    document.documentElement.setAttribute('zen-sidebar-expanded', 'true'); // force expanded sidebar
   },
 
   initializePreferences(updateEvent) {

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

@@ -90,13 +90,20 @@
 :root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
   & #zen-tabbox-wrapper {
     margin: var(--zen-element-separation);
-    margin-left: 0;
     margin-top: 0;
   }
 
+  &:not([zen-right-side='true']) #zen-tabbox-wrapper {
+    margin-left: 0;
+  }
+
   &[zen-right-side='true'] #zen-tabbox-wrapper {
     margin-right: 0;
   }
+
+  &:not([zen-no-padding='true']) #zen-tabbox-wrapper {
+    margin-left: 1px;
+  }
 }
 
 #tabbrowser-tabbox {

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

@@ -6,12 +6,11 @@ height: var(--zen-toolbar-height);
     transition-delay: 0.05s;
 
     & > * {
-      transition: transform 0.4s ease-out;
+      transition: transform 0.1s ease-out;
     }
   }
 
   &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) {
-    transition-delay: 0.2s;
     height: var(--zen-element-separation);
     overflow: hidden;
     opacity: 0;

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

@@ -573,9 +573,6 @@
     padding-top: var(--zen-element-separation);
     align-items: center;
   }
-  :root:has(&) #zen-sidebar-splitter {
-    display: none !important;
-  }
   & #tabbrowser-arrowscrollbox-periphery {
     & > toolbarbutton {
       margin: 0 auto !important;
@@ -677,6 +674,10 @@
   }
 }
 
+:root:not([zen-sidebar-expanded='true']) #zen-sidebar-splitter {
+  display: none !important;
+}
+
 /* Mark: Separator styling */
 #zen-sidebar-splitter {
   opacity: 0;
@@ -808,7 +809,7 @@
       padding-inline-start: var(--zen-toolbox-padding);
     }
 
-    #nav-bar:has(&) & {
+    #nav-bar & {
       padding-inline-start: var(--toolbarbutton-outer-padding);
     }
 

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

@@ -106,10 +106,10 @@ var gZenCompactModeManager = {
     this._isAnimating = true;
     const sidebarWidth = this.sidebar.getBoundingClientRect().width;
     if (canHideSidebar && isCompactMode) {
-      document.getElementById('browser').style.overflow = "hidden";
       this.sidebar.style.position = "relative";
-      this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s ease";
+      this.sidebar.style.transition = "margin .3s ease, opacity .3s ease";
       this.sidebar.style.left = "0";
+      this.sidebar.style.setProperty("opacity", "1", "important");
       if (!this.sidebarIsOnRight) {
         this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
       } else {
@@ -117,6 +117,8 @@ var gZenCompactModeManager = {
       }
       this.sidebar.style.pointerEvents = "none";
 
+      window.requestAnimationFrame(() => {
+        this.sidebar.style.removeProperty("opacity");
         setTimeout(() => {
           window.requestAnimationFrame(() => {
             this._isAnimating = false;
@@ -130,7 +132,8 @@ var gZenCompactModeManager = {
             this.sidebar.style.removeProperty("left");
             document.getElementById('browser').style.removeProperty("overflow");
           });
-      }, 400);
+        }, 500);
+      });
     } else if (canHideSidebar && !isCompactMode) {
       document.getElementById('browser').style.overflow = "hidden";
       this.sidebar.style.position = "relative";
@@ -168,7 +171,7 @@ var gZenCompactModeManager = {
 
             document.getElementById('browser').style.removeProperty("overflow");
           });
-        }, 400);
+        }, 500);
       });
     }
   },