Make Firefox look like Safari

Note: starting from June 2020 I will only maintain the files for Firefox ESR. The files releated to “normal” Firefox (a.k.a. the Rapid Release version) have been discontinued due to the patronizing attitude shown by Mozilla when it decided to remove a hidden option to get rid of the Megabar, basically forcing that unwanted feature upon all users. I will maintain the ESR files (and I will keep using Firefox ESR as my primary browser) for as long as that kind of patronizing attitude stays away from the ESR version. The full rambling on this topic is at the bottom of this page.

Also, I recently switched from ESR Light Mode to ESR Dark Mode, and I improved quite a lot of things there. Fact is, the default options which I originally didn’t customize were ok for the Light Mode, but are a real kick in the eye in the Dark Mode. And now that I’ve started using that version myself, I realised that some more work was needed there. And I’ve done it.

***        ***        ***

Here are the files I created to make Firefox look like Safari.

I have already updated each release a few times, so I would suggest you come back here every now and then to check if the version you are using has been updated.

There are some Pro Tips and some Troubleshooting info at the bottom, and if you are not familiar with userChrome.css and userContent.css yet, I wrote a little guide to get you started (see here).

License

  Dark Mode  

60-1.png

Firefox ESR v68.9.0 – Dark mode
userChrome.css (v4.0.15) (updated 25-Jun-2020)
userContent.css (v4.0.3-C) (updated 25-Jun-2020)

Firefox v74.0 – Dark mode
(discontinued => for reference only)
(not as nice as the ESR version as explained above)
userChrome.css (v3.1.1)
userContent.css (v3.0.2-C)

  Light Mode  

60-2.png

Firefox ESR v68.9.0 – Light mode
userChrome.css (v2.0.12) (updated 11-Jun-2020)
userContent.css (v2.0.3-C)

Firefox v74.0 – Light mode
(discontinued => for reference only)
→ userChrome.css (v1.1.1)
userContent.css (v1.0.3-C)

Pro Tips

The userChrome files are intended to work out of the box for a variety of users with different width of the Firefox window.

This means that, whether you are using Firefox on a 13″ laptop or full-screen on a 27″ screen, both the URL bar and the items in the Bookmark Toolbar are going to be centred (assuming that you don’t have any other button except the Option Menu in the Toolbar – otherwise keep reading).

60-1

Still, you may want to further customise the userChrome.css for your screen layout, and at the very beginning of each userChrome file there is an easy-to-modify section which lets you do so.

But before you start modifying userChrome.css, make sure to remove any Flexible Space from the nav bar. Right-click somewhere on the top and select Customise…

Firefox CSS 16.png

In the picture below, the rectangular shape next to the back/forward buttons is called Flexible Space, and it’s something used at mainstream level to modify the nav bar.

Firefox CSS 17.png

Since we are at pro level here, get rid of all the flexible spaces by dragging them away from the nav bar and click Done. Then, open userChrome.css and go to this section:

/* ================================================ */
/* >>>>>>    OPTIONAL USER CUSTOMIZATION      <<<<< */
/* ================================================ */

This is what can be easily customized in that section:

● Toolbar buttons
● Reload button
● Min width/height of Firefox window
● Colour of Add-on buttons (Dark Mode only)

Toolbar buttons

Let’s say you have added some buttons in the toolbar on the right-hand side of the URL bar, next to the Option Menu.

60-3.png

In the above example two buttons were added (add-ons, overflow menu) and as a result the URL bar is no longer centred. Worry not my friend.

Look for this code at the beginning of the userChrome file:

