Add option for menubar overlay

[Nomes77]

Is your feature request related to a problem?

Is it possible that menubar when not always visible and you toggle it via the Alt key in Windows it overlays on the tabbar. In stead of moving the tab bar downwards?

The solution I'd like

Screenshots or video

something like this

Alternatives I've considered

Additional context

[thunderstone135]

Speaking of menubar overlay, this is also what I need for the Bookmarks Toolbar along with the Bookmarks/History Sidebar. Instead of them pushing the page, I need them to just appear/disappear without any page interference.

[black7375]

Bookmark bar is already supported.

• https://github.com/black7375/Firefox-UI-Fix/wiki/Options#boomark-bar
• https://github.com/black7375/Firefox-UI-Fix/wiki/Options#toolbar-overlap-mode

[thunderstone135]

@black7375: They do, but they still push the page downward. See example below 👇 I can't seem to post them side by side, so you have to open them on another tab to see how the page is pushed downward.

[black7375]

Also need userChrome.autohide.toolbar_overlap to true

[thunderstone135]

Update:

I noticed that if userChrome.autohide.bookmarkbar is enabled, it can't be disabled with Ctrl+Shift+B 🤔

[black7375]

The way to implement overlap is to make the toolbar container height of zero and adjust the height of the internal elements and backgrounds. Here, the background is the parent element of the toolbar container. Therefore, unless :has is implemented, the status of the bookmark toolbar is unknown, so it is always visible.

I think it can make it work normally if it is 103 or more.

[black7375]

Does it work with :is()? I think it's impossible.

[thunderstone135]

Since none of you believe me saying that :is works, maybe this video will be proof enough.

https://user-images.githubusercontent.com/96173732/188604167-5eb6291e-af91-4bab-99e2-c626055b8fa1.mp4

https://user-images.githubusercontent.com/96173732/188604198-30fa7f9b-8821-4752-9639-3d6eb93b8035.mp4

If you still think that I'm just making things up, then why don't you try it on your end? I'm using Waterfox G5 on Windows 11.

[black7375]

You can see that it works incomplete. If you put the mouse on the toolbar, the browser contents screen moves up.

Firefox v103 is possible to work 100% without any error. (If it's below, there's a trade-off)

[thunderstone135]

It's only normal that the page is moving. After all, I am using View/Hide Bookmarks Toolbar. If you simply leave the Bookmarks Toolbar enabled (e.g., without using View/Hide or Ctrl+Shift+B) and just hover the mouse over the Nav Bar, then there will be no movement in the page.

Putting all that aside, I'm not saying that you totally replace :has with :is. I mean you have some codes in there that use a pref (e.g., AccentColor and -moz-accent-color). Why not create a compatibility pref?

[black7375]

The content layout should not be moved because toolbar is overlay.

But, We can add it as an option as you say.

[thunderstone135]

Just to clear any misunderstanding, I don't want :has to be removed and get replaced with :is. That's the farthest thing from my mind. I know it will be a year before Waterfox gets updated past v102, but that's no reason for me to ditch :has. The reason I replaced :has with :is in my video is due to me not knowing how to make :is work alongside :has without breaking the entire code/script.

[Nomes77]

This is a solution of the problem/issue I had when opening this issue

/*= Menubar =========================================================================*/
@supports -moz-bool-pref("userChrome+Content.autohide.menubar") {
  :root[tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) 
    #toolbar-menubar[autohide="true"]:not([inactive]) {
      height: 0px !important;
      display: flex;
      position: fixed;
      z-index: 6;
    }
  }
  :root[tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) 
    #toolbar-menubar[autohide="true"]:not([inactive]) + #TabsToolbar > .titlebar-buttonbox-container {
      visibility: visible !important;
  }
  :root[tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) 
    #toolbar-menubar[autohide="true"]:not([inactive]) .titlebar-buttonbox-container {
      display: none;
  }
  :root[tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) 
    #toolbar-menubar[autohide="true"]:not([inactive]) #main-menubar > menu {
      margin-top: -2px;
  }
  @supports -moz-bool-pref("userChrome+Content.padding.drag_space") {
    @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
      :root[sizemode="normal"][tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) 
        #titlebar {
          --tab-min-height: 32px;
      }
      :root[uidensity="touch"][sizemode="normal"][tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) 
        #titlebar {
          --tab-min-height: 41px;
      }
      :root[sizemode="normal"][tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) 
        #titlebar:not(:has(#toolbar-menubar[autohide="true"]:not([inactive]))) {
          height: calc(var(--tab-min-height) + var(--space-above-tabbar)) !important;
      }
    }
  }
}

