💄 Clean up vertical tabs for the pulse theme (#201)

* ✨ Allow for resizing vertical tabs

* 💄 Specify a min-width for the tab container

* 💄 Allow resizing when collapse is enabled

* 🐛 Fix tab squishing when reverting vertical tabs

* 💄 Correct color for vertical tab splitter
Note: Only applies to pulse theme

* 💄 Remove extra left spacing in vertical tabs

* 💄 Curvy everything

* 💄 Fix vertical tabs overflow

* 🐛 Fix resize re-ordering

* 💬 Early access → In dev

Author: trickypr

src/browser/base/content/browser-sidebar-js.patch

@@ -258,7 +258,17 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
        }
      }
    },
-@@ -485,6 +628,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) {
@@ -268,15 +278,15 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
      let sidebar = this.sidebars.get(commandID);
      let { extensionId } = sidebar;
      if (extensionId) {
-@@ -523,6 +669,7 @@ var SidebarUI = {
+@@ -523,6 +656,7 @@ var SidebarUI = {
        }
 
        this._fireFocusedEvent();
 +      this.loadedSidebars.push(commandID);
        return true;
      });
    },
-@@ -546,10 +693,28 @@ var SidebarUI = {
+@@ -546,10 +680,28 @@ var SidebarUI = {
      }
      return this._show(commandID).then(() => {
        this._loadSidebarExtension(commandID);
@@ -305,7 +315,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
    /**
     * 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 +724,29 @@ var SidebarUI = {
+@@ -559,6 +711,29 @@ var SidebarUI = {
     */
    _show(commandID) {
      return new Promise(resolve => {
@@ -335,7 +345,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
        this.selectMenuItem(commandID);
 
        this._box.hidden = this._splitter.hidden = false;
-@@ -570,13 +758,21 @@ var SidebarUI = {
+@@ -570,13 +745,21 @@ var SidebarUI = {
        this._box.setAttribute("sidebarcommand", commandID);
        this.lastOpenedId = commandID;
 
@@ -359,7 +369,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
          this.browser.addEventListener(
            "load",
            event => {
-@@ -615,22 +811,46 @@ var SidebarUI = {
+@@ -615,22 +798,46 @@ var SidebarUI = {
 
      this.selectMenuItem("");
 
@@ -413,7 +423,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
    },
 
    /**
-@@ -638,25 +858,121 @@ var SidebarUI = {
+@@ -638,25 +845,121 @@ var SidebarUI = {
     * none if the argument is an empty string.
     */
    selectMenuItem(commandID) {

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
 +

src/browser/themes/pulse/addons/shared.css

@@ -108,10 +108,20 @@ 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 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;
@@ -128,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');
@@ -158,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;
@@ -255,7 +271,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;
 }
-

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,17 +23,19 @@
 #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']) {
   min-width: 76px;
 }
 
 #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 */
@@ -106,7 +111,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 {