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

UPDATED on June 17, 2017: Mozilla has enabled the new compact main menu by default in latest Nightly build. Also a new "Getting Started With Nightly" page has been added.

Mozilla is working on a new design project called "Photon Project" which will bring many UI changes and improvements to the upcoming versions of Firefox web browser. According to Mozilla team, these changes will not land in the beta and public release (stable) channels before at least version 57. So if you are using a stable version of Firefox web browser, you'll need to wait for version 57 or later to see these UI changes.

The good news is that Mozilla has already started implementing these UI changes which are part of the Photon project in Firefox's Nightly builds. Nightly builds are testing builds of Firefox browser which are released almost every day and contains changes and improvements which will be a part of upcoming stable versions of Firefox.

Today in this review article, we are going to list all Photon UI changes and improvements which have been implemented in Firefox web browser.

So without wasting time lets start the review article:

First major change in the UI is the new title bar color. In previous Firefox versions, the title bar color was Gray but now the title bar color has been changed to Dark Blue as shown in following screenshot:

Dark_Blue_Titlebar_Mozilla_Firefox_Nightly.png

Personally I liked the previous Gray color. The new title bar color is a little bit extra dark in my opinion. I hope Mozilla team will make some enhancements to the color in future versions.

The "Forward" button is now always shown. Previously it was hidden by default and was only shown if you used Back button on a web page and there was a page in tab history to go forward.

Also the "Reload/Refresh" button has been moved to the left of the address bar. In previous versions, it was displayed inside the address bar.

The address bar now contains a new "..." icon called "Page Actions" at the right-side which allows users to select various options such as:

  • Bookmark This Page
  • Copy URL
  • Email Link
  • Send to Device

Page_Actions_Menu_Firefox_Addressbar.png

More options will be added to "Page Actions" menu in future versions.

Also the main Firefox menu which is shown when you click on Hamburger icon on the toolbar has been changed to a compact Google Chrome like menu as shown in following screenshot:

Mozilla_Firefox_Photon_UI_Main_Menu_Design.png

BONUS TIP:

There is a new boolean switch in Firefox's about:config page called browser.photon.structure.enabled. It's set to True by default. If you double-click on it to set it to False, it'll disable some UI changes part of Photon Project. For example, after turning off this preference, the classic main menu will be restored. Check out following tutorial for details:

[Firefox Tip] Disable New Compact Menu (Photon UI) and Restore Classic Main Menu

A new Fox emoji/icon has been added to the new tab page at top-left corner:

Fox_Emoji_New_Tab_Page_Firefox.png

When you click on it, it launches "Getting Started With Nightly" wizard which helps users in finding various options:

Getting_Started_With_Firefox_Page.png

You can hide the Fox icon by selecting "Hide the tour" checkbox given on the bottom-left corner of the page. In future, if you want to restore Fox face icon on new tab page, following tutorial will help you:

[Firefox Tip] Restore Fox Face Icon (Getting Started Tour) on New Tab Page

If you are wondering about the Scissors icon present in the toolbar, it's the new "Firefox Screenshots" feature added to the browser. It allows you to take a web page screenshot and then save or share it. You can highlight and capture any desired portion of web pages or the entire page. The taken screenshot is automatically saved on Firefox Screenshots website and a URL is given to share the screenshot with others. You can also download the screenshot on your computer.

Firefox_Screenshots_Feature.png

Mozilla is also redesigning Options (about:preferences) page in Firefox. It has been cleaned up and reorganized to help users in easily finding desired settings and options.

You can learn more about changes to Options page in following article:

Firefox Gets New Updated UI for Options (About:Preferences) Page

NOTE: We'll keep updating this review article whenever some changes are made to Firefox user interface.





Share this article: Facebook | Twitter | Google+ | Reddit | Tell a friend

Posted in: Mozilla Firefox


Other similar articles that may interest you


