Brian Grinstead

This is the fifteenth edition of the XUL/XBL Replacement Newsletter. Since the last edition we’ve been working to incorporate more web standard code into the browser frontend, and converted some particularly complex XBL bindings to Custom Elements.

CSS Shadow Parts

With XBL, direct descendant CSS selectors are able to traverse the anonymous content boundary. For instance, if dropmarker has some anonymous content like: <content><image class="dropmarker-icon" /></content>, then the icon could be selected from a document stylesheet with: dropmarker > .dropmarker-icon. This is handy and we’ve relied on it all over the place, but can be confusing: it’s not always clear when reading the CSS if you are working with anonymous or explicit content. Also, it’s unsound in the presence of dynamic changes to the DOM, and fixing that in the style engine would be very complicated.

Previously, we didn’t have a way to do this with Shadow DOM. Because of that, we would often convert bindings to use explicit DOM children instead of Shadow DOM (using appendChild etc in the connectedCallback) so that we could continue to style contents from our stylesheets. The CSS Shadow Parts specification aims to close this gap. With Shadow Parts you can expose an element in the Shadow DOM like: <image part="icon"> and then target it from CSS with syntax like: host-element::part(icon).

Emilio Cobos Álvarez has added partial support for this feature in bug 1505489, and we recently started using it in our first chrome Custom Element. Here’s the changeset that shows what that consumer looks like. We are planning to keep working with it in order to provide usage feedback to the standards process, and also to convert XBL bindings that need to use Shadow DOM and are also extensively styled from document sheets (like arrow panels).

Box object removal

XUL box objects were helper objects used to implement some layout features that could be tailored to the specific layout used by an element. Replacements for box object properties are generally available as web standard properties like getBoundingClientRect, screenX, and screenY.

Neil Deakin has now completely removed this feature. Frontend code was migrated to use the standard properties when possible. For cases where there is no standard property, the functionality has been moved to specific XUL element subclasses.

Binding Removals

There are 25 bindings left, compared to 33 from the last update and 300 from the start of the project. We also have a bug on file for every remaining XBL binding and are looking forward to a big drop after the upcoming merge to 70, once the old about:addons and old awesomebar code gets removed.

Here’s a list of changes since the last update:

• Alex Surkov converted the searchbar-text binding to a Custom Element.
• Alex also converted the tab and tabbrowser-tab bindings to Custom Elements.
• Alex also converted the dialog binding to a Custom Element using Shadow DOM.
• Alex also converted the wizard binding to a Custom Element using Shadow DOM. In the process of these conversions he’s been finding some web-exposed Shadow DOM focus bugs that have been getting fixed.
• Andrew Swan converted tabs and tabbrowser-tabs to Custom Elements. tabbrowser-tabs was one of the biggest and most complex bindings remaining. I expect that moving it into JS will open up opportunities for simplifications, similar to what we saw with the tabbrowser binding.
• Robert Strong removed the updateheader binding by removing the last consumers of the old update UI and replacing them with the newer and more well-tested UI.