Lots of changes, tabs are now vertical and title bar is now separated!

src/browser/base/content/browser-xhtml.patch

@@ -1,13 +1,20 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index b4886fb5f74568b4c09eb620be9efb74e39c599c..b4a6bb5e06db8b097457c490d369ad9e2ae66454 100644
+index b4886fb5f74568b4c09eb620be9efb74e39c599c..f6506e972bc464aaddf087d994ce439c02f9a2f9 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
-@@ -165,7 +165,10 @@
+@@ -163,9 +163,15 @@
- 
+     </vbox>
- #include navigator-toolbox.inc.xhtml
+   </html:template>
  
+-#include navigator-toolbox.inc.xhtml
+-
 -#include browser-box.inc.xhtml
++  <hbox id="zen-titlebar-items-container">
++#include titlebar-items.inc.xhtml
++  </hbox>
++
 +  <hbox flex="1">
++    #include navigator-toolbox.inc.xhtml
 +    #include zen-sidebar-box.inc.xhtml
 +    #include browser-box.inc.xhtml    
 +  </hbox>

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

@@ -1,17 +1,36 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index dce7bacdb3678a95dc97085390a7e6102090ffb2..5e3c40b384e4643b6865c4fab3d0bcea4c179d0c 100644
+index dce7bacdb3678a95dc97085390a7e6102090ffb2..2d91d95dc458c3ffe53e324576e44003d8472209 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
-@@ -30,8 +30,6 @@
+@@ -56,15 +56,17 @@
-              context="toolbar-context-menu"
+ # significantly, there is an optimization in
-              flex="1">
+ # DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
+ # the current structure that we may want to revisit.
+-            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="true" scrolledtostart="true" scrolledtoend="true">
++            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="vertical" flex="1" style="min-width: 1px;" clicktoscroll="true" scrolledtostart="true" scrolledtoend="true">
+               <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
+               <hbox id="tabbrowser-arrowscrollbox-periphery">
+                 <toolbartabstop/>
++
+                 <toolbarbutton id="tabs-newtab-button"
+                                class="toolbarbutton-1"
+                                command="cmd_newNavigatorTab"
+                                onclick="gBrowser.handleNewTabMiddleClick(this, event);"
+                                tooltip="dynamic-shortcut-tooltip"/>
++
+                 <spacer class="closing-tabs-spacer" style="width: 0;"/>
+               </hbox>
+             </arrowscrollbox>
+@@ -101,12 +103,16 @@
+         <label data-l10n-id="private-browsing-indicator-label"></label>
+       </hbox>
  
--      <hbox class="titlebar-spacer" type="pre-tabs"/>
++#if 0
--
+ #include titlebar-items.inc.xhtml
-       <hbox flex="1" align="end" class="toolbar-items">
++#endif
-         <toolbartabstop/>
++#include zen-sidebar-icons.inc.xhtml
-         <hbox id="TabsToolbar-customization-target" flex="1">
+ 
-@@ -107,6 +105,7 @@
+     </toolbar>
  
    </vbox>
  
@@ -19,7 +38,7 @@ index dce7bacdb3678a95dc97085390a7e6102090ffb2..5e3c40b384e4643b6865c4fab3d0bcea
    <toolbar id="nav-bar"
             class="browser-toolbar"
             data-l10n-id="navbar-accessible"
-@@ -575,7 +574,7 @@
+@@ -575,7 +581,7 @@
    <html:template id="tab-notification-deck-template">
      <html:named-deck id="tab-notification-deck"></html:named-deck>
    </html:template>

src/browser/base/content/tabbrowser-tabs-js.patch

@@ -0,0 +1,58 @@
+diff --git a/browser/base/content/tabbrowser-tabs.js b/browser/base/content/tabbrowser-tabs.js
+index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..b7256bec7d0da3ce065c005ba857a4317bf0d714 100644
+--- a/browser/base/content/tabbrowser-tabs.js
++++ b/browser/base/content/tabbrowser-tabs.js
+@@ -743,7 +743,7 @@
+         if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
+           for (let tab of movingTabs) {
+             tab.toggleAttribute("tabdrop-samewindow", true);
+-            tab.style.transform = "translateX(" + newTranslateX + "px)";
++            tab.style.transform = "translateY(" + newTranslateX + "px)";
+             let postTransitionCleanup = () => {
+               tab.removeAttribute("tabdrop-samewindow");
+ 
+@@ -1126,10 +1126,13 @@
+     }
+ 
+     _initializeArrowScrollbox() {
++      this.toggleAttribute("overflow", true);
++
+       let arrowScrollbox = this.arrowScrollbox;
+       arrowScrollbox.shadowRoot.addEventListener(
+         "underflow",
+         event => {
++          return;
+           // Ignore underflow events:
+           // - from nested scrollable elements
+           // - for vertical orientation
+@@ -1542,7 +1545,7 @@
+       translateX = Math.min(Math.max(translateX, leftBound), rightBound);
+ 
+       for (let tab of movingTabs) {
+-        tab.style.transform = "translateX(" + translateX + "px)";
++        tab.style.transform = "translateY(" + translateX + "px)";
+       }
+ 
+       draggedTab._dragData.translateX = translateX;
+@@ -1602,7 +1605,7 @@
+       for (let tab of tabs) {
+         if (tab != draggedTab) {
+           let shift = getTabShift(tab, newIndex);
+-          tab.style.transform = shift ? "translateX(" + shift + "px)" : "";
++          tab.style.transform = shift ? "translateY(" + shift + "px)" : "";
+         }
+       }
+ 
+@@ -1683,9 +1686,9 @@
+ 
+       // Slide the relevant tabs to their new position.
+       for (let t of this._getVisibleTabs()) {
+-        if (t.groupingTabsData && t.groupingTabsData.translateX) {
+-          let translateX = (RTL_UI ? -1 : 1) * t.groupingTabsData.translateX;
+-          t.style.transform = "translateX(" + translateX + "px)";
++        if (t.groupingTabsData && t.groupingTabsData.translateY) {
++          let translateX = (RTL_UI ? -1 : 1) * t.groupingTabsData.translateY;
++          t.style.transform = "translateY(" + translateX + "px)";
+         }
+       }
+ 

src/browser/base/content/zen-sidebar-box.inc.xhtml

@@ -10,6 +10,5 @@
     <toolbarbutton id="sidebar-close" class="close-icon tabbable" data-l10n-id="sidebar-close-button" oncommand="SidebarUI.hide();"/>
   </box>
   <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
-  #include zen-sidebar-icons.inc.xhtml
 </vbox>
 <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>

src/browser/components/tabpreview/tabpreview-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabpreview/tabpreview.css b/browser/components/tabpreview/tabpreview.css
-index 8b288cb95da0e5fe307437e300d2c03ae19ab397..93827f8088fc21db201f69aee1517a5125b83704 100644
+index 8b288cb95da0e5fe307437e300d2c03ae19ab397..d03cbf2b15b62b3865be9caa63ad5c52633df3c2 100644
 --- a/browser/components/tabpreview/tabpreview.css
 +++ b/browser/components/tabpreview/tabpreview.css
 @@ -3,9 +3,9 @@
@@ -10,7 +10,7 @@ index 8b288cb95da0e5fe307437e300d2c03ae19ab397..93827f8088fc21db201f69aee1517a51
 +  background-color: #fdfdfd;
    color: #15141a;
 -  border-radius: 9px;
-+  border-radius: 5px;
++  border-radius: 7px;
    display: inline-block;
    width: 280px;
    overflow: hidden;
@@ -34,7 +34,7 @@ index 8b288cb95da0e5fe307437e300d2c03ae19ab397..93827f8088fc21db201f69aee1517a51
 +
 +.tab-preview-container {
 +  --zen-border-color: #bdbcbc;
-+  border: 2px solid var(--zen-border-color);
++  border: 1px solid var(--zen-border-color);
 +  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 +}
 +
@@ -46,5 +46,5 @@ index 8b288cb95da0e5fe307437e300d2c03ae19ab397..93827f8088fc21db201f69aee1517a51
 +
 +.tab-preview-thumbnail-container img,
 +.tab-preview-thumbnail-container canvas {
-+  border-top: 2px solid var(--zen-border-color);
++  border-top: 1px solid var(--zen-border-color);
 +}

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

@@ -20,10 +20,6 @@
   --fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
 }
 
-#navigator-toolbox toolbar#TabsToolbar {
-  margin: 10px var(--zen-appcontent-separator-from-window);
-}
-
 #PersonalToolbar {
   /*border-top: 1px solid light-dark(#ddd, #4a4a4a);*/
   padding: 5px 0;
@@ -123,13 +119,118 @@ toolbar .toolbarbutton-1 {
   }
 }
 
-.tabbrowser-tab {
-  animation: zen-jello-animation 0.2s ease-in-out;
-  animation-delay: 0.1s;
-}
-
 /* Toolbars customization */
 
-#TabsToolbar-customization-target {
+#titlebar {
-  
+  height: 100%;
+}
+
+#navigator-toolbox toolbar#TabsToolbar {
+  margin: var(--zen-appcontent-separator-from-window);
+  background: var(--sidebar-background-color);
+  box-shadow: var(--zen-sidebar-box-shadow) !important;
+  overflow: hidden;
+  transition: .2s;
+  border: 1px solid var(--zen-dialog-border-color);
+  border-radius: 15px !important;
+  flex-direction: column !important;
+  padding: 5px 0;
+  margin-right: 0 !important;
+  -moz-window-dragging: no-drag;
+}
+
+#TabsToolbar-customization-target {
+  flex-direction: column;
+}
+
+toolbarbutton#scrollbutton-down,
+toolbarbutton#scrollbutton-up {
+  display: none !important;
+}
+
+#toolbar-menubar {
+  display: none;
+}
+
+.tab-label-container {
+  display: none;
+}
+
+.tab-icon-stack > .tab-icon-image,
+.tab-icon-stack > .tab-throbber {
+  width: var(--zen-browser-tab-icon-size);
+  height: var(--zen-browser-tab-icon-size);
+  margin-inline-end: 0 !important;
+}
+
+.tab-background {
+  display: none;
+}
+
+.tabbrowser-tab {
+  --zen-browser-tab-icon-size: 18px;
+  --tab-min-width: 0 !important;
+  box-shadow: none !important;
+  margin: 5px auto !important;
+  border-radius: 50%;
+  position: relative;
+  color-scheme: var(--tab-selected-color-scheme);
+  background: light-dark(#ececec, #4a4a4a);
+  border: 2px solid transparent;
+  display: flex;
+  padding: 0 !important;
+  align-items: center;
+}
+
+.tab-stack {
+  width: 30px;
+  height: 30px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tabbrowser-tab:is([multiselected="true"], [selected]) {
+  border-color: var(--color-accent-primary);
+}
+
+.tab-close-button {
+  position: absolute;
+  display: none;
+  left: 50%;
+  top: 50%;
+}
+
+.tabbrowser-tab:hover .tab-close-button {
+  display: none; /* TODO: fix this? or maybe not? */
+}
+
+.tab-content {
+  padding: 0 !important;
+  width: fit-content;
+}
+
+.toolbar-items > toolbartabstop:first-child {
+  display: none;
+}
+
+#tabbrowser-tabs {
+  margin-inline-start: 0 !important;
+  padding-inline-start: 0 !important;
+  border: none !important;
+  /*background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.05));*/
+  margin: 0 !important;
+  border-radius: 5px;
+  border: 1px solid var(--zen-dialog-border-color);
+}
+
+/* Title bar */
+
+#zen-titlebar-items-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  -moz-window-dragging: drag;
 }

src/browser/themes/shared/zen-sidebar.css

@@ -1,16 +1,15 @@
 :root {
   --sidebar-background-color: var(--toolbar-bgcolor) !important; 
-  --zen-sidebar-box-shadow: 0 1px 4px var(--color-black-a10);
+  --zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
 #sidebar-box {
   margin: var(--zen-appcontent-separator-from-window) !important;
-  border-radius: 0 15px 15px 0 !important;
+  border-radius: 15px !important;
   box-shadow: var(--zen-sidebar-box-shadow) !important;
   overflow: hidden;
   transition: .2s;
   border: 1px solid var(--zen-dialog-border-color);
-  margin-left: 0 !important;
 }
 
 #sidebar-splitter {
@@ -28,29 +27,6 @@
  margin-right: 0 !important; 
 }
 
-#sidebar-box[hidden="true"] {
-  display: flex !important;
-  flex-direction: column;
-  min-width: 0 !important;
-  width: 50px !important;
-  align-items: center;
-}
-
-#sidebar-box[hidden="true"] > *:not(#zen-sidebar-icons-wrapper) {
-  display: none !important;
-}
-
-#sidebar-box[hidden="true"] #zen-sidebar-icons-wrapper {
-  display: flex;
-  flex-direction: column;
-  padding: 3px;
-  height: 100%;
-  position: relative;
-  background: transparent !important;
-  align-items: center;
-  justify-content: end;
-}
-
 .zen-sidebar-action-button {
   width: 40px;
   height: 40px;
@@ -59,9 +35,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 10px;
 }
 
+#TabsToolbar .toolbarbutton-1 > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
+.zen-sidebar-action-button {
+  border-radius: 10px !important;
+}
+
+#TabsToolbar .toolbarbutton-1:hover > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
+#TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
 .zen-sidebar-action-button:hover,
 .zen-sidebar-action-button[open="true"] {
   background: var(--toolbarbutton-hover-background);
@@ -142,3 +124,15 @@
 #zen-sidebar-icons-wrapper toolbarbutton {
   position: relative;
 }
+
+#zen-sidebar-icons-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 0 3px;
+  height: 100%;
+  position: relative;
+  background: transparent !important;
+  align-items: center;
+  justify-content: end;
+}
+

src/toolkit/content/zen-xul.css

@@ -3,7 +3,8 @@
 
 :root {
   --zen-main-browser-background: light-dark(#ddd, #4a4a4a); 
-  --zen-appcontent-separator-from-window: 7px;
+  --zen-appcontent-separator-from-window-single: 7px;
+  --zen-appcontent-separator-from-window: 0 var(--zen-appcontent-separator-from-window-single) var(--zen-appcontent-separator-from-window-single);
 }
 
 toolbox#navigator-toolbox, 
@@ -25,7 +26,6 @@ html#main-window > body {
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   border: 1px solid var(--zen-dialog-border-color);
   margin: var(--zen-appcontent-separator-from-window);
-  margin-top: 0;
 }