Make Firefox Quantum look native in Fedora 27

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

 

Using Software

37 Comments

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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;
      }

  6. 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.

  7. 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

  8. 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.

  9. This is great. I have always though that the blatant forehead in FF [and many other applications] looked off. Thank you for this tip.

  10. Frank

    Why doesn’t Mozilla put the address bar into the header bar instead of the tabs? Would make more sense…

  11. 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.

  12. Maciej

    Perfect! I was looking for something like this.

  13. This is great. This even makes Firefox more beautiful.

  14. Costa A.

    I activated it while i’ m not on a default theme, and it looks fine, although not a big change than before.

  15. 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?

  16. 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.

  17. Dykow

    Works only with Adwaita, with custom GTK theme the window controls get buggy :/

  18. This is awesome!!! Been missing adwaita etc. but this is actually better!

  19. 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/

  20. Or.. make almost everything look native with “Pixel Saver” extension! 😁
    https://extensions.gnome.org/extension/723/pixel-saver

  21. 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.)

  22. Nice. Does it work for other desktops as well or this is Gnome only?

  23. Garbage_Killer

    And for those using kde + firefox ?

Comments are Closed

The opinions expressed on this website are those of each author, not of the author's employer or of Red Hat. Fedora Magazine aspires to publish all content under a Creative Commons license but may not be able to do so in all cases. You are responsible for ensuring that you have the necessary permission to reuse any work on this site. The Fedora logo is a trademark of Red Hat, Inc. Terms and Conditions

%d bloggers like this: