First works on horizontal tabs

src/browser/base/content/ZenUIManager.mjs

@@ -133,6 +133,7 @@ var gZenVerticalTabsManager = {
     });
 
     var updateEvent = this._updateEvent.bind(this);
+    Services.prefs.addObserver('zen.tabs.vertical', updateEvent);
     Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
     Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
     Services.prefs.addObserver('zen.view.compact', updateEvent);
@@ -199,11 +200,14 @@ var gZenVerticalTabsManager = {
     const topButtons = document.getElementById('zen-sidebar-top-buttons');
     const customizationTarget = document.getElementById('nav-bar-customization-target');
     const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
+    const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
+
+    gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
+    gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
 
     const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
-    if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
+    if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');
-      
     } else {
       this.navigatorToolbox.removeAttribute('zen-right-side');
     }
@@ -220,7 +224,12 @@ var gZenVerticalTabsManager = {
     //  tabboxWrapper.prepend(this.navigatorToolbox);
     }
 
-    if (Services.prefs.getBoolPref('zen.view.use-single-toolbar')) {
+    if (!isVerticalTabs) {
+      const navbarContainer = document.getElementById('zen-appcontent-navbar-container');
+      document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
+    }
+
+    if (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs) {
       const navBar = document.getElementById('nav-bar');
       this._navbarParent = navBar.parentElement;
       let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)');

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 12fa0cf79aade28581016adf96df85386dabdcef..846add9b040abf0f7378ebaaadef007013f5a1ec 100644
+index 12fa0cf79aade28581016adf96df85386dabdcef..85859842c85f5c131900ce49d69b117237ffc592 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -27,15 +27,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..846add9b040abf0f7378ebaaadef0070
                           aria-pressed="false"
                           oncommand="FirefoxViewHandler.openTab();"
                           onmousedown="FirefoxViewHandler.openToolbarMouseEvent(event);"
-@@ -50,16 +51,21 @@
+@@ -57,9 +58,14 @@
-                 aria-multiselectable="true"
-                 setfocus="false"
-                 tooltip="tabbrowser-tab-tooltip"
--                orient="horizontal"
-+                orient="vertical"
-                 stopwatchid="FX_TAB_CLICK_MS">
-             <hbox class="tab-drop-indicator" hidden="true"/>
- # If the name (tabbrowser-arrowscrollbox) or structure of this changes
  # significantly, there is an optimization in
  # DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
  # the current structure that we may want to revisit.

src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css

@@ -1,2 +1,20 @@
 @media not (-moz-bool-pref: 'zen.tabs.vertical') {
+  #browser,
+  #navigator-toolbox {
+    flex-direction: row;
+
+    max-width: unset !important;
+    width: 100% !important;
+  }
+
+  #zen-sidebar-splitter {
+    display: none !important;
+  }
+
+  #tabbrowser-arrowscrollbox {
+    max-height: unset !important;
+  }
+
+  #titlebar {
+  }
 }