feat: New compact mode toolbar hover, p=#10825, c=common, compact-mode, tabs

src/zen/common/ZenStartup.mjs

@@ -32,9 +32,6 @@
       toolbarBackground.removeAttribute('id');
       toolbarBackground.classList.add('zen-toolbar-background');
       document.getElementById('titlebar').prepend(toolbarBackground);
-      document
-        .getElementById('zen-appcontent-navbar-container')
-        .prepend(toolbarBackground.cloneNode(true));
     }
 
     #zenInitBrowserLayout() {

src/zen/common/ZenUIManager.mjs

@@ -57,6 +57,7 @@ var gZenUIManager = {
     this._debloatContextMenus();
     this._addNewCustomizableButtonsIfNeeded();
     this._initOmnibox();
+    this._initBookmarkCollapseListener();
   },
 
   _addNewCustomizableButtonsIfNeeded() {
@@ -75,6 +76,19 @@ var gZenUIManager = {
     Services.prefs.setBoolPref(kPref, true);
   },
 
+  _initBookmarkCollapseListener() {
+    document
+      .getElementById('PersonalToolbar')
+      .addEventListener('toolbarvisibilitychange', (event) => {
+        const visible = event.detail.visible;
+        if (visible) {
+          document.documentElement.setAttribute('zen-has-bookmarks', 'true');
+        } else {
+          document.documentElement.removeAttribute('zen-has-bookmarks');
+        }
+      });
+  },
+
   _initOmnibox() {
     const { registerZenUrlbarProviders } = ChromeUtils.importESModule(
       'resource:///modules/ZenUBProvider.sys.mjs'
@@ -231,7 +245,7 @@ var gZenUIManager = {
         continue;
       }
       document.removeEventListener('mousemove', this.__removeHasPopupAttribute);
-      el.setAttribute('has-popup-menu', '');
+      gZenCompactModeManager._setElementExpandAttribute(el, true, 'has-popup-menu');
       this.__currentPopup = showEvent.target;
       this.__currentPopupTrackElement = el;
       break;
@@ -244,9 +258,10 @@ var gZenUIManager = {
     }
     const element = this.__currentPopupTrackElement;
     if (document.getElementById('main-window').matches(':hover')) {
-      element.removeAttribute('has-popup-menu');
+      gZenCompactModeManager._setElementExpandAttribute(element, false, 'has-popup-menu');
     } else {
-      this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu');
+      this.__removeHasPopupAttribute = () =>
+        gZenCompactModeManager._setElementExpandAttribute(element, false, 'has-popup-menu');
       document.addEventListener('mousemove', this.__removeHasPopupAttribute, { once: true });
     }
     this.__currentPopup = null;
@@ -978,7 +993,7 @@ var gZenVerticalTabsManager = {
           (isCompactMode && isSingleToolbar && this.isWindowsStyledButtons)) &&
         isSingleToolbar
       ) {
-        appContentNavbarWrapper.setAttribute('should-hide', 'true');
+        appContentNavbarWrapper.setAttribute('should-hide', true);
         shouldHide = true;
       } else {
         appContentNavbarWrapper.removeAttribute('should-hide');

src/zen/common/styles/zen-browser-container.css

@@ -10,10 +10,11 @@
     position: relative;
 
     &.browserSidebarContainer {
+      overflow: clip;
+
       :root:not([zen-no-padding='true']) &:not(.zen-glance-overlay) {
         border-radius: var(--zen-native-inner-radius);
         box-shadow: var(--zen-big-shadow);
-        overflow: clip;
       }
 
       & browser[type='content'] {
@@ -41,4 +42,26 @@
       }
     }
   }
+
+  @media not ((-moz-pref('zen.view.experimental-no-window-controls') or not -moz-pref('zen.view.hide-window-controls') ) and -moz-pref('zen.view.use-single-toolbar')) {
+    .browserSidebarContainer:is(.deck-selected, [zen-split='true']) .browserContainer {
+      transition: margin 0.15s ease;
+
+      :root[zen-single-toolbar='true'] & {
+        transition-delay: 0.2s;
+      }
+
+      #tabbrowser-tabpanels[has-toolbar-hovered] & {
+        --margin-top-fix: calc(-1 * var(--zen-toolbar-height) + var(--zen-element-separation));
+
+        :root:not([zen-single-toolbar='true']) & {
+          --margin-top-fix: calc(
+            -1 * var(--zen-toolbar-height-with-bookmarks) + var(--zen-element-separation)
+          );
+        }
+
+        margin-top: var(--margin-top-fix);
+      }
+    }
+  }
 }

