[css-flex] Add APIs for discovering flex information not exposed by properties

[mrego]

This is the same issue than #4511 but for flexbox instead of grid layout.

Despite flexbox is simpler than grid, it might be needed some internal information to be able to develop some stuff like dev tools, or a flex highlighter in an editor, or things like that. Those tools could probably back compute that information, but that's information already known by the engine so maybe it could be a good idea to expose it.

I guess @captainbrosset can provide examples of the kind of things that would be needed here, as he's working on flexbox tooling for Chromium DevTools.

JFYI, in this case Firefox doesn't have an internal API, like for grid.

[captainbrosset]

DevTools would indeed very much use something like this.

Firefox does have Flexbox tooling already and to do it we created an internal browser API that only privileged code such as devtools' can use. This API returns an instance of Flex which gives DevTools information about:

• the flex directions
• the list of flex lines
• for each line, the cross start offset and cross size
• for each line, the list of flex items on this line
• and for each item, a bunch of information related to sizing (the base size, the item's size on the main and cross axes, the delta size (if it grew or shrank), and information about whether the item was clamped to a min or max size).

This has been very useful for the Firefox flexbox inspector tool.

Now, I'm working on a version of this for Chromium and am reminded that this sort of information is vital to any flexbox-related tooling.

One practical example: if you want to highlight interesting information about a flexbox layout on a page, you probably want to show users how many lines there are, how tall or wide they are, whether there's space between them (that got distributed with align-content), how many items there are, and how they got distributed or aligned.

Without internal information from the layout engine, it's really hard. You can't really know whether a container has 1 or multiple lines, as items could be positioned in a way that makes it really hard to figure out.

Consider this example:

Without information about flex lines, you can't know whether this is:

1. a single flex line layout with a align-self:start item and a align-self:end item
2. or a layout with 2 lines, where the first item has margin-right: auto and the second margin-left: auto

If you took margins into account, you could probably figure out that the second item's margin box starts before the first item's margin box ends (in the main direction), and therefore there's got to be 2 lines. But that gets tricky, and this is probably just 1 of the many edge cases (css transforms can make things even more tricky, but also relative positioning).