Firefox Quantum (ver >= 57) – How to Hide the Horizontal Tab Bar with TreeStyle Tabs

mannigfaltig said:

I've added a modification that removes any margin at the top:

#TabsToolbar, #sidebar-header {
  visibility: collapse !important;
}

#TabsToolbar {
  margin-bottom: -21px !important;
}

Then go to the hamburger menu > Customization and check "Title Bar" at the bottom left. Then it pretty much looks like FF 56.

I've also changed the style of TSTs in the add-on settings (all the way at the bottom; not in userChrome.css) such that the tabs don't take up as much vertical space and to hide the close box button (and only show it on the mouse-over event):

.closebox {
  display: none
}

.tab:hover .closebox {
  display: block;
}

.tab {
  padding-top: 0px;
  padding-bottom: 0px;
}

You can make .tab even tighter:

.tab .icon {
  padding-top: 2px; /* reducing it by 2px */
  padding-bottom: 2px;
}

:root {
  --tab-height: 22px; /* reducing it by 4px */
}

https://news.ycombinator.com/item?id=15342379

1. Open your firefox "profile directory"
   • Official docs how to do that: https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-profile
   • Or just open:
     • Linux: ~/.mozilla/firefox/<profile>
     • OSX:
       • ~/Library/Application Support/Firefox/Profiles/<profile folder>
       • or ~/Library/Mozilla/Firefox/Profiles/<profile folder>
     • Windows: %appdata%\Mozilla\Firefox\Profiles\<profile folder>
2. Create directory chrome/ if it doesn't exist
3. Create file chrome/userChrome.css inside if it doesn't exist.

4. Add this text to the file:

   #TabsToolbar { visibility: collapse !important; }
   

5. Ensure the config toolkit.legacyUserProfileCustomizations.stylesheets is set to true (required for Firefox69+, the stable version since September 2019), see this tutorial.

6. Save the file and reload firefox. You should see no tab bar anymore.

P.S. Solution partly taken from here: https://www.ghacks.net/2017/09/27/tree-style-tab-is-a-webextension-now/