https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%5D-0.-Firefox-UI-UX-history Skip to content Sign up * Product + Features + Mobile + Actions + Codespaces + Packages + Security + Code review + Issues + Integrations + GitHub Sponsors + Customer stories * Team * Enterprise * Explore + Explore GitHub + Learn and contribute + Topics + Collections + Trending + Learning Lab + Open source guides + Connect with others + The ReadME Project + Events + Community forum + GitHub Education + GitHub Stars program * Marketplace * Pricing + Plans + Compare plans + Contact Sales + Education [ ] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this user All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} black7375 / Firefox-UI-Fix Public * Notifications * Fork 138 * Star 3.5k * Code * Issues 36 * Pull requests 1 * Actions * Projects 1 * Wiki * Security * Insights More * Code * Issues * Pull requests * Actions * Projects * Wiki * Security * Insights [Article] 0. Firefox UI UX history Jump to bottom MS_Y edited this page Mar 27, 2022 * 10 revisions Pages 6 [ ] * Home * [Article] 0. Firefox UI UX history + Early (v1 ~ v3) + Features + Limits + Explanation + Related Fork + Classic (v4, 2011.3) + Features + Limits + Explanation + Related Fork + Australis (v29, 2014.04) + Features + Limits + Explanation + Related Fork + Photon (v57, 2017.11) + Features + Limits + Explanation + Related Fork + Proton (v89, 2021.06) + Features + Limits + Explanation * Compatibility Issues Solution * Installation Guide * Screenshots * Tips Clone this wiki locally [https://github.com/b] The history of Firefox UI is important because my project compensates for the shortcomings of this Proton UI and inherits the strengths of the existing Firefox UIs. It's also one of the ways to prevent divisions in the community, given that there have been forks every time the UI changes big. Early (v1 ~ v3) Phoenix Phoenix(2002, 09) returns from the ashes following Netscape's maintenance [Firefox early version history] Big orange buttons stand out. Firefox v1~v3 Firefox v1(2004.11), v2(2006.10), v3(2008.6) [The Importance and Problems of Autoupdate] v1~v3 are classic UI that we remember when we were in the early 2000s. There are colors in the icon, and abstraction is not achieved. It was similar to Internet Explorer 6. Internet Explorer 6 Internet Explorer 6(2021, 08) [Internet Explorer 6... Despite how bad this browser was, its layout gives me a nostalgic feeling of surfing the web at a young age...] Features * Clear as the icons do only one thing * Unique color for each icon Limits * Not fused with OS UI * UI height * Contrary to the modern interface philosophy as there is no abstraction * Inconsistent icon size and texture Explanation Interface issues in 3.0 are well documented in 3.0 Windows Default Theme Issues. Internet Explorer 7 Chrome Firefox v3.5 Internet Explorer 7, Chrome, Firefox v3.5 [wikipedia] As you can see, * Menu bar takes up space * Not compatible with Aero Glass * Complex toolbar structure Problems like this were scattered. UI height comparison UI height comparison Complex structure Complex structure Related Fork A fork that still retains the UI from this time is SeaMonkey, which forked to keep Mozilla suite features like mail, newsgroups and feeds, and IRC chat. SeaMonkey SeaMonkey Classic (v4, 2011.3) Thus, v4.0 was released after a large-scale UI reconstruction project was launched!! It is the longest-lived UI and loved by many people. Commonly called a Classic theme. Firefox Classic Firefox Classic Features * Orange app button at the top left like the symbol * Calmer tone * Win7 Aero Glass support * Stop / Reload / Go with one button * Tab moved to the top Limits * Unfamiliar interface with large-scale changes Explanation The most encouraging thing in the Classic UI is the design of the app button. The existing menu bar serves to include all menus that are difficult to include in the basic UI, occupies a considerable amount of space and is difficult to explore with submenus. Unlike Safari and Chrome, where all menu items were divided into individual pages or tool buttons, they were pushed into the app button, preserving the configuration of the existing menu bar as much as possible, while supplementing the shortcomings. * Less complex * Takes up less space * Matches the UI of Windows * Organize and clean up menu groups App menu App menu, a great composition that it won't be a problem to stay until 2021. [How to Display the Menu Bar in Firefox] Also, like general Firefox (orange), privacy mode (purple), and nightly (blue), the color changed depending on the program status or distribution channel, and it served as an identity, so we can judge that it was good for branding. Purple app menu Purple app menu in private mode. [How to turn on private browsing in Mozilla Firefox?] Blue app menu Blue app menu button for Nightly channel [Modifiy Australis UI #4 - icons + text mode] It's very symbolic, but it's well designed, so if userChromeJS is introduced in the future, I definitely want to create an option to restore the app menu button (no menu bar - menu bar - menu button). However, I plan to take some of the advantages of a modern UI and design it in a way that makes the most of the space with the mega dropdown, and maximizes the responsiveness / space utilization of the menu through a slope-based approach like Amazon. Amazon's mega dropdown Amazon's mega drop menu [Breaking down Amazon's mega dropdown] The second most important change is the introduction of UI abstractions and systematic interactions. The Stop / Go / Reload buttons on the URL bar are combined into one, so that Go when entering an address, Stop during loading, and Reload button after loading are displayed for simplicity. And the interaction has been changed to be systematic when hovering or clicking. Firefox Classic Buttons Each line has a normal, hover, and pressed state. In addition, you can see that mozilla have worked hard to provide a UI optimized for Windows, Linux, and Mac. Related Fork Pale Moon Pale Moon A fork that retains the Classic UI well is Pale Moon. Australis (v29, 2014.04) Australis, which had a lot of likes and dislikes compared to Proton UI. It was a change that put a lot of effort into simplicity. Australis Australis Linux, Mac, Windows's Firefox Firefox and Flux: A New, Beautiful Browser is Coming Features * Curved Tab * Drag & Drop customizing UI * Change settings UI pop-up to contents(tab) format * Animation Limits * Panel UI that looks like a tablet * Remove status bar Explanation The Firefox team wanted it to feel fast and soft. Australis oncept sketch Concept sketch [(Re)Designing Firefox] Currently (2021), the UI with rounding is a trend (Apple Bigsur, Microsoft Fluent, Google Material You), so the decision to make it feel soft seems good. Soft texture Curved Tab Soft, streamlined UI [Firefox User-Experience Toronto Workweek] The overall menu layout was done using heatmaps. It may be difficult to maintain the design balance due to the slightly different sizes, but it has been carefully designed to minimize side effects. image image image * Windows * Linux * Mac Also called light theme, an API is provided to set the color and background of the main menu, making customization easier. Light weight theme A light theme that can include a background image The customizable UI that allows you to freely arrange functions on panels and toolbars by drag and drop is a huge advantage compared to other browsers that are still difficult to customize. Drag & Drop customizing UI Drag & Drop customizing UI You can also see the panel UI (pop-up of the hamburger menu), which has been greatly divided between likes and dislikes. I've heard a lot of people say it's like a tablet, but in fact, the Firefox team's intention was also an ambitious decision to move away from existing PCs (Windows, Linux, Mac) and have continuity with mobile (Android phones and tablets, Windows 8 Metro UI, Firefox OS). In the end, the goal was a failure in that there were many different likes and dislikes. Multi platform plan Multi platform UI Consider multi platform Another notable change is the Settings UI. In the existing Firefox, the following nightmare unfolded when the setting screen was configured in a pop-up method and new functions were added. Settings popup UI Settings popup UI [Firefox's Redesigned Preferences Feel More like the Web] However, with the creation of a content-based UI that manages tabs, Contents based Setting UI Contents based Setting UI improvements have been made in various aspects. * Consistency between devices/OS: can be displayed with a similar interface whether it is PC or mobile * Manage as tabs: Shows as tabs, eliminating the need to find and manage separate windows and increase consistency with the web * Functional: Larger than a pop-up window, so more content can be displayed and less functional limitations. Parts where you can feel other details Australis UI detail Australis UI detail * Go forward only when it is possible to go forward. * Download button is available only when there is a download * Combine Bookmarks and Bookmarks menu Bookmark animation Bookmark animation Related Fork There is a fork browser called Basilisk. Basilisk's customization UI Basilisk's customization UI Photon (v57, 2017.11) Photon was a generally well-received update to the UI that was used until June of this year(2021), when Proton appeared. Photon UI Photon UI Features * Components: List based panel and page actions, library menu * Animation: Add animation to actions of buttons, tabs, panels, etc. * Visual redesign: tabs, icons, density, etc. * Performance: improved initialization, synchronization reflow, etc. Limits * It looks a bit complicated * Only light weight themes are allowed. Explanation For a visual redesign, the tab shape has been changed to a right angle, and the icon has been changed from PNG to SVG based. Tab UI Tab UI Grid type panels, which many people hated, have been changed to list format. List panel List panel on Windows 10 and Mac [Photon Engineering Newsletter] The page action menu was an element that could keep the address bar neat and customizable. Page action menu Page action menu As for the combined bookmark menu, a library menu that bundles several things at once has appeared. Libray button Libray button When the Photon design is adopted, the point of differentiation from other browsers is the animation. The cubic curve values show that it is designed to stand out and be responsive, and it takes full advantage of the compositor with the SVG filmstrip technique. Overflow menu animation Download button animation Overflow menu | Download Start / Progress / End Bookmark / Pocket / Overflow Animation Bookmark / Pocket / Overflow Animation Tab loading indicator that differentiates it from other browsers Photon Photon Chrome Edge Chrome Edge Baslisk Whale Baslisk Whale Personally, I love fullscreen animations in Firefox. Clear and soft Photon Photon Chrome Edge Chrome Edge Palemoon Basilisk Palemoon Basilisk The title bar is designed to take advantage of OS-specific features such as highlight color in Windows and transparent background in Mac. Highlight color of window title bar Highlight color of window title bar Mac Vibrancy Effect Mac Vibrancy Effect In addition, it supports various screen sizes and input devices thanks to the density setting and the drag space setting. Density setting Density setting Drag space setting Drag space setting Photon also actively tried performance improvements as part of Firefox Quantum. At that time, XUL had a lot of problems(1, 2, 3), so XPCOM/XUL-based extensions were removed, and Chromium's Web extension was moved to, and the UI began to be replaced with Web component-based. Related Fork Waterfox G3 is a photon based fork with Australis tab shape. Waterfox Waterfox Proton (v89, 2021.06) This is the moment I started working on themes. Proton Proton Features * Neatly organized menu * Icon that are pretty enough to remind of the edge * Some of animations that I like & skeleton screens * Stylish color scheme * Moderate rounding * Meticulous implementation Limits * Excessively wide padding * Remove icons from menu * Feels like a button rather than a tab with a connected look * Confusion of tab indicators * Remove page action menu in address bar * Delete bookmarks / library animations and illustrations * The icon size of the new tab contents * Changed the search bar of the new tab to be performed on the URL bar. Explanation The disadvantages of proton design will be dealt with separately, so we will focus on the positive aspects. What I like the most about Proton is that the menus and modal boxes are also styled and the messages are clearer. Context menu Context menu Photon tooltip Proton tooltip Tooltip Dialog Popup Box Dialog & Popup Box[Content design considerations for the new Firefox] Comparing colors and icons, more consistent color tones, thinner icons, and rounding stand out. Photon's UI Different Kinds of Colors / Thick Icons / Right Angles in Photon Proton's UI Proton's Consistent Colors/Thin Icons/Rounding I also like the overall animation change, which is pretty neat. Reload animation Download animation Reload & Download animation Another important change is the introduction of a skeleton screen to make the start feel fast. (Only windows) Before skeleton After skeleton Loding progress [Performance in progress] Skeleton Screen Skeleton Screen Other small but useful changes are when there is no favicon information, it is properly processed and displayed in a new tab. Empty Site preview In Photon it was empty Automatically generated Automatically generated favicons (top row) One of Proton's most puzzling decisions was the removal of the Page Actions menu button. From heatmaps via telemetry Photon Hitmap Photon Hitmap [Modern, clean new Firefox clears the way to all you need online] The significance of the page action menu was to serve as a kind of overflow menu to cleanly drive infrequently used functions. The low frequency of the heatmap was justified for its purpose and is not a reason to remove it. Existing Australis also organized the menu based on the heat map, but it was limited to combining functions or changing the layout, and did not remove functions that were playing a sufficient role. Australis Heatmaps Australis Heatmaps Here, we only dealt with the UI of Firefox, but we are trying to achieve a competitive advantage by analyzing the strengths and weaknesses of at least 10 different browsers excluding Firefox and including them in the roadmap. * (c) 2022 GitHub, Inc. * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.