I was talking to Thomas just now on Slack. So for the sake of clarification, here's what I said there:
/devtools/server/actors/highlighters/box-model.js is the right place to add the code that displays the type of element being highlighted.
The first thing we need to decide is what the labels look like.
flex, or the more complete version of
Flex Container and
Flex Item depending on the type of element?
And what about if the element is both an item and a container?
The GIF attached in comment 2 looks good to me, but I'd like Victoria to take a decision here.
The second thing is about grid. It feels to me like if we do this for flex, we might as well do it for grid, since this is so similar. And it would be more useful and consistent to people.
Victoria: any problem with us adding similar labels for grids too?
Now, technically speaking, here are the APIs that we should be able to use from the box-model.js file to detect the type of nodes we are highlighting:
node.parentFlexElement tells you whether
node is a flex item. It will be falsy if not.
node.getAsFlexContainer() tells you whether
node is a flex container. Same here, it will be falsy if not.
node.getGridFragments() returns a non-empty array if
node is a grid container.
These 3 APIs account for all edge cases that are a bit harder to test for. So you can simply use them and be certain that they return the right info in all cases.
There's one more case though: checking for grid items.
This isn’t as easy though, you need to check if the element's parent is a grid:
But that won’t work if the parent is
display:contents. In that case you would need to walk up to the parent’s parent, and so on.
There's a bit of JS code we use somewhere else in devtools for this. It would be great to use the same code here and avoid duplication, so we minimize the places where bugs can creep in.
This code is the
findGridParentContainerForNode function. If you search for it in the source code, you'll find it. It's exported on the module it currently is in, so you should be able to just import it in box-model.js and use it from there with minimal work.