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

UPDATE: Review updated with new information and screenshots to match the public release version.

We told you earlier that 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. Now the latest Firefox 57.0 “Quantum” version comes with the new Photon UI.

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

Advertisement

So without wasting time lets start the review article:

The first noticeable change is the new program icon:

New_Mozilla_Firefox_Quantum_Icon.png

The new icon looks very pretty.

Another 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 uses Windows 10 accent color as shown in following screenshot:

New_Mozilla_Firefox_Photon_Theme.png

Also you can see in the above screenshot, the new version comes with new theme which features square tabs and new icons set.

Advertisement

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
  • Save Page to Pocket
  • Copy Link
  • Email Link
  • Send Tab to Device
  • Take a Screenshot

Page_Actions_Menu_Firefox_Addressbar.png

More options may be added/removed to “Page Actions” menu in future versions.

Mozilla has also combined address bar and search bar. If you want to restore the classic search box on toolbar, following article will help you:

[Firefox Tips] Restore Search Box on Toolbar and Remove Extra Spaces Around Address Bar

Now the “Downloads” button on toolbar is set to auto-hide which means the icon now only appears on the toolbar when the browser is downloading something, otherwise it remains hidden. If you want to restore the “Downloads” icon permanently on the toolbar, following tutorial will help you:

[Tip] Restore Missing “Downloads” Button on Firefox Toolbar

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

The new UI also allows to change the density of toolbar buttons. Right-click on the toolbar and select “Customize” option. You can also select this option from the hamburger menu. In the customize window, you’ll get a new “Density” drop-down box. It contains 3 options: Normal, Compact and Touch.

Density_Option_Mozilla_Firefox_Customize_Window.png

You can select any of these 3 options to change the toolbar buttons size.

A new Firefox 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 “Let’s Get Started” tour/wizard which helps users in finding various options:

Getting_Started_With_Firefox_Page.png

If you want to remove the Firefox icon and get started tour feature from new tab page, following tutorial will help you:

[Firefox Tip] Remove Firefox Icon and Let’s Get Started Tour from New Tab Page

The “New Tab” page has also been replaced by a new activity stream feature which shows top websites list, highlights and a search box.

Redesigned_New_Tab_Page_Mozilla_Firefox.png

Check out following articles to learn more about this feature and to restore classic “New Tab” page in Firefox:

[Firefox Tip] Enable Hidden Secret Activity Stream on New Tab Page

[Firefox Tip] Restore Classic New Tab Page in Mozilla Firefox

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.

New_Look_Mozilla_Firefox_Preferences.png

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

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

You can disable the new UI and restore old classic Preferences page using following tutorial:

[Firefox Tip] Restore Old Classic Options (About:Preferences) Page

NOTE:

If you don’t like the new Photon UI, you can restore classic UI and theme in Firefox with the help of following tutorial:

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

And you can also disable unnecessary UI animations part of the new Photon UI to make Mozilla Firefox super fast:

[Tip] Make Mozilla Firefox Faster by Disabling UI Animations

Also Check:

Tips-n-Tricks Collection for Mozilla Firefox Quantum

Published in: Mozilla Firefox

About the author: Vishal Gupta (also known as VG) has been awarded with Microsoft MVP (Most Valuable Professional) award. He holds Masters degree in Computer Applications (MCA). He has written several tech articles for popular newspapers and magazines and has also appeared in tech shows on various TV channels.

Comments

NOTE: Older comments have been removed to reduce database overhead.

  1. 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! 🙂

  2. When will they learn that copying Chrome will not net them Chrome’s users.

  3. @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.

  4. 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?

  5. 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

  6. 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.

  7. @Mel most user don’t know how to use a computer. They don’t know shortcut, not even simple one like copy/past. Just check blog.mozilla.org/metrics/2011/08/25/do-90-of-people-not-use-ctrlf/

    I can see also how hiding/showing button can disturb most of those user.

    So now you can call the Mozilla team stupid, but keep in mind they analyze metric result before making decision.

  8. If you invoke a YouTube video in a background tab, it will have a ‘Play’ icon on the tab.

Leave a Comment

Your email address will not be published. Required fields are marked *

NOTE: Your comment may not appear immediately. It'll become visible once we approve it.