fix: Fixed an issue with top toolbar not able to be hovered, b=(no-bug), c=common, compact-mode, tabs, workspaces

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-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

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

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;
 }

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');
   },
 

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,54 +340,56 @@
         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;
         }
 
+        & #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;
-          border-bottom: 1px solid var(--zen-colors-border);
+          }
         }
       }
 
-      & #zen-appcontent-navbar-container[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
+      & #zen-appcontent-navbar-wrapper[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
-      & #zen-appcontent-navbar-container[zen-user-show],
+      & #zen-appcontent-navbar-wrapper[zen-user-show],
-      & #zen-appcontent-navbar-container[has-popup-menu],
+      & #zen-appcontent-navbar-wrapper[has-popup-menu],
-      & #zen-appcontent-navbar-container:has(
+      & #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)
         ) {
+        & #zen-appcontent-navbar-container {
           visibility: visible !important;
-        border-top-width: 1px;
-
-        top: -1px;
-        overflow: initial;
-        max-height: unset;
-
           &::before {
             content: '';
             position: absolute;
@@ -401,6 +403,12 @@
             opacity: var(--zen-grainy-background-opacity, 0);
             mix-blend-mode: overlay;
           }
+        }
+        border-top-width: 1px;
+
+        top: -1px;
+        overflow: initial;
+        max-height: unset;
 
         & #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;
       }
     }

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);

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);

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': [
+            '--zen-background-opacity': [previousBackgroundOpacity, '1'],
-              document.documentElement.style.getPropertyValue('--zen-background-opacity'),
-              '1',
-            ],
           },
           {
             type: 'spring',