Comments

  • The 'Customize Page' has also received an overhaul, and the 'saved' items reside in their own toolbar menu, (double right arrow)
    Thanks for the info VG, keep up the good work! :)

  • *(with 'browser.photon.structure.enabled')*

  • When will they learn that copying Chrome will not net them Chrome's users.

  • @ND4SPD's comment "When will they learn that copying Chrome will not net them Chrome's users.":

    I completely agree with you @ND4SPD. Screwgle-Chrome is honestly a RAM hogger (and a performance hogger). My desktop with "24MB of RAM and a Intel Pentium-1 processor WITHOUT MMX-Technology" and Firefox 32-bit ran faster [and froze ten times less] than Google Chrome on my mom's Toshiba Tecra laptop with a Intel-Centrino-Duo processor and 512MB of RAM. (Screwgle-Chrome would start to act up when I opened a 2nd tab. Firefox on my desktop? 100 tabs open [and active all at once] and my computer still wouldn't blink an eye and/or twinge).

    The change to the [color of] the title-bar in Firefox? WHAT A STUPID IDEA.

    AGAIN making the Forward button appear? ([especially] when making it NOT appear unless you have a page to go forward to was a brilliant idea in the first place)? WHAT A *BEYOND*-ASSININE-STUPID idea.

    moving the reload-refresh button BACK to the LEFT of the address-bar when [most] people already got used to where it is inside the address-bar [on the RIGHT-hand-side of the web-address]? STUPID.
    (and it's just taking up more interface real-estate. just like making-again the Forward button appear by default)

    that 3-dot icon? (that the article says is the "page actions" button) who needs that? if i want to copy-paste (and/or cut-and-paste) the web-address, i just highlight it (by double-clicking on the web-address itself. or left-clicking--once on it and dragging the mouse-cursor until all of the web-address is highlighted. or right-click the mouse-button on the web-address and left-clicking "select all" in the appearing context-menu) and then right-click and left-click on "cut" (if i want to "cut") or "copy" (if i want to "copy") in the appearing context-menu. that's it).
    if i want to bookmark/save-to-my-Firefox-bookmarks (or "Favorites", as it's still called in Internet-Explorer), what's wrong with the Star icon? (which was inside the right-side of the Firefox web-address bar in old versions but they changed it to the right side of the Search box, next to the [left of] the Bookmarks-List button, in the Australis user-interface version). LEAVE THINGS [THAT WORK] ALONE MOZILLA!!!!

    also: Screenshots: Hasn't anybody ever heard of the "Print Screen" button on our keyboards? (That has been there since god knows when).
    In Windows all you have to do is press that button, open "Paint", "Paste"--"from-the-Clipboard" onto the empty [white background] "Easel"-thing, and then save the image/file on your computer (save it as a .JPG file, as a .PNG file, as a .BMP file, whatever). and Presto. You have a screenshot of your computer.

    and in Linux-Mint (at least since version-16), it's even easier. You press that "Print Screen" button on your computer-keyboard, and Linux-Mint AUTOMATICALLY makes a screenshot for you of whatever is currently showing on your screen at the time[/moment] you pressed that "Print Screen" button on your computer-keyboard, and saves the image for you as a ".PNG"-file in the "Pictures" section of the Nemo File-Manager. PRESTO! No having to hassle around with this stupid stuff that Mozilla Firesux is adding.

  • i wish they would just make the browser interface fully customizable instead of them doing it themselves. There are other fox browsers that can. its weird I love firefox but i dont use the actual firefox browser. I use cyberfox. Tweaks can make it faster than holy hell, you can make it use your rig's capabilities so it doesnt crash even when you have tons of plugins and addons, you can make it compatible with pretty much any extension, old or new, also make it look as good as you want it to look. What more do you need?

  • the New Tabs page in FF has a new fox face on the upper left corner. clicking on it brings up a 'Getting Started with Nightly' popup box but blank whitespace

  • Firefox new stable version has been released, no Photon yet?

  • VG

    ^^ It'll land in Firefox version 57 or later.

  • Oh ok thank you VG

  • VG, thank you So Much for telling us how to turn this off. The new "compact" menu is at least twice as large and half as usable as the old menu for me.

  • Today, (June 20, 2017), Nightly's whole Header became dark blue!

  • VG

    ^^ Yes and looks very bad. If you enable favorites bar the text color is still Black and its very hard to read the text.

  • Back to normal!
    They fixed that in a hurry! ;)

  • VG

    ^^ Yeah.

Leave a Comment

(required)