Tabs Back On Top Again!

[Dee Yoos]

Using a .css file, I had tabs below the address bar for a very long time. Now they are back above the address bar with the latest update 71.0. How can I get them returned to below the address bar? Here's the code I have been using up to this point:

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 32px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 32px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;
}

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

[WaltS48]

Anything under the CSS heading in this link that explains it?

https://www.fxsitecompat.dev/en-CA/versions/71/

[dickvl]

The code probably still works, but I've noticed issues caused by namespace changes that made for me the code stop working.

You can try to move the code in userChrome.css above the default @namespace line or what I did and move the code to a separate file without the @namespace line and use @import url(file); in userChrome.css above its @namespace line to import this file.

Code: Select all

import url(tabs-on-bottom.css);
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

You also need to add a display: block !important; property to this rule for Firefox 70 and later:

Code: Select all

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

[diamond-optic]

You also need to add a display: block !important; property to this rule for Firefox 70 and later:

Code: Select all

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

thank you, this was all I needed to get it working again for myself

[Dee Yoos]

Thanks dickvl.
I just added the line "display: block !important;" under #TabsToolbar and my tabs are back under the address bar.
I get a little stressed out every time Firefox updates, waiting to see if it messes with the way it looks.
Thanks also to WaltS48 for his suggestion to look at the .CSS items mentioned.

[Franpa]

You also need to add a display: block !important; property to this rule for Firefox 70 and later:

Code: Select all

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

thank you, this was all I needed to get it working again for myself

Can confirm, this is all that was needed. Thanks dickvl.

[AnayaP]

This is so f-g infuriating. Why do I have to be a programmer to get a simple thing done? I don't know how to add a "display option" or have any idea where in the world to put it, or what to replace. This is LUDICROUS. Every single time they update it takes me HOURS of research and reading forums and trying to figure out what to do with all the confusing directions. Why is this SO HARD? Why doesn't Mozilla just make this an OPTION in one of their innumerable updates???

In the meantime, if anyone has a complete new code, where I don't have to figure out what to replace with new stuff, but just the entire thing, that would be really helpful, because although everyone above has been very helpful, I am your grandma's age and have no idea what to do.

Thanks,
A highly disgruntled user.

[AnayaP]

Also, if anyone can let me know how to find the css file you are discussing... I managed to find my profile, but there are two -- one says "root directory" and one says "local directory." Which one do I look at?

[ReggieNJ]

Why is this SO HARD? Why doesn't Mozilla just make this an OPTION in one of their innumerable updates???

Why? Because they removed that option six years ago: https://bugzilla.mozilla.org/show_bug.cgi?id=755593 And it isn't coming back: https://bugzilla.mozilla.org/show_bug.cgi?id=1601164
Tabs on top has been the default now since version 4 was released in 2011. If you want to hack the code to get Firefox to your liking that's on you, not Mozilla. You're lucky to even have the ability to modify the browser with CSS.

[jscher2000]

Hi AnayaP, is this your first userChrome.css file? I suggest taking 10 minutes and following some guides:

* "How to": https://www.userchrome.org/how-create-u ... e-css.html
* Rules file: https://www.userchrome.org/what-is-user ... movetabbar

[AnayaP]

Thanks to all - I DID figure it out. Tabs back on bottom.

@ReggieNJ: you didn't have to be so snarky. When you yourself are elderly I hope strangers on line are nice to you. (PS, obviously the reason "why" is that they removed the option. In that context the WHY was rhetorical.)

If anyone else has the problem, the css file should have this in it. I know the conversation above says alot about namespace; I don't know what that is, but I made the other change and this is the code I am now using to get tabs on bottom:

@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul"); /* only needed once */

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 27px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;
}

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

[Mudder]

You also need to add a display: block !important; property to this rule for Firefox 70 and later:

Code: Select all

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

thank you, this was all I needed to get it working again for myself

OK, I gotta re-learn some stuff from 2 years ago I'll try this on Saturday when I have more time.

[Mudder]

Thanks dickvl.
I just added the line "display: block !important;" under #TabsToolbar and my tabs are back under the address bar.
I get a little stressed out every time Firefox updates, waiting to see if it messes with the way it looks.
Thanks also to WaltS48 for his suggestion to look at the .CSS items mentioned.

I'll try that too on Saturday when I have time to fiddle with it.

EDIT: Frank, did some quick reading here, and on the weekend I'm using what's already posted and converting to SeaMonkey,
as two of my favourite extensions, ABP and NoScript are available for it.
Tired of the FF team changing things on me.

[Mudder]

You also need to add a display: block !important; property to this rule for Firefox 70 and later:

Code: Select all

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

thank you, this was all I needed to get it working again for myself

Frank...gave up trying to find NoScript and ABP for Seamonkey, after I applied this fix, my tabs are where I want them again.
Still DO NOT appreciate Brummelchen's arrogant and unconstructive comments.

[blued]

You also need to add a display: block !important; property to this rule for Firefox 70 and later:

Code: Select all

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

Thanks, this worked for me as well.