Firefox 67: Dark Mode CSS, WebRender, and more

Firefox 67 is available today, bringing a faster and better JavaScript debugger, support for CSS prefers-color-scheme media queries, and the initial debut of WebRender in stable Firefox.

These are just the highlights. For complete information, see:

CSS Color Scheme Queries

New in Firefox 67, the prefers-color-scheme media feature allows sites to adapt their styles to match a user’s preference for dark or light color schemes, a choice that’s begun to appear in operating systems like Windows, macOS and Android. As an example of what this looks like in the real world, Bugzilla uses prefers-color-scheme to trigger a brand new dark theme if the user has set that preference.

A screenshot of Bugzilla showing both light and dark themes

The prefers-color-scheme media feature is currently supported in Firefox and Safari, with support in Chrome expected later this year.

Additionally, the revert keyword is now supported, making it possible to revert one or more CSS property values back to their original values specified by the user agent’s default styles (or by a custom user stylesheet if one is set). Defined in Cascading and Inheritance Level 4, revert is also supported by Safari.

WebRender’s Stable Debut

Nearly four years ago we started work on a new rendering architecture for Firefox with the goal of better utilizing modern graphics hardware. Today, we’re beginning to gradually enable WebRender for users on Windows 10 with qualified hardware. This marks the first time that WebRender has been enabled outside of Nightly and Beta builds of Firefox, and we hope to expand the supported platforms in future releases.

A drawing of a computer chip with 4 CPU cores and a GPU

You can read more about WebRender in The whole web at maximum FPS: How WebRender gets rid of jank.

More Capable DevTools

Firefox 67 and 68 Developer Edition bring enormous improvements to Firefox’s JavaScript Debugger. Discover faster load times, amazing support for source maps, more predictable breakpoints, brand new logpoints, and much more.

The DevTools Debugger inspecting an application that has spawned several WebWorker threads

We’ve collected the Debugger improvements in their own article: Faster, Smarter JavaScript Debugging in Firefox DevTools.

In addition to the Debugger, the Web Console saw numerous updates, including greater keyboard accessibility and support for importing modules into the current page.

We’ve also removed or deprecated a few seldom-used and experimental tools, including the Canvas Debugger, Shader Editor, Web Audio Inspector, and WebIDE.

Browser Features

Side-by-Side Profiles

Firefox now defaults to using different profiles for each installed version, making it easier than ever to run multiple copies of Firefox side-by-side.

The macOS dock showing Firefox, Firefox Developer Edition, and Firefox Nightly all running simultaneously

In addition, the browser will warn you if you try to open a newer profile with an older version of Firefox, as such mismatches can occasionally lead to data loss. This protection can be bypassed with the new -allow-downgrade command line argument.

Enhanced Privacy Controls

Firefox 67 better protects your privacy online with new Content Blocking options to avoid known cryptominers and fingerprinters.

Screenshot of the new Content Blocking options: Cryptominer and Fingerprinter blockingYou also have more control over your extensions, which can be prevented from running in private browsing windows.

Screenshot of uBlock Origin's settings with a banner reading "Allowed in Private Windows"This is the default for all newly installed extensions in Firefox 67, though your previously installed extensions will receive permission by default. You can adjust these permissions on a per-extension basis by visiting about:addons.

Easier Access to Firefox Accounts and Saved Passwords

We’re working hard to make Firefox Accounts more useful and discoverable this year, starting with a new default icon in the browser toolbar.

Screenshot of the new Firefox Accounts toolbar button and its associated menu

The new icon indicates whether or not you’re signed into a Firefox Account, and makes it easy to perform actions like sending tabs to other devices or manually triggering a sync. Like other toolbar buttons, you can freely move or hide the Firefox Account button according to your preferences.

Check out the many improvements to Firefox’s built-in password manager, including quicker access to your list of saved credentials. You can either click on the new “Logins and Passwords” item in the main menu, or the new “View Saved Logins” button in the login autocomplete popup.

Screenshots of the View Saved Logins popup during autocomplete, and the Logins and Passwords item in the main menu

This can be especially useful if you need to look up or edit a login outside of the normal autofill workflow. And, if you use Firefox Sync, you can access your saved passwords with the Firefox Lockbox app for Android or iOS.

Web Platform Features

Support for legacy FIDO U2F APIs

We’ve enabled legacy FIDO U2F support to improve backwards compatibility with sites that have not yet upgraded to its standards-based successor, WebAuthn.

These APIs make it possible for websites to authenticate users with strong, hardware-backed authentication mechanisms like USB security keys or Windows Hello.

AV1 on Windows, Linux, and macOS

Firefox now supports AV1, a next-generation video codec, on all major desktop platforms. Also, playback on those platforms is now powered by dav1d, a faster and more efficient AV1 decoder developed by the VideoLAN and FFmpeg communities.

JavaScript: String.prototype.matchAll() and Dynamic Imports

Firefox joins Chrome in supporting the matchAll() String prototype method, which takes a regular expression and returns an iterator of all matching text, including capturing groups.

The import() function can now be used to dynamically load JavaScript modules, similarly to how the static import statement works. Now it’s possible to load modules conditionally or in response to user actions, though such imports are harder to reason about for build tools that use static analysis for optimizations like tree shaking.

And more awaits!

This release includes plenty of other fixes and enhancements not covered here, and lots more to come. So what are you waiting for? Download Firefox 67 today and let us know what you think!

About Dan Callahan

Engineer with Mozilla Developer Relations, former Mozilla Persona developer.

More articles by Dan Callahan…


20 comments

  1. rugk

    Yeah, prefers-color-scheme is a really nice thing!

    I have even also made an add-on for Firefox that you can use to toggle that dark mode directly in your browser (not only at OS level): https://addons.mozilla.org/firefox/addon/dark-mode-website-switcher/?src=external-moz

    May 21st, 2019 at 09:45

    Reply

  2. Wellington Torrejais da SIlva

    Nice things! I love it. Thanks

    May 21st, 2019 at 13:33

    Reply

  3. PhilippeVay

    That’s a lot of nice improvements, congrats Mozilla!

    Configuring “Enhanced Privacy Controls” seems strange to me though: there’s a Strict option that “blocks _all_ trackers detected by Firefox” (emphasis mine, translated from french) and then a Custom option with 4 checkboxes, 2 already checked (I had Strict option enabled previously).
    Cryptominers and Fingerprinters aren’t checked though I’d think that it’d be part of the Strict option.

    May 22nd, 2019 at 08:33

    Reply

    1. Dan Callahan

      Thank you for the information! Sounds like the wording on that label could be improved. The current plan is to default to enabling cryptominer and fingerprinter blocking as part of the Strict preset starting with Firefox 68.

      Since these categories are new with Firefox 67, we wanted to start with them being opt-in. We’ll enable them by default in other contexts as we gain confidence in our blocklists.

      May 25th, 2019 at 03:31

      Reply

  4. Brian Kuss

    Firefox 67 doesn’t open with my default homepage. The Url doesnt appear in the box. However, the addon “New Tab Homepage” continues to open at my default home page.

    I deleted and reloaded Firefox just in case !!!

    May 23rd, 2019 at 05:03

    Reply

    1. Dan Callahan

      Thanks for the report. Would you mind filing a bug about that?

      May 25th, 2019 at 03:33

      Reply

  5. J Redhead

    > import() function
    Jaw. Dropped.
    That’s seriously exciting!

    However, I have a question; how does firefox determine whether a tab is “unused”?
    I have bad memories from when I started a very large Google Drive download in chrome and then opened a couple twitter tabs… naturally, it silently unloaded the google drive page ><

    May 23rd, 2019 at 18:07

    Reply

    1. Dan Callahan

      Right now the “suspending unused tabs” item in the release notes specifically refers to Bug 675539, which is currently triggered when free memory + page file space on the system drops below 384 MB. State that is part of our crash recovery system (form data, etc.) will get restored when the unloaded tab is reactivated, but things like in-progress uploads could be lost.

      To see how this all works, check out the constants defined in AvailableMemoryTracker.cpp lines 53-67 and the conditional on lines 214-215.

      Whenever a memory-pressure event gets triggered, TabUnloader.jsm unloads the least recently loaded tab, starting with tabs that aren’t playing sound and then moving on to ones that are, preferring to keep pinned tabs where possible. Other parts of the browser also respond to the event, releasing font caches, etc. so the memory savings don’t need to all come from unloading tabs (and tab unloading can be disabled by adjusting browser.tabs.unloadOnLowMemory in about:config).

      The goal is to gracefully handle memory so we avoid Out Of Memory crashes caused by the operating system (see Bug 1529556).

      May 24th, 2019 at 02:33

      Reply

      1. J Redhead

        > tab unloading can be disabled by adjusting browser.tabs.unloadOnLowMemory in about:config
        And this is why I use firefox : )

        Anyway, thank you for the very thorough explanation. You’ve managed to reassure me, so I think I’ll leave tab unloading on default and wait to see if I have any issues.

        May 26th, 2019 at 00:42

        Reply

  6. John A

    As a user, not a current techie –
    I have Win 10/64 with three separate user profiles. FF 67 and lost the bookmarks for the owner sign in and a 2nd master Admin user. However, I have a 3rd user, added at a later date where the bookmarks were preserved.
    Each of the three showed a different FF initial screen view.

    Also, FF is prevented from the default browser by Win 10, for users 1(owner) and 2, but for 3 it is allowed.

    There are some other Windows 7 and 10 quirks that differentiate the 3rd user setup from the other two.

    May 23rd, 2019 at 22:24

    Reply

    1. Dan Callahan

      I’m sorry that’s happening to you. Your data should all still be present and safe.

      One reason this could happen is if you installed Firefox 67 in a different location compared to your previous version of Firefox, or if you’ve ever used Firefox Beta or Firefox Nightly with the same user profile data. Please check in about:profiles to see if you have another profile listed. If so, try clicking the “Launch profile in new browser” button to see if that has all of your data. If so go back in and hit the “set as default profile” button and you should be good to go.

      We’ve seen a few cases of this on Reddit and are tracking in Bug 1553526 if you’d like to share your experiences there.

      May 24th, 2019 at 03:18

      Reply

  7. Mohamed

    Great improvements of course! Thanks a lot for the effort on that!
    I’d like to ask about something I like to see it in Firefox, the favicon loading for the bookmarks after installing fresh copy of firefox and starting the sync. Is that part of any future plans?

    May 24th, 2019 at 00:34

    Reply

    1. Dan Callahan

      Ho Mohamed, loading favicons after sync is tracked in (Bug 428378), but it turns out there are significant concerns around privacy and security that we would have to figure out before we could fix it.

      For example, if we retrieved all of the icons after sync, we’d have to connect to every domain you have bookmarked, potentially leak a large part of your browsing history to anyone monitoring the network. That can be especially problematic for users at work, or in countries with aggressive monitoring and firewalls.

      Edit: On Reddit, a user recommended the Checkmarks extension, which can load all of your bookmarks, triggering favicon updates. That might be a good solution for you.

      May 24th, 2019 at 02:49

      Reply

  8. Giovanni Barrantes

    I have lost my history from yesterday and some of my synced tabs since firefox updated yesterday.

    May 24th, 2019 at 08:56

    Reply

    1. Dan Callahan

      Could you please check this Reddit thread and see if it matches what you’re experiencing, and if the workaround (changing the default profile) works for you?

      May 25th, 2019 at 03:41

      Reply

  9. Shawn

    I found “firefox.color” in this update. I am very interested in using this feature but, I have only been able to load the page a few times (out of hundreds of tries).

    May 26th, 2019 at 03:48

    Reply

    1. Dan Callahan

      I’m glad you’re excited about Firefox Color, and sorry you’re having trouble getting to it. It seems working normally for me, so the problem might be on your end. Are you able to access it on a different computer, or a different Internet connection?

      May 28th, 2019 at 04:01

      Reply

  10. A_Ajr

    Removing acces to userChrome.css and userContent.css is very, very, uncool movment! You are killing browser!

    May 26th, 2019 at 07:51

    Reply

    1. Dan Callahan

      Those legacy customizations unsupported, and checking for them slows down browser startup. However, we are not removing access; they’re still available to users who want them. Specifically, starting with Firefox 69, you’ll need to flip toolkit.legacyUserProfileCustomizations.stylesheets to enable those customizations, but to avoid breaking existing users, Firefox 68 will automatically set that pref for you if you have those files in your profile.

      May 28th, 2019 at 04:00

      Reply

  11. Anthony

    It seems the Firefox 67.0 update installed an additional profile as default with the result that my bookmarks were no longer accessible.
    I was able to restore my lost bookmarks as follows:
    From the version of Firefox with the missing bookmarks:
    (1) Select Alt/Help/Troubleshooting information
    (2) Then Application Basics/Profiles (about:profiles). This showed two profiles: e.g., xxxxxx.default-release and yyyyyyy.default
    (3) Select “Set as default profile” to change the defaylt profile.

    May 26th, 2019 at 09:43

    Reply

Post Your Comment