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.
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).
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.
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:
searchbar-text
binding to a Custom Element.tab
and tabbrowser-tab
bindings to Custom Elements.dialog
binding to a Custom Element using Shadow DOM.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.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.updateheader
binding by removing the last consumers of the old update UI and replacing them with the newer and more well-tested UI.