How to hide tab bar (tabstrip) in Firefox 57+ Quantum

Question

How to hide/disable/remove the tab bar in Firefox 57+ ("Quantum")?

The goal is to just hide the tab bar totally. Useful if paired with extensions like "Tree Style Tab".

Note: there is a similarly looking question here: Firefox hide everything except content area of the browser but it is not properly split into logically independent tasks. Also, it's outdated.

Answer 1

1. Open your firefox "profile directory"

• Official docs how to do that: https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-profile
• Or just open:
  • Linux: ~/.mozilla/firefox/<profile>
  • OSX:
    • ~/Library/Application Support/Firefox/Profiles/<profile folder>
    • or ~/Library/Mozilla/Firefox/Profiles/<profile folder>
  • Windows: %appdata%\Mozilla\Firefox\Profiles\<profile folder>

2. Create directory chrome/ if it doesn't exist

3. Create file chrome/userChrome.css inside if it doesn't exist.

4. Add this text to the file:

   #TabsToolbar { visibility: collapse !important; }
   

5. Ensure the config toolkit.legacyUserProfileCustomizations.stylesheets is set to true (required for Firefox69+, the stable version since September 2019), see this tutorial.

6. Save the file and reload firefox. You should see no tab bar anymore.

P.S. Solution partly taken from here: https://www.ghacks.net/2017/09/27/tree-style-tab-is-a-webextension-now/

---

UPDATE 2022-10-24: Starting from Firefox-106.0, there is also a Tab Manager / Tab View that needs to be disabled. To disablet it, set browser.tabs.tabmanager.enabled to false

Answer 2

I want the tab bar to auto hide when there's 1 tab and appear when there's multiple. Not the same as the question but this is about the only Google result right now for 57+ so for those who need it in userChrome.css

#tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { min-height: 0 !important; }
#tabbrowser-tabs tab { height: var(--tab-min-height); }
#tabbrowser-tabs tab:first-of-type:last-of-type { display: none !important; }

Answer 3

Add to <firefox-profile-dir>/chrome/userChrome.css

#TabsToolbar {
    visibility: collapse;
}

#titlebar {
    margin-bottom: -22px !important;
}

#titlebar-buttonbox {
    height: 0px !important;
}

#nav-bar {
    margin-right: 0px;
}

#main-window[sizemode="maximized"] #nav-bar {
    margin-right: 0px;
}

Works on Firefox 70.0 but the _ □ X are missing.

Update: Works on Firefox 97 too.

Answer 4

Unfortunately, that particular UI customization is not currently possible via Firefox Quantum's supported add-on APIs; a proper solution will be possible once Bug 1332447 is resolved.

Until then, VasyaNovikov's tweak to userChrome.css works, though editing that file is definitely an at-your-own-risk, not-officially-supported option.

Answer 5

I distilled VasyaNovikov's answer into a gist to run on my Linux and OS X boxen, hopefully it helps anyone else out there with several personal machines. I want to also point out that after applying his answer, the back button will sit underneath the close button in OS X. The fix is to insert three flexible spaces into the toolbar (right-click on toolbar, select Customize..., then insert three spaces so the back button moves to the right).

If someone has the right CSS to insert into userChrome.css to accomplish the equivalent effect upon the back button, then that would be greatly appreciated.

Answer 6

If you're on macOS these solutions may hide the traffic light window buttons. One way to bring them back is to enable the title bar via View > Toolbars > Customize Toolbar… and toggling Title Bar in the bottom left corner.

Alternatively, you can use this CSS rule in userChrome.css to only hide the tabs and not the window buttons:

#TabsToolbar {
    .toolbar-items, .titlebar-spacer {
        display: none;
    }
}

/* Move private browsing indicator back to right now that tabs are hidden. */
#private-browsing-indicator-with-label {
    flex-grow: 1;
    justify-content: right;
    margin-inline: 0 !important;

    > label { 
        margin-inline-end: 0 !important;
    }
}

You may need to adjust the padding a bit to make it consistent with other windows, e.g.:

#TabsToolbar {
    padding: 6px 7px 5px 7px !important;

    .titlebar-buttonbox {
        margin-inline: 0 !important;
    }
}

These rules can be previewed with the Browser Toolbox under Tools > Browser Tools > Browser Toolbox. Open the Style Editor pane and make a new style sheet on the top left to apply user chrome styles without restarting Firefox.

The browser DOM can also be shown by navigating to:

view-source:chrome://browser/content/browser.xhtml