Firefox 65 and tabs not on top

[jlittle]

Firefox 65 just landed in my cosmic, and the tabs obnoxiously moved over the navigation bar.

(I could rant at length about this misfeature, in several ways, but I won't.)

I was using a simple userChrome.css hack, but it's much more involved now. The way to do this now, from the mozilla support wiki, is to use the Aris-t2/CustomCSSforFx prroject on Github. It took a while to work out what to do, so here's the steps I used.

# Find your firefox profile name; it's some random string
ls ~.mozilla/firefox
'Crash Reports'   mkx9q8lj.default  'Pending Pings'   profiles.ini
# here the profile is "mkx9q8lj", yours will be different
target=~/.mozilla/firefox/mkx9q8lj.default

# cd to somewhere you like to store the project
cd ...
git clone https://github.com/Aris-t2/CustomCSSforFx.git
cd CustomCSSforFx/classic

mkdir -p $target/chrome

# if you already have a userChrome.css, making a backup copy may be a good idea
# say
[ -e $target/chrome/userChrome.css ] && mv $target/chrome/userChrome.css $target/chrome/userChrome.bak
cp -r config css image user*.css $target/chrome

# edit $target/chrome/userChrome.css to uncomment the line
# /* @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css";
# by removing the "/* ".
# I found the bookmark toolbar buttons horrible, so I also commented out this:
# @import "./css/buttons/buttons_on_navbar_classic_appearance.css";

[chimak111]

Edit: See the next post for a simpler one than the one below

And here's another userChrome.css:

Source:

Reposition Tabs at bottom, directly above web page in Firefox 65.0?
https://support.mozilla.org/en-US/questions/1248277

@namespace url("<a href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="nofollow">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a>"); 

/* 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 {
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: 29px !important; /* 27 --- adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 29px !important; /* 27 --- 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 &gt; .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] &gt; .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] &gt; #titlebar &gt; #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] &gt; #nav-bar {
margin-top: unset !important;
}

Note:
I had to fiddle with the px value in both lines containing

--tab-min-height: 29px !important; /* 27 --- adjust to suit your needs */

but that was about it.

[chimak111]

The simpler one

Source: https://support.mozilla.org/en-US/kb...-below-url-bar

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

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

[jlittle]

The simpler one ...

Thank you, that's much simpler and doesn't screw other stuff up. Google did not and still does not find that page for me at all, even if I search for the page title.

[Snowhog]

Perform the search with it enclosed in "", so: "Forum Response - Tabs below the URL bar"

This lands you at https://support.mozilla.org/en-US/kb/all?page=11

Scroll down the page to the link, or while on that page use 'your systems search function' (on my iMac it's Command+F) and search on "Forum Response - Tabs below the URL bar"

[jlittle]

I was just giving an excuse for possibly leading readers to a much more complicated route than necessary, it's not in the least important.

The whole search "Forum Response - Tabs below the URL bar" does indeed find the page you mention, but, how could I have known that? Googling

firefox "Tabs below the URL bar"

does not find it. So Google does know about that articles page, but hasn't associated it with firefox, or spidered that page's links.

[Snowhog]

That Google can't find the article isn't Google's fault, it has to be Mozilla's. If they aren't allowing spiders to crawl down into that page, ....

[chimak111]

BTW, I came across the link here: http://forums.mozillazine.org/viewto...2690#p14822690

I visit forums.mozillazine.org around the time of each new release.

[chimak111]

@jlittle, the code in post#2 works in Private Browsing windows as well. The later code I posted doesn't: tabs overlap the bookmarks bar or the area to the left or right of the url bar when a Private Browsing window is opened

[jlittle]

@chimak111, thank you.

I'm sticking with the Aris-t2/CustomCSSforFx approach. By exposing CSS used by firefox it makes it possible, however tediously, to tweak the GUI. For many years I've quixotically fought against light backgrounds, and I often get things dark on dark. Being able to track down some CSS to make something visible can be satisfying.

[chimak111]

For many years I've quixotically fought against light backgrounds, and I often get things dark on dark. Being able to track down some CSS to make something visible can be satisfying.

Some of the friendlier gtk themes come with instructions on overcoming dark text on dark backgrounds, seen especially in text input areas of browsers, when using dark gtk themes.

[GregM]

Hooray for the fixers.
I've been putting off updating FF because of their obsession with not allowing tabs on bottom until now.

Thank you Fixers