[Review] Upcoming “Proton” Design Refresh UI in Mozilla Firefox, How-to Instructions Inside

If you are bored with the current theme or UI (User Interface) of Mozilla Firefox web browser, here is a good news for you.

Mozilla developer team has started working on a visual design refresh codename “Proton” for Firefox which will change look-n-feel of Firefox browser including menus, tabs, address bar, toolbars, panels, etc.

At the moment, Proton design is under development and testing phase. If you are using public stable version of Firefox, you’ll need to wait for the release of Firefox 89 stable version which will come with this new Proton design included. Firefox 89 will be released in mid of 2021.

But if you want to test the new Proton design right now, here is an awesome news for you.

You might be aware of Nightly builds of Firefox browser which are testing builds of Firefox developed for advanced users who want to test new features and changes before they are released for public use (more Info). Mozilla has started implementing new Proton design in Firefox Nightly builds and you can download and install Firefox Nightly version to start testing new Proton design UI.

To test Proton design, first of all download and install Firefox Nightly build from following link:

Don’t worry. It’ll not replace your existing Firefox stable version. Both Firefox versions will run simultaneously side-by-side.

Once installed, launch Firefox Nightly and you’ll get similar UI or interface as Firefox Stable version because Mozilla team has not activated or enabled new Proton design by default.

Interested users will need to manually activate and enable Proton design UI by modifying a hidden preference/flag. Following steps will help you in enabling Proton design UI in Firefox Nightly builds:

1. Open Firefox Nightly and type about:config in the addressbar and press Enter. It’ll show you a warning message, click on “Accept the Risk and Continue” button. It’ll open Firefox’s hidden secret advanced configuration page i.e. about:config page.

2. Now type proton in Search filter box and look for following preference in the window:

The preference value is set to false by default, which means the new Proton design UI is currently deactivated and disabled in your Firefox Nightly version.

3. To activate and enable new Proton design UI, double-click on browser.proton.enabled preference and set it to true. Alternatively, you can click on the Toggle icon given next to the preference name.

Congratulations. You have successfully activated and enabled new Proton design UI in Firefox Nightly.

But you’ll not see any visual change even after enabling the above mentioned preference/flag. Why? Because Proton design UI is in early stage of development and Mozilla team will start adding new UI changes in future versions of Nightly builds.

Don’t worry! There are a few visual changes which are going to become part of new Proton design UI. The latest Nightly build comes with these new changes which are tab redesign (via), Firefox App Menu redesign (via), address bar redesign and context menus redesign (via).

Following screenshot shows new tab redesign in Firefox Nightly builds:

Following screenshot shows new App Menu redesign in Firefox Nightly builds. App Menu redesign in not final yet and you’ll get only 3 options available in new App Menu which are New window, Library and Exit.

Following screenshot shows new address bar redesign in Firefox Nightly builds:

Following screenshot shows new context menu (right-click menu) redesign in Firefox Nightly builds:

Again these new redesigns are disabled by default and you’ll need to enable them manually. Following steps will help you in enabling the new redesigned UIs in Firefox Nightly builds:

1. Again open about:config page in Firefox Nightly and accept the warning message.

2. Now type browser.proton.tabs.enabled in Search filter box. The preference doesn’t exist by default and you’ll need to create it manually.

Select Boolean radio button and click on (+) or Add button.

It’ll enable new tab redesign in Firefox.

3. Now type browser.proton.appmenu.enabled in Search filter box. The preference doesn’t exist by default and you’ll need to create it manually.

Select Boolean radio button and click on (+) or Add button.

It’ll enable new app menu redesign in Firefox.

4. Now type browser.proton.urlbar.enabled in Search filter box. The preference doesn’t exist by default and you’ll need to create it manually.

Select Boolean radio button and click on (+) or Add button.

It’ll enable new address bar redesign in Firefox.

5. Now type browser.proton.contextmenus.enabled in Search filter box. The preference doesn’t exist by default and you’ll need to create it manually.

Select Boolean radio button and click on (+) or Add button.

It’ll enable new context menu redesign in Firefox.

6. You’ll need to restart Firefox Nightly to apply new UI changes. If you have opened multiple tabs and you don’t want to lose them, you can restart Firefox without losing tabs using methods given in following tutorial:

[Tip] How to Restart Mozilla Firefox Without Losing Tabs

That’s it. Restart Firefox Nightly and you’ll see new redesign UIs activated.

At the moment, only above mentioned UI or visual changes are available in Firefox Nightly builds which will become part of upcoming Proton visual design refresh.

We’ll keep updating this article whenever new UI changes are introduced in Firefox Nightly builds. So keep checking this page regularly.

Also Check:

[Review] The New Photon User Interface (UI) of Mozilla Firefox

[Review] The New “Australis” UI of Mozilla Firefox Web Browser

[Tip] How to Restore Classic UI in Mozilla Firefox (Sort of)