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