Get the multi-row tab bar back in Firefox (updated info for v.81)

This solution utilizes two projects on Github which maintain many useful customizations for Firefox: MrOtherGuy and Aris-t2. Much thanks to both of them for their untiring work and dedication to making Firefox better. I highly recommend to visit both of the above repositories to see many other possible Firefox tweaks and customizations.

In addition to restoring the multi-row tab bar to Firefox I highly recommend to try out the Firefox-recommended extension OneTab which is another excellent solution for dealing with a lot of open tabs and which can significantly reduce the resource usage of Firefox.

As Firefox’s user interface is under continual development, the CSS tweaks used to enable the multi-row tab bar has had to adapt over time. There have been several times when the existing tweaks no longer worked after a new update of Firefox, and it is possible that with future releases the CSS tweaks will need to be modified again. Both of the above repositories have done an excellent job of staying ahead of the curve so usually all that is necessary is to link to an updated CSS customization (see below) to fix multi-row tab functionality.

Here is my own custom userChrome.css for Firefox on Linux v.81 based on the above sources that includes a multi-row tab bar, no close button on tabs, active tab background color, and some font customizations.

It is recommended to install the Google Noto Sans fonts either via your distro’s package manager apt install fonts-notoor directly from the <a href=”https://fonts.google.com/specimen/Noto+Sans” target=”_blank” rel=”noopener noreferrer”>Google fonts site</a>.

Note that this customization also completely removes the tab close buttons. To close tabs simply middle-click on them or type Ctrl-w while in the tab.

To move/rearrange tabs you can use the following keyboard shortcuts:
Shift-Ctrl-PgUp – move tab to the left
Shift-Ctrl-PgDn – move tab to the right

Unfortunately rearranging tabs by dragging them with the mouse doesn’t work when using these tweaks.

Here are the steps to get a multi-row tab bar in Firefox:

1. Open the Firefox <em>about:config</em> page and search for the key <em>toolkit.legacyUserProfileCustomizations.stylesheets</em> and change its value to <strong>true</strong>.

2. If you have not already done so, create a folder named <em>chrome</em> inside your Firefox profile folder. If you need to find out where the profile folder is open the page <em>about:profiles</em> in Firefox.

3. Make sure <code>git</code> is installed on your computer. For Linux this is usually as simple as running <code>apt install git</code> or <code>yum install git</code>. For Windows you can install it through Cygwin (recommended) if you use that, or use another method.

4. Navigate to the chrome folder and inside it use git to clone the two repositories mentioned above:
<code>git clone https://github.com/Aris-t2/CustomCSSforFx.git</code>
<code>git clone https://github.com/MrOtherGuy/firefox-csshacks.git</code>

5. Now inside the chrome folder create a file named userChrome.css with the following contents:

@import "CustomCSSforFx/classic/css/tabs/tabs_multiple_lines_fx81.css";
@import "CustomCSSforFx/classic/css/tabs/tab_close_hidden.css";

Note that in this post I am not using any of the CSS hacks from the MrOtherGuy repository however in the past we have used his tweaks and we may need to again in the future.

You are free to link in any other tweaks from these two repositories as you like. Simply create new <em>import</em> lines that import the tweaks you want to try.

Whenever there are updates on Github to the two repositories you can pull in the new updates by going into each repository’s folder and and running the following command:

<code>git pull</code>

Thus you will stay current with their latest updates and be able to link them into your userChrome.css

6. Feel free to add more customizations inside <em>userChrome.css</em> such as:

/* Global UI font
Requires Google's Noto Sans font to be installed
Install either from your package manager or download and
install from Google:
https://fonts.google.com/specimen/Noto+Sans
*/
* {
font-family: Noto Sans !important;
font-style: Regular !important;
font-size: 11pt !important;
}

/* Bookmark font */
#personal-bookmarks .bookmark-item menupopup * {
font-family: Noto Sans !important;
font-style: Regular !important;
font-size: 14pt !important;
}

/* Remove URL bar zoom button */
#urlbar-zoom-button {
display: none !important
}

/* Remove tab blur
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tab_titles_remove_blur.css
*/
.tab-label-container[textoverflow]:not([pinned]) {
mask-image: unset !important;
}

/* Active Tab Background Color
http://forums.mozillazine.org/viewtopic.php?f=38&t=3048845
*/
.tab-content[selected="true"] {
background: rgba(65, 85, 145, 0.4) !important;
}

Thanks to everyone who has made suggestions or comments to this post!