A detailed rendering of Firefox’s new design

On June 1st, Mozilla Firefox 89 will be launched. Starting today, Firefox will shine in a whole new light. This article presents the new “Proton” design in detail, with a special focus on comparing the existing and new design.

Everything new in June: new design for desktop, Android, iOS

Mozilla has been working on a new design for Firefox called “Proton” in the past few months. About Proton was the first on this blog worldwide mentioned.

While the focus of the reports has been on Firefox for Windows, macOS, and Linux, there will also be visual changes for smartphone browsers Firefox for Android and Firefox for iOS, albeit not to the same degree. First and foremost, it is the icon design language that will run across Firefox for all platforms. This article introduces the new Firefox desktop design in detail.

welcome, new user

It starts with the introductory tour for new users. The old welcome page was still fairly simple and BoringMozilla now works with a huge variety of images and text, which brings more emotion and makes Firefox look more vibrant.

New – Icons

With few exceptions, all icons in Firefox have been replaced by new ones. What stands out: The new icons are distinctly thinner than the old ones, which makes Firefox look less heavy.

The courage to do something new (tab)

Certainly the first thing that catches your eye as a current Firefox user, but also as a user of another browser, is the look of the private tab. When a new browser design is pending, tabs are traditionally an element of review. Most of the time, the change is limited to the clarity of the curves. With Firefox 89, Mozilla breaks new ground. This starts with the fact that the classic connection between the tab itself and its associated content area is no longer applicable. A bold design decision, but in direct comparison contributes to a noticeably more modern look.

Another special feature of the new tab design is the newly added status line when playing media – an application unknown from any other browser. Whether it’s blocking autoplay, tab mute, or whether the video is on the tab in what’s called picture-in-picture mode – the second tab line displays the status in text form.

By the way: If you don’t like the second line, you can deactivate it via about: config. To do this, you must complete the browser switch.tabs.secondaryTextUnsupportedLocales in short the language used via about: config, i.e. for Firefox in German ,de. Then restart Firefox.

Title bar and “three-dot menu”

Of course, there were also adjustments to the address bar as part of the new design. In addition to code swapping and color modification, the most noticeable change here is definitely the removal of the “three-dot menu” introduced with Firefox 57, which the page-specific actions were laid behind. In principle, this was a good idea, but in reality it is not used much and users do not know about such a list of other browsers. Plugin developers didn’t really accept this position either; As a general rule, toolbar buttons are also provided for page-specific actions. So Mozilla decided to back off and remove this list to simplify things for the user.

This actually didn’t remove any posts. Whatever was previously accessible through it is still available through other places or can be accessed differently with Firefox 89. An example of this is the built-in screenshot function, which has an optional Firefox 89 button which, like all other buttons, It can also be dragged to the toolbar if you want. The functionality of adding so-called OpenSearch search engines has been integrated into the address bar drop-down menu and is more clear than before.

New main menu and scoreboard design

The main menu has also been simplified, as it no longer contains any icons and still looks much more straightforward. Bookmarks, History, and Downloads are now easy to access as they have been moved from the old Library menu item to the first level.

The new menu design is triggered by all the panels in the Navigation Toolbar area.

New dialogue design

The design of the various Firefox dialogs has also been adapted accordingly.

Revised informational bars

Various information bars have also been redesigned, which are now integrated into the Navigation Toolbar and can no longer be imitated by websites. Some bars have been prioritized, so that they now appear less clear.

New Windows 10 and macOS context menu with dark mode support

Windows 10 users get a more modern look of the context menu, which fits better with Windows 10 design and also supports Windows dark mode. Old context menus do not support this. Windows 7 and Windows 8 users still get the old look.

The conversion is significantly larger on Apple macOS, because here Mozilla switches from “implementing fake context menu” to native context menus – one of the oldest user requests still open on Bugzilla with a ticket age of 21 years now. This not only guarantees better system integration and a more attractive appearance, but also provides support for OS dark mode.

Firefox home page

The appearance of the standard Firefox start page has also been modified. But not only the design of the homepage has changed. The splash page is still configured in Firefox’s settings, but the Settings icon on the splash page now activates a new interface for configuring the splash page.

More focus on the basics

The context menus in Firefox have been restructured, and some entries have been renamed or removed if they are rarely used. The goal was for the user to find what was really important more quickly. On the other hand, a “new tab” entry has been added to the context menu of the tab bar, which in theory would not be necessary since there are already several ways to open a new tab, but this has already been requested by some users and other well-known browsers as well. .

Focus is also the keyword for the Navigation Toolbar, which by default has fewer buttons than before. The Library menu, for example, is no longer visible by default as it no longer offers any feature due to the simplification of the main menu.

In some cases, a smart approach has also been chosen: “Check Accessibility Properties” appears only in the context menu if Firefox developer tools are used at least once. The button for the start page, which is no longer displayed by default, will only be removed for existing users who are using the standard Firefox start page and have not yet used this button.

Less interruptions

In the past, Firefox made contextual recommendations in various situations, for example to refer to the sync function in Firefox. All recommendations of this type have been removed so as not to interrupt the user with his tasks.

The default becomes the system attribute

Firefox has so far been delivered in four different designs: Standard, Light, Dark and Firefox Alpenglow. There are still four options, although there are only three different themes.

While the standard design corresponds to the bold design when using a dark operating system design, there were differences between the standard and the light when using the light operating system design. Removed this unnecessary complexity so that the standard theme now always matches 1: 1 with the light or dark theme, depending on whether the OS is set to light or dark. Accordingly, the option has been renamed to System Theme.

Compact mode

What few users know: Firefox has a compact mode that takes up a little less space. For users who have already used it, the compact mode is still active. For all other users, the associated setting is now hidden behind the browser.compactmode.show key in about: config. After setting the switch to true, the Density setting is available again under Menu> Additional Tools> Customize Toolbar ….

Further improvements will follow

Mozilla does not end with Firefox 89. With the following updates, more detailed improvements and fixes will follow that no longer hits Firefox 89. In addition, Mozilla is also working on larger projects such as macOS ‘extensive dark mode or new tool tips for tabs and bookmarks Reference.