XUL/XBL Replacement Newsletter 9
This is the ninth edition of the XBL Replacement Newsletter. Since the last update we’ve continued to remove “in-content” bindings, started using native Custom Elements in more chrome UI, and shipped a new top-level HTML window.
Common Keybindings No Longer Use XBL
It used to be the case that we used XBL to handle certain keyboard shortcuts for elements like
<textarea>, and for chrome-specific elements like
<browser>. For example, when you press
ctrl+c in an input field an XBL handler would be triggered to copy selected text to the clipboard, or when you press
down in a browser it would scroll the page down. Mossop and Masayuki Nakano took on the task of decoupling this key handling from XBL.
This led to a bunch of goodness. In the process of doing this, they:
- Added missing test coverage for these features.
- Simplified how the whole system works by moving the handlers for the keyboard shortcuts closer to the native keyboard shortcut handlers.
- Saved 48K of memory overhead per content process.
- Removed 20(!) XBL bindings, many of which were “in-content” - attached to elements and running scripts in the content process.
<input type=file> no longer uses XUL
Previously, we used a XUL label to render the filename inside of an HTML file input. This worked, but it meant that we were using in-content XBL and XUL layout in the web page. We worked with UX to see if we could directly replace the XUL label with an HTML label, but ultimately decided that the “middle crop” feature provided by XUL labels was too important to lose when previewing file names. Thankfully, Mats Palmgren stepped in and implemented that feature using an HTML label in the file input, which also fixed some cropping bugs and improved support for mixed direction text in filenames.
Custom Elements in the Payment Request Dialog
Since the Payment Request dialog is fairly independent of the rest of the Firefox UI, it was developed from the beginning to not use XUL/XBL. Instead, it’s primarily written with unprivileged HTML using Custom Elements. The third-party polyfill that was initially used before Gecko’s Custom Element implementation was stable was removed two weeks ago, so the UI no longer has any external dependencies. It uses Custom Element mixins and an ES module to manage application state and allow for a reactive rendering model (source code). We’ll be looking out ways to share some of these patterns with other Custom Elements in chrome going forward.
Browser Toolbox Window As HTML
The Browser Toolbox is set up as a separate Firefox process that passes in the
--chrome parameter to override the default window that opens when Firefox starts up. This used to be a XUL window (toolbox-process-window.xul), Honza Odvarko recently updated it so that the chrome window is HTML (toolbox-process-window.html). This also gave us a chance to remove some unused code and simplify how we wire up commands in that window. Notably, it’s now the case that we don’t render any top-level XUL windows in the Browser Toolbox process.
After this, Jason Laster wrote a post explaining how to open the Browser Toolbox using a Nightly binary to debug broken DevTools in a local build, updated with the new URL.
There are 115 bindings left, compared to 153 from the last update and 300 from the start of the project. Here’s a list of changes:
- Brendan Dahl removed the
tooltipbinding, implementing it as a XUL element subclass in C++.
- Paolo removed the
captionbindings by simplifying the consumers such that they didn’t need to rely on XBL anonymous content anymore. In the process, the accessibility team identified some accessibility improvements we could make to about:preferences, so Paolo is working on that now.
- Paolo also removed the
downloadbinding after refactoring the Downloads UI to remove redundant elements.
- Gijs Kruitbosch removed the
customizableui-toolbar-menubar-stubbinding by removing some legacy CustomizableUI code that was previously required for XUL addons.
- Gijs also removed the
customizableui-toolbar-menubar-autohidebinding binding by moving the logic directly into browser-customization.js.
- Kris Maglione removed the unused xpinstallConfirm.xul page, taking the
installitembinding with it.
- Tim Nguyen removed the
colorpicker-buttonbindings, by switching consumers to use
- Victor Porof removed the
toolbar-menubar-autohidebinding, which turned out to be unused and always overridden by our customizable UI bindings.
- Alexander Surkov migrated the
progressmeter-undeterminedbindings to a Custom Element. Remaining consumers were then replaced with an
- Alexander also removed the
text-basebindings by implementing a XUL element subclass that handles the core functionality for
- I migrated the
tabpanelsbinding to a Custom Element.
- I migrated the
radiogroupbinding to a Custom Element.
- I migrated the
searchbarbinding to a Custom Element.
- I merged the
browser, in preparation to convert that to a Custom Element.
- Mossop landed the keybinding changes discussed above. This removed the following bindings: