From f880f96501dba2319b5699bd3cceee49973627cc Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Tue, 17 Jan 2023 22:57:24 +1100
Subject: [PATCH 01/10] =?UTF-8?q?=E2=9C=A8=20Allow=20for=20resizing=20vert?=
 =?UTF-8?q?ical=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/content/browser-verticaltabs.js      | 116 +++++++++++++++++-
 src/browser/themes/pulse/vertical_tabs.css    |  16 +--
 2 files changed, 121 insertions(+), 11 deletions(-)

diff --git a/src/browser/base/content/browser-verticaltabs.js b/src/browser/base/content/browser-verticaltabs.js
index a9ec5f22..f4585f46 100644
--- a/src/browser/base/content/browser-verticaltabs.js
+++ b/src/browser/base/content/browser-verticaltabs.js
@@ -5,6 +5,47 @@
 
 const VERTICAL_TABS_POSITION = 'pulse.tabs.vertical'
 const VERTICAL_TABS_COLLAPSE = 'pulse.tabs.vertical.collapse'
+const VERTICAL_TABS_WIDTH = 'pulse.tabs.vertical.width'
+
+/**
+ * @param {HTMLElement} toInsertAfter This is the element that I want to insert content after
+ * @param {HTMLElement} toInsert The element to insert
+ *
+ * @throws {Error} If the element you want me to base insertions on has no parent
+ */
+function insertAfter(toInsertAfter, toInsert) {
+  const parent = toInsertAfter.parentNode
+
+  if (!parent) {
+    throw new Error(
+      'The element you want me to base insertions on has no parent'
+    )
+  }
+
+  if (toInsertAfter.nextSibling) {
+    parent.insertBefore(toInsert, toInsertAfter.nextSibling)
+  } else {
+    parent.appendChild(toInsert)
+  }
+}
+
+/**
+ * Replace a tag with another tag with a different name
+ * @param {string} tagName The new tag name
+ * @param {HTMLElement?} initialTag The tag to be changed
+ */
+function changeXULTagName(tagName, initialTag) {
+  if (!initialTag) return
+  if (initialTag.tagName == tagName) return
+
+  const newParent = document.createXULElement(tagName)
+
+  for (const attr of initialTag.attributes)
+    newParent.setAttribute(attr.name, attr.value)
+  while (initialTag.firstChild) newParent.appendChild(initialTag.firstChild)
+
+  initialTag.replaceWith(newParent)
+}
 
 var VerticalTabs = {
   /**
@@ -35,6 +76,13 @@ var VerticalTabs = {
     return document.getElementById('browser')
   },
 
+  /**
+   * @return {HTMLElement?}
+   */
+  get splitter() {
+    return document.getElementById('verticaltabs-splitter')
+  },
+
   /**
    * @return {Boolean}
    */
@@ -48,6 +96,8 @@ var VerticalTabs = {
   tabBrowserTabs: null,
 
   _initialized: false,
+  /** @type {MutationObserver?} */
+  _widthObserver: null,
 
   init() {
     if (this._initialized) {
@@ -79,9 +129,40 @@ var VerticalTabs = {
       .querySelector('#TabsToolbar .toolbar-items')
       ?.setAttribute('align', 'start')
 
-    document
-      .getElementById('TabsToolbar')
-      ?.setAttribute('collapse', this.browserCollapseTabs ? 'true' : 'false')
+    this.tabsToolbar?.setAttribute(
+      'collapse',
+      this.browserCollapseTabs ? 'true' : 'false'
+    )
+    this.tabsToolbar?.removeAttribute('flex')
+    changeXULTagName('vbox', this.tabsToolbar)
+
+    this._widthObserver = new MutationObserver(this._mutationObserverCallback)
+    if (this.tabsToolbar)
+      this._widthObserver.observe(this.tabsToolbar, { attributes: true })
+
+    this.tabsToolbar?.setAttribute(
+      'width',
+      Services.prefs.getIntPref(VERTICAL_TABS_WIDTH, 200)
+    )
+    if (this.tabsToolbar)
+      this.tabsToolbar.style.width = `${Services.prefs.getIntPref(
+        VERTICAL_TABS_WIDTH,
+        200
+      )}px`
+
+    if (!this.splitter) {
+      const separator = document.createXULElement('splitter')
+      separator.setAttribute('id', 'verticaltabs-splitter')
+      separator.setAttribute(
+        'class',
+        'chromeclass-extrachrome verticaltabs-splitter'
+      )
+      separator.setAttribute('resizebefore', 'sibling')
+      separator.setAttribute('resizeafter', 'none')
+
+      const tabs = this.tabsToolbar
+      if (tabs) insertAfter(tabs, separator)
+    }
   },
 
   disableVerticalTabs() {
@@ -96,6 +177,35 @@ var VerticalTabs = {
     document
       .querySelector('#TabsToolbar .toolbar-items')
       ?.setAttribute('align', 'end')
+
+    changeXULTagName('toolbar', this.tabsToolbar)
+    this.tabsToolbar?.setAttribute('flex', '1')
+
+    if (this.splitter) {
+      this.splitter.remove()
+    }
+
+    if (this._widthObserver) {
+      this._widthObserver.disconnect()
+      this._widthObserver = null
+    }
+  },
+
+  /**
+   * @param {MutationRecord[]} mutationsList
+   * @param {MutationObserver} _observer
+   */
+  _mutationObserverCallback(mutationsList, _observer) {
+    for (const mutation of mutationsList) {
+      if (mutation.type === 'attributes' && mutation.attributeName == 'width') {
+        const tabsToolbar = document.getElementById('TabsToolbar')
+
+        Services.prefs.setIntPref(
+          VERTICAL_TABS_WIDTH,
+          parseInt(tabsToolbar?.getAttribute('width') || '100')
+        )
+      }
+    }
   },
 
   /**
diff --git a/src/browser/themes/pulse/vertical_tabs.css b/src/browser/themes/pulse/vertical_tabs.css
index 46ebf7cc..f8815b00 100644
--- a/src/browser/themes/pulse/vertical_tabs.css
+++ b/src/browser/themes/pulse/vertical_tabs.css
@@ -10,14 +10,12 @@
 }
 
 #navigator-toolbox-background[verticaltabs='true'] #titlebar {
-    display: none;
+  display: none;
 }
 
 #browser #TabsToolbar {
   background-color: -moz-Dialog;
   max-width: 350px;
-
-  transition: all 200ms ease-in-out;
 }
 
 #browser #TabsToolbar:-moz-lwtheme {
@@ -36,9 +34,6 @@
   /* Stops the tabs from getting squished or stretched */
   min-height: unset;
   max-height: var(--tab-min-height);
-
-  /* Animate tabs out vertically */
-  transition: min-height 100ms ease-out, max-height 100ms ease-out;
 }
 
 /* Put the new tab button on the bottom */
@@ -93,6 +88,11 @@
   margin-inline-start: none;
 }
 
+#browser #TabsToolbar[collapse='true'] .tabbrowser-tab {
+  /* Animate tabs out vertically */
+  transition: min-height 100ms ease-out, max-height 100ms ease-out;
+}
+
 #browser #TabsToolbar[collapse='true']:not(:hover) {
   max-width: calc(
     16px + 2 * var(--inline-tab-padding) + 2 * var(--tab-block-margin)
@@ -100,5 +100,5 @@
 }
 
 :root[sizemode='fullscreen'] #browser #TabsToolbar {
-    display: none;
-}
\ No newline at end of file
+  display: none;
+}

From 46a1969085b3a8400a8a0d002178cadc0ce9520d Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Wed, 18 Jan 2023 12:35:54 +1100
Subject: [PATCH 02/10] =?UTF-8?q?=F0=9F=92=84=20Specify=20a=20min-width=20?=
 =?UTF-8?q?for=20the=20tab=20container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/themes/pulse/vertical_tabs.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/browser/themes/pulse/vertical_tabs.css b/src/browser/themes/pulse/vertical_tabs.css
index f8815b00..30dd7425 100644
--- a/src/browser/themes/pulse/vertical_tabs.css
+++ b/src/browser/themes/pulse/vertical_tabs.css
@@ -16,6 +16,7 @@
 #browser #TabsToolbar {
   background-color: -moz-Dialog;
   max-width: 350px;
+  min-width: 76px;
 }
 
 #browser #TabsToolbar:-moz-lwtheme {

From 69f9d255ce07ee5ee41a5ed8d453eaa7eaa2d990 Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Wed, 18 Jan 2023 13:21:34 +1100
Subject: [PATCH 03/10] =?UTF-8?q?=F0=9F=92=84=20Allow=20resizing=20when=20?=
 =?UTF-8?q?collapse=20is=20enabled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/content/browser-verticaltabs.js      |  6 ++--
 src/browser/themes/pulse/vertical_tabs.css    | 28 +++++++++++++++----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/browser/base/content/browser-verticaltabs.js b/src/browser/base/content/browser-verticaltabs.js
index f4585f46..e91aa005 100644
--- a/src/browser/base/content/browser-verticaltabs.js
+++ b/src/browser/base/content/browser-verticaltabs.js
@@ -157,11 +157,11 @@ var VerticalTabs = {
         'class',
         'chromeclass-extrachrome verticaltabs-splitter'
       )
-      separator.setAttribute('resizebefore', 'sibling')
-      separator.setAttribute('resizeafter', 'none')
+      separator.setAttribute('resizebefore', 'none')
+      separator.setAttribute('resizeafter', 'sibling')
 
       const tabs = this.tabsToolbar
-      if (tabs) insertAfter(tabs, separator)
+      if (tabs) tabs.parentElement?.insertBefore(separator, tabs)
     }
   },
 
diff --git a/src/browser/themes/pulse/vertical_tabs.css b/src/browser/themes/pulse/vertical_tabs.css
index 30dd7425..be08bb7c 100644
--- a/src/browser/themes/pulse/vertical_tabs.css
+++ b/src/browser/themes/pulse/vertical_tabs.css
@@ -3,6 +3,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+:root {
+  --vertical-tabs-max-width: 350px;
+}
+
 #browser #TabsToolbar .titlebar-spacer,
 #browser #TabsToolbar .titlebar-buttonbox-container,
 #browser #TabsToolbar #alltabs-button {
@@ -15,10 +19,26 @@
 
 #browser #TabsToolbar {
   background-color: -moz-Dialog;
-  max-width: 350px;
+  max-width: var(--vertical-tabs-max-width);
+  -moz-box-ordinal-group: 0;
+}
+
+#browser #TabsToolbar:not([collapse='true']) {
   min-width: 76px;
 }
 
+#browser #TabsToolbar[collapse='true'] {
+  max-width: calc(
+    16px + 2 * var(--inline-tab-padding) + 2 * var(--tab-block-margin)
+  );
+}
+
+/** On collapse hover of tabs or splitter, the max width should increase again */
+#browser #TabsToolbar[collapse='true']:hover,
+#verticaltabs-splitter:hover ~ #TabsToolbar[collapse='true'] {
+  max-width: var(--vertical-tabs-max-width);
+}
+
 #browser #TabsToolbar:-moz-lwtheme {
   background-image: var(--lwt-additional-images);
   background-repeat: no-repeat, no-repeat, no-repeat;
@@ -94,10 +114,8 @@
   transition: min-height 100ms ease-out, max-height 100ms ease-out;
 }
 
-#browser #TabsToolbar[collapse='true']:not(:hover) {
-  max-width: calc(
-    16px + 2 * var(--inline-tab-padding) + 2 * var(--tab-block-margin)
-  );
+#verticaltabs-splitter {
+  -moz-box-ordinal-group: 1;
 }
 
 :root[sizemode='fullscreen'] #browser #TabsToolbar {

From cfef1575bed052eef7a598d6588e1e2e5efc0b95 Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Wed, 18 Jan 2023 21:00:06 +1100
Subject: [PATCH 04/10] =?UTF-8?q?=F0=9F=90=9B=20Fix=20tab=20squishing=20wh?=
 =?UTF-8?q?en=20reverting=20vertical=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/base/content/browser-verticaltabs.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/browser/base/content/browser-verticaltabs.js b/src/browser/base/content/browser-verticaltabs.js
index e91aa005..501926ed 100644
--- a/src/browser/base/content/browser-verticaltabs.js
+++ b/src/browser/base/content/browser-verticaltabs.js
@@ -178,8 +178,12 @@ var VerticalTabs = {
       .querySelector('#TabsToolbar .toolbar-items')
       ?.setAttribute('align', 'end')
 
-    changeXULTagName('toolbar', this.tabsToolbar)
-    this.tabsToolbar?.setAttribute('flex', '1')
+    if (this.tabsToolbar) {
+      changeXULTagName('toolbar', this.tabsToolbar)
+      this.tabsToolbar.setAttribute('flex', '1')
+      // Reset the resize value, or else the tabs will end up squished
+      this.tabsToolbar.style.width = ''
+    }
 
     if (this.splitter) {
       this.splitter.remove()

From 25af0a4b2304e613d655471223f5d78156606086 Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Wed, 18 Jan 2023 21:10:34 +1100
Subject: [PATCH 05/10] =?UTF-8?q?=F0=9F=92=84=20Correct=20color=20for=20ve?=
 =?UTF-8?q?rtical=20tab=20splitter=20Note:=20Only=20applies=20to=20pulse?=
 =?UTF-8?q?=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/themes/pulse/addons/shared.css | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/browser/themes/pulse/addons/shared.css b/src/browser/themes/pulse/addons/shared.css
index e09c0521..6be76fa3 100644
--- a/src/browser/themes/pulse/addons/shared.css
+++ b/src/browser/themes/pulse/addons/shared.css
@@ -108,6 +108,14 @@ tab.tabbrowser-tab:nth-child(1) {
   margin: 8px;
 }
 
+#verticaltabs-splitter {
+  background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
+  background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
+  -moz-default-appearance: auto !important;
+  -moz-font-smoothing-background-color: auto !important;
+  width: 4px;
+}
+
 /* ========================================================================== */
 /* Sidebar tabs */
 .sidebar-item-background[checked='true']::before,
@@ -255,7 +263,14 @@ tab[pending],
 }
 
 /* Hide the firefox view button */
-:root:not([privatebrowsingmode="temporary"]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs, :root[privatebrowsingmode="temporary"] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) + #tabbrowser-tabs {
-	border-inline-start: none;
+:root:not([privatebrowsingmode='temporary'])
+  :is(toolbarbutton, toolbarpaletteitem)
+  + #tabbrowser-tabs,
+:root[privatebrowsingmode='temporary']
+  :is(
+    toolbarbutton:not(#firefox-view-button),
+    toolbarpaletteitem:not(#wrapper-firefox-view-button)
+  )
+  + #tabbrowser-tabs {
+  border-inline-start: none;
 }
-

From 5c356aa4f29d6f25115fdf1bb2dbfce1975c4098 Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Wed, 18 Jan 2023 21:17:18 +1100
Subject: [PATCH 06/10] =?UTF-8?q?=F0=9F=92=84=20Remove=20extra=20left=20sp?=
 =?UTF-8?q?acing=20in=20vertical=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/themes/pulse/vertical_tabs.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/browser/themes/pulse/vertical_tabs.css b/src/browser/themes/pulse/vertical_tabs.css
index be08bb7c..09a8857e 100644
--- a/src/browser/themes/pulse/vertical_tabs.css
+++ b/src/browser/themes/pulse/vertical_tabs.css
@@ -106,7 +106,8 @@
 
 #browser #tabbrowser-tabs {
   border-inline-start: none;
-  margin-inline-start: none;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
 }
 
 #browser #TabsToolbar[collapse='true'] .tabbrowser-tab {

From 9712079c808f08ab1bebf49cd80d76dfb920e3f8 Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Wed, 18 Jan 2023 21:29:26 +1100
Subject: [PATCH 07/10] =?UTF-8?q?=F0=9F=92=84=20Curvy=20everything?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/themes/pulse/addons/shared.css | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/browser/themes/pulse/addons/shared.css b/src/browser/themes/pulse/addons/shared.css
index 6be76fa3..0a5f4063 100644
--- a/src/browser/themes/pulse/addons/shared.css
+++ b/src/browser/themes/pulse/addons/shared.css
@@ -117,9 +117,11 @@ tab.tabbrowser-tab:nth-child(1) {
 }
 
 /* ========================================================================== */
-/* Sidebar tabs */
+/* Sidebar tabs & vertical tabs */
 .sidebar-item-background[checked='true']::before,
-.sidebar-item-background[checked='true']::after {
+.sidebar-item-background[checked='true']::after,
+#browser .tab-background[selected='true']::before,
+#browser .tab-background[selected='true']::after {
   content: '';
   position: absolute;
   right: 0;
@@ -136,19 +138,23 @@ tab.tabbrowser-tab:nth-child(1) {
   z-index: 10;
 }
 
-.sidebar-item-background[checked='true']::before {
+.sidebar-item-background[checked='true']::before,
+#browser .tab-background[selected='true']::before {
   background-image: url('chrome://global/skin/icons/tab-rising-edge.svg');
   top: var(--tab-rounding-size-neg);
+  left: unset; /* This is for vertical tabs */
 }
 
-.sidebar-item-background[checked='true']::after {
+.sidebar-item-background[checked='true']::after,
+#browser .tab-background[selected='true']::after {
   background-image: url('chrome://global/skin/icons/tab-falling-edge.svg');
   bottom: var(--tab-rounding-size-neg);
   transform: rotate(180deg);
 }
 
 /* Show the curve next to the sidebar panel */
-#sidebar-box[checked] ~ #appcontent::before {
+#sidebar-box[checked] ~ #appcontent::before,
+#browser #TabsToolbar ~ #appcontent::before {
   content: '';
 
   background-image: url('chrome://global/skin/icons/tab-rising-edge.svg');
@@ -166,12 +172,14 @@ tab.tabbrowser-tab:nth-child(1) {
   transform: rotate(180deg);
 }
 
-#appcontent {
+#appcontent,
+#browser #TabsToolbar {
   position: relative;
 }
 
 /* Curve up at the top of the tabs */
