From d3ec41d73f4e597abdb1554d93c0ebd0d18385b9 Mon Sep 17 00:00:00 2001
From: "Mr. M" <mr.m@tuta.com>
Date: Tue, 20 May 2025 19:02:44 +0200
Subject: [PATCH] fix: Fixed an issue with top toolbar not able to be hovered,
 b=(no-bug), c=common, compact-mode, tabs, workspaces

---
 .../base/content/browser-box-inc-xhtml.patch  |  8 +-
 src/zen/common/ZenUIManager.mjs               |  5 +-
 src/zen/common/styles/zen-toolbar.css         |  2 +-
 src/zen/compact-mode/ZenCompactMode.mjs       |  6 +-
 src/zen/compact-mode/zen-compact-mode.css     | 88 ++++++++++---------
 src/zen/tabs/zen-tabs.css                     |  2 +-
 src/zen/tabs/zen-tabs/vertical-tabs.css       |  6 +-
 src/zen/workspaces/ZenWorkspaces.mjs          | 12 +--
 8 files changed, 73 insertions(+), 56 deletions(-)

diff --git a/src/browser/base/content/browser-box-inc-xhtml.patch b/src/browser/base/content/browser-box-inc-xhtml.patch
index 9fc91dc5d..e272b980b 100644
--- a/src/browser/base/content/browser-box-inc-xhtml.patch
+++ b/src/browser/base/content/browser-box-inc-xhtml.patch
@@ -1,13 +1,15 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..d113b439888d26629ce5f6b5d35f8fa12249774b 100644
+index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..64e950106dd05b443ce72107613ac9cc405d56ea 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -23,7 +23,13 @@
+@@ -23,7 +23,15 @@
      <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
 +<vbox flex="1" id="zen-appcontent-wrapper">
-+  <html:div id="zen-appcontent-navbar-container"></html:div>
++  <html:div id="zen-appcontent-navbar-wrapper">
++    <html:div id="zen-appcontent-navbar-container"></html:div>
++  </html:div>
 +  <hbox id="zen-tabbox-wrapper" flex="1">
    <tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
 +#include zen-tabbrowser-elements.inc.xhtml
diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs
index 3a6f34a3d..231c5b394 100644
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -798,6 +798,7 @@ var gZenVerticalTabsManager = {
       }
 
       const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
+      const appContentNavbarWrapper = document.getElementById('zen-appcontent-navbar-wrapper');
       let shouldHide = false;
       if (
         ((!isRightSide && this.isWindowsStyledButtons) ||
@@ -805,10 +806,10 @@ var gZenVerticalTabsManager = {
           (isCompactMode && isSingleToolbar && this.isWindowsStyledButtons)) &&
         isSingleToolbar
       ) {
-        appContentNavbarContaienr.setAttribute('should-hide', 'true');
+        appContentNavbarWrapper.setAttribute('should-hide', 'true');
         shouldHide = true;
       } else {
-        appContentNavbarContaienr.removeAttribute('should-hide');
+        appContentNavbarWrapper.removeAttribute('should-hide');
       }
 
       // Check if the sidebar is in hover mode
diff --git a/src/zen/common/styles/zen-toolbar.css b/src/zen/common/styles/zen-toolbar.css
index d2c4477b4..305654ae3 100644
--- a/src/zen/common/styles/zen-toolbar.css
+++ b/src/zen/common/styles/zen-toolbar.css
@@ -8,6 +8,6 @@
   background: transparent;
 }
 
-:root[inDOMFullscreen='true'] #zen-appcontent-navbar-container {
+:root[inDOMFullscreen='true'] #zen-appcontent-navbar-wrapper {
   visibility: collapse;
 }
diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs
index ddc56bc7c..31fc64768 100644
--- a/src/zen/compact-mode/ZenCompactMode.mjs
+++ b/src/zen/compact-mode/ZenCompactMode.mjs
@@ -51,7 +51,7 @@ var gZenCompactModeManager = {
 
     gZenUIManager.addPopupTrackingAttribute(this.sidebar);
     gZenUIManager.addPopupTrackingAttribute(
-      document.getElementById('zen-appcontent-navbar-container')
+      document.getElementById('zen-appcontent-navbar-wrapper')
     );
 
     // Clear hover states when window state changes (minimize, maximize, etc.)
@@ -428,7 +428,7 @@ var gZenCompactModeManager = {
               keepHoverDuration: 100,
             },
             {
-              element: document.getElementById('zen-appcontent-navbar-container'),
+              element: document.getElementById('zen-appcontent-navbar-wrapper'),
               screenEdge: 'top',
             },
           ]),
@@ -608,7 +608,7 @@ var gZenCompactModeManager = {
   },
 
   toggleToolbar() {
-    let toolbar = document.getElementById('zen-appcontent-navbar-container');
+    let toolbar = document.getElementById('zen-appcontent-navbar-wrapper');
     toolbar.toggleAttribute('zen-user-show');
   },
 
diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css
index d4d1a799e..91bedca44 100644
--- a/src/zen/compact-mode/zen-compact-mode.css
+++ b/src/zen/compact-mode/zen-compact-mode.css
@@ -38,11 +38,11 @@
         padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
       }
 
-      &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
+      &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-wrapper #nav-bar {
         margin-left: var(--zen-element-separation) !important;
       }
 
-      &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar {
+      &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-wrapper #nav-bar {
         margin-right: var(--zen-element-separation) !important;
         margin-left: calc(var(--zen-element-separation) - 3px) !important;
       }
@@ -340,68 +340,76 @@
         margin-top: calc(var(--zen-element-separation) * 2) !important;
       }
 
