Before Firefox 57 release, I used to have an extension called Tab Mix Plus. One of the features that I liked, was the ability to have several lines to display the tabs list. I usually have dozens on tab opened on my browser, and scrolling horizontally to find the one I need is painful.
But Tab Mix Plus is now broken since Firefox has been redesigned. It is now considered as an obsolete extension. Unfortunately, I have not found a valid extension to replace it. Worse: extensions are not allowed to perform such changes in the new version of Firefox.I did some researches and found this solution on the Mozilla's forum.
What you need is to create a folder chrome inside your profile folder.
Then, you need to create a file called userChrome.css inside this folder. This style sheet is used by Firefox to customize your display.
All you need to do is to copy the content of https://www.userchrome.org/samples/userChrome-multi_row_tabs.css inside this file and restart your browser. On my side, I don't have dug that much so I won't say I understand everything here, but I've changed minor things according to my taste. This is my file:
based on https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/
If tabs are too narrow, go into about:config and adjust browser.tabs.tabMinWidth
*/
/* General Rules */
#tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow: visible;
display: block;
}
#tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
min-height: var(--tab-min-height);
max-height: calc((5 * var(--tab-min-height)) + 1px) !important; /* up to 5 rows */
}
.tabbrowser-tab, .tab-background {
height: var(--tab-min-height);
}
.tab-stack {
width: 100%;
}
/* Title bar rules */
#titlebar, #titlebar-buttonbox {
height: var(--tab-min-height) !important;
}
#titlebar {
margin-bottom: calc(var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #titlebar {
margin-bottom: calc(6px + var(--tab-min-height)*-1) !important;
}
#titlebar:active {
margin-bottom: 0 !important;
}
#titlebar:active #titlebar-content {
margin-bottom: var(--tab-min-height) !important;
}
/* Remove unnecessary buttons and the blank areas at left and right */
#tabbrowser-tabs .scrollbutton-up, #tabbrowser-tabs .scrollbutton-down,
#alltabs-button, .tabbrowser-tab:not([fadein]),
.titlebar-placeholder[type="pre-tabs"],
.titlebar-placeholder[type="post-tabs"] {
display: none;
}
As explained in the comment, you may think the tab's width is too small. Then, all you need to do is go into about.config to change the value of the property browser.tabs.tabMinWidth.
I've choosen the value 130, but you can adjust it as you wish.
This is the results on my computer:
I hope you like this tip! ...
