A new look is coming to Mozilla Firefox — yes, another one — and in this post we show you what it currently looks like on Ubuntu, and share detail on how to try it out for yourself.

Firefox has had a number of major redesigns in the past, including the Australis UI update in 2014, and the the Photon uplift in 2017. A third is now on the way, dubbed Proton.

When will Mozilla rolls out this ‘visual refresh’? The plan is to do so this year, possibly in Firefox 89 (though arguably 90 would be a more dramatic tent pole). More than a mere tickle around the sides though, the Proton redesign affects various parts of the core browser experience including the URL bar, the hamburger menu, and the tab strip.

Confirmed Proton redesign tweaks include:

  • New “hamburger” menu that is purely text-based, no icons, with rejigged entries
  • New ‘new tab’ page with improved layout and more customisation options
  • New info boxes to make Firefox’s in-app notifications more eye-catching
  • New install flow dialogs (e.g., add-on and plugin installs)
  • New address bar/tool bar with fewer icons
  • New Pocket toolbar icon by default
  • New page alert modals (e.g., ‘are you sure you want to leave this page’)

A few of these are already available to test, but before you go ahead and try them out I need to upturn a lego box and issue a development disclaimer…

Firefox’s new look is under active development. Nothing shown in these screenshots should be considered finished or finalised.

Right, with that out of the way here’s what Proton currently look in Firefox 89 (Nightly) on Ubuntu 20.04 LTS:

Firefox 89 (Nightly, Ubuntu)

In the screenshot above you will see three main differences: a new tab strip, a new hamburger menu, and a less cluttered toolbar. The latter pair of changes are solid improvements. The main menu in particular no longer feels overwhelming or unwieldily, but ordered and navigable now it no longer has icons.

The tab strip however… Well, that does take some getting used to. It’s very different to the standard “tabs are part of the toolbar” design used by pretty much every web browser ever. As Proton is a cross-platform redesign I did wonder if the look was specific to Linux but it also looks like this on macOS too:

Firefox 89 (Nightly, macOS) with Proton settings enabled

The good news is that this “disconnected” tab effect looks better now than it did to start with! The ‘gap’ is less prominent with the new toolbar in place, and the tab strip as a whole adapts to the dark mode setting on Windows and macOS.

Non-active tabs recessive states look more or less like they do pre-Proton.

The bad news is that the chunkiness is intentional. One assumes it is designed to bolster the browser’s touchscreen friendliness. The good news is that the chunky tabs convey more information, as the YouTube tab in this screenshot shows:

Note the now playing tab

A few other interesting changes debuting as part of the Proton refresh include no ‘home’ button on the toolbar; a new Pocket button; replacing the ‘page actions’ menu in favour of in-bar icons/buttons; improving the appearance of modals (e.g., add-on install dialogs); and updating the search chip appearance (see above).

Developers are also working to streamline Firefox’s context menus on some systems, specifically Windows and macOS. On Linux there’s presently no change.

I keep this post updated with Proton changes as and when they occur (so if you hear/see a change before I do please let me know about it via the contact form).

But for now, this is the current state of Proton in Firefox 87 nightly, on Ubuntu. Let me know what you think abo—oh? You want to know how you can try it? 😉…

How to Try Proton in Firefox 85+

Want to enable Proton in Firefox to checkout the changes first-hand? It’s easy enough but there are some things you’ll need to do as it’s not quite as simple as flicking a single switch — at least not yet!

First up, you need to use a recent Firefox Beta or Nightly build to taste the bulk of the work. A few parts do work in the current stable version (Firefox 87) though some are ‘outdated’ compared to nightly builds.

  1. Type about:config in a new tab
  2. Click ‘Accept the risk and continue’
  3. Search for browser.proton.enabled
  4. Click the toggle icon to enable the setting
  5. Restart Firefox

When Firefox opens you’ll notice that not much has changed. This is by design for now; to turn on the ‘Proton’ parts you need add the following boolean settings using the about:config page:

  • Add browser.proton.appmenu.enabled for new condensed text-based menu
  • Add browser.proton.tabs.enabled for new tab design
  • Add browser.proton.toolbar.enabled for streamlined toolbar
  • Add browser.proton.urlbar.enabled for the new URL bar
  • Add browser.proton.contextmenus.enabled for new context menus
  • Add browser.aboutwelcome.design for new welcome screen
  • Add browser.proton.modals.enabled for new modals
  • Add browser.proton.infobars.enabled for new info bar designs

Finally, to get the revamped new tab design search for the browser.newtabpage.activity-stream.newNewtabExperience.enabled setting and enable it.

Restart the browser for all changes to take effect.

This article will be updated as new elements are made available to test, so bookmark this post now and pop back to check out the changes as we spot them.

h/t Montag

Dev News Firefox mozilla proton redesign