The history of Firefox UI is important ensuing from my project compensates for the shortcomings of this Proton UI and inherits the strengths of the existing Firefox UIs.
Or no longer it is far also one among the programs to stop divisions in the neighborhood, on condition that there get been forks every time the UI adjustments primary.
Early (v1 ~ v3)
Sizable orange buttons stand out.
v1~v3 are classic UI that we be aware as soon as we were in the early 2000s.
There are colours in the icon, and abstraction is no longer achieved.
It became a lot like Cyber internet Explorer 6.
- Obvious because the icons make simplest one ingredient
- Involving coloration for each icon
- Not fused with OS UI
- UI peak
- Opposite to the contemporary interface philosophy as there is not always a abstraction
- Inconsistent icon size and texture
Interface points in 3.0 are neatly documented in 3.0 Dwelling windows Default Theme Concerns.
Cyber internet Explorer 7, Chrome, Firefox v3.5 [wikipedia]
As you could explore,
- Menu bar takes up narrate
- Not neatly superior with Aero Glass
- Advanced toolbar constructing
Problems like this were scattered.
UI peak comparison
A fork that quiet retains the UI from this time is SeaMonkey, which forked to retain Mozilla suite aspects like mail, newsgroups and feeds, and IRC chat.
Traditional (v4, 2011.3)
Thus, v4.0 became released after a neat-scale UI reconstruction project became launched!!
It’s the longest-lived UI and cherished by many folk.
Recurrently called a
- Orange app button on the high left like the image
- Calmer tone
- Win7 Aero Glass enhance
- Stop / Reload / Plod at the side of one button
- Tab moved to the high
- Abnormal interface with neat-scale adjustments
The most encouraging ingredient in the Traditional UI is the fabricate of the app button.
The existing menu bar serves to embody all menus that are complicated to embody in the major UI, occupies a first-rate amount of narrate and is complicated to explore with submenus.
Unlike Safari and Chrome, the set all menu objects were divided into particular person pages or system buttons, they were pushed into the app button, retaining the configuration of the existing menu bar as primary as likely, while supplementing the shortcomings.
- Much less advanced
- Takes up less narrate
- Matches the UI of Dwelling windows
- Home up and dazzling up menu groups
Also, like regular Firefox (orange), privacy mode (crimson), and nightly (blue), the coloration changed looking on this method place or distribution channel, and it served as an identification, so we can judge that it became real for branding.
Or no longer it is very symbolic, but it absolutely’s neatly designed, so if
userChromeJS is presented at some point, I indubitably are looking for to to find an possibility to revive the app menu button (no menu bar – menu bar – menu button).
Nonetheless, I conception to exhaust just some of the benefits of a recent UI and fabricate it in a technique that makes the many of the narrate with the mega dropdown, and maximizes the responsiveness / narrate utilization of the menu by arrangement of a slope-essentially based arrangement like Amazon.
The 2d most well-known change is the introduction of UI abstractions and systematic interactions.
Reload buttons on the URL bar are combined into one, so that
Plod when coming into an address,
Stop at some point of loading, and
Reload button after loading are displayed for simplicity.
And the interaction has been changed to be systematic when hovering or clicking.
Each and every line has an on a standard foundation, waft, and pressed narrate.
To boot, you could explore that mozilla get worked laborious to present a UI optimized for Dwelling windows, Linux, and Mac.
A fork that retains the Traditional UI neatly is Mild Moon.
Australis (v29, 2014.04)
Australis, which had a mode of likes and dislikes in comparison with Proton UI.
It became a transformation that put a mode of effort into simplicity.
Linux, Mac, Dwelling windows’s Firefox Firefox and Flux: A Original, Beautiful Browser is Coming
- Zigzag Tab
- Trot & Plunge customizing UI
- Substitute settings UI pop-up to contents(tab) format
- Panel UI that appears like a pill
- Purchase place bar
The Firefox crew wanted it to feel like a flash and gentle.
For the time being (2021), the UI with rounding is a pattern (Apple Bigsur, Microsoft Fluent, Google Field materials You), so the resolution to assemble it feel subtle appears real.
The final menu layout became carried out utilizing heatmaps.
It could well be complicated to retain the fabricate balance ensuing from the moderately varied sizes, but it absolutely has been carefully designed to diminish facet outcomes.
Also generally known as light theme, an API is geared up to predicament the coloration and background of the major menu, making customization less complicated.
A gentle-weight theme that can embody a background image
The customizable UI that allows you to freely predicament up functions on panels and toolbars by plod and fall is an ideal advantage in comparison with varied browsers that are quiet complicated to customize.
Trot & Plunge customizing UI
It’s likely you’ll explore the panel UI (pop-up of the hamburger menu), which has been vastly divided between likes and dislikes.
I’ve heard a mode of oldsters suppose or no longer it is like a pill, but actually, the Firefox crew’s design became also an ambitious resolution to transfer far off from existing PCs (Dwelling windows, Linux, Mac) and get continuity with cell (Android telephones and tablets, Dwelling windows 8 Metro UI, Firefox OS).
In the high, the aim became a failure in that there get been many varied likes and dislikes.
Steal into consideration multi platform
But every other considerable change is the Settings UI.
In the existing Firefox, the next nightmare unfolded when the atmosphere show veil became configured in a pop-up arrangement and new functions were added.
Nonetheless, with the appearance of a impart material-essentially based UI that manages tabs,
Contents essentially based Surroundings UI
improvements get been made in diverse aspects.
- Consistency between devices/OS: could even be displayed with a identical interface whether or no longer it is far PC or cell
- Home up as tabs: Reveals as tabs, striking off the must to find and tackle separate windows and amplify consistency with the salvage
- Purposeful: Increased than a pop-up window, so extra impart material could even be displayed and never more helpful barriers.
System the set you could feel varied facts
Australis UI detail
- Plod forward simplest when it is far likely to traipse forward.
- Salvage button is on hand simplest when there’s a download
- Combine Bookmarks and Bookmarks menu
There’s a fork browser called Basilisk.
Basilisk’s customization UI
Photon (v57, 2017.11)
Photon became a normally neatly-purchased replace to the UI that became frail until June of this year(2021), when Proton looked.
- System: Record essentially based panel and internet page actions, library menu
- Animation: Add animation to actions of buttons, tabs, panels, etc.
- Visible redesign: tabs, icons, density, etc.
- Performance: improved initialization, synchronization reflow, etc.
- It looks to be moderately sophisticated
- Handiest light weight issues are allowed.
For a visual redesign, the tab form has been changed to a exact angle, and the icon has been changed from PNG to SVG essentially based.
Grid form panels, which many folk hated, get been changed to list format.
The internet page motion menu became a bit that could preserve the address bar dazzling and customizable.
Web page motion menu
As for the combined bookmark menu, a library menu that bundles numerous things straight away has looked.
When the Photon fabricate is adopted, the point of differentiation from varied browsers is the animation.
The cubic curve values indicate that it is far designed to face out and be responsive, and it takes beefy agreeable thing about the compositor with the SVG filmstrip technique.
Overflow menu | Salvage Birth / Progress / Conclude
Bookmark / Pocket / Overflow Animation
Tab loading indicator that differentiates it from varied browsers
For my piece, I admire fullscreen animations in Firefox.
Obvious and gentle
The title bar is designed to exhaust agreeable thing about OS-inform aspects similar to highlight coloration in Dwelling windows and transparent background in Mac.
Spotlight coloration of window title bar
Mac Vibrancy Carry out
To boot, it helps diverse show veil sizes and input devices ensuing from of the density atmosphere and the plod narrate atmosphere.
Trot narrate atmosphere
Photon also actively tried efficiency improvements as piece of Firefox Quantum.
For the time being, XUL had a mode of concerns(1, 2, 3), so XPCOM/XUL-essentially based extensions were eradicated, and Chromium’s Web extension became moved to, and the UI started to be changed with Web converse-essentially based.
Waterfox G3 is a photon essentially based fork with Australis tab form.
Proton (v89, 2021.06)
Here is the moment I started working on issues.
- Neatly organized menu
- Icon that are stunning sufficient to remind of the threshold
- A few of animations that I admire & skeleton shows
- Classy coloration arrangement
- Life like rounding
- Meticulous implementation
- Excessively huge padding
- Purchase icons from menu
- Appears to be like like a button moderately than a tab with a linked gape
- Confusion of tab indicators
- Purchase internet page motion menu in address bar
- Delete bookmarks / library animations and illustrations
- The icon size of the new tab contents
- Modified the hunt bar of the new tab to be conducted on the URL bar.
The disadvantages of proton fabricate will be dealt with individually, so we are able to form out the sure aspects.
What I admire essentially the most about Proton is that the menus and modal containers are also styled and the messages are clearer.
Evaluating colours and icons, extra consistent coloration tones, thinner icons, and rounding stand out.
Assorted Forms of Colors / Thick Icons / Lawful Angles in Photon
Proton’s Consistent Colors/Thin Icons/Rounding
I also like the overall animation change, which is stunning dazzling.
Reload & Salvage animation
But every other well-known change is the introduction of a skeleton show veil to assemble the open feel like a flash. (Handiest windows)
Other itsy-bitsy but right adjustments are when there is not always a favicon files, it is far correctly processed and displayed in a brand new tab.
In Photon it became empty
Automatically generated favicons (high row)
One of Proton’s most puzzling choices became the removal of the Web page Actions menu button.
From heatmaps by arrangement of telemetry
The importance of the internet page motion menu became to encourage as a mode of overflow menu to cleanly force usually frail functions.
The low frequency of the heatmap became justified for its design and is not always a design to favor it.
Present Australis also organized the menu in conserving with the heat plan, but it absolutely became cramped to combining functions or changing the layout, and did no longer favor functions that were taking part in a sufficient role.
Here, we simplest dealt with the UI of Firefox, but we strive to make a aggressive advantage by examining the strengths and weaknesses of on the least 10 varied browsers excluding Firefox and including them in the roadmap.