1331556 - [meta] Z Index Inspector

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Gabriel Luong [:gl] (ΦωΦ)]

This is a meta bug for all the work related to landing the Z Index Inspector.

Comment 1

[Patrick Brosset <:pbro>]

Here's a random UI idea I had for this:

A new side panel in the inspector (or a sub-panel inside the Layout panel).
It's empty by default, or maybe just shows the z-index and stacking context info for the current element.

And there's a way for users to select multiple elements to be compared. Either you'd drag'n'drop elements from the markup-view to this panel, or right click on elements in the markup-view and select an item like "inspect in z-index panel".
Anyway, no matter how you do this, you end up with, say, 2 or 3 elements compared in the z-index panel.

The panel then shows the stacking context tree for these elements. Starting at their common ancestor, and showing all stacking context nodes on each branch, displaying the z-indexes of everything.

This way, when you're wondering why an element is below another one, then you would just select them both in this new panel, and you would know immediately what's happening. 
The panel would show you that there's an element that serves as a stacking context, and you didn't know that. 
Additionally, it could tell you why an element is a stacking context. And then you could select that element, jump to the rule-view and change its z-index or something.

Something like this would make it very simple to solve stacking problems.