feat: tab width fills rows on overflow

addon/chrome/content/preferences/appearance.xhtml

@@ -63,6 +63,7 @@
       <preference id="pref_maxWidth"          name="browser.tabs.tabMaxWidth"                   type="int"/>
       <preference id="pref_flexTabs"          name="extensions.tabmix.flexTabs"                 type="bool"
                   onchange="gAppearancePane.setTabCloseButtonUI();"/>
+      <preference id="pref_flexTabs_fitRow"   name="extensions.tabmix.flexTabs_fitRow"          type="bool"/>
       <preference id="pref_bookastitle"       name="extensions.tabmix.titlefrombookmark"        type="bool"/>
       <preference id="pref_enableMaxTabsInRow"
                   name="extensions.tabmix.enableMaxTabsInRow"                                   type="bool"/>
@@ -250,14 +251,15 @@
             <!-- Tab width -->
             <hbox align="center">
               <label value="&minWidth.label;"/>
-              <html:input id="minWidth" size="3" maxlength="3" preference="pref_minWidth" type="number" required="required"
+              <html:input id="minWidth" size="4" maxlength="3" preference="pref_minWidth" type="number" required="required"
                        onsynctopreference="return gAppearancePane.userChangedWidth(this);" min="40"/>
               <label value="&widthTo.label;"/>
               <html:input id="maxWidth" size="4" maxlength="4" preference="pref_maxWidth" type="number" required="required"
                        onsynctopreference="return gAppearancePane.userChangedWidth(this);" min="40"/>
               <label value="&widthPixels.label;"/>
             </hbox>
             <checkbox_tmp id="flexTabs" label="&flexTabs.label;"  preference="pref_flexTabs"/>
+            <checkbox_tmp id="flexTabs_fitRow" label="Tab width fills rows on overflow" preference="pref_flexTabs_fitRow" observes="obs_flexTabs"/>
             <checkbox_tmp id="bookastitle" label="&bookastitle.label;" preference="pref_bookastitle"/>
           </html:fieldset>
         </tabpanel>
@@ -302,6 +304,7 @@
     </tabbox>
 
     <broadcasterset id="paneAppearance:Broadcaster">
+      <broadcaster id="obs_flexTabs" inverseDependency="true"/>
       <broadcaster id="obs_newTabButton"/>
       <broadcaster id="obs_smoothScroll" inverseDependency="true"/>
       <broadcaster id="obs_unreadTab"/>

addon/chrome/content/tab/tab.js

@@ -741,7 +741,7 @@ Tabmix.tabsUtils = {
 
     const tabsButtonWidth = this._newTabButtonWidth(false);
     const tsbo = this.tabBar.arrowScrollbox.scrollbox;
-    const tsboBaseWidth = tsbo.getBoundingClientRect().width;
+    const {width: tsboBaseWidth, x: tsboX} = tsbo.getBoundingClientRect();
     const tabstripWidth = this.disAllowNewtabbutton ?
       tsboBaseWidth + this._newTabButtonWidth(true) :
       tsboBaseWidth;
@@ -753,7 +753,7 @@ Tabmix.tabsUtils = {
     }
 
     if (isFirstRowWithPinnedTabs && firstNonPinnedTab) {
-      const stripWidthWithoutPinned = tabstripWidth - firstNonPinnedTab.getBoundingClientRect().x;
+      const stripWidthWithoutPinned = tabstripWidth - (firstNonPinnedTab.getBoundingClientRect().x - tsboX);
       const testNewMinWidth = calcMinWidth(stripWidthWithoutPinned, tabsButtonWidth, newMinWidth);
       if (testNewMinWidth > newMinWidth) {
         const widthForeNonPinnedTabs = calcMinWidth(stripWidthWithoutPinned, tabsButtonWidth);
@@ -981,21 +981,22 @@ Tabmix.tabsUtils = {
     }
   },
 
-  _overflow_max_width: 250,
+  _tab_overflow_width: 250,
   updateOverflowMaxWidth() {
-    if (!TabmixTabbar.widthFitTitle && gBrowser.visibleTabs.length > gBrowser._numPinnedTabs) {
+    if (!TabmixTabbar.widthFitTitle && Tabmix.prefs.getBoolPref("flexTabs_fitRow") &&
+        gBrowser.visibleTabs.length > gBrowser._numPinnedTabs) {
       const tsbo = this.tabBar.arrowScrollbox.scrollbox;
       const tsboBaseWidth = tsbo.getBoundingClientRect().width;
       const minWidth = parseFloat(gTMPprefObserver.dynamicRules.width.style.getPropertyValue("min-width"));
       const tab = gBrowser.tabs.at(-1);
       const padding = tab ? Tabmix.getStyle(tab, "paddingLeft") + Tabmix.getStyle(tab, "paddingRight") : 4;
       const maxTabsInRow = Math.floor(tsboBaseWidth / (minWidth + padding));
       const newMaxWidth = Math.floor(1000 * tsboBaseWidth / maxTabsInRow) / 1000 - padding;
-      if (this._overflow_max_width !== newMaxWidth) {
-        this._overflow_max_width = newMaxWidth;
+      if (this._tab_overflow_width !== newMaxWidth) {
+        this._tab_overflow_width = newMaxWidth;
         const root = document.querySelector(":root");
         this.tabBar.setAttribute("no-animation", "");
-        root?.style.setProperty("--tabmix-overflow-max-width", newMaxWidth + "px");
+        root?.style.setProperty("--tabmix-tab-overflow-width", newMaxWidth + "px");
         setTimeout(() => this.tabBar.removeAttribute("no-animation"), 0);
       }
     }
@@ -1491,6 +1492,15 @@ window.gTMPprefObserver = {
         }
         break;
       }
+      case "extensions.tabmix.flexTabs_fitRow":
+        if (prefValue) {
+          Tabmix.tabsUtils.updateOverflowMaxWidth();
+        } else {
+          Tabmix.tabsUtils._tab_overflow_width = 250;
+          const root = document.querySelector(":root");
+          root?.style.removeProperty("--tabmix-tab-overflow-width");
+        }
+        break;
       case "browser.tabs.tabClipWidth":
         gBrowser.tabContainer._tabClipWidth = Services.prefs.getIntPref(prefName);
         gBrowser.tabContainer._updateCloseButtons();

addon/chrome/skin/general.css

@@ -73,5 +73,5 @@
 }
 
 #tabbrowser-tabs[orient="horizontal"][multibar]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([pinned]) {
-  max-width: var(--tabmix-overflow-max-width, 250px) !important;
+  max-width: var(--tabmix-tab-overflow-width, var(--tab-min-width)) !important;
 }

addon/defaults/preferences/tabmix.js

@@ -118,6 +118,7 @@ pref("extensions.tabmix.styles.otherTab", '{"italic":false,"bold":false,"underli
 pref("extensions.tabmix.styles.progressMeter", '{"bg":true,"bgColor":"rgba(170,170,255,1)"}');
 
 pref("extensions.tabmix.flexTabs", false);
+pref("extensions.tabmix.flexTabs_fitRow", true);
 
 pref("extensions.tabmix.titlefrombookmark", false);
 

types/extraTabmixUtils.d.ts

@@ -475,7 +475,7 @@ declare namespace TabsUtils {
   function isSingleRow(visibleTabs: Tab[]): boolean;
   let _resizeObserver: ResizeObserver | null;
   function resizeObserver(observe: boolean): void;
-  let _overflow_max_width: number;
+  let _tab_overflow_width: number;
   function updateOverflowMaxWidth(): void;
   function updateScrollButtons(useTabmixButtons: boolean): void;
   function isElementVisible(element: Tab | null | undefined): boolean;