-      & #zen-appcontent-navbar-container {
+      & #zen-appcontent-navbar-wrapper {
         --zen-compact-toolbar-offset: 5px;
         position: absolute;
-        top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
+        top: calc(-1 * var(--zen-toolbar-height) + 1px);
         left: 0;
         z-index: 20;
-        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
-        border-bottom-left-radius: var(--zen-border-radius);
-        border-bottom-right-radius: var(--zen-border-radius);
-        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
-        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
         transition: all 0.15s ease;
         width: 100%;
-        visibility: hidden;
-        background: var(--zen-dialog-background);
 
         max-height: var(--zen-toolbar-height);
         overflow: hidden;
 
-        & > * {
-          position: relative !important;
-        }
-
         & #urlbar:not([breakout-extend='true']) {
           opacity: 0 !important;
         }
 
-        @media -moz-pref('zen.view.compact.color-toolbar') {
-          background-attachment: fixed;
-          background: var(--zen-main-browser-background-toolbar);
-          background-size: 100% 2000px;
-          border-bottom: 1px solid var(--zen-colors-border);
+        & #zen-appcontent-navbar-container {
+          visibility: hidden;
+
+          box-shadow: var(--zen-big-shadow);
+          border-bottom-left-radius: var(--zen-border-radius);
+          border-bottom-right-radius: var(--zen-border-radius);
+          :root:not([sizemode='maximized']) & {
+            border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+            border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
+          }
+          transition: all 0.15s ease;
+          width: 100%;
+          background: var(--zen-dialog-background);
+
+          & > * {
+            position: relative !important;
+          }
+
+          @media -moz-pref('zen.view.compact.color-toolbar') {
+            background-attachment: fixed;
+            background: var(--zen-main-browser-background-toolbar);
+            background-size: 100% 2000px;
+          }
         }
       }
 
-      & #zen-appcontent-navbar-container[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
-      & #zen-appcontent-navbar-container[zen-user-show],
-      & #zen-appcontent-navbar-container[has-popup-menu],
-      & #zen-appcontent-navbar-container:has(
+      & #zen-appcontent-navbar-wrapper[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
+      & #zen-appcontent-navbar-wrapper[zen-user-show],
+      & #zen-appcontent-navbar-wrapper[has-popup-menu],
+      & #zen-appcontent-navbar-wrapper:has(
           *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(.zen-compact-mode-ignore)
         ) {
-        visibility: visible !important;
+        & #zen-appcontent-navbar-container {
+          visibility: visible !important;
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: url(chrome://browser/content/zen-images/grain-bg.png);
+            pointer-events: none;
+            z-index: 0;
+            opacity: var(--zen-grainy-background-opacity, 0);
+            mix-blend-mode: overlay;
+          }
+        }
         border-top-width: 1px;
 
         top: -1px;
         overflow: initial;
         max-height: unset;
 
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-image: url(chrome://browser/content/zen-images/grain-bg.png);
-          pointer-events: none;
-          z-index: 0;
-          opacity: var(--zen-grainy-background-opacity, 0);
-          mix-blend-mode: overlay;
-        }
-
         & #urlbar {
           opacity: 1 !important;
         }
@@ -426,7 +434,7 @@
   }
   @media -moz-pref('zen.view.compact.hide-toolbar') {
     &:not([zen-single-toolbar='true']) {
-      & #zen-appcontent-navbar-container {
+      & #zen-appcontent-navbar-wrapper {
         opacity: 0;
       }
     }
diff --git a/src/zen/tabs/zen-tabs.css b/src/zen/tabs/zen-tabs.css
index 7d346bf1e..e39bdbd71 100644
--- a/src/zen/tabs/zen-tabs.css
+++ b/src/zen/tabs/zen-tabs.css
@@ -21,7 +21,7 @@
    Single Toolbar Mode - Top Bar Handling (Includes External CSS)
    ========================================================================== */
 :root[zen-single-toolbar='true']:not([customizing]) {
-  #zen-appcontent-navbar-container {
+  #zen-appcontent-navbar-wrapper {
     display: flex;
     -moz-window-dragging: drag; /* Allow dragging the window via this bar */
     min-height: var(--zen-element-separation);
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index de3bc7751..44b839f34 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -17,12 +17,16 @@
   height: 100%; /* Make sure they take up full height */
 }
 
+#zen-appcontent-navbar-container {
+  width: 100%;
+}
+
 /* ==========================================================================
    Single Toolbar Mode Specific Styles (`zen-single-toolbar='true'`)
    ========================================================================== */
 :root[zen-single-toolbar='true'] {
   /* Define and apply a smaller toolbar height for single toolbar mode */
-  & #zen-appcontent-navbar-container,
+  & #zen-appcontent-navbar-wrapper,
   & #zen-sidebar-top-buttons {
     --zen-toolbar-height: 32px;
     height: var(--zen-toolbar-height);
diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index 1fb872d5c..e6448eef1 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -2273,15 +2273,17 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (shouldAnimate) {
       gZenUIManager._preventToolbarRebuild = true;
       gZenUIManager.updateTabsToolbar();
-
+      let previousBackgroundOpacity = document.documentElement.style.getPropertyValue(
+        '--zen-background-opacity'
+      );
+      if (previousBackgroundOpacity === '1') {
+        previousBackgroundOpacity = '0';
+      }
       animations.push(
         gZenUIManager.motion.animate(
           document.documentElement,
           {
-            '--zen-background-opacity': [
-              document.documentElement.style.getPropertyValue('--zen-background-opacity'),
-              '1',
-            ],
+            '--zen-background-opacity': [previousBackgroundOpacity, '1'],
           },
           {
             type: 'spring',