5

Both Chrome and Firefox introduced the Search tabs list menu.

enter image description here

In my view, this completely negates the need for the (very annoying imo) tab-scrolling feature of Firefox (i.e. when you have what they deem to be too many tabs for the view, < and > buttons appear on the tab line so that you can scroll left and right). enter image description here

I would like to disable that functionality. I don't want to "turn Firefox into Chrome", I prefer Firefox for many many other reasons, but I want to remove the annoyance of the < / > buttons (honestly, it's one of the reasons that puts me off Firefox more than any other - I just see no purpose for these buttons, and not being able to visually see all tabs from one view is annoying).

I found that if you go to about:config, you can then search for browser.tabs.tabMinWidth, and adjust the size. In an article from 5 or 6 years ago, it said you can reduce this to 0, but I found this impossible, and an article from 2019 said that it is limited to a minimum of 50 pixels. There is also this article from 11 years ago that is redundant with respect to modern Firefox.

Is there a way to disable the tab scroll left/right buttons < / > and/or reduce the tab pixel width to '0' or '1'?

2 Answers 2

4
  1. type about:config into the address bar and then toolkit.legacyUserProfileCustomizations.stylesheets into the search on that page. Turn the setting from false to true.

  2. Find your user profile folder by typing about:support in the address bar.

  3. Edit/create userChrome.css in the chrome folder in your profile and add these lines...

.tabbrowser-tab {
    min-width: initial !important;
}
.tab-content {
    overflow: hidden !important;
}
  1. Restart Firefox
7
  • Thanks Robert, however, I'm a little confused by step 3, userChrome.css in my chrome folder? Or does this mean the firefox folder? Is the file userChrome.css or userFirefox.css? I'm not sure how to proceed. I also have portable versions of Firefox on various computers, with no profile Firefox folders, how do I add this option on those?
    – YorSubs
    Oct 28, 2022 at 10:58
  • 1
    Did you click on the link? It has more details. The file is named userChrome.css and if it exists is in a directory named chrome. By default neither the directory, nor the file will exist. Oct 28, 2022 at 11:05
  • Ah, I see, thanks, checking this solution out... I was wondering if Firefox had moved over to Chromium based on that wording there. I guess the "chrome" in userChrome.css refers simply to chrome as in "shiny stuff / extra features" as opposed to Chromium based browsers.
    – YorSubs
    Oct 28, 2022 at 11:16
  • Sadly, this does not work as far as I can see. I followed this, and read the linked article, implemented it exactly as written (created the chrome folder and the userChrome.css etc). < and > buttons still there (after a reboot) when I go above about 20 tabs. I then went and added browser.tabs.tabMinWidth again down to 1 to see if that made a difference, but again, nothing. Whenever I go above 20 tabs, those really annoying < and > buttons appear. :(
    – YorSubs
    Oct 28, 2022 at 11:34
  • 1
    I tried it locally and it does work for me. Did you do step 1, nothing happens if you skip that. Oct 28, 2022 at 11:56
2

Had this same problem. The available solutions cause flickering where the tablist keeps trying to switch between scrolling and non-scrolling. Here's how I solved it:

  1. In about:config set browser.tabs.tabMinWidth to 1.

  2. Add this style to userChrome.css:

    .tabbrowser-tab:not([pinned]) {
      min-width: 1px !important;
    }
    
  3. Install this user script:

    // ==UserScript==
    // @name            noTabScroll
    // @author          blackle
    // @include         main
    // @startup         UC.noTabScroll.exec(win);
    // @shutdown
    // @onlyonce
    // ==/UserScript==
    
    UC.noTabScroll = {
      exec: function (win) {
        let {customElements} = win;
    
        const old_on_underflow = customElements.get('arrowscrollbox').prototype.on_underflow;
        customElements.get('arrowscrollbox').prototype.on_underflow = function (e) {
          if (this.id === "tabbrowser-arrowscrollbox") {
            e.preventDefault();
            return;
          }
          old_on_underflow.call(this, e);
        };
        const old_on_overflow = customElements.get('arrowscrollbox').prototype.on_overflow;
        customElements.get('arrowscrollbox').prototype.on_overflow = function (e) {
          if (this.id === "tabbrowser-arrowscrollbox") {
            e.preventDefault();
            return;
          }
          old_on_overflow.call(this, e);
        };
        customElements.get('tabbrowser-tabs').prototype._initializeArrowScrollbox = function () {
          return;
        };
      },
    }
    

A more detailed guide is on this page: https://suricrasia.online/firefox/

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .