We set out in 2022 to reimagine Firefox’s design to be fast, modern and inviting the first time you run it and every day after. We’ve always had your back on privacy, and still do. Now with today’s new Firefox release we’re also bringing you a modern new look designed to streamline and calm things down so you have a fresh new web experience every time you use Firefox.
We’re living in a frenetic time, where people are dealing with tough changes in our daily lives and hard to solve problems are popping up everywhere. We think the browser should be a piece of software you can rely on to have your back, pleasant to look at and working seamlessly with the web.
We’re also on a mission to save you time, whether that’s by making pages load faster, using less memory, or by streamlining everyday use of the browser. Good design is invisible. So if things just work, you don’t really think about it. But a ton of thought has been put into the flow. Our users who have tried the new Firefox have said, “the fact that I was using a new web browser slipped into the background of my consciousness.” And that’s just what we were going for.
A sleek, clean Firefox design backed by research
Going into the Firefox redesign, our team studied how people interact with the browser, observing their patterns and behaviors. We listened to feedback and gathered ideas from regular people who just want to have an easier experience on the web. We obsessed over distractions, extra clicks and wasted time. The resulting new design is simple, modern and fast and delivers a beautiful experience to support what people do most in Firefox.
Bright and buoyant throughout
The fresh new Firefox is easy on the eyes, bright and buoyant on screens of all sizes — computers, phones and tablets. A new icon set, crisp typography and thoughtful spacing throughout all reflect a modern aesthetic for 2021.
Streamlined toolbar and menus
The toolbar is naturally where you start every web visit. It’s the place where you type a URL to go somewhere online. After web page content, it’s what you look at most in Firefox. The new toolbar is simplified and clutter-free so you get to the good stuff effortlessly.
Menus are where key Firefox actions and commands live. We’ve consolidated extra menus to reduce clutter and be more intuitive through the three bars menu in the upper right or by right-clicking to activate it on your computer screen. The new look reorganized and streamlined our menus to put the best actions quickly at your fingertips.
When privacy protections are engaged in Firefox, the shield icon in the toolbar glows subtly indicating that we’re working behind the scenes to protect you from nosy trackers. Fun fact: Firefox has blocked more than 6 trillion — that’s trillion with a T — trackers since we rolled out enhanced tracking protection, stopping thousands of companies from viewing your online activity.. We’re talking about tracking cookies, social media trackers, fingerprinters, cryptominers and more. Go ahead and click on the shield to see who and what Firefox is blocking… you might be surprised by what you find out.
A new look for tabs
Based on our research, we found out that more than half of you have 4+ tabs open all the time, and some of you have more, a lot more. And we feel that! Tab as much as you like, friends. Tabs got a makeover so they are now gently curved and float above the toolbar. It’s an exciting change that also serves as a reminder that tabs aren’t stationary. So grab those tabs, move them around and organize them as you like. Tabs also got a glow-up to be a touch brighter when active.
No one likes to be interrupted when they’re in the flow, but if you must be alerted to something, at least it can look good. We’ve updated notifications and alerts of all kinds in Firefox to take up less space for less jarring interruptions. Plus, non-essential alerts and messages have been removed altogether. Media autoplay is turned off by default, so you won’t be interrupted by a random video blasting unexpectedly. Spotting a noisy tab is easy, and unmuting/muting takes just a quick click on the tab itself.
Expanded privacy protections
Mozilla makes it our mission to put your privacy and security first in the technology we develop. Our goal is for you to worry less every time you go online. The latest Firefox release comes to you with next-level security and privacy that you’ve come to expect from us.
The best private browsing mode out there
All browsers have a private browsing mode, but none match Firefox. The popular Total Cookie Protection moves from the optional strict setting to always-on in private browsing. This feature maintains a separate “cookie jar” for each website you visit while browsing privately. Any time a site deposits a cookie, Firefox locks it up in its own cookie jar so that it can’t be shared with any other website.
An even better Firefox for iOS and Android
The fresh new look covers Firefox everywhere, from desktop browsers to Android and iOS mobile devices. The iOS experience is optimized for iPhone and iPad, with key actions now taking fewer steps for quicker searches, navigation and tab viewing. With refinements in iconography and menu names, the whole browsing experience is more cohesive and harmonious across every platform.
Shape Up Your Floats
CSS Shapes lets a floated element sculpt the flow of content around it beyond the classic rectangular bounding box we’ve been constrained to. For instance, in the above screenshot and linked demo, the text is wrapping to the shape of the grapes vs the image’s border. There are properties for basic shapes all the way up to complex polygons.
You can learn more in Josh Marinacci’s post on the new CSS Shapes tooling from yesterday.
Variable Fonts Are Here
No punny title, I’m just excited! OpenType Font Variations allow a single font file to contain multiple instances of the same font, encoding the differences between instances. In addition to being in one file, font creators can expose any number of variation axes that give developers fine-grained control on how a font is rendered. These can be standard variations like font weight (font weight 536 looks right? no problem!) or things that were never previously available via CSS (x-height! serif-size!). In addition to the candy-store possibilities for typography nerds, being able to serve a single file with multiple variants is a major page weight savings. Dan Callahan goes much deeper on the grooviness to be found and how Firefox makes it easy to tweak these new custom values.
The Developer Toolbar was an alternate command repl input in the Firefox Developer tools, apart from the Web Console. I say “was” because as of Firefox 62, it has been removed. It was always a bit hard to find and not as well-advertised as it could be, but did encapsulate some powerful commands. Most of these commands have been progressively migrated elsewhere in the devtools, and this is wrapped up in Firefox 62, so we’ve removed the toolbar altogether.
One of the last commands to be migrated is screenshot, which is a power-user version of the “take a screenshot” button available in the devtools UI. The screenshot command is now available as :screenshot in the Web Console. For example, have you ever needed a high-res screenshot of a page for print? You can specify a higher pixel density for a screenshot via the command: :screenshot –dpr 4
There are a bunch of other options as well, such as specifying output filenames, capture delays, and selector-cropped screenshots. Eric Meyer wrote a great primer on the power of :screenshot on his blog, and it will change your page capture game.
- Avoided always posting a NSEvent to the event loop every time a non-native event is ran which should reduce the CPU usage of the WindowServer process.
- The Picture-in-Picture toggle button can now be moved to the opposite side of the video from the new context menu option Move Picture-in-Picture Toggle to Left (Right) Side.
- Reduced power usage of software decoded video on macOS especially in fullscreen. This includes many streaming sites like Netflix or Amazon Prime Video.
- RLBox — a new technology that hardens Firefox against potential security vulnerabilities in third-party libraries — is now enabled on all platforms.
- We’ve added a User Agent override for Slack.com, which allows Firefox users to use more Call features and have access to Huddles.
Previous release notes:
- Building on Total Cookie Protection, we’ve added a more comprehensive logic for clearing cookies that prevents hidden data leaks and makes it easy for users to understand which websites are storing local information. Learn more
- Firefox now supports logging into Microsoft, work, and school accounts using Windows single sign-on. Learn more
- The simplify page when printing feature is back! When printing, under More settings > Format select the Simplified option when available to get a clutter-free page. Learn more
- HTTPS-First Policy: Firefox Private Browsing windows now attempt to make all connections to websites secure, and fall back to insecure connections only when websites do not support it. Learn more
- We’ve added a new locale: Scots (sco)
- The address bar now provides Switch to Tab results also in Private Browsing windows.
- Firefox now automatically enables High Contrast Mode when “Increase Contrast” is checked on MacOS
- Firefox now does catch-up paints for almost all user interactions, enabling a 10-20% improvement in response time to most user interactions.
- Picture-in-Picture: Pop a video out of the browser window so you can stream and multitask.
- Expanded Dark Mode: Take it easy on your eyes every time you go online.
- An extra layer of protection: DNS over HTTPS (DoH) helps keep internet service providers from selling your data.
Simplified unencumbered navigation: The first step to going anywhere online is the toolbar, just type in the URL and press return/enter, and you’re off. In some ways this area serves as your car’s dashboard that you look at every time you get behind the wheel. We kept it simple and focused on these three key areas of the toolbar: 1) Navigation – back, forward and refresh 2) Address Bar – privacy shield (so you know your ambient information is always protected), security lock and where to type in your URL. 3) Frequently Used Settings – reader mode, zoom level and bookmark. Our intent was to make it easier for people to focus on the frequently used items in this area and easily get to where they needed to go.
Streamlined clutter-free menus: There are many ways to get to your preferences and settings, and we found that the two most popular ways were: 1) the hamburger menu – button on the far right with three equal horizontal lines – and 2) the right-click menu. So, we prioritized the content based on what people clicked on when they visited the menu. We made the labels less cryptic and clear and easier to understand, and we removed some icons so that it was easier for people to see at a glance where they wanted to go.
Productivity-inspired new tab design: Tabs. We use them every day. They signal where you are, but we need them to do more work. Everything from conveying information about what video is playing to where your next Zoom meeting is. It’s no surprise that more than 50% of people have 4 tabs or more open. We redesigned these tabs so that they floated neatly, and we added the visual indicators, like blocking autoplay videos until you’re ready to visit that tab. We detached the tab from the browser to invite you to move, rearrange and pull out tabs into a new window to suit your flow, and organize them so they’re easier for you to find.
We shushed notifications: Your web experience shouldn’t be bogged down by a bunch of notifications, and if you have to be given a heads-up on something, it should look good and not be a distraction. You’ll see consolidated the panels so you can respond more quickly and get back to why you were online in the first place faster. We specifically reduced some of the frustration and re-prompting associated with getting in and out of Google Meet meetings. Thanks to this pared down interface, you can get to all your web calls and meetings with fewer clicks.
Fresh, new Firefox for iOS: And we took care to pay attention to the key touches particularly on Apple devices. The improved iPhone and iPad experience includes a modernized, optimized and differentiated Firefox user interface. We reduced the steps to search in a new tab by automatically popping up the keyboard, emphasizing the ability to do quick searches with the search engine logo, and adding the append feature. You’ll see improved navigation around the app with new tab views and moved the synced tabs into the tab tray for better discoverability on any device. We refreshed design elements such as iconography and menu items naming to be consistent across our desktop and Firefox for Android platforms.