Hide Native Tabs with Tree Style Tabs for Firefox

Photo by Denny Müller on Unsplash

A popular Firefox Extension Tree Style Tab lets you work with tabs as trees.

The only addition that I would personally like is to hide the tabs, which at the time was not available out of the box.

In this post we will configure the extension to be able to hide the tabs.

AddOn:

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

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

3. Create a file named chrome/userChrome.css in your profile directory using 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