navbar auto-hide.css not working since 65.0b1

[MikulasZelinka]

Hello,

not sure if this is perhaps a bug in the Developer Edition but since yesterday (and build 65.0b1, Firefox Developer Edition), the autohide of the navigation bar is not working properly.

[lokmeinmatz]

Does anybody have a fix for this? I like this file for smaller screens, makes the view much cleaner, but I don't get the css of the firefox styling to fix it myself :(

[different55]

Looks a lot like the problems I had when --tab-min-height wasn't set quite right. Guess they changed some of the dimensions in the update. If you want to go looking for a solution yourself, just tweak --tab-min-height for your UI density. If you can't, I'll probably deal with it when I update.

[different55]

Not seeing any problems like this since I've updated to FF65.

[Timvde]

So I can close this?

[lokmeinmatz]

yeah i fixed it, changed the --tabbar-height calculation to --tabbar-height: calc(var(--tab-min-height) + 7px);, feels a bit hacky but works for me, the tab-min-height was correct for me

[Timvde]

Wait, so is a fix to the code needed or not?

[ana-ka]

Not seeing any problems like this since I've updated to FF65.

I am having the issue with FF65 and FF66 beta on windows. When I maximize Firefox, it looks like the screenshot in the first post. When not maximized, it looks quite okay, but not perfect. There is noticable "bobbing" when the navbar transitions in and out. Also the actual webpage overlays the tabbar for a brief moment before it slides down and pops up again. I will try the "fix" that was posted above and can provide screenshots if needed. I'll be back with an update.

Update: With the "fix" above its more visually pleasing but still broken. Now I got a permanent black bar (maybe black because of dark theme?) in the place where the navbar is supposed to be. Also when the navbar is visible, its only less broken than before but not perfect. There is a thin space between tabbar and navbar where the actual page shines through, with the active tab beeing a little bit thinker than the other ones. I will compile a series of screenshots and be back with that.

Update2: The "fix" somewhat worked in the end - no idea why it didn't when I tried first. Still not perfect.

vanilla_maxed

vanilla_normal

fix_maxed

fix_normal

weird transition

The transition is hard to capture. The white stripe you see appears to be the webpage in the background and extends over the whole tabbar for a brief moment before sliding down. Looks kinda ugly.

If you need any more info, let me know.

[MikulasZelinka]

@Timvde A fix is needed, the issue persist, as described by @ana-ka.

Edit: the problem remains the same on Firefox 66.0b4.

[different55]

Hm. Still not seeing any issues on Linux, so we need to be careful that whatever Windows fix is needed doesn't break other platforms.

[ana-ka]

Alright, today I tried the fix suggested by @lokmeinmatz again on FF66b5 and FF65 and I was just about to call the issue fixed. But here is what I noticed:

On my main screen (2560x1440, OS scaling on Windows) both, FF66 and 65 look as intended or close to it with

--tabbar-height: calc(var(--tab-min-height) + 7px); instead of
--tabbar-height: calc(var(--tab-min-height) + var(--space-above-tabbar));

with both compact and normal density and the extra drag space turned off. No matter if the window is maximized or normal. On my secondary screen (1280x1024), it still looks like in the screenshots above (which means slightly broken, even with the fix), that were all taken on that screen. With the drag space turned on in FF, everything is completely broken, similar or identical to the vanilla auto-hide.css.

What still remains on both screens and regardless of other settings is the weird transition, but I cannot say for sure if that was there with prevsious versions already. I had the transition time dialed down to 0.10s and its not as annoying as before. Still the symptoms stay the same. The whole page is bobbing down and up again during the transition and the tabbar is overlayed with the page during transition time, which looks a bit ugly still. I don't know if there is a way to fix that or if it was like this before already. In the end the navbar occludes the webpage, which is to be expected I guess and doesn't bother me.

For now I'll live with the "fix" which is certainly an improvement over vanilla on my setup. Let me know if there is anything I can try to help and improve the situation across all platforms. Good hunting!

[Jorge9810]

The fix provided by @lokmeinmatz also worked on my end for the most part. The only issue remaining is when I set Firefox to window mode instead of maximized window.

[paulscholes0258]

The fix provided by @lokmeinmatz also worked on my end for the most part. The only issue remaining is when I set Firefox to window mode instead of maximized window.

Hi Jorge9810
can you share me the code or file userChrome.css that you''re using.
thanks Jorge9810

[ana-ka]

@paulscholes0258

It is line 39 in auto-hide.css.
--tabbar-height: calc(var(--tab-min-height) + var(--space-above-tabbar) + 8px); instead of
--tabbar-height: calc(var(--tab-min-height) + var(--space-above-tabbar));

Note that people suggested 7px above, but I found that 8px works better for me and looks decent in all situations. Also --space above-tabbar is apparently zero and hence has no effect. The solution above just omits it. I decided to leave it in to see if anything changes in the future.

I'll attach my userChrome.css (rename to .css) with that change + slightly shorter transition time + a slightly smaller trigger area if you want the whole thing.

userChrome.txt

[different55]

I might be remembering wrong but I think --space-above-tabbar represents the amount of dragspace when that option's enabled.

[raamdev]

I'm running Firefox Quantum v65.0.1 and was running into the issue with auto-hide.css showing a bit of the background page when the address bar re-appeared on hover.

I played with the CSS a bit and found that if I commented out the two transition: lines, that fixed the problem for me.

Here's what I started with:
https://github.com/Timvde/UserChrome-Tweaks/blob/bf0e9c1c53642fa80cd418d23bfdae94e5a8e915/toolbars/auto-hide.css

Here's the two spots where I commented out the transition: lines:

:root:not([customizing]) #navigator-toolbox {
  max-height: calc(var(--tabbar-height) + var(--trigger-area-height));
  min-height: var(--tabbar-height);
  margin-bottom: calc(-1 * var(--trigger-area-height));
  /*transition: opacity 0.15s ease-in, max-height 0.15s linear;*/
}

:root:not([customizing]) :hover > #PersonalToolbar,
:root:not([customizing]) #navigator-toolbox:focus-within #PersonalToolbar {
  max-height: 4em !important;
  opacity: 1;
  /*transition: opacity 0.15s ease-in !important;*/
}

[Jorge9810]

So, does anyone know how to fix that issue I brought up earlier?
Even though the fix that @lokmeinmatz came up with works on Fullscreen, if I set Firefox to Window Mode, a black bar appears under my tabs.