UserCSS for browser client side decorations

[gaussandhisgun]

Is your feature request related to a problem? Please describe.

Some applications, notably browsers with their own CSD, have a toggle for enabling the system title bar. As it stands now, you can either:

• have an extra bar on the top of your unmaximized browser, wasting screen space
• have an extra set of buttons in your maximized browser, still wasting screen space, but less of it

I propose giving users an option - or, maybe, doing it by the extension? - to change this.

Describe the solution you'd like

Most modern browsers support a way of styling them with CSS. Here's an example on how to use it with Firefox. Perhaps, Unite settings can use the power of GJS to put the userCSS into the browser folders? Or, as an option, create a separate repo with userCSS files for different browsers and link it somewhere in the settings?

Describe alternatives you've considered

I've made this bit of userCSS for Firefox:

#main-window[sizemode*="maximized"] #titlebar .titlebar-buttonbox {
    visibility: collapse !important;
    display: none !important;
}

#main-window[sizemode*="maximized"] #nav-bar {
    padding-right: 3px !important;
}

This was made to fit this theme specifically (as it also conveniently themes Firefox to Epiphany), for stock Firefox the padding-right should be set to 0. Might need some extra handling for left aligned control buttons, but I don't use those, so I didn't add handling for them either.

Additional context

With the aforementioned gnome theme:

Without it (and with padding-right=0px):

[philipl]

For default themed Firefox with left aligned controls, I use this:

:root[sizemode="maximized"] .titlebar-buttonbox-container {
  display: none;
}

I think by hiding the entire container, the padding doesn't matter.