How to hide tab bar (tabstrip) in Firefox 57+ Quantum
Solution 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>
- Linux:
- Create directory
chrome/
if it doesn't exist - Create file
chrome/userChrome.css
inside if it doesn't exist. -
Add this text to the file:
#TabsToolbar { visibility: collapse !important; }
Ensure the config
toolkit.legacyUserProfileCustomizations.stylesheets
is set totrue
(required for Firefox69+, the stable version since September 2019), see this tutorial.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/
Solution 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; }
Solution 3
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.
Solution 4
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.
Solution 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.
VasyaNovikov
Updated on September 18, 2022Comments
-
VasyaNovikov almost 2 years
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.
-
Admin over 6 yearsFor OP information, I have added a new answer in the linked question that use
userChrome.css
but with different element name and ID. -
Tim Abell almost 5 yearsHere's you can get the dev tools to find element ids and test styles live: reddit.com/r/FirefoxCSS/comments/73dvty/…
-
-
thSoft over 6 yearsHere is a simpler way to open your profile directory: support.mozilla.org/en-US/kb/…
-
hayd over 6 yearsThis looks a little ugly, where did you find the DOM layout (how did you know to use
#tabbrowser-tabs
)? On OSX I think this needs a min-height (or something) i.imgur.com/oJOinx4.png -
hayd over 6 years
-
VasyaNovikov over 6 years@hayd thanks for your comments! I tried your solution on Linux, but it didn't work. This works though:
#TabsToolbar { visibility: collapse !important; }
Can you test this code on your OS to see if it works? (It would be good to find a common solution that works on any OS.) -
hayd over 6 years@VasyaNovikov sorry to be unclear, but mine was to add both css.
-
VasyaNovikov over 6 years@hayd does it work with only one (that I wrote above)? (I've also updated the answer already.)
-
VasyaNovikov over 6 years@thSoft I've included your remark into the answer if you don't mind. Thanks!
-
gioele over 6 yearsIn Firefox 59 this userChrome.css does not work properly: the last tab is hidden, but the
+
button is still visible and thus the whole tab region is displayed. -
aaron-bru over 6 years@gioele It should work if you go to Customize Firefox and drag the new tab button out of the tab bar, it can be placed in the main toolbar or menu. If you really want it there I haven't tried that because I don't use that button, but if anyone comes up with it I can edit the answer.
-
gioele over 6 yearsIndeed it does work once you remove the
+
button. -
Joshua Kifer over 5 yearsOn MacOS I recommend adding this as well
#nav-bar { padding-left: 80px; }
-
Steve Landey over 5 yearsThe CSS selectors changed again in Firefox 66. Here's new CSS that works great on macOS: gist.github.com/stevelandeyasana/…
-
VasyaNovikov over 5 years@SteveLandey Strange. I just upgraded to firefox 66.0, restarted the browser, and it still works. I'm using right what's written in the answer,
#tabbrowser-tabs { visibility: collapse !important; }
Did you try with the same code? P.S. I'm on ArchLinux, amd64. -
Matthieu Harlé almost 5 yearsOn Windows with Firefox 68, the buttons for maximizing, closing, etc... disappear with just
#TabsToolbar { visibility: collapse !important; }
. It worked with a slight edit to @SteveLandey's gist: gist.github.com/Shywim/5128ff74402132a7988e53362481c705 -
Rena almost 4 yearsNone of these are working for me.
-
Josh C almost 4 years@Rena none of these css properties will have an effect if you haven't enabled the config in step 5. This answer worked great for me on linux, but on windows it kills the min/max/close buttons. The property OP mentions in his own comment works on windows without killing those buttons.
-
VasyaNovikov almost 4 years@JoshC thanks for your response! Is there anything I can change in my answer to make it applicable to Windows users as well? (I'm a Linux user and here indeed it works as-is, but of course, I'd like the answer to work for everyone:)
-
VasyaNovikov almost 4 yearsBTW, if you feel like editing my answer yourself, then also feel free to (and stackoverflow allows that) :)
-
Josh C almost 4 yearsAll I would do is check if one works on both, but I'm too lazy. The next guy can do that.
-
Rena almost 4 years@JoshC it is set. It just isn't loading userChrome.css at all.
-
VasyaNovikov almost 4 years@JoshC note that I'm not asking you to test both systems or even one actually. Just asking which steps exactly helped you on Windows. But feel free to manage your time as you like ofc.
-
Josh C almost 4 years@Rena the css file could be under the wrong profile I suppose. Beyond that, best of luck cause I'm out of ideas.
-
Josh C almost 4 years@VasyaNovikov It looks like you changed the tag back in 2017. The tag you list in one of your comments is the original tag. It works on windows.
-
wha7ever almost 3 yearsWorked, win10 and ff 90.0.2. I also suggest to enable/check "Title Bar" at the bottom left corner of "Customize Toolbar...". That will show minimize/maximize/close buttons in the upper right corner.
-
Lubo Kanev over 2 yearsWorks on Firefox 97.0