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

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.

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)

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.

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.