fix: firefox 131 scrolling tab bar impossible (closes #335)

onemen · Oct 15, 2024 · 434b14a · 434b14a
1 parent c5c749a
commit 434b14a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
diff --git a/addon/chrome/content/links/setup.js b/addon/chrome/content/links/setup.js
@@ -215,8 +215,12 @@ Tabmix.beforeStartup = function TMP_beforeStartup(tabBrowser, aTabContainer) {
   tabContainer.mTabMaxWidth = max;
   tabContainer.mTabMinWidth = min;
   TabmixTabbar.widthFitTitle = this.prefs.getBoolPref("flexTabs") && max != min;
-  if (TabmixTabbar.widthFitTitle)
+  if (TabmixTabbar.widthFitTitle) {
     this.setItem(tabContainer, "widthFitTitle", true);
+    if (Tabmix.isVersion(1310)) {
+      Tabmix.setItem(tabContainer.arrowScrollbox, "widthFitTitle", true);
+    }
+  }
 
   var tabscroll = this.prefs.getIntPref("tabBarMode");
   if (document.documentElement.getAttribute("chromehidden")?.includes("toolbar"))

diff --git a/addon/chrome/content/overlay/browser.css b/addon/chrome/content/overlay/browser.css
@@ -258,11 +258,7 @@ so display: none !important; does not hide the button */
 }
 
 /* :::: widthFitTitle :::: */
-#tabbrowser-tabs[orient="horizontal"][widthFitTitle] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) {
-  flex: 0 0 auto !important;
-  -moz-box-flex: 0 !important; /* before Firefox 112 */
-  width: auto !important;
-}
+/* more dynamic rules are in tab.js addDynamicRules */
 
 #tabbrowser-tabs[orient="horizontal"]:not([widthFitTitle]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]):not([tiletabs-single="hidden"]) {
   flex: 1 1 0% !important;

diff --git a/addon/chrome/content/tab/tab.js b/addon/chrome/content/tab/tab.js
@@ -144,6 +144,9 @@ var TabmixTabbar = {
     this.widthFitTitle = Tabmix.prefs.getBoolPref("flexTabs") &&
                     tabBar.mTabMaxWidth != tabBar.mTabMinWidth;
     Tabmix.setItem(tabBar, "widthFitTitle", this.widthFitTitle || null);
+    if (Tabmix.isVersion(1310)) {
+      Tabmix.setItem(tabBar.arrowScrollbox, "widthFitTitle", this.widthFitTitle || null);
+    }
 
     if (Tabmix.prefs.getIntPref("tabs.closeButtons") == 5 && this.widthFitTitle)
       Tabmix.prefs.setIntPref("tabs.closeButtons", 1);
@@ -1969,16 +1972,26 @@ window.gTMPprefObserver = {
     }
 
     if (Tabmix.isVersion(1310)) {
-      const htmlSlot = gBrowser.tabContainer.arrowScrollbox.scrollbox.firstChild;
-      if (htmlSlot) {
-        htmlSlot.style.flexWrap = "inherit";
-        this.insertRule(
-          `#tabbrowser-tabs[multibar][orient=horizontal] > #tabbrowser-arrowscrollbox::part(scrollbox) {
-            margin-top: var(--tabmix-multirow-margin, 0);
-            margin-bottom: var(--tabmix-multirow-margin, 0);
-          }`
-        );
-      }
+      this.insertRule(
+        `#tabbrowser-tabs[multibar][orient=horizontal] > #tabbrowser-arrowscrollbox::part(scrollbox) {
+          margin-top: var(--tabmix-multirow-margin, 0);
+          margin-bottom: var(--tabmix-multirow-margin, 0);
+        }`
+      );
+
+      const shadowRoot = gBrowser.tabContainer.arrowScrollbox.shadowRoot;
+      const styleSheet = new CSSStyleSheet();
+      styleSheet.replaceSync(`
+        slot {
+          flex-wrap: inherit;
+        }
+        :host(:not([flowing="multibar"])[orient="horizontal"][widthFitTitle]) slot {
+          display: grid;
+          grid-auto-flow: column;
+          grid-auto-columns: max-content;
+        }
+      `);
+      shadowRoot.adoptedStyleSheets = [styleSheet];
     } else {
       this.insertRule(
         `#tabbrowser-tabs[multibar][orient=horizontal] > #tabbrowser-arrowscrollbox::part(scrollbox-clip) {
@@ -1989,6 +2002,13 @@ window.gTMPprefObserver = {
           contain: unset;
         }`
       );
+
+      this.insertRule(
+        `#tabbrowser-tabs[orient="horizontal"][widthFitTitle] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) {
+          flex: 0 0 auto !important;
+          width: auto !important;
+        }`
+      );
     }
 
     this.dynamicProtonRules();