1291415 - Show stacking context

Status: RESOLVED DUPLICATE of bug 1150498

(DevTools :: Inspector, defect, P2)

Description

[Benoit Girard (:BenWa)]

It's pretty difficult to determine if something is causing a stacking context but it's pretty useful to know as it affects the rendering of the page. Notably z-index, clips and opacity.

Depending on how this is shown in the UI we could also link to documentation to help educate people what it means when they're causing a stacking context.

Comment 1

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

Sounds like useful feature even if I don't know how this would be visualized in the UI. My guess is that anything we can come up with should go either into the Inspector or DOM panel.

Are there any existing tools for this?

Honza

Comment 2

[Benoit Girard (:BenWa)]

I'm not a good UI designer but here's an idea.

First let's start with an example of where Stacking context will hurt you. You're setting z-index: 1000 on something because you want it above everything in your page, however it's only affecting the local z-index because you have a non-root stacking context and it's not going above the thing that you want:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Here's a reduce example:
http://codepen.io/anon/pen/AXYLzm

To see inspect the red 'ABOVE EVERYTHING' div in the 'solution'. This red div has z-index: 100000 but it doesn't show up above everything because there's a stack context somewhere. Here it's easy to locate *if you know that* opacity: 0.9999 causes a stacking context and the DOM is very simple. In a large app it's hard to know because you have to look at the computed style of each element and remember which properties can cause a stacking context thus have to look at many properties times many nodes.

Image this:
1) Inspect the 'red' div and find the z-index property being set on it. At this point webdevs are thinking 'Why in the world is this not doing what I want.'
2) You see an icon or indicator for 'show stacking context' next to z-index.
3) Mouse over the z-index's stacking context icon. This will highlight the stacking context that's matched with this z-index. In this case it's an invisible div. It could highlight in the DOM inspector and we could highlight it on the page by drawing something in it's computed position.
4) Perhaps clicking on it would select the stacking context div in the DOM inspector.
5) Perhaps a right click on it could show some link to MDN explaining stacking context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

AFAIK no existing tools solve this.

Comment 3

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

Very interesting, I didn't know the trick with opacity.

Again, this looks like a feature for the Inspector panel.

But, let me know if you think there are reasons why the DOM panel is better!

Honza

Comment 4

[Patrick Brosset <:pbro>]

I've been wanting this for some time. My idea was to add this to the box-model tab in the inspector.
It's a piece of data that people may want to know when looking at the position of an element, so it makes sense (at least to me) to put it near the information we also display about the box-model and position of the element.

The box model has recently moved to the computed-view tab in the inspector, but it remains the same, essentially.

My idea was to add more information just below the box-model diagram, in this tab, about the position, box-sizing, display, and z-index. And display a button to identify, highlight and select the stacking context for this element.

There is even a UI spec for it in bug 1150496: attachment 8764240 [details].
While bug 1150496 is the parent meta bug, the individual bug for it would be bug 1150498.

On a related note, we also have bug 948364 which is about displaying the stacking context tree in 3D! And we've recently filed a UCOSP proposal for a group of students to work on this.