BenoitAverty/userChrome.css

TomaszGasior · 2018-12-26T21:22:14Z

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 · 2018-12-31T10:34:32Z

@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 · 2019-01-17T04:06:00Z

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 · 2019-02-08T07:07:45Z

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 · 2019-07-20T01:52:45Z

Not working on ff68 ?

rdrms · 2019-08-09T20:20:02Z

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 · 2019-09-15T16:14:07Z

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

rdrms · 2019-09-15T17:02:53Z

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 · 2019-10-20T19:14:25Z

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 · 2020-03-03T11:04:59Z

This hides only the tab, not the tab bar.

kogaba · 2020-03-04T21:30:56Z

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 · 2020-04-15T00:02:28Z

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 · 2020-05-07T19:28:33Z

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:

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 · 2020-05-08T11:01:30Z

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 · 2020-05-08T11:11:31Z

That works perfectly rrthomas, thank you!

rcentros · 2020-05-08T20:42:23Z

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 · 2020-05-09T05:42:29Z

/* 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 · 2020-05-09T09:10:24Z

@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 · 2020-05-09T18:00:35Z

@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 · 2020-05-09T19:24:19Z

@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 · 2020-05-10T21:40:57Z

@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 · 2020-05-10T21:44:27Z

@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 · 2020-05-11T02:00:33Z

@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 · 2020-05-21T03:25:54Z

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

clickityclick · 2020-08-04T14:53:47Z

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

blackcrack · 2022-11-22T12:08:30Z

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

BenoitAverty/userChrome.css

TomaszGasior commented Dec 26, 2018

Seirade commented Dec 31, 2018

compwrench commented Jan 17, 2019

fabio-th commented Feb 8, 2019 •

edited

Loading

xlovinglyx commented Jul 20, 2019

rdrms commented Aug 9, 2019

SR-G commented Sep 15, 2019

rdrms commented Sep 15, 2019

kogaba commented Oct 20, 2019 •

edited

Loading

ShalokShalom commented Mar 3, 2020

kogaba commented Mar 4, 2020

veselcraft commented Apr 15, 2020

Antagony1060 commented May 7, 2020

rrthomas commented May 8, 2020 •

edited

Loading

Antagony1060 commented May 8, 2020

rcentros commented May 8, 2020

AdamColligan commented May 9, 2020

rrthomas commented May 9, 2020

AdamColligan commented May 9, 2020 •

edited

Loading

rrthomas commented May 9, 2020

AdamColligan commented May 10, 2020 •

edited

Loading

rrthomas commented May 10, 2020

AdamColligan commented May 11, 2020

eromatiya commented May 21, 2020

clickityclick commented Aug 4, 2020

blackcrack commented Nov 22, 2022 •

edited

Loading

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

BenoitAverty/userChrome.css

TomaszGasior commented Dec 26, 2018

Seirade commented Dec 31, 2018

compwrench commented Jan 17, 2019

fabio-th commented Feb 8, 2019 • edited Loading

xlovinglyx commented Jul 20, 2019

rdrms commented Aug 9, 2019

SR-G commented Sep 15, 2019

rdrms commented Sep 15, 2019

kogaba commented Oct 20, 2019 • edited Loading

ShalokShalom commented Mar 3, 2020

kogaba commented Mar 4, 2020

veselcraft commented Apr 15, 2020

Antagony1060 commented May 7, 2020

rrthomas commented May 8, 2020 • edited Loading

Antagony1060 commented May 8, 2020

rcentros commented May 8, 2020

AdamColligan commented May 9, 2020

rrthomas commented May 9, 2020

AdamColligan commented May 9, 2020 • edited Loading

rrthomas commented May 9, 2020

AdamColligan commented May 10, 2020 • edited Loading

rrthomas commented May 10, 2020

AdamColligan commented May 11, 2020

eromatiya commented May 21, 2020

clickityclick commented Aug 4, 2020

blackcrack commented Nov 22, 2022 • edited Loading

fabio-th commented Feb 8, 2019 •

edited

Loading

kogaba commented Oct 20, 2019 •

edited

Loading

rrthomas commented May 8, 2020 •

edited

Loading

AdamColligan commented May 9, 2020 •

edited

Loading

AdamColligan commented May 10, 2020 •

edited

Loading

blackcrack commented Nov 22, 2022 •

edited

Loading