Hide tab bar on firefox 89 when there is only one tab

userChrome.css

/*
How To:
1. Find your firefox profile folder : https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data
2. create a "chrome" folder if it doesn't exist
3. Paste content of this gist in a "userChrome.css" file
4. Go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true
5. set browser.tabs.tabmanager.enabled to false (to hide the "tab search" button)
5. Restart Firefox

Don't hesitate to say if there are bugs, I only tested this for my workflow : I don't use tabs
at all but I want to see the bar if I open a tab by mistake (otherwise I sometimes lose a tab)
*/

/* Copy the default settings for --tab-min-height as --hidetabs-tab-min-height */
:root {
    --hidetabs-tab-min-height: 33px;
}

:root[uidensity=compact] {
    --hidetabs-tab-min-height: 29px;
}

:root[uidensity=touch] {
    --hidetabs-tab-min-height: 41px;
}

/* Set --tab-min-height to 0px so tab bar can disappear */
#tabbrowser-tabs {
    --tab-min-height: 0px;
}

/* Restore minimum height when more than one tab */
#tabbrowser-tabs tab {
    min-height: var(--hidetabs-tab-min-height);
}

/* Collapse tab bar when there is only one tab (tab is both first & last) */
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
    visibility: collapse;
}

/* Hide the New Tab button when there is only one tab (first visible tab is
   adjacent to new tab button) */
#tabbrowser-tabs tab[first-visible-tab="true"] + #tabs-newtab-button {
    visibility: collapse;
}

Having used this code for some time, it broke for me with FF76. I fixed it and in the process made it considerably simpler, and commented it. I also followed Benoît's hint and used a sibling selector so that the New Tab button is only hidden when there is one tab, and otherwise appears.

/* Copy the default settings for --tab-min-height as --hidetabs-tab-min-height */
:root {
    --hidetabs-tab-min-height: 33px;
}

:root[uidensity=compact] {
    --hidetabs-tab-min-height: 29px;
}

:root[uidensity=touch] {
    --hidetabs-tab-min-height: 41px;
}

/* Set --tab-min-height to 0px so tab bar can disappear */
#tabbrowser-tabs {
    --tab-min-height: 0px;
}

/* Restore minimum height when more than one tab */
#tabbrowser-tabs tab {
    min-height: var(--hidetabs-tab-min-height);
}

/* Collapse tab bar when there is only one tab (tab is both first & last) */
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
    visibility: collapse;
}

/* Hide the New Tab button when there is only one tab (first visible tab is
   adjacent to new tab button) */
#tabbrowser-tabs tab[first-visible-tab="true"] + #tabs-newtab-button {
    visibility: collapse;
}

That works perfectly rrthomas, thank you!

Thank you, rrthomas! My Linux Mint 19.3, 64-bit Firefox just upgraded to version 76 yesterday and I got the wide space issue (pictured above). This fixed it.

/* Set minimum height to 0px so tab bar can disappear */
#tabbrowser-tabs {
    --tab-min-height: 0px;
}

/* Collapse tab bar when there is only one tab (tab is both first & last) */
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
    visibility: collapse;
}

/* Hide the New Tab button when there is only one tab (first visible tab is
   adjacent to new tab button) */
#tabbrowser-tabs tab[first-visible-tab="true"] + #tabs-newtab-button {
    visibility: collapse;
}

I've just tried the above in 76 on an Ubuntu (Unity) 19.10 setup, and unfortunately it's no dice so far. With only one tab, the tab itself does not appear, but I still have a blank tab bar at its usual full height. Any ideas where I might look to troubleshoot?

@AdamColligan nothing special, just start from scratch: is your userChrome.css being picked up e.g. https://support.mozilla.org/en-US/questions/1270436 , remove all other settings, do you have a custom theme that might be changing things etc.

Your symptoms are exactly what I had with my previous CSS, and the setting that seemed to be critical to change was the setting of --tab-min-height. You can also try unconditionally collapsing the tab browser:

#tabbrowser-tabs {
    visibility: collapse;
}

@rrthomas Thanks; it turned out that there was some commenting problem further up the .css file that was only messing with the first of the snippets of code and so preventing the option from functioning, even though tacking a red border at the end was working fine.

