You may already know about the introduction of Firefox Quantum in Fedora. Since Quantum brought changes to the extension marketplace, you may wonder how to get it to look like a native Fedora app. Enter client side decoration. This article will show you how to use this feature to make Firefox look like other apps in Fedora.
Configuring client side decoration
Client side decoration allows the application to use its own decorations. Traditionally the window manager is in charge of providing the title bar, close button, border, re-size grips, and so on. These graphical elements are called decorations. With client side decoration, an application can tell the window manager, “No thank you, I don’t want decorations.”
The latest Firefox Quantum available in Fedora 27 has native support for client side decoration. To use it, open Firefox and type about:config in the location bar. Then search for widget.allow-client-side-decoration. Set the value to true by double-clicking on it. Finall, restart Firefox and enjoy the new look.
Firefox with client side decorations
UPDATE: Note that in Firefox 59 and later, the name of the setting to change is now browser.tabs.drawInTitlebar.
Here’s how Firefox Quantum looks compared to other GNOME applications. The client side decorations will also pick up some of the customizations if you’re running a non-stock theme for GNOME. This makes the difference even more noticeable.
Firefox with CSD looks more like native GNOME apps
johanh
Use a black theme and it looks even better.
fdelapena
Not needed to set Adwaita dark, you may use the dark variant of default adwaita by setting: widget.chrome.allow-gtk-dark-theme to true. It does not affect page content elements this way.
woprandi
It doesn’t work without force adwaita dark on tweaks
fdelapena
Just to clarify, it works with “Adwaita” (default) and enabling the global dark theme. It is not the same as “Adwaita-dark” theme, just in case.
Using Adwaita (default) with global dark theme allows to keep buttons readable in Firefox 57 with the widget.chrome (not widget.content) parameter in about:config.
Matt Anderson
With Firefox 57.01 on Ubuntu, I can not find that setting in about:config.
fdelapena
Ubuntu may be using an older GTK+ version not yet compatible with current client-side decorations code.
Isaque Galdino
Hi, I just test it and it seems you need to use Firefox default theme or it’ll look ugly, with a white strip above the tabs. Thanks.
John Smith
This is a great tip!
By the way, I wonder when Firefox will be Wayland compatible (currently, it seems to run as an X application using Xwayland — I wonder if that affects the way videos in the browser are played). That said, it is a great browser.
Felix
There’s actually a nightly version of Firefox that supports Wayland natively.
You can download it as a Flatpak to install alongside the regular Firefox here: https://firefox-flatpak.mojefedora.cz/
However, it isn’t very stable or fast yet.
GOGI
Does it use the same profile or it creates its own one?
Felix
It uses it’s own profile as it is a flatpak Application.
Yauhen
With this method, there is a weird thin border on the top of the window which does not look nice if you use any non-default theme. :/
Another approach is to hide window decorations completely in maximized mode
kelevra90
Add this to your userChrome.css:
#nav-bar {
border-top-style: none !important;
}
GOGI
The bad side of this tweak is that it doesn’t render properly when {close,minimize,maximize} buttons are set to the left…, it simply doesn’t work. If anybody has a workaround?
Steve
You’ll need to enable the title bar for Firefox for this to work.
Right-click on the top bar and select “Customize”. On the customization page, look at the bottom left, and you will see a checkbox for “Title Bar”. Enable it and you’ll see the windows controls on the left side now.
It alters the look of Firefox slightly by adding a black border around the interior window.
GOGI
Thank you Steve, indeed it works, I just tested it, but it appears to be useless as the theme I use is already set up to behave the same way with key set up to false in about:config, so no need for me to enable it.
Anyway thanks.
Mattias Bengtsson
That cross for closing the window (top right next to the tabs) annoy me as hell though. It looks so off compared to my other windows.
Wolfgang
The feature is not ready yet, that’s why it’s hidden in the about:config
Matthew Bunt
Thank you for mentioning this. I had heard about client side decorations in Firefox but could never find the right setting to activate them. This modification allows me to get rid of the Pixel Saver GNOME shell extension as the big empty firefox title bar was really visually distracting and wasting space. Thanks again.
Chris
This is great. I have always though that the blatant forehead in FF [and many other applications] looked off. Thank you for this tip.
Frank
Why doesn’t Mozilla put the address bar into the header bar instead of the tabs? Would make more sense…
Orgian
Just an additional note: in order for this to work you have to uncheck “Title Bar” on “Menu > Customize…”, otherwise even with client side decorations enabled, it will look exactly the same.
Dan
But with “Title Bar” disabled, the inactive look of the window is the same as the active one. Bad, if you’re using the keyboard and simply for identifying which window is currently active.
Maciej
Perfect! I was looking for something like this.
Krsh
This is great. This even makes Firefox more beautiful.
Costa A.
I activated it while i’ m not on a default theme, and it looks fine, although not a big change than before.
Jim
This is a great tip because it gives me space back at the top by removing the Firefox title bar (which, of course, also makes it more consistent with other GNOME apps). But that is the only difference I’ve noticed. Did this make any other changes that I may not have spotted?
Kevin Dahl
This looks a bit better, now just need FF to work with Adwaita Dark… currently many UI elements with Adwaita Dark show up with a dark grey background, and often also have black text. Like the new tab search, for example.
Matthew Bunt
I recall a similar problem when I was first transitioning to using the dark theme. I solved it by setting the following option in about:config
widget.chrome.allow-gtk-dark-theme – True – Enables dark theme
widget.content.allow-gtk-dark-theme – False – Prevents theme colors from being used in web content (like search and input fields)
Kevin Dahl
I don’t find that either of those really change anything – on the New Tab window for instance, I still get a grey search box with black text, and dark UI elements scattered all throughout different web pages. I’ve also tried solving it with user CSS, but that’s even worse to pin down.
It may be that whatever they did to fix it no longer works with Gnome 3, or Wayland, or who knows what… It is quite possibly the longest recurring issue I have ever seen with Firefox though:
https://bugs.launchpad.net/ubuntu/+source/firefox/+bug/220263
In the end I just change my .desktop file to set the theme via ENV to Adwaita-Light.
Dykow
Works only with Adwaita, with custom GTK theme the window controls get buggy :/
Mark Clarkson
This is awesome!!! Been missing adwaita etc. but this is actually better!
Nate
I use the Gnome extension called “No title bar” and a Firefox persona called “Dark Development Theme “.
The FF persona “Black by MaDonna” is also nice, however, “Black by MaDonna” has a slight brown while I prefer the slight blue that Dark Development Theme displays.
https://extensions.gnome.org/extension/1267/no-title-bar/
https://addons.mozilla.org/en-US/firefox/addon/dark-development-theme/
Ivan Augusto
Or.. make almost everything look native with “Pixel Saver” extension! ????
https://extensions.gnome.org/extension/723/pixel-saver
Christian
Looks nice and clean but triggers a weird bug for me: video playback in fullscreen mode gets ever so slightly transparent. I did not notice it at first and then thought my monitor got burned in but as the pattern changed i realized that it shows the windows below. After disabling client-side-decorations everything went back to normal. I use the proprietary nvidia driver btw. (I had some of the bugs mentioned above as well.)
crossingtheair.wordpress.com
Nice. Does it work for other desktops as well or this is Gnome only?
Garbage_Killer
And for those using kde + firefox ?