Martin pointed out that since landing the combined highlighter (flexbox + box model) the highlighter itself has become laggy.

This is because for each node that is selected we need to walk up the DOM tree to see if a node is inside a flexbox container.

We should add a chromeOnly property to flex items that will give us their container.

This should be as performant as possible.

@Brad Is this something you could do?

This should be straightforward. (Editing) Hmmm... less so. If we need to retrieve this for all HTML elements, then we don't have a good existing hook for this. The way we get "extra" information for grid and flex containers is to do a reflow that generates that extra data when needed. For grid and flex, we only do this when the relevant element is selected in by the inspector. In this case, we would be doing a reflow of the whole document as soon as we open the highlighter, which could be a bad user experience. I'll thikn on this and see if I can come up with a better solution.

(In reply to Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe] from comment #0)

This is because for each node that is selected we need to walk up the DOM tree to see if a node is inside a flexbox container.

Mike, would you please link to the JS implementation of the walk up the DOM tree so I can replicate the algorithm correctly?

The attachment 9038403 [details] provides a method of doing a very short DOM walk in the platform code to return the parent flex element, if any. If this works and is performant enough, then there's no need to do a decorating reflow of the document to cache pointers to the flex parents.

Depends on D17308

https://hg.mozilla.org/mozilla-central/rev/6d3b8198f399
https://hg.mozilla.org/mozilla-central/rev/e23801bb3b78
https://hg.mozilla.org/mozilla-central/rev/d39849743a9c