Firefox 54: E10S-Multi, WebExtension APIs, CSS clip-path

“E10S-Multi:” A new multi-process model for Firefox

Today’s release completes Firefox’s transformation into a fully multi-process browser, running many simultaneous content processes in addition to a UI process and, on Windows, a special GPU process. This design makes it easier to utilize all of the cores available on modern processors and, in the future, to securely sandbox web content. It also improves stability, ensuring that a single content process crashing won’t take out all of your other tabs, nor the rest of the browser.

Illustration of Firefox's new multi-process architecture, showing one Firefox UI process talking to four Content Processes. Each content process has several tabs within it.

An initial version of multi-process Firefox (codenamed “Electrolysis”, or “e10s” for short) debuted with Firefox 48 last August. This first version moved Firefox’s UI into its own process so that the browser interface remains snappy even under load. Firefox 54 takes this further by running many content processes in parallel: each one with its own RAM and CPU resources managed by the host operating system.

Additional processes do come with a small degree of memory overhead, no matter how well optimized, but we’ve worked wonders to reduce this to the bare minimum. Even with those optimizations, we wanted to do more to ensure that Firefox is respectful of your RAM. That’s why, instead of spawning a new process with every tab, Firefox sets an upper limit: four by default, but configurable by users (dom.ipc.processCount in about:config). This keeps you in control, while still letting Firefox take full advantage of multi-core CPUs.

To learn more about Firefox’s multi-process architecture, check out this Medium post about the search for the “Goldilocks” browser.

New WebExtension APIs

Firefox continues its rapid implementation of new WebExtension APIs. These APIs are designed to work cross-browser, and will be the only APIs available to add-ons when Firefox 57 launches this November.

Most notably, it’s now possible to create custom DevTools panels using WebExtensions. For example, the screenshot below shows the Chrome version of the Vue.js DevTools running in Firefox without any modifications. This dramatically reduces the maintenance burden for authors of devtools add-ons, ensuring that no matter which framework you prefer, its tools will work in Firefox.

Screenshot of Firefox showing the Vue.js DevTools extension running in Firefox

Additionally:

Read about the full set of new and changed APIs on the Add-ons Blog, or check out the complete WebExtensions documentation on MDN.

CSS shapes in clip-path

The CSS clip-path property allows authors to define which parts of an element are visible. Previously, Firefox only supported clipping paths defined as SVG files. With Firefox 54, authors can also use CSS shape functions for circles, ellipses, rectangles or arbitrary polygons (Demo).

Like many CSS values, clipping shapes can be animated. There are some rules that control how the interpolation between values is performed, but long story short: as long as you are interpolating between the same shapes, or polygons with the same number of vertices, you should be fine. Here’s how to animate a circular clipping:

You can also dynamically change clipping according user input, like in this example that features a “periscope” effect controlled by the mouse:

To learn more, check our article on clip-path from last week.

Project Dawn

Lastly, the release of Firefox 54 marks the completion of the Project Dawn transition, eliminating Firefox’s pre-beta release channel, codenamed “Aurora.” Firefox releases now move directly from Nightly into Beta every six weeks. Firefox Developer Edition, which was based on Aurora, is now based on Beta.

For early adopters, we’ve also made Firefox Nightly for Android available on Google Play.

About Dan Callahan

Engineer with Mozilla Developer Relations, former Mozilla Persona developer.

More articles by Dan Callahan…

About Belén Albeza

Belén is an engineer and game developer working at Mozilla Developer Relations. She cares about web standards, high-quality code, accesibility and game development.

More articles by Belén Albeza…