src/zen/common/styles/zen-theme.css

@@ -156,6 +156,11 @@
   --zen-toolbar-height: 38px;
   --zen-toolbar-button-inner-padding: 6px;
   --toolbarbutton-outer-padding: 4px;
+  --zen-toolbar-height-with-bookmarks: var(--zen-toolbar-height);
+  &[zen-has-bookmarks='true'] {
+    /* Make sure `30px` matches the bookmarks toolbar height */
+    --zen-toolbar-height-with-bookmarks: calc(var(--zen-toolbar-height) + 30px);
+  }
 
   --toolbarbutton-hover-background: var(--zen-toolbar-element-bg-hover) !important;
 

src/zen/compact-mode/ZenCompactMode.mjs

@@ -79,7 +79,7 @@ var gZenCompactModeManager = {
       window.addEventListener('mouseover', (event) => {
         const buttons = gZenVerticalTabsManager.actualWindowButtons;
         if (event.target.closest('.titlebar-buttonbox-container') === buttons) return;
-        buttons.removeAttribute('zen-has-hover');
+        this._setElementExpandAttribute(buttons, false);
       });
     }
 
@@ -323,7 +323,7 @@ var gZenCompactModeManager = {
         this.sidebar.setAttribute('animate', 'true');
       }
       if (this._ignoreNextHover) {
-        this.sidebar.removeAttribute('zen-has-hover');
+        this._setElementExpandAttribute(this.sidebar, false);
       }
       this.sidebar.style.removeProperty('margin-right');
       this.sidebar.style.removeProperty('margin-left');
@@ -354,7 +354,7 @@ var gZenCompactModeManager = {
           } else {
             sidebarWidth -= elementSeparation;
           }
-          this.sidebar.removeAttribute('zen-has-hover');
+          this._setElementExpandAttribute(this.sidebar, false);
           gZenUIManager.motion
             .animate(
               this.sidebar,
@@ -405,6 +405,8 @@ var gZenCompactModeManager = {
               });
             });
         } else if (canHideSidebar && !isCompactMode) {
+          // Shouldn't be ever true, but just in case
+          delete this._ignoreNextHover;
           document.getElementById('browser').style.overflow = 'clip';
           if (this.sidebarIsOnRight) {
             this.sidebar.style.marginRight = `-${sidebarWidth}px`;
@@ -443,6 +445,7 @@ var gZenCompactModeManager = {
         } else {
           this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
           document.documentElement.removeAttribute('zen-compact-animating');
+          delete this._ignoreNextHover;
           resolve();
         }
       });
