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

Solution 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.

Solution 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)

Solution 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.