position: fixed in Firefox browser UI CSS

Issue

Firefox on Linux (KDE Plasma) has an option to hide the window's title bar to save space. When you enable this option, minimize, windowed/maximize and close buttons get added to the right side of the topmost toolbar (in my case the menu bar cos I'm old-fashioned). The html looks like this:

<toolbar type="menubar" id="toolbar-menubar" class="browser-toolbar chromeclass-menubar titlebar-color customization-target" customizable="true" mode="icons" context="toolbar-context-menu" autohide="false" data-l10n-id="toolbar-context-menu-menu-bar-cmd" data-l10n-attrs="toolbarname" toolbarname="Menu Bar" accesskey="M" brighttext="true">
...
<hbox class="titlebar-buttonbox-container" skipintoolbarset="true">...</hbox>
...
</toolbar>

When the window gets resized to a smaller width until the elements on the toolbar together exceed the width of the window, the right side of the toolbar simply gets cut off, including the title bar buttons. That's less than ideal.

I tried to solve this in the following way (via userChrome.css):

.titlebar-buttonbox-container {
  right:  0px !important;
  position: fixed !important;
}

#toolbar-menubar {
  display: flex !important;
}

w3schools.com

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Expected behavior is that the buttonbox container is taken out of the regular element flow and moved to the right of the viewport (the right side of the browser window). This doesn't happen. Instead, fixed seems to be ignored entirely.

By default the menubar display: -moz-box; via a * selector. Thus I tried changing it to flex, which I know works because the ordering of the elements changes, but position: fixed still has no effect.

Perhaps the browser UI simply doesn't support position: fixed. Is there another way to keep the titlebar buttons visible on the right side of the window?

Solution

I came up with a very hacky solution:

.titlebar-buttonbox-container {
  order: -1;
  flex-direction: column-reverse;
  height: 0px !important;
  margin-left: auto;
  display: flex;
}

.titlebar-buttonbox {
  -moz-box-align: center !important;
  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
  top: calc(var(--urlbar-min-height) - 1px);
  height: var(--urlbar-min-height);
  margin-right: calc(var(--urlbar-min-height) * -3) !important;
}

.titlebar-buttonbox > toolbarbutton {
  height: var(--urlbar-min-height) !important;
  width: var(--urlbar-min-height) !important;
}

#toolbar-menubar {
  flex-wrap:  wrap !important;
  overflow-y:  clip;
  display: flex !important;
  padding-right: calc(var(--urlbar-min-height) * 3) !important;
}

#toolbar-menubar::before {
  content: ".";
  width: 100%;
  height: 0px;
  order: 0;
  visibility: hidden;
}

toolbaritem {
  flex: 1;
}

Basically, I turned the menu bar into a wrapping multi-line element and hid the overflow. Then I added a line break via ::before and moved the title bar buttons before it via order:, moved them to the right of the window via margin-left: auto, and moved them down with top: until they were visible. Then I added a right padding to create an exclusive space for them on the menu bar and moved them into that space with a negative right margin. toolbaritem { flex: 1; } ensures that certain items on the now flex-styled menu bar are correctly stretched.

Answered By - sonofevil