Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hide tab bar on firefox 89 when there is only one tab
/*
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. 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;
}
@AdamPS
Copy link

AdamPS commented Aug 2, 2018

It's nice, but when the tabs are hidden I have no visible sign that a page is loading. When there are tabs, progress is shown by the dot on the tab icon that swings left/right. Does anyone have any idea how to get back some sort of progress marker without the tab bar? In the old days we had the spinning wheel:-)

@daev3000
Copy link

daev3000 commented Aug 9, 2018

It works perfectly on Firefox 61. Thank you!

@rrthomas
Copy link

rrthomas commented Aug 22, 2018

This is fantastic, I've been looking for something to do this ever since Hide One Tab stopped being supported!

@Cirminello
Copy link

Cirminello commented Sep 12, 2018

How to make the plus button visible when there are two or more tabs opened?
Thanks

@daver1691
Copy link

daver1691 commented Sep 17, 2018

BenoitAverty wrote:

You should be able to use a similar trick as the rule above with css siblings selectors if you want to keep [the new tab button] when the tab bar is visible.

This is the first time I've written any CSS, so I'm Googling for syntax, and I've not got this working. I think that the following was intended by the above comment:

.tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"] ~ .tabs-newtab-button{
    visibility: collapse !important;
}

I've looked at the tab bars with the "Browser Toolbox" inspector, and the .tabbrowser-tab and .tabs-newtab-button elements seem to be on the same level, and therefore should be CSS siblings, but something isn't working. I find that the sibling selector works within the line of tabs, and I've experimentally changed the background colour of the second and subsequent tabs, but I can't select the new tab button with a sibling selector for some reason. The only thing I can point to is a comment that is visible in the inspector before the tabs which says:

This is a hack to circumvent bug 472020, otherwise the tabs show up on the right of the newtab button.

... and then after the tabs but before the new tab button is the comment:

This is to ensure anything extensions put here will go before the newtab button, necessary due to the previous hack.

I think that this comment indicates there's something that's not visible in the inspector that's disabling the sibling selector, but as I said, I'm totally new to this, so I could be misreading it.

Anybody else know what's going on?

@TomaszGasior
Copy link

TomaszGasior commented Dec 26, 2018

I created my own userChrome.css based on your work. It works properly in private browsing and in other special cases. Please read comments.

/**
 * Firefox by default specifies the height for tabs container (tabs bar).
 * This code unsets height from tabs container and sets it separately to each tab.
 */
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
	min-height: 0 !important;
}
tab.tabbrowser-tab {
	min-height: var(--tab-min-height) !important;
}

/**
 * Following code is hiding only one opened tab from tabs container (tabs bar).
 *
 * Only one opened tab is hidden only when these conditions are met.
 *  * Private browsing mode is NOT used (Fx needs to show "private" indicator).
 *  * Accessibility service is NOT enabled (Fx needs to show "a11y" indicator).
 *  * Fullscreen view is NOT entered (Fx needs to show minimize/restore/close buttons).
 *  * Fx's customize page is NOT shown (otherwise it's hard to customize tabs bar).
 *  * Regular system title bar is used instead client-side (otherwise UI is broken).
 */
window:not([inFullscreen="true"]):not([tabsintitlebar="true"]):not([accessibilitymode="true"]):not([privatebrowsingmode]):not([customize-entered="true"])
tab.tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"] {
	display: none !important;
}

/**
 * Following code makes sure that one opened tab is re-shown when tabs toolbar
 * contains additional items (such as new tab button).
 *
 * This code can be buggy. Feel free to remove it if the whole stylesheet doesn't work.
 * But in this case, remember to remove all items from tabs toolbar using customizer!
 * The first selector is for Firefox 64, second is for Firefox 65.
 */
toolbar#TabsToolbar[currentset]:not([currentset="tabbrowser-tabs,alltabs-button"])
tabs#tabbrowser-tabs tab.tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]
{
	display: -moz-box !important;
}
#TabsToolbar-customization-target tabs#tabbrowser-tabs:not(:nth-child(2))
tab.tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"],
#TabsToolbar-customization-target tabs#tabbrowser-tabs:not(:nth-last-child(3))
tab.tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]
{
	display: -moz-box !important;
}

Also, I wrote post on my blog about this modification: https://tomaszgasior.pl/oprogramowanie/mozilla-firefox-ukrywanie-paska-kart-przy-jednej-otwartej-karcie (Polish but google translate is your friend).

@Seirade
Copy link

Seirade commented Dec 31, 2018

@daver1691, the new tab button doesn't feature the first/last-visible-tab attributes. However, I got it to work with:

.tabs-newtab-button
{
    height: 0px;
}

@compwrench
Copy link

compwrench commented Jan 17, 2019

Also, I wrote post on my blog about this modification: https://tomaszgasior.pl/oprogramowanie/mozilla-firefox-ukrywanie-paska-kart-przy-jednej-otwartej-karcie (Polish but google translate is your friend).

Thank you so very much. Reading your comments, I kept saying yes, yes, yes. Thanks

@fabio-th
Copy link

fabio-th commented Feb 8, 2019

Hello everyone.
I'm having a hard time trying to hide my tabs bar when only one tab is opened.

I am using both CSS below to have my tabs bar placed below address bar and favorites bar.
tabs_below_navigation_toolbar.css
tabs_below_navigation_toolbar_fx65.css

