Incrementally moving away from XUL layout with -moz-box-layout: flex

[Emilio Cobos Álvarez]

Hi,

XUL layout is kind of annoying for everyone. It's not well-maintained
(the layout team would much rather spend time improving web-exposed
layout code than XUL box layout), and it interacts poorly with HTML
flex/block/grid layout, causing somewhat bizarre and hard-to-diagnose
bugs for the front-end team, like:

* https://bugzilla.mozilla.org/show_bug.cgi?id=1577257#c10
* https://bugzilla.mozilla.org/show_bug.cgi?id=1776417
* https://bugzilla.mozilla.org/show_bug.cgi?id=1783882

(And I don't usually work in the front-end, those are just some recent
examples I'm aware of!)

In the past, we've already tried to emulate old -moz-box layout with
modern flexbox (see
<https://bugzilla.mozilla.org/show_bug.cgi?id=1033225>). That's also how
we implement display: -webkit-box. However that was an all-or-nothing
switch, which made it harder to incrementally make progress on this.

Given that, I've introduced a -moz-box-layout internal property, that
takes a "legacy" and "flex" keyword values, which allows to
incrementally emulate legacy flexbox with modern flexbox.

The emulation should interact much better with other more modern layout
features.

The one particular caveat I'm aware of is that `flex` attributes aren't
read by the new layout code, so they need to be replaced if present with
`-moz-box-flex: <number>`. I filed
<https://bugzilla.mozilla.org/show_bug.cgi?id=1784265> to figure out how
to deal with this difference.

Let me know if you have any concerns / thoughts / etc about this. The
ultimate goal of course is to remove XUL layout completely, though this
switch should allow the front-end to avoid these annoying bugs.

Cheers,

-- Emilio

[1]:
$ rg 'flex="' | rg -v 'flex="1"' | cut -d : -f 1 | rg -v
'/reftest|/crashtest|/tests' | uniq | wc -l


11