Having multiple lines for tabs in Firefox

Last modified by Guillaume Delhumeau on 2018/02/05 12:30

Jan 31 2018

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.

gdelhumeau@linux:~$ mkdir /home/gdelhumeau/.mozilla/firefox/xxxxxxx.default/chrome

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: 

/* MULTI-ROW TABS
   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.

FirefoxTabMinWidth.png

I've choosen the value 130, but you can adjust it as you wish.

This is the results on my computer:

FirefoxMultipleLinesForTabs.png

I hope you like this tip!

Tags:
Created by Guillaume Delhumeau on 2018/01/31 18:09
 
Copyright 2015 Guillaume Delhumeau