Bug 1918676 - Disable tab opening / closing animations and tab size locking in vertical mode, properly set --tab-min-width rather than overriding min-width in vertical mode, and restrict some styles to horizontal mode. r=sidebar-reviewers,desktop-theme-reviewers,tabbrowser-reviewers,emilio,kcochrane,sclements,dwalker

Differential Revision: https://phabricator.services.mozilla.com/D222202

browser/components/sidebar/browser-sidebar.js

@@ -1519,7 +1519,8 @@ var SidebarController = {
 
   toggleTabstrip() {
     let toVerticalTabs = CustomizableUI.verticalTabsEnabled;
-    let arrowScrollbox = gBrowser.tabContainer.arrowScrollbox;
+    let tabStrip = gBrowser.tabContainer;
+    let arrowScrollbox = tabStrip.arrowScrollbox;
     let currentScrollOrientation = arrowScrollbox.getAttribute("orient");
 
     if (
@@ -1530,7 +1531,6 @@ var SidebarController = {
       return;
     }
 
-    let tabStrip = gBrowser.tabContainer;
     if (toVerticalTabs) {
       this.toggleExpanded(this._sidebarMain.expanded);
       arrowScrollbox.setAttribute("orient", "vertical");
@@ -1544,16 +1544,6 @@ var SidebarController = {
     let verticalToolbar = document.getElementById(
       CustomizableUI.AREA_VERTICAL_TABSTRIP
     );
-    let indicatorTabs = gBrowser.visibleTabs.filter(tab => {
-      return (
-        tab.hasAttribute("soundplaying") ||
-        tab.hasAttribute("muted") ||
-        tab.hasAttribute("activemedia-blocked")
-      );
-    });
-    for (const indicatorTab of indicatorTabs) {
-      tabStrip.updateTabIndicatorAttr(indicatorTab);
-    }
     verticalToolbar.toggleAttribute("visible", toVerticalTabs);
   },
 };

browser/components/tabbrowser/content/tabbrowser.js

@@ -2751,7 +2751,8 @@
       let animate =
         !skipAnimation &&
         !pinned &&
-        this.tabContainer.getAttribute("overflow") != "true" &&
+        !this.tabContainer.verticalMode &&
+        !this.tabContainer.overflowing &&
         !gReduceMotion;
 
       let uriInfo = this._determineURIToLoad(uriString, createLazyBrowser);
@@ -4160,6 +4161,7 @@
       }
 
       let lockTabSizing =
+        !this.tabContainer.verticalMode &&
         !aTab.pinned &&
         !aTab.hidden &&
         aTab._fullyOpen &&
@@ -4177,6 +4179,7 @@
         isLastTab ||
         aTab.pinned ||
         aTab.hidden ||
+        this.tabContainer.verticalMode ||
         this._removingTabs.size >
           3 /* don't want lots of concurrent animations */ ||
         !aTab.hasAttribute(

browser/components/tabbrowser/content/tabs.js

@@ -115,14 +115,13 @@
         "_tabMinWidthPref",
         "browser.tabs.tabMinWidth",
         null,
-        (pref, prevValue, newValue) => (this._tabMinWidth = newValue),
+        (pref, prevValue, newValue) => this.#updateTabMinWidth(newValue),
         newValue => {
           const LIMIT = 50;
           return Math.max(newValue, LIMIT);
         }
       );
-
-      this._tabMinWidth = this._tabMinWidthPref;
+      this.#updateTabMinWidth(this._tabMinWidthPref);
 
       CustomizableUI.addListener(this);
       this._updateNewTabVisibility();
@@ -158,6 +157,19 @@
       }
       this._positionPinnedTabs();
 
+      this.#updateTabMinWidth();
+
+      let indicatorTabs = gBrowser.visibleTabs.filter(tab => {
+        return (
+          tab.hasAttribute("soundplaying") ||
+          tab.hasAttribute("muted") ||
+          tab.hasAttribute("activemedia-blocked")
+        );
+      });
+      for (const indicatorTab of indicatorTabs) {
+        this.updateTabIndicatorAttr(indicatorTab);
+      }
+
       super.attributeChangedCallback(name, oldValue, newValue);
     }
 
@@ -1326,8 +1338,16 @@
       return node.before(tab);
     }
 
-    set _tabMinWidth(val) {
-      this.style.setProperty("--tab-min-width", val + "px");
+    #updateTabMinWidth(val) {
+      const minWidthVariable = "--tab-min-width";
+      if (this.verticalMode) {
+        this.style.removeProperty(minWidthVariable);
+      } else {
+        this.style.setProperty(
+          minWidthVariable,
+          (val ?? this._tabMinWidthPref) + "px"
+        );
+      }
     }
 
     get _isCustomizing() {
@@ -1474,6 +1494,10 @@
      * Try to keep the active tab's close button under the mouse cursor
      */
     _lockTabSizing(aTab, aTabWidth) {
+      if (this.verticalMode) {
+        return;
+      }
+
       let tabs = this._getVisibleTabs();
       if (!tabs.length) {
         return;

browser/themes/shared/tabbrowser/tabs.css

@@ -50,24 +50,32 @@
 }
 
 #tabbrowser-tabs {
-  --tab-min-width: 76px;
-  --tab-overflow-pinned-tabs-width: 0px;
-  padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
   /* Use a bigger flex value than the searchbar to prevent it from
    * taking all the toolbar space. */
   flex: 1000 1000;
 
-  &[orient="horizontal"][positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
-    /* Add padding to match the shadow's blur radius so the
-       shadow doesn't get clipped when either the first or
-       last tab is selected */
-    padding-inline: var(--tab-shadow-max-size);
-  }
+  &[orient="horizontal"] {
+    --tab-overflow-pinned-tabs-width: 0px;
+    padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
 
-  /* Make it easier to drag tabs by expanding the drag area downwards. */
-  &[movingtab] {
-    padding-bottom: 15px;
-    margin-bottom: -15px;
+    --tab-min-width: 76px;
+    :root[uidensity="touch"] & {
+      /* Touch mode needs additional space for the close button. */
+      --tab-min-width: 86px;
+    }
+
+    &[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
+      /* Add padding to match the shadow's blur radius so the
+         shadow doesn't get clipped when either the first or
+         last tab is selected */
+      padding-inline: var(--tab-shadow-max-size);
+    }
+
+    /* Make it easier to drag tabs by expanding the drag area downwards. */
+    &[movingtab] {
+      padding-bottom: 15px;
+      margin-bottom: -15px;
+    }
   }
 }
 
@@ -120,11 +128,6 @@
     min-width: var(--tab-min-width);
     transition: min-width 100ms ease-out,
                 max-width 100ms ease-out;
-
-    :root[uidensity=touch] & {
-      /* Touch mode needs additional space for the close button. */
-      min-width: calc(var(--tab-min-width) + 10px);
-    }
   }
 
   &:not([pinned], [fadein]) {
@@ -872,6 +875,7 @@ tab-group {
   flex-direction: column;
   align-content: flex-start;
   grid-gap: var(--space-small);
+  padding: 0; /* override tabbox.css on macOS */
 
   &[overflow] {
     border-bottom: var(--tabstrip-inner-border);
@@ -892,8 +896,9 @@ tab-group {
   }
 
   &:not([expanded]) {
+    --tab-min-width: inherit;
+
     .tabbrowser-tab {
-      min-width: inherit;
       width: var(--collapsed-tab-width);
       flex: none;
     }
@@ -904,10 +909,10 @@ tab-group {
   }
 
   &[expanded] {
+    --tab-min-width: calc(100% - var(--space-medium));
     --tab-icon-end-margin: 7.5px;
 
     .tabbrowser-tab {
-      min-width: calc(100% - var(--space-medium));
       flex: none;
       max-width: none;
       padding: 0;