133 url bar is not hide when using autohide nav bar

[117649]

Describe the bug

Its floating over the page.

Expected behavior

It should hide.

Screenshots

OS

Windows 10

OS - Others

No response

Firefox Version

133

Distribution

• Original Lepton
• Lepton's photon style
• Lepton's proton style

Theme

• Light
• Dark
• Alpenglow (System: Light)
• Alpenglow (System: Dark)
• System Default
• Others: (e.g. Photon Colors, Google Chrome Dark, Fairytale Of Nature)

Theme - More Info

No response

user.js setup

user.js setup

userChrome.autohide.back_button	true	
userChrome.autohide.forward_button	true	
userChrome.autohide.navbar	true	
userChrome.centered.tab.label	true	
userChrome.centered.urlbar	false	
userChrome.compatibility.os	true	
userChrome.compatibility.theme	true	
userChrome.decoration.animate	true	
userChrome.decoration.cursor	true	
userChrome.decoration.download_panel	true	
userChrome.decoration.field_border	true	
userChrome.fullscreen.overlap	true	
userChrome.icon.context_menu	true	
userChrome.icon.global_menu	true	
userChrome.icon.global_menubar	true	
userChrome.icon.library	true	
userChrome.icon.menu	true	
userChrome.icon.menu.full	true	
userChrome.icon.panel	true	
userChrome.icon.panel_full	true	
userChrome.padding.bookmark_menu	true	
userChrome.padding.bookmarkbar	true	
userChrome.padding.global_menubar	true	
userChrome.padding.infobar	true	
userChrome.padding.menu	true	
userChrome.padding.navbar_width	true	
userChrome.padding.panel	true	
userChrome.padding.popup_panel	true	
userChrome.padding.tabbar_height	true	
userChrome.padding.tabbar_width	true	
userChrome.padding.toolbar_button	true	
userChrome.padding.urlbar	true	
userChrome.tab.container	true	
userChrome.tab.crashed	true	
userChrome.tab.dynamic_separtor	true	
userChrome.tab.letters_cleary	true	
userChrome.tab.multi_selected	true	
userChrome.tab.newtab_button_proton	true	
userChrome.tab.pip	true	
userChrome.tab.sound_show_label	true	
userChrome.tab.sound_with_favicons	true	
userChrome.tab.unloaded	true	
userChrome.theme.built_in_contrast	true	
userChrome.theme.fully_color	true	
userChrome.theme.fully_dark	true	
userChrome.theme.proton_chrome	true	
userChrome.theme.proton_color	true	
userChrome.theme.system_default	true	
userChrome.theme.transparent.menu	true	
userChrome.theme.transparent.panel

Additional context

No response

[117649]

