show parents in sidebar

[patricklx]

Description

resolves #2632

Screenshots

[RobbieTheWagner]

What problem is this solving?

[patricklx]

This is an alternative to the focus mode. or extra way to quickly see the parents of current component and select one of them for inspection
Might be easier/faster than through the component tree

[RobbieTheWagner]

Could we make this be in top down order? Like application route first, then other routes, then component parent, then child? I think we should also make it more visually tree like and appealing to the eye.

[NullVoxPopuli]

visually tree like

in big apps it would indent off the screen tho.

I think it should be upside down like a stack trace

[RobbieTheWagner]

visually tree like

in big apps it would indent off the screen tho.

I think it should be upside down like a stack trace

It doesn't have to indent much, it's just unclear what I am looking at if I am a casual user and I think we could find a way to represent this better.

[NullVoxPopuli]

some stack traces do:

most recent
at: next
at: above that
at: great grand parent

so maybe;

top of stack
in: parent 
in: grand parent
in: great grand parent
in: etc

🤷

[patricklx]

I used the same design react devtools has.
It might be unclear in the screenshot because its a production app and does not have the real names

[pichfl]

I think this works well enough, but the implementation could be a bit less involved.

Not doing indentation is good to me. Doing only slight increments would not feel intentional enough to be perceived as a feature.

[mansona]

I'm approving and merging this because the functionality is there 👍 If we have any questions about the right implementation and the order of rendering we can open them up in follow-up PRs 👍

Fixed the issues