fix: Fixed right side tabs being out of order, p=#10826, c=common, compact-mode

* fix: Fixed right side tabs being out of order, b=no-bug, c=common, compact-mode

* chore: Fix spelling mistake, b=no-bug, c=compact-mode

* chore: Fix lint, b=no-bug, c=common, compact-mode

---------

Signed-off-by: mr. m <91018726+mr-cheffy@users.noreply.github.com>

src/browser/themes/shared/browser-shared-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
-index c77a0e6388c4061d9e6ee5f396a3e3af8867e4fe..d37e49538cd07716da5ebed823622fccde5dd69a 100644
+index c77a0e6388c4061d9e6ee5f396a3e3af8867e4fe..3da164d2414e8726675ac0184310c9363365387f 100644
 --- a/browser/themes/shared/browser-shared.css
 +++ b/browser/themes/shared/browser-shared.css
 @@ -102,7 +102,7 @@ body {
@@ -20,3 +20,19 @@ index c77a0e6388c4061d9e6ee5f396a3e3af8867e4fe..d37e49538cd07716da5ebed823622fcc
    }
  
    /* Themes define a set of toolbox foreground and background colors which we
+@@ -281,13 +279,13 @@ body {
+ 
+   @media (-moz-platform: macos) and (not (-moz-mac-rtl)) {
+     &:-moz-locale-dir(ltr) {
+-      order: -1;
++      order: -2;
+     }
+   }
+ 
+   @media (-moz-mac-rtl) {
+     &:-moz-locale-dir(rtl) {
+-      order: -1;
++      order: -2;
+     }
+   }
+ 

src/zen/common/ZenUIManager.mjs

@@ -77,16 +77,20 @@ var gZenUIManager = {
   },
 
   _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');
-        }
-      });
+    const toolbar = document.getElementById('PersonalToolbar');
+    if (toolbar.getAttribute('collapsed') !== 'true') {
+      // Set it initially if bookmarks toolbar is visible, customizable UI
+      // is ran before this function.
+      document.documentElement.setAttribute('zen-has-bookmarks', 'true');
+    }
+    toolbar.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() {
@@ -1081,7 +1085,15 @@ var gZenVerticalTabsManager = {
         topButtons.prepend(windowButtons);
       }
 
-      if ((!isSingleToolbar && isCompactMode) || !isSidebarExpanded) {
+      const canHideTabBarPref = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
+      const captionsShouldStayOnSidebar =
+        !canHideTabBarPref &&
+        ((!this.isWindowsStyledButtons && !isRightSide) ||
+          (this.isWindowsStyledButtons && isRightSide));
+      if (
+        (!isSingleToolbar && isCompactMode && !captionsShouldStayOnSidebar) ||
+        !isSidebarExpanded
+      ) {
         navBar.prepend(topButtons);
       }
 
@@ -1112,7 +1124,11 @@ var gZenVerticalTabsManager = {
           }
         }
       } else if (!isSingleToolbar && isCompactMode) {
-        navBar.appendChild(windowButtons);
+        if (captionsShouldStayOnSidebar) {
+          topButtons.prepend(windowButtons);
+        } else {
+          navBar.appendChild(windowButtons);
+        }
       } else if (isSingleToolbar && isCompactMode) {
         if (!isRightSide && !this.isWindowsStyledButtons) {
           topButtons.prepend(windowButtons);

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

@@ -43,7 +43,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')) {
+  @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;
 

src/zen/compact-mode/ZenCompactMode.mjs

@@ -30,7 +30,7 @@ ChromeUtils.defineLazyGetter(lazyCompactMode, 'mainAppWrapper', () =>
 
 var gZenCompactModeManager = {
   _flashTimeouts: {},
-  _evenListeners: [],
+  _eventListeners: [],
   _removeHoverFrames: {},
 
   // Delay to avoid flickering when hovering over the sidebar
@@ -216,26 +216,33 @@ var gZenCompactModeManager = {
   hideSidebar() {
     Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
     Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
+    this.callAllEventListeners();
   },
 
   hideToolbar() {
     Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
     Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false);
+    this.callAllEventListeners();
   },
 
   hideBoth() {
     Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
     Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
+    this.callAllEventListeners();
+  },
+
+  callAllEventListeners() {
+    this._eventListeners.forEach((callback) => callback());
   },
 
   addEventListener(callback) {
-    this._evenListeners.push(callback);
+    this._eventListeners.push(callback);
   },
 
   removeEventListener(callback) {
-    const index = this._evenListeners.indexOf(callback);
+    const index = this._eventListeners.indexOf(callback);
     if (index !== -1) {
-      this._evenListeners.splice(index, 1);
+      this._eventListeners.splice(index, 1);
     }
   },
 
@@ -245,11 +252,11 @@ var gZenCompactModeManager = {
     // once the window buttons are shown
     this.updateContextMenu();
     if (!this.preference) {
-      this._evenListeners.forEach((callback) => callback());
+      this.callAllEventListeners();
       await this.animateCompactMode();
     } else {
       await this.animateCompactMode();
-      this._evenListeners.forEach((callback) => callback());
+      this.callAllEventListeners();
     }
     gZenUIManager.updateTabsToolbar();
     if (isUrlbarFocused) {
@@ -558,7 +565,9 @@ var gZenCompactModeManager = {
       element.setAttribute(attr, 'true');
       if (
         isToolbar &&
-        (element.hasAttribute('should-hide') ||
+        ((gZenVerticalTabsManager._hasSetSingleToolbar &&
+          (element.hasAttribute('should-hide') ||
+            document.documentElement.hasAttribute('zen-has-bookmarks'))) ||
           (this.preference &&
             Services.prefs.getBoolPref('zen.view.compact.hide-toolbar') &&
             !gZenVerticalTabsManager._hasSetSingleToolbar))

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

@@ -9,8 +9,10 @@
     --zen-toolbox-top-align: var(--zen-element-separation);
   }
 
-  & #titlebar {
-    margin-top: var(--zen-element-separation) !important;
+  @media -moz-pref('zen.view.compact.hide-tabbar') {
+    & #titlebar {
+      margin-top: var(--zen-element-separation) !important;
+    }
   }
 
   & #zen-appcontent-wrapper {
@@ -39,6 +41,11 @@
        * web content */
       transition: visibility 0.15s ease;
     }
+
+    & #zen-appcontent-navbar-container {
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
   }
 
   &
@@ -65,5 +72,10 @@
       opacity: 1;
       pointer-events: auto;
     }
+
+    & #zen-appcontent-navbar-container {
+      opacity: 1;
+      transition: none;
+    }
   }
 }