How can I have multiple rows with tabs on Firefox 57+ (Add-on "Tab Mix Plus" no longer works)?

Question

How can I have multiple rows with tabs on Firefox 57+, after the add-on Tab Mix Plus no-longer works (all legacy extensions are dropped with Firefox 57). Perhaps I should just wait?

This is perhaps the only functionality which I couldn't find in Opera or Chrome (and Chrome has some privacy issues), the last time I tested them. So it seems I have a few options, not just a single one.

1. As suggested in this thread, I can downgrade to FF 52 ESR (with possible issues...) or use a nightly build...

2. Another possible option is to use a [FF Current Profile Folder]/chrome/userChrome.css file (folder may need to be created), where I can place some code. Here is what I tested under FF 57, using 500+ tabs:

(EDIT 1: Added few css rules to hide some spaces/buttons, similar to the R4zen's answer, as mine contain one more rule and is perhaps more complete... but the result could be the same for most people! I had this code tested when I posted the question, but decided to post less code for easier understanding of what is happening. Now I am posting my full code, so others can benefit from it.)

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .arrowscrollbox-overflow-start-indicator,
#tabbrowser-tabs .arrowscrollbox-overflow-end-indicator,
#tabbrowser-tabs #alltabs-button {
    display: none;
}
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    /*
    display: block;
    */
    overflow-y: auto !important;
    min-height: var(--tab-min-height); /* default */
    max-height: calc(5*var(--tab-min-height)) !important;
}
    #tabbrowser-tabs .tabbrowser-tab {
        flex-grow: 1;
        flex-wrap:wrap;
        min-width: 150px;
        vertical-align: bottom !important;
    }
    #tabbrowser-tabs .tabbrowser-tab,
    #tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
        height: var(--tab-min-height);
    }
        #tabbrowser-tabs .tabbrowser-tab .tab-stack {
            width: 100%;
        }
    #tabbrowser-tabs .tabbrowser-tab[pinned] {
        min-width: 0px;
        max-width: 40px;
    }
        #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
            visibility: hidden !important;
        }
        #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-text {
            display: none !important;
        }
    /* Active tab's style - visuallyselected="true" === ACTIVE TAB */
    #tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
        font-weight: bold;
    }
    #tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-background {
        background-color: lime !important; /* green, lime, LawnGreen-7CFC00, LimeGreen-32CD32, SpringGreen-00FF7F */
    }

• Where 5 in max-height: calc(5*var(--tab-min-height)) !important; are 5 rows, dynamically calculated height.

The above code shows tabs, but their behavior is quite bad:

• the worst thing - when you scroll between the tabs using Ctrl+Tab (in the last recent order), and the tab switched to is on a different row (5+ rows away), the row with the tab doesn't scroll to the active tab. The slider must be used to manually scroll the rows and visually find the selected one... (To clarify: I have set 5 visible rows out of 15 rows total)

• tabs can't be dragged as FF core calculates it incorrectly and moves the tab to a random position

  3. To use a fork of the legacy code, someone mentioned WaterFox (or another fork).

Are there any other (better) solutions as of today?

I'm pretty sure we'll have more options in the future, so the correct answer today may not be the best after a week or month(s)...

EDIT April 2019 (Firefox 66.x): After updating to Firefox 66, I had too many rows covering entire screen (that's 1000+ tabs). I needed to edit the original code above and added a few extra rules:

#tabbrowser-tabs .arrowscrollbox-scrollbox {
    max-height: calc(5*var(--tab-min-height)) !important;
    overflow: auto;
    margin-bottom: calc(1.25 * var(--tab-min-height)) !important;
}

You may need to adjust them for you, in case you have different rows number (I have 5 rows with tabs). Good luck!

Answer 1

Multirow tab bar with working tab dragging (tested on FF 61):

1. Download and extract https://luke-baker.github.io/Firefox_chrome.zip
2. Copy userChrome.xml to your chrome folder.
3. Add content from userChrome.css to your userChrome.css.
4. Download MultiRowTabLiteforFx.uc.js to your chrome folder.

Your chrome folder is a folder named chrome located under your user profile, e.g. ~/.mozilla/firefox/g7fa61h3.default/chrome. It does not exist by default, so create it if needed.

UPDATE

userChrome.xml file could now be obtained from Izheil's Quantum-Nox-Firefox-Dark-Full-Theme repo. There are also two versions of MultiRowTab script, for limited and unlimited number of tab rows.

Answer 2

I did few modifications, now should be without bugs (even if you pin tabs, move/drag window, scroll between tabs e.t.c.):

#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}

.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
    display: none !important;
}

#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    /*
    display: block;
    */
    overflow-y: auto !important;
    min-height: var(--tab-min-height); /* default */
    max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
    flex-grow: 1;
    flex-wrap:wrap;
    min-width: 150px;
    vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
    height: var(--tab-min-height);
}

#tabbrowser-tabs .tabbrowser-tab .tab-stack {
    width: 100%;
}

#titlebar-buttonbox {
    display: block !important;
    vertical-align: top !important;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;   
}

If you find the first row of tabs is invisible, open about:config and change the value of browser.tabs.drawInTitlebar from the default value of true to false.

browser.tabs.drawInTitlebar     false

if you want to drag firefox window by clicking on free space of titlebar more than using 5 or more rows just delete code:

#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;   
}

It's enable to scroll between rows by holding scrollbar when it's more then 5 rows, but on the other hand is disable posibility to drag ff windows by titlebar.(If you don't use more then 5 rows then you can delete it)

Answer 3

For those interested in how this CSS UI change works, there is a helpful article on ghacks.net that describes what's being done: https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css/

The article refers to the git hub project "Custom CSS tweaks for Firefox 57+" https://github.com/Aris-t2/CustomCSSforFx That project contains many different UI tweaks that can be mixed and matched. The README file there gives good insight into how to pick and choose among the options.

With regards to whether or not the chrome directory needs to be created:

On the Fedora system I used, that directory did need to be created. On the Mac system, it was already present and contained example files, userChrome-example.css and userContent-example.css.

In the userChrome-example.css file was the following:

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

Although I needed to set browser.tabs.drawInTitlebar to false, once I did that, R4zen's code worked fine for me both with and without the @namespace line present.

Answer 4

Just thought I'd add how to do this. (though it's provided on other linked websites, it's better to have all the info in one place.)

• Start firefox
• enter "about:support" in the address bar
• In the table, there is a row "Profile folder". Click the button "Open folder".
• under "chrome" there should be files "userChrome-example.css" which you can rename to "userChrome.css" and edit.

This saved me a lot of time because in my case, the %appdata% pointed to the wrong drive. Moreover I had to install notepad++ because the line endings were not seen by notepad.

Answer 5

Izheil's github repo has been referred to in the comment stacks above though the URL shared above did not work for me (hence re-sharing). The steps called out there helped me recover my Firefox look and feel to an acceptable level after upgrading to FF66 betas (non-dark and scrollable tab bar with 3 rows). I've been stuck on the FF Quantum beta channel so these may or may not help you.

The following steps have worked for me on OSX starting with FF 66 b4.

.

1. The selected 4 files shown above are needed at a minimum in your profile's chrome folder.
2. Further if I wanted to add my own customizations (unloaded, pinned tab colors, etc) I made changes to the respective files (the js files) and went through steps 3 and 4 to make them effective.
3. cleared all files in ‎⁨Macintosh HD⁩ -> ⁨Users⁩ -> [ACCOUNT] -> ⁨Library⁩ -> ⁨Caches⁩ -> ⁨Firefox⁩ -> ⁨Profiles⁩ -> [PROFILE_NAME] -> ⁨startupCache⁩. Note the [PROFILE_NAME] folder is hidden by default.
4. and then I restarted my Firefox instance.
5. Make sure your chrome folder only has the css, js, and xml files you want to use. Backup/move everything else to some other [safe] location.