diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js index 372bc9eb79ba..ea2579705c7c 100644 --- a/browser/components/sidebar/browser-sidebar.js +++ b/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); }, }; diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js index 1f91d92efbe3..2f6b9b16d3ce 100644 --- a/browser/components/tabbrowser/content/tabbrowser.js +++ b/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( diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js index a00e4abd3078..6f8f017a07d1 100644 --- a/browser/components/tabbrowser/content/tabs.js +++ b/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; diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css index 2cde31d8cf2f..e845b2db3c8c 100644 --- a/browser/themes/shared/tabbrowser/tabs.css +++ b/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;