Re: [csswg-drafts] [css-flex] Add APIs for discovering flex information not exposed by properties (#5682)

DevTools would indeed very much use something like this.

Firefox does have [Flexbox tooling](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts) 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](https://searchfox.org/mozilla-central/source/dom/flex/Flex.h) 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:

<img width="248" alt="layout" src="https://user-images.githubusercontent.com/1152698/97584453-57c45300-19f8-11eb-8551-3188aebc118c.png">

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

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).

-- 
GitHub Notification of comment by captainbrosset
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5682#issuecomment-718778411 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 29 October 2020 14:10:16 UTC