Can I hide native tabs at the top of Firefox?

I've started using Tree Style Tab on Firefox. It's a great solution for cases where you have many, many tabs and you want to add some level of organization to it.

It's becoming increasingly unnecessary to have the list of tabs on the top of my browser.

Is it possible to hide the list of tabs at the top of the browser?

Solution 1:

To hide the native tabs, you'll have to add a new file called userChrome.css and the css property visibility: collapse.

To do this, in Firefox click on Click on Menu -> Help -> Troubleshooting Information or navigate to about:support in the address bar.

Under the Application Basics section, there will be a section called Profile Directory with a button to Open Directory.

In the Profile Directory create a new folder called chrome. In the chrome folder create or edit the file userChrome.css if it already exists.

The contents of userChrome.css should be the following.

/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}

Some optional further modifications to put in userChrome.css are:

/* hides the title bar */
#titlebar {
  visibility: collapse;
}

/* hides the sidebar */
#sidebar-header {
  visibility: collapse !important;
} 

A configuration that Xilin Sun uses is:

/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}
/* leaves space for the window buttons */
#nav-bar {
    margin-top: -8px;
    margin-right: 74px;
    margin-bottom: -4px;
}

Try these out and see what you think looks best.

To answer your question in the comment, you may like this option better. I tried using visibility, but it was extremely flashy and jittery with the hover.

/* Option 1 */
#TabsToolbar {
    opacity: 0.0;
}

#TabsToolbar:hover {
    opacity: 1.0;
}

/* Option 2 */
#TabsToolbar {
    visibility: collapse;
}

#navigator-toolbox:hover #TabsToolbar {
    visibility: visible;
}

Solution 2:

If you're running Windows 10, I've found the following gives the best integration:

1. Enable "Title Bar" mode by going to the hamburger menu (☰) → Customize → Check the "Title Bar" checkbox at the bottom of the screen.
2. Apply the following userChrome.css:

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

Solution 3:

Re-enable Custom CSS

1. Visit about:config
2. Search toolkit.legacyUserProfileCustomizations.stylesheets
3. Toggle it, making the value true

Create userChrome.css

1. Visit about:support
2. To the right of "Profile Directory", press the button Open Directory
3. Create a new folder named chrome
4. Open the chrome folder and create a new file named userChrome.css

Set the styling in userChrome.css

Different CSS needs to be used depending on whether you have the titlebar enabled.

With Titlebar

Titlebar visible (Hamburger menu at top-right -> Customize)

Result (Ubuntu screenshot)

1. Inside the userChrome.css file, insert the code below to hide tabs:

#TabsToolbar {
  visibility: collapse;
}

2. Close and reopen Firefox to see the changes.

Without Titlebar

Titlebar not visible (Hamburger menu at top-right -> Customize)

Result (Ubuntu screenshot)

1. Inside the userChrome.css file, insert the code below to hide tabs:

#tabbrowser-tabs {
    visibility: collapse;
}

2. Close and reopen Firefox to see the changes.

Alternative Styling

Without Titlebar: Mini bar

Result (Ubuntu)

Styling

#tabbrowser-tabs {
    visibility: collapse;
}
#titlebar {
    max-height: 16px;
}
#TabsToolbar .titlebar-buttonbox-container {
    transform: scale(.55) translateY(-10px) translateX(38px);
}

Without Titlebar: Drag Space Only (No Window Buttons)

Result (Ubuntu)

Styling

#tabbrowser-tabs {
    visibility: collapse;
}
#titlebar {
    max-height: 5px;
}
#TabsToolbar .titlebar-buttonbox-container {
    display: none;
}

Without Titlebar: Inline Window Buttons (With Drag Box)

Result (Ubuntu)

Styling

#tabbrowser-tabs {
    visibility: collapse;
}
#navigator-toolbox {
    display: flex;
    flex-flow: row wrap;
}
#titlebar {
    order: 1;
    max-width: 146px;
}
#titlebar #TabsToolbar {
    background-color: var(--toolbar-bgcolor);
    background-image: var(--toolbar-bgimage)
}
#titlebar #TabsToolbar .titlebar-spacer {
    background-color: rgba(0,0,0,0.05);
    margin: 3px;
    border-radius: 25%;
    cursor: grab;
}
#titlebar #TabsToolbar .titlebar-spacer[type="pre-tabs"] {
    display: none;
}
#nav-bar {
    order: 0;
    width: calc(100% - 146px);
}
#PersonalToolbar {
    order: 2;
}

Solution 4:

This css removes tabs, but preserves menu and minimize/maximize/close buttons.

#tabbrowser-tabs {  visibility: collapse;}

Works in FF version 83