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.