-#sidebar-icons[checked]::before {
+#sidebar-icons[checked]::before,
+#browser #TabsToolbar::before {
   content: '';
   background-image: url('chrome://global/skin/icons/tab-rising-edge.svg');
   background-size: cover;

From 84931c59b204ba42f8fcfe1693253ba435a7ec30 Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Fri, 20 Jan 2023 13:35:31 +1100
Subject: [PATCH 08/10] =?UTF-8?q?=F0=9F=92=84=20Fix=20vertical=20tabs=20ov?=
 =?UTF-8?q?erflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/themes/pulse/vertical_tabs.css | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/browser/themes/pulse/vertical_tabs.css b/src/browser/themes/pulse/vertical_tabs.css
index 09a8857e..b75da267 100644
--- a/src/browser/themes/pulse/vertical_tabs.css
+++ b/src/browser/themes/pulse/vertical_tabs.css
@@ -5,6 +5,9 @@
  */
 :root {
   --vertical-tabs-max-width: 350px;
+  --vertical-tabs-collapse-width: calc(
+    16px + 2 * var(--inline-tab-padding) + 2 * var(--tab-block-margin)
+  );
 }
 
 #browser #TabsToolbar .titlebar-spacer,
@@ -20,7 +23,11 @@
 #browser #TabsToolbar {
   background-color: -moz-Dialog;
   max-width: var(--vertical-tabs-max-width);
+  min-width: var(--vertical-tabs-collapse-width);
   -moz-box-ordinal-group: 0;
+  overflow-x: hidden;
+
+  transition: min-width 150ms ease-in-out, max-width 150ms ease-in-out;
 }
 
 #browser #TabsToolbar:not([collapse='true']) {
@@ -28,9 +35,7 @@
 }
 
 #browser #TabsToolbar[collapse='true'] {
-  max-width: calc(
-    16px + 2 * var(--inline-tab-padding) + 2 * var(--tab-block-margin)
-  );
+  max-width: var(--vertical-tabs-collapse-width);
 }
 
 /** On collapse hover of tabs or splitter, the max width should increase again */

From 3069aae7f14ce6c16c0d266ac54839f0fd2f1e41 Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Fri, 20 Jan 2023 13:41:49 +1100
Subject: [PATCH 09/10] =?UTF-8?q?=F0=9F=90=9B=20Fix=20resize=20re-ordering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/content/browser-sidebar-js.patch     | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/browser/base/content/browser-sidebar-js.patch b/src/browser/base/content/browser-sidebar-js.patch
index 7c38a3f6..0c11e576 100644
--- a/src/browser/base/content/browser-sidebar-js.patch
+++ b/src/browser/base/content/browser-sidebar-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser-sidebar.js b/browser/base/content/browser-sidebar.js
-index c5ac301416d2d820ba95e21c0ce1fe305e63b554..4d824259fd611e5531e35bb3d3da85f587815197 100644
+index c5ac301416d2d820ba95e21c0ce1fe305e63b554..41b22e5f816fad8ee98baae99314ead8ea6294e2 100644
 --- a/browser/base/content/browser-sidebar.js
 +++ b/browser/base/content/browser-sidebar.js
 @@ -11,6 +11,10 @@ var SidebarUI = {
@@ -237,7 +237,17 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..4d824259fd611e5531e35bb3d3da85f5
        }
      }
    },
-@@ -485,6 +612,9 @@ var SidebarUI = {
+@@ -286,6 +413,9 @@ var SidebarUI = {
+     // First reset all ordinals to match DOM ordering.
+     let browser = document.getElementById("browser");
+     [...browser.children].forEach((node, i) => {
++      // Do not change ordinal on vertical tabs
++      if (node.id == 'TabsToolbar' || node.id == 'verticaltabs-splitter') return
++
+       node.style.MozBoxOrdinalGroup = i + 1;
+     });
+ 
+@@ -485,6 +615,9 @@ var SidebarUI = {
    },
  
    _loadSidebarExtension(commandID) {
@@ -247,7 +257,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..4d824259fd611e5531e35bb3d3da85f5
      let sidebar = this.sidebars.get(commandID);
      let { extensionId } = sidebar;
      if (extensionId) {
-@@ -523,6 +653,7 @@ var SidebarUI = {
+@@ -523,6 +656,7 @@ var SidebarUI = {
        }
  
        this._fireFocusedEvent();
@@ -255,7 +265,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..4d824259fd611e5531e35bb3d3da85f5
        return true;
      });
    },
-@@ -546,10 +677,28 @@ var SidebarUI = {
+@@ -546,10 +680,28 @@ var SidebarUI = {
      }
      return this._show(commandID).then(() => {
        this._loadSidebarExtension(commandID);
@@ -284,7 +294,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..4d824259fd611e5531e35bb3d3da85f5
    /**
     * Implementation for show. Also used internally for sidebars that are shown
     * when a window is opened and we don't want to ping telemetry.
-@@ -559,6 +708,29 @@ var SidebarUI = {
+@@ -559,6 +711,29 @@ var SidebarUI = {
     */
    _show(commandID) {
      return new Promise(resolve => {
@@ -314,7 +324,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..4d824259fd611e5531e35bb3d3da85f5
        this.selectMenuItem(commandID);
  
        this._box.hidden = this._splitter.hidden = false;
-@@ -570,13 +742,21 @@ var SidebarUI = {
+@@ -570,13 +745,21 @@ var SidebarUI = {
        this._box.setAttribute("sidebarcommand", commandID);
        this.lastOpenedId = commandID;
  
@@ -338,7 +348,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..4d824259fd611e5531e35bb3d3da85f5
          this.browser.addEventListener(
            "load",
            event => {
-@@ -615,22 +795,46 @@ var SidebarUI = {
+@@ -615,22 +798,46 @@ var SidebarUI = {
  
      this.selectMenuItem("");
  
@@ -392,7 +402,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..4d824259fd611e5531e35bb3d3da85f5
    },
  
    /**
-@@ -638,25 +842,121 @@ var SidebarUI = {
+@@ -638,25 +845,121 @@ var SidebarUI = {
     * none if the argument is an empty string.
     */
    selectMenuItem(commandID) {

From c228f4e66be92a5fd6fed8c3377ca91fdae48c66 Mon Sep 17 00:00:00 2001
From: TrickyPR <23250792+trickypr@users.noreply.github.com>
Date: Wed, 1 Feb 2023 20:29:50 +1100
Subject: [PATCH 10/10] =?UTF-8?q?=F0=9F=92=AC=20Early=20access=20=E2=86=92?=
 =?UTF-8?q?=20In=20dev?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../locales/en-US/browser/preferences/preferences-ftl.patch   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch b/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch
index 46d74d12..5449ac30 100644
--- a/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch
+++ b/src/browser/locales/en-US/browser/preferences/preferences-ftl.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/locales/en-US/browser/preferences/preferences.ftl b/browser/locales/en-US/browser/preferences/preferences.ftl
-index f24485700321defc69cd57099ede164701b9b3ec..c62c09a76a96a8fd443537146edf4461839135f4 100644
+index f24485700321defc69cd57099ede164701b9b3ec..8061f090bf6d2fb29c4824d5d1a812688abfafb4 100644
 --- a/browser/locales/en-US/browser/preferences/preferences.ftl
 +++ b/browser/locales/en-US/browser/preferences/preferences.ftl
 @@ -1432,3 +1432,18 @@ httpsonly-radio-disabled =
@@ -16,7 +16,7 @@ index f24485700321defc69cd57099ede164701b9b3ec..c62c09a76a96a8fd443537146edf4461
 +preferences-sidebar-active-tabs-description = When enabled, sidebar tabs will remain active even when closed. When disabled, sidebar tabs will be closed when you click on another tab.
 +
 +preferences-vertical-tabs-enabled =
-+    .label = Use vertical tabs (Early Access)
++    .label = Use vertical tabs (In dev)
 +preferences-vertical-tabs-collapse =
 +    .label = Collapse tabs
 +