Firefox Photon: new design mockups show interface, and more

We talked about the upcoming Firefox interface design change, codename Photon, before here on Ghacks, and even revealed a mockup showing some of its interface elements last week.

Turned out later that the mockup was not by the Photon team, but by another Firefox team that used tidbits of Photon in the screenshot.

Anyway, if things go well, Photon will be part of Firefox 57. The browser is one of the most important releases for Mozilla in a long, long time.

It will put the focus on WebExtensions as classic add-ons won't run anymore in that version. Additionally, plans are underway to make it the first stable version with bits from project Quantum included.

Firefox 57 will be released in November 2017 if things go as planned.

Note: The following screenshots are mockups. While the final product may look similar or even identical, it is also possible that things may change before the final release of Firefox 57.

Firefox Photon

The first mockup shows Firefox running the Photon user interface, and the about:home page of the browser.

The UI has not changed all that much when you compare it to last week's mockup. Tabs are still displayed in rectangular shape, and the address bar is still centered. Some icons look different, and some have been moved around if you compare their position to current stable versions of Firefox.

The reload button has been moved to the left side of the address bar for instance. There is also a ... icon which is new, and some of the icons on the right have a new design but have identical functions.

The about:home page shows several new features. There is a new Firefox icon in the top left corner that displays several tips when you click on it.

The about:home page is the first page that opens after a new Firefox installation. The new tips section, if it survives and becomes part of the final release, introduces core Firefox features to users of the browser (especially new users).

It highlights Sync, Extensions, Search, Customization, Privacy and making Firefox the default browser.

You may check the "mark all as complete, and hide the tips menu" box to hide it on the about:home page.

What's the three-dots menu used for in the address bar? That was a question that I heard more than once after I published the first mockup screenshot last week.

Another mockup, this time on Bugzilla, answers that question.

The menu is divided into four sections in the mockup. The first lists copy URL and email link options; these are self-explanatory and don't need further explanation.

The second group lists options to save the page to Pocket (Mozilla acquired Pocket some time ago), to set a reminder, to send the page to another device, and to take a screenshot.

It is unclear right now what "set a reminder" does. It resembles the Snooze Tab Test Pilot project which allows you to hide a tab for a time period.

The third group shows a placeholder for extension entries, and the fourth the share functionality.

All that is been revealed right now is what you see. Information on customization options, for instance removal of options not needed, are not available right now.

Mozilla published several videos highlighting new animations that the organization plans to launch in Firefox 57 for opening closing the arrow panels, downloads, bookmarks, session restore, and awesome bar.

Now You: What's your impression of Photon so far?