How do I make Fullscreen only show the Tab Bar?

[Nicholas-Steel]

Dunno if this is the right place to ask this or if you accept questions like this, but I've been wanting to make Firefox's fullscreen mode (F11) only show the Tab Bar while with the "Hide Toolbars" option still hiding it when enabled.

I've no understanding of CSS but can generally surmise what code is doing, enough to be able to make edits. So far what I've been doing is putting this at the end of userChrome.css:

/* Only show Tab Bar in Fullscreen mode */
*|*:root[inFullscreen] #navigator-toolbox {margin-top: unset !important}
*|*:root[inFullscreen] #navigator-toolbox:not(:focus-within) #nav-bar {visibility: collapse}

but this causes a couple problems, such as:

1. Hide Toolbars not working (Tab Bar is always visible)
2. The Minimize, Restore and Maximize buttons in the Title Bar being visible (and interactive) over the Tab Bar
3. The fullscreening of certain content like mouse clicking the Fullscreen button visible within a Youtube embed causes the Home Button, Search Box and all the Extension buttons except the "Extension" button it self to be removed from the UI when exiting out of the Youtube Embed's fullscreen mode with them only reappearing if I hit F11 to enter and then again F11 to exit Firefox's fullscreen mode.

[joefiesta]

I don't much about how CSS code functions. Does the CSS code actually get used every time one enters/exits Firefox's Fullscreen mode?

[Nicholas-Steel]

For the 3rd issue the things that disappear would be the Home Button, Search Box and all the Extension buttons except the "Extension" button it self. I've updated my original message to clarify this.

Not 100% sure on what you mean with your question, pressing F11 reliably results in only the Tab Bar being visible in fullscreen mode.

[Aris-t2]

Could you create a mockup or something showing the situation you are trying to get?

The default appearance it like this...

window

maximized window

fullscreen (everything hidden)

fullscreen (top toolbars visible)

This will for example make tabs disappear unless you are in fullscreen mode (F11)

:root:not([inFullscreen]) #tabbrowser-tabs {
  visibility: hidden !important;
  opacity: 0 !important;
}

[Nicholas-Steel]

If you have a better way of achieving this Fullscreen state, let me know. my current solution has the problems I'd already mentioned.

I should've included this in my original post, here's my current Chrome folder contents chrome.zip