/* >>>> ---------
/* >>>> STEP 1: 
/* >>>> ---------
...
#urlbar-container {
...
padding-left: 0px !important;

Remove the 0 and add 29px per each button you added on the right-hand side of the URL bar. Then save the file and re-launch Firefox to have the change taken into account by Firefox.

In my case I added two buttons, and as such the code became:

padding-left: 58px !important;
60-4.png
URL bar centred once again

If you added some buttons on the right-hand side and some on the left-hand side of the URL bar, just compute the number of pixels to add with this formula:

px =
+29 x (n° buttons on the right-hand side)
-29 x (n° buttons on the left-hand side)

If you added two buttons on the right-hand side and two buttons on the left-hand side, then you don’t need to do anything and you can leave the  0px  as it is.

If you added two on the right-hand side and one on the left-hand side, the number to put is  29px .

Etc.

Reload button

Once you are happy with the configuration of the buttons, you can move the reload button somewhere else in the nav bar.

Look for this code at the beginning of the userChrome file:

/* >>>> ---------
/* >>>>  STEP 2: 
/* >>>> ---------
...
#stop-reload-button{ 
transform: translateX(20px); 
...

Change the  (20px)  to reach the configuration of your preference.

I personally like to have the reload button just outside the right end of the URL bar, and with the window size of the example the code which works is:

#stop-reload-button{  
transform: translateX(635px);

60-5.png

***        ***        ***

This is the code which works in the example above with two buttons next to the Menu and the reload button right next to the URL bar.

#urlbar-container {
padding-left: 58px !important;
#stop-reload-button{  
transform: translateX(635px);

Let’s say that I now add a button on the left-hand side of the URL bar: the URL bar moves as a result, and the configuration no longer works.

60-6.png

To fix that I’m going to decrease the URL bar padding by 29px, and without doing anything to the reload button, the configuration goes back in place.

#urlbar-container {
padding-left: 29px !important;
#stop-reload-button{  
transform: translateX(635px);

60-7.png

Window width

If you reduce the width of the Firefox window after you have made the above changes, the URL bar will remain centred but the Reload button will not “follow” the URL bar.

You can prevent this from happening by locating this code at the beginning of the userChrome file:

/* >>>> ----------
/* >>>>  STEP 3: 
/* >>>> ----------
#main-window {
min-width: 900px !important;

You can then change it by selecting the right number of px for your configuration of preference, just be aware that doing so may affect fingerprinting resistance.

Thanks to the new code, you can no longer reduce the width of the Firefox window with your mouse, and as such your customisation will remain effective at all times.

60-8.jpg
My set-up on the 27″ iMac
60-9.jpg
I actually use the Light Mode
Colours of Add-on buttons (Dark Mode only)

Out of the box, the Add-on buttons in the Toolbar and in the Overflow Menu won’t have their original colour, but rather will be black and white.

60-10.png

Should you wish to use the original colours instead, or just a lighter grey filter, locate this code at the beginning of the userChrome file:

/* >>>> ----------
/* >>>>  STEP 4:
/* >>>> ----------
#nav-bar .toolbarbutton-1:not(:-moz-any([type="menu-button"], 
#nav-bar-overflow-button)) {
filter: grayscale(100%) !important; 
}
.widget-overflow-list .toolbarbutton-icon {
filter: grayscale(100%) !important; 
}

Either comment those lines (by adding a  *  at the very beginning of each line) or reduce the  (100%)  to display some colour.

60-11.png

Troubleshooting

Starting from Firefox v69, userChrome.css and userContent.css are no longer loaded by default when you launch Firefox. To change that and keep using your customization, you need to type about:config in the URL bar and then set toolkit.legacyUserProfileCustomizations.stylesheets to true.

If the CSS files still don’t work after setting that pref, make sure that you are running the latest version of Firefox to match the version the above files were written for (if you use Firefox BetaDeveloper and Nightlythe userChrome.css most likely won’t work spotlessly there).

If after doing all that the CSS files still don’t work for you, feel free to contact me either through the blog (link) or through Reddit (link).

Cheers.

***        ***        ***

Important note Firefox v77

Mozilla has been trying really hard to transform itself into a pointless and patronizing corporate entity, completely oblivious to the feedback from its users and driven instead by whichever the latest fashion in terms of managerial nonsense is.

A clear sign that the top person is both incompetent and affected by the “visionary complex,” meaning that he/she would like to play the part of the visionary (e.g. Steve Jobs) but clearly lacks the skills. And in turns this means that, when the latest “visionary” feature is introduced but the reaction from the users is overtly negative, the option to disable that feature gets removed and the feature is just forced upon the users.

This is what happened with the megabar 🤮. Firefox 77 has just been released, and the process to get rid of that pointless thing has become overly complex. It’s still possible to do it via CSS, sort of, but the end result is subpar. It’s no longer possible to disable it in about:config, and this is a clear sign of the patronizing horror Mozilla has become (they are catching up with Apple and its subpar iOS in terms of being patronizing).

I have now uninstalled Firefox, keeping only Firefox ESR for the time being, which is based on v68. If one day this patronizing attitude displayed by Mozilla reaches also the ESR version, oh well that one will go as well and I’ll migrate to a different browser.

The files listed above for v74 work flawlessly up to v76, but not in the latest v77 because of the megabar 🤮 problem. Feel free to switch to ESR instead, since the entire CSS still works wonderfully there. And if you don’t want to use the ESR version, just switch to a different browser.

Fact is, not updating the browser is a major security risk, hence you should not remain in v76 just to avoid the megabar 🤮 (if you are wondering, the ESR version is based on v68 but still gets all the latest security updates).

Note Firefox v75

Mozilla has this childish and annoying attitude of introducing pointless things into Firefox just for the sake of it, embracing a tickbox and job-creation mentality which resembles quite closely corporate dynamics.

Problem is though, Mozilla is not a corporation. Rather, it is a non-for profit organization supported by a wide community of volunteers, and as such you would not expect any resemblance to said tickbox and job-creation corporate mentality.

Or maybe their actions are just driven by a childish approach to product development, who knows…

Anyway, in v75 a pointless and irritating “megabar” has been introduced. Feel free to go in about:config and change these prefs to get rid of it:

urlbar.megabar => false
urlbar.update1 => false

The userChrome then starts working as normal. I use the ESR so I have not noticed any other parts of the code breaking, but if something else requires attention please let me know.

Thanks

Related:
• Getting started with userChrome.css

Read also:
• How to back up Bitwarden using KeyPassXC on macOS
• How to change login screen wallpaper on macOS Catalina