Hide Native Tabs with Tree Style Tabs for Firefox

tree_style_tab_firefox.md

AddOn:

• https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/

1. Go to about:support in your address bar
2. Look for your profiles directory and open it:

3. Create a file named chrome/userChrome.css in your profile directory:

mkdir chrome && touch chrome/userChrome.css

4. Populate the following css code:

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}
.tab {
  margin-left: 1px;
  margin-right: 1px;
 }

5. Then go to about:config in your address bar and set this to true:

• toolkit.legacyUserProfileCustomizations.stylesheets

Amazing

Yas, look at this guy's gist coming up 1st in my google search result when I reinstalled Firefox and had to get this done again.

thks so much @ruanbekker ! amazing that this information is not available directly @ff via a wysiwyg

Thanks a ton for this guide. Also add this to the top to get a nice thin top profile without the close buttons wasting all those pixels where the tabs were.

#TabsToolbar { visibility: collapse !important; }

The spacers between the address bar will work as a dragable area if you aren't already using a window manager like rectangle app.

Great! Thank you.

This doesn't seem to work for me on Windows 11.

This doesn't seem to work for me on Windows 11.

Try this modified guide by @80ROkWOC4j for Windows:

https://gist.github.com/80ROkWOC4j/98108d2ea5af58159136b264d41c258c

This is still working. I just had to do this for my new work laptop. Thanks @ruanbekker !!

Maybe I'm slow, but I'm struggling with this on windows because the instructions mention to make a file but you can't have / in the name. so I assume it's make a folder titled chrome with the file userChrome.css inside, but it's not working?

The / is the folder path. It’s chrome / userChrome.

Firefox has native side tab support now though! It’s in the about:config options. It doesn’t support the nice tree views but if you want basic stuff it’s easy to enable now without the plugin.

about:config search side tabs I forget exact name I’ll update this later with it.

Click on the "toggle" button with two opposite arrows for the sidebar.revamp and sidebar.verticalTabs to set both to true.

This works!!! ThanK you from 2025!!!

There's now a helper extension for Tree Style Tabs that provides a button to toggle this (for both MacOS and Windows):
https://addons.mozilla.org/en-US/firefox/addon/toggle-native-tab-bar/
It walks you through how to set up the folder and file inside your profile properly and provides a button in your browser that, once set up, lets you turn native tabs on and off

In fact, there's a BUNCH of handy helper extensions that build upon Tree Style Tabs to make it do more stuff:
https://github.com/piroor/treestyletab/wiki/Helper-addons-extending-functionality-of-TST

There's now a helper extension for Tree Style Tabs that provides a button to toggle this (for both MacOS and Windows):
https://addons.mozilla.org/en-US/firefox/addon/toggle-native-tab-bar/

In fact, there's a bunch of handy helper extensions that build upon Tree Style Tabs to make it do more stuff, some of which I've found quite useful:
https://github.com/piroor/treestyletab/wiki/Helper-addons-extending-functionality-of-TST