Firefox takes a Quantum leap forward with new developer edition

Earlier this year we wrote about Project Quantum, Mozilla's work to modernize Firefox and rebuild it to handle the needs of the modern Web.

Today, that work takes a big step toward the mainstream with the release of the new Firefox 57 developer edition. The old Firefox developer edition was based on the alpha-quality Aurora channel, which was two versions ahead of the stable version. In April, Mozilla scrapped the Aurora channel, and the developer edition moved to being based on the beta channel. The developer edition is used by a few hundred thousand users each month and is for the most part identical to the beta, except it has a different theme by default—a dark theme instead of the normal light one—and changes a few default settings in ways that developers tend to prefer.

That theme is a good place to start. The new user interface, named Photon, brings with it square tabs and a much more conventional main menu. The current curvy tabs were met with outrage on their introduction in 2014, so the reversion to square tabs will, frankly, probably be met with outrage, but the look is clean and precise. There's also a new tab page that adds recommended stories to the usual list of your most-visited sites.

More important, but less immediately visible, is that Firefox 57 has received a ton of performance enhancement. Project Quantum has several strands to it: Mozilla has developed a new CSS engine, Stylo, that parses CSS files, applies the styling rules to elements on the page, and calculates object sizes and positions. There is also a new rendering engine, WebRender, that uses the GPU to draw the (styled) elements of the page. Compositor combines the individual rendered elements and builds them into a complete page, while Quantum DOM changes how JavaScript runs, especially in background tabs. As well as this new development, there's a final part, Quantum Flow, which has focused on fixing bugs and adding optimizations to those parts of the browser that aren't being redeveloped.

WebRender is due to arrive in Firefox 59, but the rest of Quantum is part of Firefox 57.

Across the board, a focus of this redevelopment has been greater use of multithreading and GPU acceleration. Stylo, for example, uses multiple threads to try to apply CSS properties to multiple elements on the page in parallel—work that has traditionally been single-threaded and serial. This kind of multithreading work can be complex, with dependencies between elements and no easy way to divide the work up evenly between threads.

Mozilla recognized that complex multithreaded code posed challenges for developers some years ago and, in response, embarked on the development of the Rust programming language. Like C++ (which most of Firefox continues to use), Rust compiles to native code and so offers low overhead and good performance. But the language has much more explicit, strict control over object and memory ownership, ensuring that programmers can't easily write programs that, for example, attempt to simultaneously modify the same data in multiple threads. These features should, in principle, make Rust programs much more robust: the compiler itself prevents many of the bugs that might otherwise occur in C++. Stylo and WebRender, are both written in Rust.

Small pieces of Rust code have been in Firefox since version 48. In integrating Stylo and WebRender into Firefox, much larger and more significant parts of the browser now use the new language.

Quantum DOM and Quantum Flow are both improvements to existing subsystems rather than full rewrites, and, as such, they remain written in C++. The main focus of Quantum DOM is to improve the behavior with background tabs. Each tab has its own thread, and these threads are scheduled and controlled by Firefox itself, giving the browser the ability to slow down—or even suspend entirely—background execution, ensuring that the foreground tab never suffers from, say, jerky animations just because of something that a background tab is doing.

Quantum Flow is a broad category of performance fixes. Developers have been investigating individual slow operations—a delay on a particular webpage or using part of the Firefox user interface—to identify where users are noticing performance bottlenecks.

As a result of all this work, Firefox 57 should be substantially faster than its predecessors, with Mozilla claiming that the popular Speedometer benchmark is as much as twice as fast as it used to be. This benchmark uses a number of real-world Web development frameworks to build a demo application and measures how responsive that application is. This approach to benchmarking means that Speedometer is a good approximation of real-world browser performance.

The new developer edition also includes new developer tools. The built-in developer tools have been rewritten to use Web technology and frameworks such as React. Firefox 56 included a new debugger, bringing a range of new features such as support for source maps (that help correlate languages such as TypeScript to the actual JavaScript code they produce) and support for seamlessly stepping through asynchronous code.

In 57 there are new features such as support for CSS Grid. Grid introduces a new way of creating rich layouts in the browser, and the new Firefox inspector includes tools to help visualize the grid and understand how the page elements are related. CSS Variables are also supported, giving a way to examine what value a variable has and why.

Firefox 57 is a big leap forward for the open source browser. The work to modernize it does not end with Quantum. Next year, for example, Mozilla will do further work on the browser's sandboxing implementation, incorporating elements from the Chromium project to further restrict its sandbox processes.