Fixed right sidebar compact mode margin and worked more on the rewrite

src/browser/base/content/ZenUIManager.mjs

@@ -212,8 +212,17 @@ var gZenVerticalTabsManager = {
     const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
     if (isRightSide && isVerticalTabs) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');
+      document.documentElement.setAttribute('zen-right-side', 'true');
     } else {
       this.navigatorToolbox.removeAttribute('zen-right-side');
+      document.documentElement.removeAttribute('zen-right-side');
+    }
+
+    const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
+    if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons)) {
+      appContentNavbarContaienr.setAttribute('should-hide', 'true');
+    } else {
+      appContentNavbarContaienr.removeAttribute('should-hide');
     }
 
     // Check if the sidebar is in hover mode
@@ -275,13 +284,6 @@ var gZenVerticalTabsManager = {
       }
       document.documentElement.removeAttribute("zen-single-toolbar");
       navBar.appendChild(document.getElementById('PanelUI-button'));
-      if (!doNotChangeWindowButtons) {
-        if (this.isWindowsStyledButtons) {
-          navBar.append(windowButtons);
-        } else {
-          navBar.prepend(windowButtons);
-        }
-      }
       this._toolbarOriginalParent.prepend(navBar);
       CustomizableUI.zenInternalCU._rebuildRegisteredAreas();
     }
@@ -294,6 +296,20 @@ var gZenVerticalTabsManager = {
 
     if (doNotChangeWindowButtons) {
       document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons);
+    } else if (!isSingleToolbar && !isCompactMode) {
+      if (this.isWindowsStyledButtons) {
+        if (isRightSide) {
+          document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
+        } else {
+          navBar.append(windowButtons);
+        }
+      } else {
+        if (isRightSide) {
+          document.getElementById('zen-appcontent-navbar-container').prepend(windowButtons);
+        } else {
+          navBar.prepend(windowButtons);
+        }
+      }
     }
 
     // Always move the splitter next to the sidebar

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

@@ -26,7 +26,7 @@
         content/browser/zen-styles/zen-theme.css                (content/zen-styles/zen-theme.css)
         content/browser/zen-styles/zen-buttons.css              (content/zen-styles/zen-buttons.css)
         content/browser/zen-styles/zen-tabs.css                 (content/zen-styles/zen-tabs.css)
-        content/browser/zen-styles/zen-tabs/vertical-tabs.css   (content/zen-styles/zen-tabs/vertical-tabs.css)
+*       content/browser/zen-styles/zen-tabs/vertical-tabs.css   (content/zen-styles/zen-tabs/vertical-tabs.css)
         content/browser/zen-styles/zen-tabs/horizontal-tabs.css (content/zen-styles/zen-tabs/horizontal-tabs.css)
         content/browser/zen-styles/zen-browser-ui.css           (content/zen-styles/zen-browser-ui.css)
         content/browser/zen-styles/zen-animations.css           (content/zen-styles/zen-animations.css)

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

@@ -9,7 +9,7 @@
     overflow: hidden;
     margin: 1px;
     
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+    :root[zen-right-side='true'] & {
       margin-right: 0;
       margin-left: var(--zen-element-separation);
     }

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

@@ -84,7 +84,7 @@
     margin-top: 0;
   }
 
-  & #browser:has(#navigator-toolbox[zen-right-side='true']) #zen-appcontent-wrapper {
+  &[zen-right-side='true'] #zen-appcontent-wrapper {
     margin-right: 0;
   }
 }

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

@@ -42,7 +42,7 @@
         }
       }
 
-      & #browser:has(#navigator-toolbox[zen-right-side='true']) {
+      &[zen-right-side='true'] {
         & #navigator-toolbox {
           --zen-compact-float: calc(var(--zen-element-separation) + 1px);
           padding-left: unset !important;
@@ -91,7 +91,7 @@
         opacity: 1;
 
         transform: translateX(calc(100% - var(--zen-element-separation)));
-        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+        :root[zen-right-side='true'] & {
           transform: translateX(calc(-100% + var(--zen-element-separation) + 1px));
         }
       }

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -250,7 +250,7 @@
   animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
 }
 
-:root:has(#navigator-toolbox:not([zen-right-side='true'])) {
+:root:not([zen-right-side='true']) {
   #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
     margin-left: 0 !important;
   }

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

@@ -60,11 +60,11 @@
     overflow: hidden;
     border: 1px solid var(--zen-colors-border);
 
-    :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[positionend='true'] {
+    :root:not([zen-right-side='true']) &[positionend='true'] {
       margin-right: var(--zen-element-separation);
     }
 
-    :root:has(#navigator-toolbox[zen-right-side='true']) & {
+    :root[zen-right-side='true'] & {
       margin-left: var(--zen-element-separation);
     }
   }

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

@@ -0,0 +1,23 @@
+height: var(--zen-toolbar-height);
+
+@media (-moz-bool-pref: 'zen.view.hide-window-controls') { 
+  & {
+    transition: height 0.2s ease-out, opacity 0.2s ease-out;
+    transition-delay: 0.05s;
+  }
+
+  &: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;
+    & > * {
+      pointer-events: none;
+    }
+  }
+}
+
+: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

@@ -119,11 +119,12 @@
     display: none;
   }
 
-  :root[zen-single-toolbar='true'] {
+  :root[zen-single-toolbar='true']:not([customizing]) {
     #zen-appcontent-navbar-container {
       display: flex;
       -moz-window-dragging: drag;
       min-height: var(--zen-element-separation);
+      height: var(--zen-element-separation);
 
       & #PersonalToolbar {
         width: -moz-available;
@@ -134,31 +135,12 @@
         * - We are on a Linux with reversed CSD
         * - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
         */
-      :root:is(
+      &:has(#PersonalToolbar[collapsed='false']) {
-        [zen-window-buttons-reversed='true']:has(#TabsToolbar:not([collapsed='true'])),
+%include vertical-tabs-topbar.inc.css
-        :not([zen-window-buttons-reversed='false'])
+      }
-      ):not([customizing]) & {
-        @media (-moz-bool-pref: 'zen.view.hide-window-controls') { 
-          & {
-            transition: height 0.2s ease-out, opacity 0.2s ease-out;
-            transition-delay: 0.05s;
-          }
 
-          &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) {
+      &[should-hide='true'] {
-            transition-delay: 0.2s;
+%include vertical-tabs-topbar.inc.css
-            height: var(--zen-element-separation);
-            overflow: hidden;
-            opacity: 0;
-            & > * {
-              pointer-events: none;
-            }
-          }
-        }
-        
-        & .titlebar-buttonbox-container {
-          margin-left: auto;
-          width: fit-content;
-        }
       }
 
       :root[zen-window-buttons-reversed='true'] & {
@@ -355,7 +337,7 @@
           padding-left: 2px;
         }
         
-        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+        :root[zen-right-side='true'] & {
           margin-left: 0;
           margin-right: var(--zen-toolbox-padding);
   
@@ -516,7 +498,7 @@
   }
 
   /* Mark: Move sidebar to the right */
-  #browser:has(#navigator-toolbox[zen-right-side='true']) {
+  :root[zen-right-side='true'] {
     & #navigator-toolbox {
       order: 3 !important;
     }
@@ -630,7 +612,7 @@
         padding-inline-start: var(--toolbarbutton-outer-padding);
       }
 
-      #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+      :root[zen-right-side='true'] & {
         padding-inline-start: 0;
         padding-inline-end: var(--zen-toolbox-padding);
       }