From 8842f099ed64984a7a3703fc49a6f2d6aefc179a Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sat, 14 Dec 2024 21:38:13 +0100
Subject: [PATCH] Refactor compact mode behavior and styles: adjust sidebar
 width handling, improve transition timings, and enhance media query
 conditions

---
 src/browser/base/content/ZenUIManager.mjs             | 10 ++++++----
 .../base/content/zen-styles/zen-compact-mode.css      | 11 ++++++++++-
 .../zen-styles/zen-tabs/vertical-tabs-topbar.inc.css  |  2 +-
 src/browser/base/zen-components/ZenCompactMode.mjs    |  9 ++++++---
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index 9f8530c1f..030a33695 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -300,9 +300,7 @@ var gZenVerticalTabsManager = {
       let shouldHide = false;
       if (((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons)
         || (
-          isCompactMode && isSingleToolbar && !(
-            (!this.isWindowsStyledButtons && !isRightSide)
-          )
+          isCompactMode && isSingleToolbar && this.isWindowsStyledButtons && !isRightSide
         )) && isSingleToolbar) {
         appContentNavbarContaienr.setAttribute('should-hide', 'true');
         shouldHide = true;
@@ -384,6 +382,10 @@ var gZenVerticalTabsManager = {
       if (!doNotChangeWindowButtons && isSingleToolbar && !isCompactMode && !isRightSide && !this.isWindowsStyledButtons) {
         topButtons.prepend(windowButtons);
       }
+      // Case: single toolbar, compact mode, right side and windows styled buttons
+      if (isSingleToolbar && isCompactMode && isRightSide && this.isWindowsStyledButtons) {
+        topButtons.prepend(windowButtons);
+      }
 
       if (doNotChangeWindowButtons) {
         if (isRightSide && !isSidebarExpanded) {
@@ -413,7 +415,7 @@ var gZenVerticalTabsManager = {
         }
       }
 
-      if (shouldHide) {
+      if (shouldHide && !isCompactMode) {
         appContentNavbarContaienr.append(windowButtons);
       }
 
diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css
index fae4ce351..b7f665c5c 100644
--- a/src/browser/base/content/zen-styles/zen-compact-mode.css
+++ b/src/browser/base/content/zen-styles/zen-compact-mode.css
@@ -10,7 +10,7 @@
       pointer-events: none;
     }
 
-    @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
+    @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') or (-moz-bool-pref: 'zen.view.use-single-toolbar') {
       #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
         margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
       }
@@ -133,6 +133,10 @@
           margin-top: var(--zen-element-separation) !important;
         }
 
+        & #zen-appcontent-wrapper {
+          z-index: 3 !important;
+        }
+
         & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
           margin-top: calc(var(--zen-element-separation) * 2) !important;
         }
@@ -154,6 +158,9 @@
           background: var(--zen-dialog-background);
           padding-left: var(--zen-toolbox-padding) !important;
 
+          max-height: var(--zen-toolbar-height);
+          overflow: hidden;
+
           & > * {
             position: relative !important;
           }
@@ -187,6 +194,8 @@
           border-top-width: 1px;
 
           top: -1px;
+          overflow: initial;
+          max-height: unset;
 
           & #urlbar {
             transform: translateY(0);
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css
index c5cdbd27e..2f308185c 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css
@@ -6,7 +6,7 @@ height: var(--zen-toolbar-height);
     transition-delay: 0.05s;
 
     & > * {
-      transition: transform 0.1s ease-out;
+      transition: transform 0.2s ease-out;
     }
   }
 
diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs
index f72165311..7d282ec7b 100644
--- a/src/browser/base/zen-components/ZenCompactMode.mjs
+++ b/src/browser/base/zen-components/ZenCompactMode.mjs
@@ -104,7 +104,10 @@ var gZenCompactModeManager = {
       return;
     }
     this._isAnimating = true;
-    const sidebarWidth = this.sidebar.getBoundingClientRect().width;
+    let sidebarWidth = this.sidebar.getBoundingClientRect().width;
+    if (sidebarWidth < 300) {
+      sidebarWidth += sidebarWidth < 210 ? 9 : 11; // Bug: IF sidebar is too small, it will not animate properly
+    }
     if (canHideSidebar && isCompactMode) {
       this.sidebar.style.position = "relative";
       this.sidebar.style.transition = "margin .3s ease, opacity .3s ease";
@@ -132,7 +135,7 @@ var gZenCompactModeManager = {
             this.sidebar.style.removeProperty("left");
             document.getElementById('browser').style.removeProperty("overflow");
           });
-        }, 500);
+        }, 400);
       });
     } else if (canHideSidebar && !isCompactMode) {
       document.getElementById('browser').style.overflow = "hidden";
@@ -171,7 +174,7 @@ var gZenCompactModeManager = {
 
             document.getElementById('browser').style.removeProperty("overflow");
           });
-        }, 500);
+        }, 400);
       });
     }
   },