XUL/XBL Replacement Newsletter #11

[Brian Grinstead]

This is the eleventh edition of the XUL/XBL Replacement Newsletter. We’ve continued to make consistent progress removing XBL bindings, and are aiming to get down to 62 bindings by the end of Q1. That will put us on track for the last bindings being removed around Q3.

In-content XBL is gone

As announced in newsletter #8, we created a system called UA Widgets to replace instances of running XBL in the content process. Then as announced in newsletter #10, the final in-content binding was removed and the feature was turned off by default. I’m happy to announce now that in-content XBL has been entirely removed from mozilla-central and the metabug has been closed.

This will allow us to improve the security and performance of content processes in Firefox. Here are some known areas to investigate:

• Make element JS reflection simpler in the content process since we don’t need to check if they have XBL attached.
• Rip out all the XBL scope, bindToUntrustedContent, and exposeToUntrustedContent machinery.
• Disable XBL handling for Stylo in the content process.

If you know of other areas that can be simplified or want to take on some of this work, then please let me know or file a bug depending on the metabug so we can track it.

<browser> is now a Custom Element

The <browser> element is used for rendering the actual web content inside a tab, so it’s quite a complex and important element. After the tabbrowser and videoControls bindings were removed last year, this was the largest remaining binding at around 2000 LOC.

It took a lot of debugging, but after merging together the remote-browser and browser bindings, the converter tool gave a good starting point to get it done. Thanks to Mike Conley for having fun with the review and Neil Deakin for making QueryInterface work properly for this use case. More details can be seen in the bug and in the post to firefox-dev.

This opens up the ability to start looking into creating a build with XBL disabled, since this was the last element in Android using XBL.

Removing some uses of XUL grid layout

Tim Nguyen noticed that within the Firefox UI we have a relatively small number of consumers using XUL grid layout (most often seen as the <grid>, <columns>, <column>, <rows>, and <row> elements). He filed a metabug to track removing them. Long term, doing this will help us migrate our UI to web-exposed layout algorithms, and remove the XUL-specific grid implementation.

After converting a number of them that don’t actually need to be grids to flexbox, the next step was looking into our options for using either CSS grids or CSS table layout for the remainder. It appears that these will have to be put on hold until we ship the XUL flexbox -> CSS flexbox emulation feature, since XUL flexbox children don’t always play nicely inside of non-XUL layouts.

Binding Removals

There are 78 bindings left, compared to 94 from the last update and 300 from the start of the project. Here’s a list of changes:

• Tim Nguyen removed the update binding and converted the strings inside of it to Fluent by creating the DOM directly from its only consumer.
• Tim also removed the toolbar-drag binding by implementing support -moz-window-dragging in GTK.
• Tim also removed the numberbox binding by replacing instances directly with html:input[type=number]. I’m hoping that we can replicate this pattern with some of the other XBL bindings that implement form controls - you can follow that work in bug 1513325 and blockers.
• Victor Porof removed the treerows binding by folding it into the parent tree binding.
• Victor also removed the columnpicker binding by converting it to a Custom Element.
• Victor also removed the treecols binding by converting it to a Custom Element.
• Tim Guan-tin Chien removed the scrollbox binding by simplifying consumers to not rely on it.
• Tim also removed the tabmodalprompt binding by converting it to a JS module.
• Tim also removed the datetime-popup binding by converting it to a JS module.
• I removed the browser binding by converting it to a Custom Element.
• Paolo Amadini removed the popup-scrollbars binding by folding it into the parent popup binding.
• Paolo also removed the richlistbox binding by converting it to a Custom Element.
• Paolo also removed the autocomplete-richlistbox binding by moving the handlers into the autocomplete-rich-result-popup binding and using a normal richlistbox there.
• Paolo also removed the categories-list binding by using a normal richlistbox plus some CSS.
• Paolo also removed the arrowscrollbox-clicktoscroll binding by folding it into the parent arrowscrollbox binding.
• Paolo also removed download-subview-toolbarbutton binding by creating the DOM directly from its only consumer.