fixing the ugly Firefox window styling

This is a quick, illustrated guide on making Firefox not look horrible on my rather esoteric window manager setup.

the problem

My browser looks bad and I do in fact mind that very much. It behaves very badly within my window manager, it has an ugly box shadow while none of my other windows have that, the top corners are rounded, and my window manager considers its border to be offset from what I see. In my computing life, Firefox is the only program that subjects me to such interface terror.

We will get rid of the shadow, the rounded corners, and the offset. I am still dealing with some weird behavior on resizing, but this is a start.

my situation

I use hikari as my Wayland compositor. More information can be found on my equipment page.

At time of writing, I run Firefox 121.0 and hikari 2.3.3 on Linux.

Note that in the screenshots below, the hot pink border and text at the top-left of the windows I show are drawn by hikari, and indicate information about the window and my focus when I hold the super key.

squaring the corners

Since Firefox relies on GTK for its windowing, we are at the receiving end of its client-side decoration (csd). So, to change this we need to change the global GTK styling for my system. We can do that by setting up a stylesheet at ~/.config/gtk-3.0/gtk.css.

mkdir -p ~/.config/gtk-3.0
touch ~/.config/gtk-3.0/gtk.css

To get rid of the rounded corners, we add the following to this file.

headerbar {
    border-radius: 0;
}

To see it take effect, we need to quit Firefox and restart it.

removing the shadow

Next, we can remove the shadows by telling the appropriate elements to set its box-shadow property to none.¹

decoration,
decoration:backdrop,
.csd.popup decoration,
.fullscreen decoration,
.maximized decoration,
.tiled decoration,
.tiled decoration:backdrop {
    box-shadow: none;
}

fixing the strange offset

Still, we are left with the weird offset. I initially thought that it was caused by the shadow being interpreted as being part of the inner window content. But it’s still there. It turns out that it actually is set by the margin property. This is quite curious to be, but it may be the result of an interplay between my compositor and the GTK theming.

It works, so we add this to the previous statement.

    margin: 0;

I find it so strange that there does not seem to be a better way of doing this. Which is to say: there is probably a better way, and I just do not know about it yet. (Maybe through some theming app that I wouldn’t want to use either??) But I hope it helps somebody, at least. I know it will help my future self.

my solution — the just copy-and-paste edition

// Copy this file to `.config/gtk-3.0/gtk.css`.
decoration,
decoration:backdrop,
.csd.popup decoration,
.fullscreen decoration,
.maximized decoration,
.tiled decoration,
.tiled decoration:backdrop {
    box-shadow: none;
    margin: 0;
}

headerbar {
    border-radius: 0;
}

epilogue: firefox why r u acting this way?

Still, Firefox sometimes behaves very badly when I try to resize it by mouse. Perhaps it gets ‘overwhelmed’ by the large number of resize requests. It just freezes with respect to resizing, and it takes effect a couple seconds into when a movement to make the window smaller.

If you have some pointers on how to fix this, or some things I may want to try, please let me know.