fix: Fixed where top buttons should stay when entering compact mode, p=#10829, c=common, compact-mode, tabs, workspaces

src/zen/common/ZenUIManager.mjs

@@ -78,7 +78,7 @@ var gZenUIManager = {
 
   _initBookmarkCollapseListener() {
     const toolbar = document.getElementById('PersonalToolbar');
-    if (toolbar.getAttribute('collapsed') !== 'true') {
+    if (!toolbar.hasAttribute('collapsed')) {
       // Set it initially if bookmarks toolbar is visible, customizable UI
       // is ran before this function.
       document.documentElement.setAttribute('zen-has-bookmarks', 'true');
@@ -1091,7 +1091,10 @@ var gZenVerticalTabsManager = {
         ((!this.isWindowsStyledButtons && !isRightSide) ||
           (this.isWindowsStyledButtons && isRightSide));
       if (
-        (!isSingleToolbar && isCompactMode && !captionsShouldStayOnSidebar) ||
+        (!isSingleToolbar &&
+          isCompactMode &&
+          !captionsShouldStayOnSidebar &&
+          this.isWindowsStyledButtons === isRightSide) ||
         !isSidebarExpanded
       ) {
         navBar.prepend(topButtons);

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

@@ -45,7 +45,7 @@
 
   @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;
+      transition: margin 0.15s ease-in-out;
 
       :root[zen-single-toolbar='true'] & {
         transition-delay: 0.2s;

src/zen/compact-mode/ZenCompactMode.mjs

@@ -570,7 +570,8 @@ var gZenCompactModeManager = {
             document.documentElement.hasAttribute('zen-has-bookmarks'))) ||
           (this.preference &&
             Services.prefs.getBoolPref('zen.view.compact.hide-toolbar') &&
-            !gZenVerticalTabsManager._hasSetSingleToolbar))
+            !gZenVerticalTabsManager._hasSetSingleToolbar &&
+            !gURLBar.hasAttribute('breakout-extend')))
       ) {
         gBrowser.tabpanels.setAttribute('has-toolbar-hovered', 'true');
       }

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

@@ -23,7 +23,7 @@
     & .zen-toolbar-background {
       display: flex;
     }
-    transition: height 0.15s ease;
+    transition: height 0.15s ease-in-out;
 
     height: calc(var(--zen-element-separation) + 0.1px);
     overflow: clip;
@@ -55,9 +55,7 @@
   & #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)
+      *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(.zen-compact-mode-ignore)
     ) {
 
     height: var(--zen-toolbar-height-with-bookmarks);

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

@@ -12,7 +12,7 @@ z-index: 1;
 }
 
 @media -moz-pref('zen.view.hide-window-controls') {
-  transition: height 0.15s ease, opacity 0.15s ease;
+  transition: height 0.15s ease-in-out, opacity 0.15s ease-in-out;
   will-change: height, opacity;
   transition-delay: 0.2s;
   overflow: clip;

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

@@ -29,6 +29,14 @@
 /* ==========================================================================
    Single Toolbar Mode Specific Styles (`zen-single-toolbar='true'`)
    ========================================================================== */
+@media (-moz-platform: macos) and (not -moz-pref('zen.view.mac.show-three-dot-menu')) {
+  &:not([customizing]) #PanelUI-button:not([open]):not([panelopen]) {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
 :root[zen-single-toolbar='true'] {
   --zen-toolbar-height: 32px;
 
@@ -37,14 +45,6 @@
     height: var(--zen-toolbar-height);
   }
 
-  @media (-moz-platform: macos) and (not -moz-pref('zen.view.mac.show-three-dot-menu')) {
-    &:not([customizing]) #PanelUI-button:not([open]):not([panelopen]) {
-      position: absolute;
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-
   & #zen-sidebar-top-buttons-separator {
     width: 100%;
   }

src/zen/workspaces/zen-workspaces.css

@@ -165,7 +165,7 @@
   max-width: 100%;
   width: 100%;
   font-size: small;
-  padding-right: 10px;
+  padding-right: 12px;
   -moz-window-dragging: no-drag;
 
   &::before {