GNOMify Firefox

GNOME uses the so-called Client Side Decorations (CSDs), meaning that there is no titlebar and the headerbar has useful functions, as you can see in GNOME-Web (Epiphany) or Files (Nautilus)

I am trying to use a heavily integrated desktop, so the only non-GNOME CSD that is installed is Firefox – mostly due to GNOME-Web not performing to my standards. At first I tried to tweak Firefox using this tutorial, but it is now regretfully redundant.

The following tutorial was tested ONLY with the Arc Themes, with some tweaking it could work with any GTK theme.

  • First of all we need to download the Arc Theme (whichever of the three you want). Firefox default would look like this now :

Arc :

Arc Darker :

Arc Dark :

  • The must have Extensions we need are :
  • On Classic Theme Restorer we need to change the following settings :
    • Set “Tabs” page set the position to Tabs not on top (v1) – [tabsnotontop=false] attribute (page 1)
    • Change the Tab Height to 32px and the width to : min200px / max 300px
    • On the “Tabs” page, enable the “Hide tabs toolbar with only one visible tab (page 2)
    • Disable the Firefox button
    • On the “General UI”, enable the Movable status panel, Stop & reload: combine buttons on toolbar and Movable window controls for full screen mode
    • Hide the Menu button separator
    • On the “Location Bar”, enable the Hide ‘stop & reload’ buttons and Hide ‘go’ button (page 1)
    • On the “Location Bar”, enable the Hide labels (page 3)

You can also customize elements of the User Interface through the default customization of Firefox. You can add / remove / rearrange virtually every aspect of it.

  • One of the most important aspects of the Classic Theme Restorer extension is that you can insert custom css code. In order to achieve uniformity on the coloring of Firefox between the Headerbar and the Tab toolbar, I inserted the following (only for Arc Dark and Arc Darker):
#urlbar-wrapper {
  height: 36px !important; 
  margin-bottom: -1px !important;
}
#urlbar {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  background: #404552 !important;
}
.tabbrowser-tabs  {
background: #2f343f !important;
}
toolbar {
background: #2f343f !important;
}
  • On the Hide Caption Titlebar Plus extension we need to
    • Set the “Show Custom TitleBar” to Never
    • Set the “Enable Customizable Buttons” to No (Fx. default)
    • Set the “Custom Controls” (at top-right corner) to Auto. Current theme’s skin (legacy position)
    • Disable the Firefox custom “Home” application button
    • Set the ” Show Firefox’s Main Menu (Panel) button” to Always (Fx default)
    • Use the “alternative hide-titlebar feature” – which takes the place of the discontinued HTitle extension

Finally there are three more optional addons to finalize tweaking Firefox :

  • GNotifier (Integrates Firefox/Thunderbird’s notifications with the native notification system)
  • Page Title in URL Bar (Matches GNOME-Web’s style), with the following addon’s settings :

The final Firefox theme will look like this :

* I would like to thank all the developers for their hard work, especially horst3180 for the excellent Arc Theme (I “borrowed” the themed Firefoxes from the github page), please give praise were it’s due! *

PS. As in any tutorial, I cannot guarantee that any of these settings could end uo crippling your system, so tweak at your own risk!