Revert and unfloat tabs in Firefox 91+

Aug 17 2021

Firefox 89+ introduced floating tabs for some reason. Talk about terrible UI! When I upgraded to 91, it undid my settings, so I looked for a permanent solution: setting up your own stylesheet.

Prerequisites #

Assuming you’re using Firefox:

i. Enable stylesheet customization

  1. Go to about:config by typing/pasting into URL bar
  2. Type into the searchbar toolkit.legacyUserProfileCustomizations.stylesheets
  3. Set to true (press the toggle ⇌ icon)

ii. Create userChrome.css file

  1. Go to about:support
  2. Under Application Basics > Profile Folder, press [Open Folder]
  3. Create a chrome folder
  4. Go into the new folder
  5. Create a userChrome.css file

Stylesheet for normal tabs #

  1. Copy paste into userChrome.css:
/* No floating tabs */
.tab-background{
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
/* Glazed inactive tabs */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
/* Reduce Menu Padding */
menupopup > menu, menupopup > menuitem{
padding-block: 2px !important;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}
/* Match Titlebar to OS theme color. Delete this class if you want the default navy blue */
.titlebar-color{
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
  1. Save the file
  2. Restart Firefox

The solution is based on this article and userChrome.org, but those sites have too much info! I couldn’t figure out how to make a userChrome.css file because the article would just not tell me. I eventually googled it somehow.