How to hide the tab bar on Firefox

Quick note

This article can be applied both to Firefox and any of its derivatives, such as LibreWolf or Waterfox. In fact, LibreWolf currently is my choice for a modern web browser, since it provides a cleaner experience than Firefox and also enables several privacy-enhancing features by default.

Background

The default interface for Firefox or LibreWolf that is shipped out-of-the-box features the tab bar, the back/forward and refresh buttons, and some more stuff. Whereas most elements can be added or removed from the toolbar using the Hamburger icon -> More tools -> Customize toolbar, the toolbar itself cannot be hidden in any way.

For a modern web browser with multiple tab support such as Firefox or Librefox, hiding the tab bar might not be a typical usecase. However, sometimes I like to use profiles to isolate given webapps that require user authentication and/or web storage, such as Element, so that I can still remove session data from web browsing sessions. For such single-page profiles, it is preferred to get some extra vertical space by hiding the tab bar.

Required changes

Fortunately, Firefox allows tweaking the so-called user chrome beyond what is allowed from the GUI.

  1. Find the directory with the profile. Typically, Firefox stores profiles on $HOME/.mozilla/firefox/, whereas LibreWolf uses $HOME/.librewolf.
  2. Profile directories typically are named after a sequence of somewhat random characters, plus the profile name itself e.g.: qicbr59r.default.
  3. Inside the profile directory, there should be a directory called chrome. If not, create it.
  4. Create a file called userChrome.css inside the chrome directory, with the following contents:
#TabsToolbar {visibility: collapse !important;}
#titlebar {
    visibility: collapse !important;
}
#titlebar-buttonbox {
    visibility: collapse !important;
}
#nav-bar {
    visibility: collapse !important;
}
#main-window[sizemode="maximized"] #nav-bar {
    visibility: collapse !important;
}

Then, the following changes must be applied to about:config:

toolkit.legacyUserProfileCustomizations.stylesheets = true
browser.tabs.tabmanager.enabled = false

Restart the browser and enjoy!