FF89.0b8 - tabs_below_navigation_toolbar not working correclty anymore

[Omnibrain007]

With the latest update FF89.0b8 the tabs_below_navigation_toolbar css not working anymore.
For test I only used the 5 css of tabs_below_navigation_toolbar.

When I use the standard css for "tabs_below_navigation_toolbar" then the tabs are at the very bottom of the window and only active tab will be shows
When replacing the tabs_below_navigation_toolbar_fx65.css with the tabs_below_navigation_toolbar_fx65_v2.css then it looks a little bit better, the tabs are not anymore at bottom but there is a big space below the tabs.

FF 89.0b8 (64bit)-Win10 20H2

[Aris-t2]

Not sure, if this is a Fx 89 only issue, but it works "fine" on Nightly, when using the complete package and changing one line only inside userChrome.css:

/* - Fx 65+ v2 - mainly for multi-lined tabs (Glitches with inactive menubar!) ******************/  /* <- use this for multiple tab lines support */
 @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; /**/

[yochaym]

hi aris,

the problem with tabs_below_navigation_toolbar is caused by the removal of position: relative from the navigator-toolbox.
apart from adding it you can try something like this to make it work w/wo proton (needs restart after changing the pref):

#navigator-toolbox {
    position: relative;
}

.tabbrowser-tab {
    height: calc(var(--tab-min-height_tnot) + 1px);
}

@media (-moz-proton) {
    #TabsToolbar {
	--tab-min-height: calc(var(--tab-min-height_tnot) + 1px);
	--toolbarbutton-inner-padding: 4.5px !important;
    }

    .tab-content {
	height: 90%;
    }
}

btw you can use something like this to get more reasonable menus with proton (should probably be chrome & content):

@media (-moz-proton) {
    :root {
	--toolbarbutton-inner-padding: 6px !important;
	--arrowpanel-menuitem-padding: 4px var(--arrowpanel-menuitem-padding-block) !important;
    }
	
    menupopup > menuitem, menupopup > menu {
	padding-block: 3px 4px !important;
    }
}

p.s only tested on nightly...

[Omnibrain007]

Aris you mean not to load the code from tabs_below_navigation_toolbar_fx68.css, ..fx72.css and ..fx74.css

So when I just load from userChrome.css the tabs_below_navigation_toolbar_fx65_v2.css and included the abs_below_navigation_toolbar.css. then it looks much better like this:

But with additional the position code from yochaym it looks nearly normal. Perhaps just a little fine tuning needed.

[Aris-t2]

Default code + the fix posted by yochaym works fine. I've added the code to the project. It already is part of the "pre" releases.

[yochaym]

hi aris,

tabs_below_navigation_toolbar_fx89 will not work correctly when proton is enabled & classic_squared_tabs is not imported...
something like this should make it work regardless.

@media (-moz-proton) {
	
    #TabsToolbar {
	--toolbarbutton-inner-padding: calc((var(--tab-min-height_tnot) - 15px) / 2 - 4.5px) !important;
    }

    .tabbrowser-tab {
	min-height: unset !important; 
    }
}

p.s padding is for when the tabs overflow arrows & buttons are visible...

[Aris-t2]

Check 3.2.2 release.

[ichier]

Hi there.
tabs_below_navigation_toolbar is the only hack that i use.
with the 3.2.2 release the active tab was overlapping into the website/contentarea.
so i added 10px (took the snips from 72 and 68 ...):

@media (-moz-proton) {
	#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
	  padding-bottom: calc(0px + var(--tab-min-height_tnot) + 10px) !important;
	}
	#TabsToolbar {
	  height: calc(var(--tab-min-height_tnot) + 10px) !important;
	}
}

[yochaym]

hi aris,

when importing only tabs_below_navigation_toolbar_fx89 there is still an issue when opening many tabs so the right | left tabbar arrows are showing. to fix it you need to tweak the toolbarbuttons padding (see above)...

[Aris-t2]

I see, this happens with "default tabs" only. Next update will take care of this issue.