[DevTools] Combined Visual and Logical tree viewer

[maxkatz6]

Currently in our DevTools users can view logical and visual trees separately. It is convenient, when you know exactly which tree you are looking for. But there is no convenient way to jump from one tree to another for the selected element. And this separation of trees can be confusing for the beginners. Especially when these trees are 70% the same.

Chrome dev tools has a nice visualization of their tree-separation concepts - HTML DOM and Shadow DOM. Where Shadow DOM can be paralleled with our visual tree hidden in the control templates (oversimplifying).

Let's imagine tabbed control:

That's how HTML DOM is displayed. Parent "fancy-tabs" has logical children - tabs and panels.

And it is possible to expand "shadow root" to see actual visual elements inside of that control:

Something similar can make dev tools experience nicer, while being optional - there could be a selector of which tree to show.
HTML examples are taken from this article: https://web.dev/shadowdom-v1/

[robloo]

Combining them into one tree is a good idea I think. I'm not a big fan of how it's pictured above though. The LogicalTree is a subset of the Visual Tree. Putting all shadow elements at the top like that doesn't make sense to me.

Instead, why not just use the visual tree layout itself and highlight in bold the logical tree items and then light grey the visual tree one. The tree stays the same. Then you can have an option to toggle visibility of certain items and show only logical or visual tree.