1291417 - Show Containing Blocks in the DOM inspector

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[Benoit Girard (:BenWa)]

Certain CSS positioning is not based on the parent but rather it's Containing Block which can be tedious to locate:

http://reference.sitepoint.com/css/containingblock

If we showed this in the DOM inspector we could make dealing with this kind of CSS positioning and debug layout issues easier.

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

By 'DOM Inspector' do you mean the DOM panel in DeveloperTools Toolbox or the DOM Inspector extension?

Honza

Comment 2

[Benoit Girard (:BenWa)]

Yes sorry, I mean the DOM panel.

When we have a CSS property that's relative to a containing blocks, such as position: absolute; we could have a 'show containing block' icon. When you mouse over it highlights the containing block in the DOM panel and perhaps even the node in the page.

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Ah, I see.

So this part (from the link above) is important:

"If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative."

So, the containing bloc is *not* always the direct parent.

Looks like a nice feature. I am not 100% sure if this belongs to the DOM panel though. It might be better to implement it within the Inspector panel.

@Patrick: what do you think?

Honza

Comment 4

[Patrick Brosset <:pbro>]

Although not specifically displayed in the mockup in attachment 8764240 [details], this is actually part of the ideas of meta bug 1150496. 
We would like to display a variety of information next to the element's box model in the inspector sidebar, including its position. When the element is positioned, then we'd like to display a link to its containing block too, so that you can see that one exists, which one it is, and click on it to select it in the inspector.

Comment 5

[Benoit Girard (:BenWa)]

Wow, that would be pretty amazing! Not just for web developer but also for the platform team when we're debugging complex DOMs and looking for containing blocks and stacking context which are very relevant to web authors as well.

Feel free to link/dupe the bugs as you see fit. Can't wait to see something like this land!