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; }
    }
  }
}