@-moz-document url(chrome://browser/content/browser.xhtml) {
@media (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")),
  (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")),
  (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")),
  (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) {
  #nav-bar:not([customizing]) #urlbar {
    margin-bottom: var(--uc-navbar-hide-height);
    opacity: 0;
    will-change: margin-bottom, opacity;
  }
  #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar {
    margin-bottom: 0;
    opacity: 1;
  }
}
}

Add this uc style for temp fix.

But this only visually hide the urlbar move cursor over the area of it on page would count as mouse over it and unhide the nav bar.

[117649]

@-moz-document url(chrome://browser/content/browser.xhtml) {
@media (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")),
  (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")),
  (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")),
  (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) {
  #nav-bar:not([customizing]) #urlbar {
    margin-bottom: var(--uc-navbar-hide-height);
    opacity: 0;
    will-change: margin-bottom, opacity;
    visibility: collapse;
  }
  #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar {
    margin-bottom: 0;
    opacity: 1;
    visibility: visible;
  }
}
}

Added visibility setting now mostly working.

[black7375]

I found out the root cause.

It's fine from hbox to html:div, but a problem arises when making the element a popover="manual".
Because it is an overlay, it is maintained even if the parent's position changes, and the top is calculated directly.

mozilla/gecko-dev@eca15e4#diff-0b84874f7ba5c0f2f208772857c2a9da3ae368878358b2c6d3593371b230d0c7R167

-        <hbox id="urlbar" flex="1"
+        <html:div id="urlbar"
+              popover="manual"

This phenomenon also occurs in full screen.
Since fullscreen is commonly used, we will raise this issue to a high priority.

I think we'll have to try your solution temporarily to mitigate the side effects and look into how to fix the problem of it not appearing immediately on hover.

[black7375]

If it don't have popover="manual", the following additional CSS will solve the problem.

#urlbar {
  top: 0 !important;
  z-index: 1000 !important;
}

However, we cannot remove HTML Attribute with CSS alone, so we need to find a trick.. 😭

[117649]

@black7375 The problem of url bar not really hide is still there. Meaning if move cursor over the area of it should be over the page would count as mouse over it and unhide the nav bar.

And I still have to use this:

@-moz-document url(chrome://browser/content/browser.xhtml)
{
  @media (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")),
    (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")),
    (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")),
    (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) {
    #nav-bar:not([customizing]) #urlbar,
    #nav-bar:not([customizing]) toolbarspring {
      visibility: collapse;
/*       animation: delaycollapse 0.6s 6s forwards; */
    }

    #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar,
    #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) toolbarspring {
      visibility: visible;
/*       animation-direction: reverse;
      animation-delay: 0s; */
    }
      
    @keyframes delaycollapse {
      from { visibility: visible; }
      to { visibility: collapse; }
    }
  }
}

[VlaK0r]

And I still have to use this:

Hello!
Thanks for your work.
Please tell me, where do I need to insert this code fragment for the fix to be applied?

[117649]

And I still have to use this:

Hello! Thanks for your work. Please tell me, where do I need to insert this code fragment for the fix to be applied?

userChrome.css

[Rtizer-9]

@black7375 @117649 I've found a workaround:
The steps are simple, basically the code from here works: MrOtherGuy/firefox-csshacks-autohide_toolbox.css

....but to make it works with our ui-fix we need to stop the ui-fix autohide code from triggering.

Obviously ui-fix code needs to be updated which I hope @black7375 will after taking a look at this code but @117649 as of now you can simply go to the chrome/userChrome.css and add this above linked autohide-toolbox css code below the line "Add your custom styles below" and everything will work for now as expected perfectly with the toolbox not triggering till the moment you literally put cursor's end to screen edge.

Warning: the content from user.js gets copied to pref.js on every launch so if you still face the glitch then you need to remove those copied lines containing userchrome and specifically the autohide ones (shouldn't be hard unless you have made huge changes to the default ui-fix code) and if you still face the glitch then try changing the position of that copied autohide-toolbar.css code like putting it below the "import leptonuserchrome css" but with correct indentation/spacing. It didn't work for me first but worked later after 2nd try.

[117649]

@black7375 @117649 I've found a workaround: The steps are simple, basically the code from here works: MrOtherGuy/firefox-csshacks-autohide_toolbox.css

....but to make it works with our ui-fix we need to stop the ui-fix autohide code from triggering.

Obviously ui-fix code needs to be updated which I hope @black7375 will after taking a look at this code but @117649 as of now you can simply go to the chrome/userChrome.css and add this above linked autohide-toolbox css code below the line "Add your custom styles below" and everything will work for now as expected perfectly with the toolbox not triggering till the moment you literally put cursor's end to screen edge.

Warning: the content from user.js gets copied to pref.js on every launch so if you still face the glitch then you need to remove those copied lines containing userchrome and specifically the autohide ones (shouldn't be hard unless you have made huge changes to the default ui-fix code) and if you still face the glitch then try changing the position of that copied autohide-toolbar.css code like putting it below the "import leptonuserchrome css" but with correct indentation/spacing. It didn't work for me first but worked later after 2nd try.

Only added

  #navigator-toolbox:not(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar {
    pointer-events: none;
  }

Is enough for me.

@black7375 @Rtizer-9 Just add this one rule and nothing else then its a perfect fix.