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

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.