How the Photon Design System Overhauled Firefox 57

In November 2017, Mozilla released Firefox 57, marketed as "Firefox Quantum," which introduced a massive visual redesign powered by the Photon design system. This article provides an overview of how Photon modernized the browser's interface by replacing curved elements with sharp, rectangular tabs, unifying the address and search bars, restructuring the application menus for better usability, and introducing adaptive themes and fluid animations to create a faster, more intuitive user experience.

Transition from Curves to Sharp Geometry

Prior to version 57, Firefox used the Australis design language, which was defined by curved, sloped tabs. The Photon design system completely discarded these curves in favor of sharp, squared-off rectangular tabs. This geometric shift maximized vertical and horizontal screen space. It also made the active tab instantly recognizable by highlighting it with a bright, colored line along the top edge, while inactive tabs blended seamlessly into the background toolbar.

Streamlined Navigation and the Unified Bar

Photon significantly decluttered the main navigation toolbar. For new installations, it merged the previously separate URL bar and search box into a single, unified address bar. Inside the right side of this unified bar, Mozilla introduced the "Page Actions" menu, represented by three horizontal dots. This menu grouped actions relevant to the current webpage—such as bookmarking, copying links, taking screenshots, and sending tabs to other devices—keeping the main toolbar free of excess buttons.

Overhauled Menus and the New Library

The main application menu, accessed via the three-line "hamburger" icon, was completely rebuilt. Photon replaced the previous bulky grid of large icons with a clean, top-to-bottom text list paired with small icons. This traditional layout allowed users to scan and find settings much faster.

Additionally, Photon consolidated user data into a single location by introducing the "Library" icon, which looked like books leaning on a shelf. Clicking the Library icon gave users one-click access to their Bookmarks, Viewing History, Downloads, Synced Tabs, Screenshots, and Pocket list.

Adaptive UI Density and Native Themes

Recognizing that modern hardware varies widely, Photon introduced adaptive user interface density. Through the customization menu, users could change the spacing and size of the browser's toolbars. Photon offered three modes:

• Normal: Optimized for standard desktop and laptop use with a mouse.
• Touch: Enlarged buttons and menus to accommodate fingers on Windows tablets and touchscreen laptops.
• Compact: Minimized toolbar height to give maximum screen space to webpages.

Photon also included built-in Dark and Light themes and adapted its window borders to match the native look of the user's operating system, particularly Windows 10 and macOS High Sierra.

Modernized Icons and Fluid Animations

To complement the massive under-the-hood speed improvements of Firefox 57, Photon aimed to make the browser feel faster visually. Every icon in the browser was redrawn with thinner, sharper lines to improve legibility on high-resolution displays. Furthermore, Mozilla replaced the old, slow-spinning loading circle on tabs with a brisk, bouncing blue dot. Combined with smooth animations for opening menus and pinning tabs, Photon successfully aligned the browser's visual feedback with its upgraded performance.