fix: tab width inconsistency when 'tab width fits to tab width' optio…

…n is disabled (#215)
onemen · Oct 1, 2024 · 7f481c8 · 7f481c8
1 parent c0c8416
commit 7f481c8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/addon/chrome/content/tab/tab.js b/addon/chrome/content/tab/tab.js
@@ -967,6 +967,7 @@ Tabmix.tabsUtils = {
       this._resizeObserver = new window.ResizeObserver(entries => {
         for (let entry of entries) {
           if (entry.contentBoxSize) {
+            this.updateOverflowMaxWidth();
             this.updateVerticalTabStrip();
             break;
           }
@@ -980,6 +981,26 @@ Tabmix.tabsUtils = {
     }
   },
 
+  _overflow_max_width: 250,
+  updateOverflowMaxWidth() {
+    if (!TabmixTabbar.widthFitTitle && 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;
+        const root = document.querySelector(":root");
+        this.tabBar.setAttribute("no-animation", "");
+        root?.style.setProperty("--tabmix-overflow-max-width", newMaxWidth + "px");
+        setTimeout(() => this.tabBar.removeAttribute("no-animation"), 0);
+      }
+    }
+  },
+
   /**** gBrowser.tabContainer.arrowScrollbox helpers ****/
   /**
    * this function is here for the case restart-less extension override our
@@ -1443,6 +1464,7 @@ window.gTMPprefObserver = {
         gBrowser.tabContainer.setAttribute("no-animation", "");
         this.dynamicRules.width.style.setProperty("max-width", tabMaxWidth + "px", "important");
         this.dynamicRules.width.style.setProperty("min-width", tabMinWidth + "px", "important");
+        Tabmix.tabsUtils.updateOverflowMaxWidth();
         setTimeout(() => gBrowser.tabContainer.removeAttribute("no-animation"), 0);
         TabmixTabbar.updateSettings(false);
         // we need this timeout when there are many tabs

diff --git a/addon/chrome/skin/general.css b/addon/chrome/skin/general.css
@@ -71,3 +71,7 @@
 #tabbrowser-tabs[no-animation] .tabbrowser-tab:not([pinned]) {
 	transition: none !important;
 }
+
+#tabbrowser-tabs[orient="horizontal"][multibar]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([pinned]) {
+  max-width: var(--tabmix-overflow-max-width, 250px) !important;
+}
diff --git a/types/extraTabmixUtils.d.ts b/types/extraTabmixUtils.d.ts
@@ -475,6 +475,8 @@ declare namespace TabsUtils {
   function isSingleRow(visibleTabs: Tab[]): boolean;
   let _resizeObserver: ResizeObserver | null;
   function resizeObserver(observe: boolean): void;
+  let _overflow_max_width: number;
+  function updateOverflowMaxWidth(): void;
   function updateScrollButtons(useTabmixButtons: boolean): void;
   function isElementVisible(element: Tab | null | undefined): boolean;
   const protonValues: {enabled: boolean; name: string; val: string; margin: string};