[thunderstone135]

It's working, but I simplified it further to this 👇

:root[tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) #toolbar-menubar[autohide="true"]:not([inactive]) {
  z-index: 6;
  height: var(--tab-min-height) !important;
  /* I just placed height in here to make it simple. I also made it the same size as a tab so there will be no accidental clicking. */
  display: flex;
  position: fixed;
  background-color: var(--win-bgcolor) !important;
  /* I added a background-color because I was distracted with the text in the tabs showing through the transparency. */
}
:root[tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) #toolbar-menubar[autohide="true"]:not([inactive]) + #TabsToolbar > .titlebar-buttonbox-container {
  visibility: visible !important;
}
:root[tabsintitlebar="true"]:not([chromehidden~="menubar"], [inFullscreen]) #toolbar-menubar[autohide="true"]:not([inactive]) .titlebar-buttonbox-container {
  display: none;
}

[Nomes77]

@thunderstone135 Just a few things.

• the background-color isn't needed when you have, at least with windows 10, the system default theme enabled with the accent color in the title bar. See 👇
• setting the height is nice, but when you have your browser window in normal mode and drag_space enabled, you don't have any drag space anymore when the menubar is shown at opening a menu.

[thunderstone135]

• the background-color isn't needed when you have, at least with windows 10, the system default theme enabled with the accent color in the title bar. See 👇🏻

I guess it's different between systems because your original code is showing as transparent in mine. What I mean by transparent is the text of the Tab and Menu Bar gets mixed up. Take a look at this 👇

When I add a background-color, this is what it looks like 👇

• setting the height is nice, but when you have your browser window in normal mode and drag_space enabled, you don't have any drag space anymore when the menubar is shown.

I know, but I don't actually open the Menu Bar when I'm dragging tabs. I guess I placed height there out of preference/habit.

[thunderstone135]

Putting that aside, thanks to @BPower0036, I was able to create a code for Bookmarks Toolbar that doesn't use :is or :has.

#PersonalToolbar {
  --tab-min-height: 30px !important;
  /* Added this because :root is not being followed. */
  opacity: 0 !important;
  position: fixed !important;
  top: calc(var(--tab-min-height) * 2) !important;
  /* Top is totally dependent on the height of Tab Bar and Nav Bar. Removed + 2px because of :root */
  transform: rotateX(90deg) !important;
  /* Just an effect I got from other sites. */
  transition: all 3s ease-in !important;
  z-index: -1 !important;
}
#navigator-toolbox:is(:hover, :focus-within) > #PersonalToolbar {
  --tab-min-height: 30px !important;
  /* Added this because :root is not being followed. */
  opacity: 1 !important;
  position: fixed !important;
  top: calc(var(--tab-min-height) * 2) !important;
  /* Top is totally dependent on the height of Tab Bar and Nav Bar. Removed + 2px because of :root */
  transform: rotateX(0deg) !important;
  /* Just an effect I got from other sites. */
  transition: all 0.5s ease-in !important;
  z-index: 1 !important;
}

Edit 1: Oh, wait. I'm still using :is to get one line out of #navigator-toolbox instead of two lines 😆 Edit 2: You know what? I made some changes to the code because Firefox/Waterfox sometimes don't follow :root. Edit 3: I added --tab-min-height because I don't use the normal tab height that is assigned to each uidensity. Edit 4: Removed display and width. It looks like they were not needed.

Note: The z-index of #navigator-toolbox:is(:hover, :focus-within) > #nav-bar needs to be set to 2. Otherwise, the Bookmarks Toolbar will show up like a sore thumb.