@@ -530,17 +533,14 @@ var gZenCompactModeManager = {
   },
 
   flashElement(element, duration, id, attrName = 'flash-popup') {
-    //if (element.matches(':hover')) {
-    //  return;
-    //}
     if (this._flashTimeouts[id]) {
       clearTimeout(this._flashTimeouts[id]);
     } else {
-      requestAnimationFrame(() => element.setAttribute(attrName, 'true'));
+      requestAnimationFrame(() => this._setElementExpandAttribute(element, true, attrName));
     }
     this._flashTimeouts[id] = setTimeout(() => {
       window.requestAnimationFrame(() => {
-        element.removeAttribute(attrName);
+        this._setElementExpandAttribute(element, false, attrName);
         this._flashTimeouts[id] = null;
       });
     }, duration);
@@ -551,11 +551,34 @@ var gZenCompactModeManager = {
     this._flashTimeouts[id] = null;
   },
 
+  _setElementExpandAttribute(element, value, attr = 'zen-has-hover') {
+    const kVerifiedAttributes = ['zen-has-hover', 'has-popup-menu'];
+    const isToolbar = element.id === 'zen-appcontent-navbar-wrapper';
+    if (value) {
+      element.setAttribute(attr, 'true');
+      if (
+        isToolbar &&
+        (element.hasAttribute('should-hide') ||
+          (this.preference &&
+            Services.prefs.getBoolPref('zen.view.compact.hide-toolbar') &&
+            !gZenVerticalTabsManager._hasSetSingleToolbar))
+      ) {
+        gBrowser.tabpanels.setAttribute('has-toolbar-hovered', 'true');
+      }
+    } else {
+      element.removeAttribute(attr);
+      // Only remove if none of the verified attributes are present
+      if (isToolbar && !kVerifiedAttributes.some((attr) => element.hasAttribute(attr))) {
+        gBrowser.tabpanels.removeAttribute('has-toolbar-hovered');
+      }
+    }
+  },
+
   addMouseActions() {
     gURLBar.textbox.addEventListener('mouseenter', (event) => {
       if (event.target.closest('#urlbar[zen-floating-urlbar]')) {
         window.requestAnimationFrame(() => {
-          this.sidebar.removeAttribute('zen-has-hover');
+          this._setElementExpandAttribute(gZenVerticalTabsManager.actualWindowButtons, false);
         });
         this._hasHoveredUrlbar = true;
         return;
@@ -567,7 +590,7 @@ var gZenCompactModeManager = {
 
       // Add the attribute on startup if the mouse is already over the element
       if (target.matches(':hover')) {
-        target.setAttribute('zen-has-hover', 'true');
+        this._setElementExpandAttribute(target, true);
       }
 
       const onEnter = (event) => {
@@ -585,7 +608,7 @@ var gZenCompactModeManager = {
             ) {
               return;
             }
-            target.setAttribute('zen-has-hover', 'true');
+            this._setElementExpandAttribute(target, true);
           });
         }, this.HOVER_HACK_DELAY);
       };
@@ -633,7 +656,7 @@ var gZenCompactModeManager = {
             );
           } else {
             this._removeHoverFrames[target.id] = window.requestAnimationFrame(() =>
-              target.removeAttribute('zen-has-hover')
+              this._setElementExpandAttribute(target, false)
             );
           }
         }, this.HOVER_HACK_DELAY);
@@ -669,7 +692,7 @@ var gZenCompactModeManager = {
             'mousemove',
             () => {
               if (target.matches(':hover')) return;
-              target.removeAttribute('zen-has-hover');
+              this._setElementExpandAttribute(target, false);
               this.clearFlashTimeout('has-hover' + target.id);
             },
             { once: true }
@@ -710,7 +733,7 @@ var gZenCompactModeManager = {
     for (let entry of this.hoverableElements) {
       const target = entry.element;
       if (target && !target.matches(':hover') && target.hasAttribute('zen-has-hover')) {
-        target.removeAttribute('zen-has-hover');
+        this._setElementExpandAttribute(target, false);
         this.clearFlashTimeout('has-hover' + target.id);
       }
     }
@@ -718,7 +741,7 @@ var gZenCompactModeManager = {
 
   isSidebarPotentiallyOpen() {
     if (this._ignoreNextHover) {
-      this.sidebar.removeAttribute('zen-has-hover');
+      this._setElementExpandAttribute(this.sidebar, false);
     }
     return (
       this.sidebar.hasAttribute('zen-user-show') ||

src/zen/compact-mode/toolbar.inc.css

@@ -9,8 +9,7 @@
     --zen-toolbox-top-align: var(--zen-element-separation);
   }
 
-  & #titlebar,
-  & #zen-appcontent-wrapper {
+  & #titlebar {
     margin-top: var(--zen-element-separation) !important;
   }
 
@@ -22,33 +21,23 @@
     & .zen-toolbar-background {
       display: flex;
     }
-    --zen-compact-toolbar-offset: 5px;
-    position: absolute;
-    top: calc(-1 * var(--zen-toolbar-height) + 1px);
-    left: 0;
-    z-index: 20;
-    transition: all 0.15s ease;
-    width: 100%;
+    transition: height 0.15s ease;
 
-    max-height: var(--zen-toolbar-height);
-    overflow: hidden;
+    height: calc(var(--zen-element-separation) + 0.1px);
+    overflow: clip;
 
     & #urlbar:not([breakout-extend='true']) {
-      opacity: 0 !important;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s ease;
     }
 
-    & #zen-appcontent-navbar-container {
+    & .titlebar-buttonbox-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%;
+      /* We need to hide them since on Windows the native
+       * panels when hovering over them can interfere with the
+       * web content */
+      transition: visibility 0.15s ease;
     }
   }
 
@@ -63,22 +52,18 @@
           #urlbar[zen-floating-urlbar='true']
         ):not(.zen-compact-mode-ignore)
     ) {
-    & #zen-appcontent-navbar-container {
-      visibility: visible !important;
-    }
-    border-top-width: 0px;
 
-    top: -1px;
-    overflow: initial;
-    max-height: unset;
+    height: var(--zen-toolbar-height-with-bookmarks);
+    overflow: inherit;
+
+    & .titlebar-buttonbox-container {
+      visibility: visible;
+      transition: none;
+    }
 
     & #urlbar {
-      opacity: 1 !important;
-    }
-
-    & #urlbar[breakout-extend='true']:not([zen-floating-urlbar='true']) {
-      top: 2px !important;
       opacity: 1;
+      pointer-events: auto;
     }
   }
 }

src/zen/tabs/zen-tabs.css

@@ -36,7 +36,7 @@
       * - Bookmarks toolbar is visible OR
       * - The container is explicitly marked to hide controls (e.g., on Linux with reversed controls)
       */
-    &:has(#PersonalToolbar:not([collapsed])) {
+    :root[zen-has-bookmarks] & {
 %include zen-tabs/vertical-tabs-topbar.inc.css
     }
     &[should-hide='true'] {
@@ -108,4 +108,11 @@
     /* Include common fixes for this top-button scenario */
 %include zen-tabs/vertical-tabs-topbuttons-fix.css
   }
+
+  &:not([zen-right-side='true']):not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']),
+  &[zen-right-side='true']:not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
+    & #titlebar {
+      padding-top: var(--zen-toolbar-height);
+    }
+  }
 }

src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css

@@ -8,31 +8,22 @@ z-index: 1;
 
 #zen-appcontent-navbar-container {
   display: flex;
+  min-height: var(--zen-toolbar-height);
 }
 
 @media -moz-pref('zen.view.hide-window-controls') {
-  & {
-    transition:
-      height 0.15s ease,
-      opacity 0.1s ease-out;
-    transition-delay: 0.2s;
-
-    & > * {
-      transition: opacity 0.2s ease-out;
-      transition-delay: 0.2s;
-    }
-  }
+  transition: height 0.15s ease, opacity 0.15s ease;
+  will-change: height, opacity;
+  transition-delay: 0.2s;
+  overflow: clip;
 
   &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not(
       :has(*:is([panelopen='true'], [open='true']))
     ) {
-    transition-delay: 0.2s;
     /* In order to still use it on fullscreen, even if it's 0px, add .1px (almost invisible) */
     height: calc(var(--zen-element-separation) + 0.1px);
-    overflow: hidden;
     opacity: 0;
-    & > * {
-      opacity: 0;
+    & #zen-appcontent-navbar-container {
       pointer-events: none;
     }
 
@@ -43,7 +34,7 @@ z-index: 1;
   }
 
   @media -moz-pref('zen.view.experimental-no-window-controls') {
-    &:has(#PersonalToolbar[collapsed]) {
+    :root:not([zen-has-bookmarks]) & {
       max-height: 0 !important;
       overflow: hidden;
       opacity: 0 !important;

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -30,9 +30,10 @@
    Single Toolbar Mode Specific Styles (`zen-single-toolbar='true'`)
    ========================================================================== */
 :root[zen-single-toolbar='true'] {
+  --zen-toolbar-height: 32px;
+
   & #zen-appcontent-navbar-wrapper,
   & #zen-sidebar-top-buttons {
-    --zen-toolbar-height: 32px;
     height: var(--zen-toolbar-height);
   }