Tree Style Tabs in Firefox

Introduction #

Tree style tabs are a popular feature in new and experimental browsers like Arc and Vivaldi, allowing users to manage their tabs in a tree-like structure. This feature is not natively available in Firefox, but with the help of the Tree Style Tab extension, you can achieve a similar experience.

I’ve been using the Tree Style Tab extension for a while now, and I find it to be a great way to organize my tabs, especially when I have many open at once. However, one issue I had was that the main tab bar at the top of the browser was still visible, which could be distracting. To solve this, I found a way to hide the main tab bar when the Tree Style Tab sidebar is open, allowing me to focus on managing my tabs in the tree structure.

I’m currently using Firefox 147.0.3 on Windows 11, and the instructions in this guide are based on this version. The steps may vary slightly for different versions of Firefox or for users on other operating systems. If you encounter any issues or have suggestions for improvements, please feel free to email me. I’ll happily update the guide to ensure it works for as many users as possible.

Installing Tree Style Tab #

To install the Tree Style Tab extension in Firefox you can go to the Mozilla Add-ons website and click on “Add to Firefox”. Follow the prompts to complete the installation. Then the extension will be added to your browser, and you can start using it immediately. It will show a sidebar on the left side of your browser where you can manage your tabs in a tree structure. However, the tabs will still be visible in the main tab bar at the top of the browser, which can be distracting.

Hiding the Main Tab Bar #

To hide the main tab bar you can go to about:support by typing this in the address bar and pressing Enter. Then click on “Open Folder” (or “Show in Finder” if you’re using a Mac) next to “Profile Folder”. This will open your Firefox profile folder in your file explorer. Look for a folder named chrome containing a file named userChrome.css. If the chrome folder or the userChrome.css file doesn’t exist, you can create them.

Open the userChrome.css file and add the following CSS code:

/* Hide horizontal tabs at the top of the window */

/* Only works in Firefox if layout.css.has-selector.enabled is set to true in about:config . */
html#main-window body:has(#sidebar-box[sidebarcommand=treestyletab_piro_sakura_ne_jp-sidebar-action][checked=true]:not([hidden=true])) #tabbrowser-tabs {
    visibility: collapse !important;
    min-height: 0 !important;
}
    
html#main-window body:has(#sidebar-box[sidebarcommand=treestyletab_piro_sakura_ne_jp-sidebar-action][checked=true]:not([hidden=true])) tab {
    display:none!important;
}

Save the userChrome.css file after adding the code. This CSS code uses the :has() selector to check if the Tree Style Tab sidebar is open and visible. If it is, it hides the main tab bar at the top of the browser by setting its visibility to collapse and hiding the individual tabs. To make sure the CSS code works, go to about:config by typing this in the address bar and pressing Enter. Then search for layout.css.has-selector.enabled and set it to true by clicking the toggle button.

Lastly, restart Firefox. Now, when you have the Tree Style Tab sidebar open, the main tab bar at the top of the browser will be hidden, allowing you to focus on managing your tabs in the tree structure. You can still access the main tab bar by closing the Tree Style Tab sidebar, when you do that the main tab bar will reappear. This is very convenient as this means your tabs will still be accessible when the sidebar is showing the history or bookmarks instead of the tree style tabs.

When you accidentally close the sidebar, you can easily reopen it by clicking on the Tree Style Tab extension icon in the toolbar. This way, you can quickly switch between the tree style tabs and the main tab bar as needed.