57

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?

1
  • 2
    I highly recommend this to anyone. It's such a better, simpler browsing experience.
    – Cauder
    Apr 12, 2019 at 2:47

9 Answers 9

43

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 -> More Troubleshooting Information or navigate to about:support in the address bar.

Under the Application Basics section, there will be a section called Profile Folder 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;
}

Before you close and relaunch, you must open about:config and toggle the property toolkit.legacyUserProfileCustomizations.stylesheets to true for this to be enabled.

16
  • 2
    Thanks! This looks great. Just curious, why is there a folder called Chrome in Firefox?
    – Cauder
    Apr 12, 2019 at 1:12
  • 2
    Interesting, looks like there's no relationship with Google Chrome. nngroup.com/articles/browser-and-gui-chrome
    – Cauder
    Apr 12, 2019 at 1:27
  • 31
    As of Firefox 69 (late 2019), you also must go to about:config, and change the value of toolkit.legacyUserProfileCustomizations.stylesheets to true. I learned this in the comments of the post by Xilin Sun. Then quit and restart Firefox.
    – MikeF
    Dec 6, 2019 at 15:51
  • 2
    About "Chrome": I'm guessing that Firefox developers considered user CSS modifications to be like chrome bumpers on 1950s cars: pretty but not affecting function. Dec 8, 2019 at 15:48
  • 4
    @Cauder Because historically the Browser UI that is outside of the viewport is called "chrome". The term goes back to the netscape age. Analogy is to how the chrome on classic cars is the accents around the edges of the vehicle. Mar 11, 2021 at 20:56
22

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 Folder", 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 -> More Tools -> Customize Toolbar..) enter image description here

Result (Ubuntu screenshot) enter image description here

  1. Inside the userChrome.css file, insert the code below to hide tabs:
#TabsToolbar {
  visibility: collapse;
}
  1. Close and reopen Firefox to see the changes.

Without Titlebar

Titlebar not visible (Hamburger menu at top-right -> More Tools -> Customize Toolbar..) enter image description here

Result (Ubuntu screenshot) enter image description here

  1. Inside the userChrome.css file, insert the code below to hide tabs:
#tabbrowser-tabs {
    visibility: collapse;
}
  1. Close and reopen Firefox to see the changes.

Alternative Styling

Without Titlebar: Mini bar

Result (Ubuntu) enter image description here

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) enter image description here

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) enter image description here enter image description here

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;
}
/* Update - Hides the new Firefox home + tab dropdown. If you want to keep/customize those buttons. remove the CSS below and adjust the widths above to get everything fitting in one line */
#TabsToolbar .toolbar-items {
  display: none;
}

For MacOS, you can also set

#nav-bar {
    order: 0;
    width: 100%;
}

This will move the window buttons on the bookmarks tab, making the top bar look more complete.

Tweaking these custom styles

You don't have to guess and check the styling. Firefox has a devtools window for the browser itself. It's called "Browser Toolbox", but looks identical to Firefox's website devtools.

Mozilla has info on how to use that here: https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

The TL;DR is: Open Devtools -> Go to settings -> Check "Enable browser chrome and add-on debugging" and "Enable remote debugging" -> Use Ctrl + Shift + Alt + i to launch it.

6
  • 2
    +1. Worked in FF 85.
    – Firelord
    Feb 22, 2021 at 4:42
  • 2
    This is the perfect answer.
    – runkar
    Dec 9, 2021 at 9:13
  • 2
    +1 for telling us that we first need to enable toolkit.legacyUserProfileCustomizations.stylesheets to use custom css
    – rekotc
    Mar 7, 2022 at 15:37
  • 2
    Great updated answer; I especially appreciate the custom templates (which also work decently well on Windows as of January 2023). Jan 31, 2023 at 15:03
  • 1
    Amazing, worked on Ubuntu 20.04 with FF 112.0.2 (64-bit), by only copy-pasting! So much less visual clutter now! May 23, 2023 at 13:35
14

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

screenshot of windows 10 tab 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;
}
1
  • 1
    +1 for mentioning how to enable "Title Bar" mode.
    – talljosh
    Nov 3, 2020 at 23:16
6

Having gone through most of the solutions in this thread, here is my personal recommendation if you want to achieve following:

  • Use Tree Style Tab and want to hide horizontal tabs
  • Show a window handler because you need to move a lot
  • Across macOS and Windows 10

macOS

macOS

Windows 10

Windows 10


Step 1: Enable CSS

  1. Visit about:config → Click Accept the Risk and Continue
  2. Search toolkit.legacyUserProfileCustomizations.stylesheets
  3. Toggle it, making the value true

Step 2: Find CSS

  1. Visit about:support in the address bar
  2. Find table Application Basics → find row Profile Folder → click button Show in Folder or Open Folder. It usually points to
    • /Users/your-alias/Library/Application Support/Firefox/Profiles/your-id.Default User for macOS
    • Or C:\Users\your-alias\AppData\Roaming\Mozilla\Firefox\Profiles\your-id.Default User for Windows
  3. In this Profile Folder create a new folder called chrome or open it if it already exsits.
  4. In the chrome folder create userChrome.css or edit it if it already exists.

Step 3: Edit CSS

  1. Edit userChrome.css and please add:
/* To hide horizontal bars */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}
  1. (Optional) If you want to have a smaller header of Tree Style Tab on the sidebar, please add:
/* For Tree Style Tab */
#sidebar-header{
  font-size: 1em !important;
  padding: 5px 2px 5px 13px !important;
}

Step 4: Enable title Bar and restart

  1. Enable "Title Bar" mode

    • Right click on Toolbar → select Customize Toolbar...
    • Or by Click the menu (☰) → More toolsCustomize Toolbar...
  2. At the left bottom of the screen, check the "Title Bar" checkbox → Submit right bottom button Done

  3. Restart.

1
  • This was the solution that worked for me!
    – OscarVanL
    Sep 3, 2022 at 21:11
4

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

#tabbrowser-tabs {  visibility: collapse;}

Works in FF version 83

3
  • Thanks this is what I am looking for.
    – huggie
    May 29, 2021 at 7:00
  • Thanks, fast and easy. It works fine on Debian 11 and FF 91.6.1esr
    – rekotc
    Mar 7, 2022 at 15:38
  • For me this removes the tabs but not the #TabsToolbar that contains them and so you're left (or I was in FF 106.0 on Kubuntu 22.04.1) with an empty bar. So, not tabs, but not quite what I wanted.
    – pbhj
    Oct 19, 2022 at 19:58
1

Here's my favorite setup for macOS Monterey.

titlebar


First follow these steps to get userChrome.css enabled.

Then add this to userChrome.css

#tabbrowser-tabs {
  visibility: collapse;
}

#titlebar #TabsToolbar {
  background-color: var(--toolbar-bgcolor);
  background-image: var(--toolbar-bgimage);
  padding-top: 5px;
}

Finally, remove the space between Refresh button and url bar.

  • Right click on empty area of toolbar and select Customize.
  • Drag spacer from between the refresh button and url bar off the toolbar.
  • Done
1

Ok so this took me a while because for me the window buttons always started to disappear as soon as I "collapsed" the TabsToolBar. After some research I found a solution on a moz support forum that enabled me to hide the native tabs while still maintaining the window min/max/close buttons and having some space to move the window without having a big empty title bar. (As now this will work in Firefox V107.0.1 on Windows10)

To do so here is the CSS to put in your "userChrome.css" after you set the "toolkit.legacyUserProfileCustomizations.stylesheets" option to True in your about:config section.

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

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

#titlebar {
    max-height: 1px;
}

#nav-bar {
    margin-top: -30px;
    margin-right: 146px;
    margin-bottom: 0px;
}

Now you will also have to add a "flexible space" to your toolbar to have some room to move the window. (Right click anywhere click on customize and drag in into your desired place) This resulted in a Window that was good for me looking like this:

Window Top Screenshot

0

Here's a report of my results and favorite userChrome.css contents on Mac OS Ventura:

Result: Mac Tiny Title Bar with Window Buttons

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;
}

#titlebar {
    max-height: 15px;
}

/* For Tree Style Tab */
#sidebar-header{
  font-size: 1em !important;
  padding: 5px 2px 5px 13px !important;
}

Results in a tiny title bar with just enough room for the mac window buttons. No top tabs, and no large empty area where the tabs used to be.

+1 for info on live debugging the userChrome.css file.

I also found the following easier step-by-step instructions for live-debugging userChrome.css:

https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/

1
  • This is in Firefox 120.0.1
    – Tim D
    Dec 16, 2023 at 4:30
-1

You can just press F11 to go full screen. It takes away the native tabs bar among others.

1
  • 2
    Yes, “among others” — such as the (Windows) menu bar, the address bar, the Firefox tools and the bookmarks bar.  A little like burning down your house to get rid of termites. Nov 16, 2020 at 1:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .