Skip to content

Instantly share code, notes, and snippets.

@BenoitAverty

BenoitAverty/userChrome.css

Last active July 22, 2023 13:32
Show Gist options
  • Save BenoitAverty/af633ee20e27f48f9ba7178451432206 to your computer and use it in GitHub Desktop.
Save BenoitAverty/af633ee20e27f48f9ba7178451432206 to your computer and use it in GitHub Desktop.
Download ZIP
Hide tab bar on firefox 89 when there is only one tab
Raw
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;
}
@fabio-th
Copy link

fabio-th commented Feb 8, 2019 •
edited
Loading

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

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 •
edited
Loading

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

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

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

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 •
edited
Loading

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

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 

/* 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 •
edited
Loading

@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 •
edited
Loading

@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

@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

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

@eromatiya
Copy link

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

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

@blackcrack
Copy link

blackcrack commented Nov 22, 2022 •
edited
Loading

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 :)

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