The only further issue I had was that the tab bar actually became uncomfortably short when it did appear (I like to use the touchscreen to navigate tabs a fair bit). So I just uncommented the standard #tabbrowser-tabs tab {height: ##px;}, and picked a number, and now everything seems back to normal.

@AdamColligan thanks for the report. I had another play, and I couldn't find a way to hide the tab bar without changing --tab-min-height, even when I grepped the source of Firefox to find everywhere it was used, and added CSS to use min-height: 0px in all those places. Most frustrating! However, there's a workaround of sorts: set another variable to the default values of --tab-min-height (which varies according to the uidensity setting), and use that variable to set the tab height when there is more than one. Of course, this involves copying the defaults and is hence unsatisfactory. Can I just check, do you have uidensity=touch? So that 41px should be the height you get with no customization. I've updated my comment above with my current code, which should take this into account.

@rrthomas For me, there isn't any issue with just having a separate entry of #tabbrowser-tabs tab {height: [whatever]px;} on top of the code you had posted a few days ago (which is still preserved in my reply here). It still collapses to 0 when there is only one tab, and when there is more than one, it has whatever height is entered in that setting. As far as I'm aware, that's the functionality we were going for, although I could have gotten the wrong end of the stick. Is there something else being accomplished by re-setting "min-height" from a conditional list rather than setting "height"? (I also admit not knowing the default height and playing with a few pixel settings to make it to my liking, and I'm not sure if that's the same as the default, but that's not really a problem in my view).

I'm not familiar with uidensity settings; in my about:config, its value is just "0" on the computer I'm implementing the fix on now, which is a desktop. I'd have to check later to see what the touch laptop has, but the workaround has done the same thing for both of them.

@AdamColligan My version is an attempt to do it more cleanly (though really it should be possible, I think, by setting --tab-min-height). The point of copying the code that mentions uidensity is to copy the defaults, so that the tab bar will be its default height, including with non-zero settings of uidensity. Your version is fine if you're happy with an ad-hoc setting of --tab-min-height.

@rrthomas I think my confusion is less about the general concept and more about the different roles played by 'min-height' and 'height'.

Your version is fine if you're happy with an ad-hoc setting of --tab-min-height.

I didn't apply an ad-hoc setting to --tab-min-height or min-height, though -- min-height is just set unconditionally at 0px as per the earlier code iteration. I applied it to height. My instinct was then to assume that even a more sophisticated method that grabs the defaults or adjusts for UI density would then have the end goal of applying the values to height, but I don't really know what I'm talking about. That's made me curious about why the right answer is actually to just keep adjusting min-height.

I have a centered .tab-label-container. The css works perfectly, but adding a new tab will remove its centeredness. Here's my workaround:

#tabbrowser-tabs {
	--tab-min-height: 0px;
}

#tabbrowser-tabs tab:only-of-type,
#tabbrowser-tabs tab:only-of-type + #tabs-newtab-button {
	display: none !important;
}

I also can't get the tab bar to disappear with FF78.1 ESR when only one tab is present. The tab is hidden, but the space is not freed up to show more content.

I'm using @import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/
from Classic CSS tweaks for Firefox Quantum v3.1.6 by Aris-t2

Search Tabs

if this downward arrow disturb you and you have add this cromefolder with this script,
and it is only this p.....ed downward arrow nerves you still:

"
if you have an "Tab Search" set "browser.tabs.tabmanager.enabled" to false do disable it
a restart of the browser is need !
"

@BenoitAverty could you add these 2 lines into your script for help to remove the
the space of the Tab fully.. i have in Fedora FF106 and have first to search an solution
and found it lucky wise .. i have add this 2 lines on my copy of your userCrome.css
for never forgot ;)

best

edit : 2023 07 22
FF 115 :

/* Set minimum height to 0px so tab bar can disappear */
#tabbrowser-tabs {
    --tab-min-height: 0px;
}

/* Collapse tab bar when there is only one tab (tab is both first & last) */
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
    visibility: collapse;
}

/* Hide the New Tab button when there is only one tab (first visible tab is
   adjacent to new tab button) */
#tabbrowser-tabs tab[first-visible-tab="true"] + #tabs-newtab-button {
    visibility: collapse;
}

thank you for the update, it works 🎉 should add to your code :)