Firefox UI has built with Web Components

Mozilla developer Brian Grinstead announced on the blog that after years of hard work, he removed XBL from the Firefox UI a few weeks ago, which means that migrating the Firefox UI to a project built using Web Components is complete.

XBL was an XML-based language where you implement “bindings” that get attached to DOM elements. You could then add custom JS properties and anonymous content to a regular element. It was designed and built at Netscape in the late 90s, along with a number of other “XUL” features that allowed you to build desktop web applications at a time long before the Web platform added similar capabilities.

We can think of Firefox UI as a very large single-page application, originally built with DOM and JS, and its technology selection is bold compared to native applications more than 20 years ago. It’s also because Mozilla is too advanced, so some of the features needed to build complex web applications are implemented before the web platform has yet to support them. These features are also evolving in the future to standardize standards such as CSS flexbox and Web Components.

At this moment of new and old, it is certainly easiest to let the existing codebase continue to use the original version and to require the platform to support both. After all, rewriting the old code is very difficult and costly. Even so, Mozilla chose to implement Web Components in Firefox, and they launched a “parallel” project where the team migrated existing UI components to use them. They do this in an “incremental update” way to make each individual change while keeping Firefox up and running, instead of creating a branch from scratch to rewrite the UI.

Brian sees this as a major achievement, and it also provides improvements to the underlying Firefox and allows teams to focus on modern Web standards and remove the sheer number of repetitive and complex features that are not exposed.

As for why Web Components are used, Brian said that the team has been discussing the removal of XBL for years due to problems with XBL. But the project seems to be very large, and it seems that it needs to rewrite the Firefox UI from scratch, so it has not been able to effectively promote the progress of the project. The team then conducted a “design review” and proposed to launch a “parallel project” plan to achieve the goal of migration with “incremental update”. Because the models are very similar, developers can make reasonable choices when migrating elements to keep API compatibility as much as possible.