17 comments

  1. ed

    great

    Trying it on my machine with 2c/4t and I can’t go over 3 threads. Is there any limitations for the FF threads that is related to the cores count?

    June 13th, 2017 at 12:50

    Reply

    1. Israel M

      I assume you mean over 3 processes?
      First go to about:support and confirm that “Multiprocess Windows” is enabled. If it isn’t then you may have to disable some addons to get it working.

      Afterwards you can check about:config and look for the “dom.ipc.processCount” setting. Bump it up to 4 and restart if nothing else works.

      Dan or Belen may have a better answer for you :)

      June 13th, 2017 at 16:49

      Reply

    2. Dan Callahan

      If e10s is running, it should be using four processes (+1 UI process) when you have four or more tabs open. Israel’s right in that the way to check this is to open about:support and look at the “Multiprocess Windows” line. If you have n windows open, it should read “n/n“. Two caveats: 1) As part of the roll-out, e10s-multi is only enabled for 80% of the Release population, so we can make sure we didn’t introduce new crashes. Once we’re confident things are stable, we’ll crank it up to 100%. 2) e10s can be disabled if you have certain add-ons or accessibility features enabled.

      June 13th, 2017 at 18:48

      Reply

      1. Egan

        >>>e10s can be disabled if you have certain add-ons or accessibility features enabled

        How can I get the list of my non compatible add-ons blocking e10s?

        Author’s Note: Please see my response below.

        June 14th, 2017 at 01:57

        Reply

  2. Juraj M.

    Finally my Group Speed Dial will be able to override the new tab page! Good job!

    https://addons.mozilla.org/en-US/firefox/addon/groupspeeddial/

    June 13th, 2017 at 14:07

    Reply

  3. o

    I hope that the Material Design in the screenshot is not coming to Firefox. Material Design is terrible. Please don’t go overboard with animation or saturated colors.

    June 13th, 2017 at 18:34

    Reply

    1. Dan Callahan

      No worries, the example app (and the Vue DevTools) are using Material Design, but they’re third party things. The rest is just Firefox’s normal Compact Dark theme, which has been around for a few years. :)

      June 13th, 2017 at 18:38

      Reply

  4. Sapa

    How can I determine which addons hold back swtching to multiprocesss mode?

    Author’s Note: Please see my response below.

    June 14th, 2017 at 02:30

    Reply

  5. Dan Callahan

    Since several people have asked: we’re rolling out e10s-multi in several gradual stages.

    Currently, e10s-multi is only turned on by default for users without any add-ons installed. Even then, 20% of those users are kept on normal e10s to act as a control group.

    These ratios and criteria will change during the release as we become more confident in the stability of e10s-multi.

    If you’d like to opt-in to e10s-multi, visit about:config and set the value of dom.ipc.processCount to 4. You do not need to restart your browser for this to take effect. Of course, opting-in like this means you place yourself at greater risk of browser instability. If you notice any problems, simply return to about:config, right-click on dom.ipc.processCount, and choose “Reset.”

    To ensure that normal e10s is working (a prerequisite for e10s-multi), visit about:support and look for the “Multiprocess Windows” line. As long as the leftmost number is greater than or equal to 1, you’re set. If it says “0/x (Disabled by add-ons)”, then one or more of your add-ons is incompatible and must be removed. We’re adding built-in warnings about legacy add-ons to Firefox 55, but for now consider installing the Add-on Compatibility Reporter add-on. When you click its icon in the toolbar, it should list each of your add-ons, along with whether or not it’s compatible with e10s.

    June 14th, 2017 at 12:26

    Reply

  6. Surya

    So this means many, many of our beloved extensions will no longer work from version 57 on? How about the Tab Groups extension? That extension is essential for me and THE reason I use Firefox over any other browser. I can’t imagine this functionality no longer working.

    June 15th, 2017 at 11:39

    Reply

    1. Dan Callahan

      Yes. However, we’re still half a year out from Firefox 57, and several thousand add-ons have already been ported to or written with these new APIs.

      Add-ons that change the browser UI, like Classic Theme Restorer or Tab Groups are in a more precarious situation. There are some nascent efforts around tab grouping / organization, and we’re still months away from Firefox 57’s release, so there’s plenty of time for things to get worked out.

      June 15th, 2017 at 20:25

      Reply

  7. jon

    WebExtension APIs work is great:
    – How long will old style plugins keep running?
    – Is there an easy way to migrate (eg the Selenium IDE) plugins – the APIs do look very different?

    June 15th, 2017 at 11:50

    Reply

    1. Dan Callahan

      Old style plugins will keep running until Firefox 57 in November. However, you can also switch to the Firefox Extended Support Release (“ESR”) at that point, which will give you around an additional year.

      The APIs are very different, but they’re mostly a superset of Chrome’s, so add-ons that have equivalent versions for Chrome should be able to port that version over without any code modifications. I don’t know about Selenium IDE specifically, but automated testing is extremely important to us (we recently landed headless support in the Nightly builds of Firefox), so I’m confident something will exist to fill that niche when Firefox 57 is released.

      June 15th, 2017 at 20:22

      Reply

  8. RobertLu

    Well, WebExtension still cannot Intercept websocket requests?

    I mean, send websocket packet to another ip, directly, without modify.

    June 16th, 2017 at 03:38

    Reply

    1. Dan Callahan

      It is not possible to intercept WebSocket requests with WebExtensions. I’ve filed Bug 1373639 to track this.

      June 16th, 2017 at 06:28

      Reply

  9. gabe

    what about mobile? does this bridge the gap for mobile extensions or just give in to chrome strong arming standards?

    if i can have uMatrix on fennec this would be a godsend!

    June 16th, 2017 at 10:13

    Reply

    1. Dan Callahan

      The API Compatibility Tables on MDN show which APIs are available on Desktop and on Fennec. I believe most of the relevant APIs are working equivalently on both platforms, but I haven’t specifically researched that for blockers like uMatrix on Fennec.

      June 16th, 2017 at 10:21

      Reply

Post Your Comment