Use the $0 API to show the stacking context tree below the currently selected element

[bomsy]

How about using the $0 API to show the stacking context tree below the currently selected element? This way the extension will be nicely tied to the inspector.

And if it returns false, then default to document.documentElement (instead of body), to show the whole tree.

If we do this though, we will also need a visual indication of the fact that only a subtree is being shown. @captainbrosset

[captainbrosset]

Thanks for opening this as a separate issue. I now remember what the API is exactly. It's devtools.inspectedWindow.eval(). It turns out that you can use $0 inside the evaluated expression in order to refer to the currently selected element in the inspector.

Here's an idea:

• in the extension toolbar, somewhere, provide a checkbox or select box that lets users choose between 2 modes: show the entire stacking tree, or only the subtree below the currently selected element.
• if the user chooses the entire tree, then the extension would display the tree starting at document.documentElement (because that is the actual root).
• if the user chooses the subtree option, then the extension would do some magic with eval and $0 to get the currently selected node in the inspector panel, and would only show the stacking tree starting from this node as the root.

What do you think @bomsy? Does this sound like a good idea?

Using the $0 trick can be useful for another feature idea I have: the tool could provide an option to compare nodes. But I'll file this as a new issue.

[bomsy]

I like this.. i think its a great idea.