It was working fine up until version 65. Heck, I didn't even need the _fx65.css but after this latest upgrade all stopped working so I needed to add this one to force tabs below again. Problem is now the tab bar is only collapsing when if it's above. No way to get it hidden if placed below. I have removed buttons and everything from the tabs bar and it STILL won't go away when only one tab is opened. Oddly enough is that no tabs are displayed if only one is opened, but the annoying tab strip remains there.

There was one little button that needed additional code. The list all tabs button only vanished after I used the code below. Even the customize function could remove the darn thing.
#alltabs-button {display: none !important;}
Yet, all this effort was to no avail.....

I'm on a dead end now. Maybe you guys can help me out. I'd really like to reclaim those additional pixels currently taken away. Why, oh why Mozilla, you do that to us ??? :-/

Thanks in advance folks.

@xlovinglyx
Copy link

xlovinglyx commented Jul 20, 2019

Not working on ff68 ?

@rdrms
Copy link

rdrms commented Aug 9, 2019

This seems to be working on Firefox version 68

https://gist.github.com/krisives/c6e3d5325589a773c3f016002eabd9f1

userChrome.css included here for convenience, hope I'm not stepping on anyone's toes:


#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
  min-height: 0 !important;
}

#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
  visibility: collapse;
}

/* I don't use tabs so I just hide the new tab button. You should be able to use a similar trick as the rule above with
css siblings selectors if you want to keep it when the tab bar is visible. */
#tabbrowser-tabs .tabs-newtab-button {
  visibility: collapse !important;
}

#tabbrowser-tabs tab {
  min-height: var(--tab-min-height)
}

@SR-G
Copy link

SR-G commented Sep 15, 2019

Seems to not be working anymore on FF 69 ...

@rdrms
Copy link

rdrms commented Sep 15, 2019

Firefox 69 has disabled userChrome.css by default.

Go into about:config and switch toolkit.legacyUserProfileCustomizations.stylesheets to true.

It's possible this option will be removed completely in a future version

@kogaba
Copy link

kogaba commented Oct 20, 2019

Only one pixel at the top, and the best I can achieve with firefox 69

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#identity-box, #tracking-protection-icon-box {
    display: none !important;
}
#nav-bar {
   margin-block-end: -30px !important;
   visibility:hidden;
}
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
   min-height: 0 !important;
}
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
   visibility: collapse;
}
#tabbrowser-tabs .tabs-newtab-button {
   visibility: collapse !important;
}
#tabbrowser-tabs tab {
   min-height: var(--tab-min-height)
}

@ShalokShalom
Copy link

ShalokShalom commented Mar 3, 2020

This hides only the tab, not the tab bar.

Screenshot_20200303_120103

@kogaba
Copy link

kogaba commented Mar 4, 2020

This is my config now, and still works in ff 73

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#identity-box, #tracking-protection-icon-box {
    display: none !important;
}
#nav-bar {
   margin-block-end: -35px !important;
   visibility:hidden;
}
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
   min-height: 0 !important;
}
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
   visibility: collapse;
}
#tabbrowser-tabs .tabs-newtab-button {
   visibility: collapse !important;
}
#tabbrowser-tabs tab {
   min-height: var(--tab-min-height)
}

Maybe I tweaked something else in settings?

@veselcraft
Copy link

veselcraft commented Apr 15, 2020

Updated style with fix for FF 77

Do not forget to set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config

#tabbrowser-tabs, #tabbrowser-tabs > #tabbrowser-arrowscrollbox {
   min-height: 0 !important;
 }
 
 #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
   visibility: collapse;
 }
 
 #tabbrowser-tabs .tabs-newtab-button {
   visibility: collapse !important;
 }
 
 #tabbrowser-tabs tab {
   min-height: var(--tab-min-height)
 }

@Antagony1060
Copy link

Antagony1060 commented May 7, 2020

The latest update (FF76-32bit) has annoyingly added a tab bar to my popup windows, created from a bookmarklet running this javascript:

javascript:%20var%20WindowPopup%20=%20window.open(window.location.href,'PopUp'+Date.now(),'left=1260,top=590,width=550,height=570,scrollbars=yes,status=no');

So I thought I'd give this a go, but it isn't removing the new tab button:

image

so I'm not really gaining anything from it. What I would like – and still have on FF76-64bit, running on another machine – is for the entire tab bar to be removed so I regain that space from the window buttons to the address bar.

Any ideas, anyone?

@rrthomas
Copy link

rrthomas commented May 8, 2020

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

@Antagony1060
Copy link

Antagony1060 commented May 8, 2020

That works perfectly rrthomas, thank you!

@rcentros
Copy link

rcentros commented May 8, 2020

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.

@AdamColligan
Copy link

AdamColligan commented May 9, 2020

/* 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?

@rrthomas
Copy link

rrthomas commented May 9, 2020

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

@AdamColligan
Copy link

AdamColligan commented May 9, 2020

@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.

@rrthomas
Copy link

rrthomas commented May 9, 2020

@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.

@AdamColligan
Copy link

AdamColligan commented May 10, 2020

@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.

@rrthomas
Copy link

rrthomas commented May 10, 2020

@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.

@AdamColligan
Copy link

AdamColligan commented May 11, 2020

@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.

@manilarome
Copy link

manilarome commented May 21, 2020

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

image

@clickityclick
Copy link

clickityclick commented Aug 4, 2020

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

FF78woTabs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment