DevTools: An easier way to see all siblings

[bvaughn]

I have a particular pattern that I struggle with when navigating deep trees in devtools: I want to see all siblings of a node together.

Say I'm in the middle of something and I wonder what are all nodes on the same level. It's super hard to actually get to that state. I wonder if we could tweak "left" button to do that as an intermediate state.

• first press: collapse the current node
• second press: collapse all siblings (new)
• third press: move to the parent

Maybe this is too crazy :-) Or maybe there's another mechanic that can achieve the same effect. The goal here is to be able to make sense of the tree structure by going upwards. Currently implementation details of children prevent me from seeing it. (At least, with the "expand" mode on — which is now on by default.)

---

Originally reported by @gaearon via bvaughn/react-devtools-experimental#384

[OnkelTem]

Hi all.

I wonder why it hasn't acquired appropriate interest from the community or developers. It seems like you folks don't really use this extension, otherwise you'd understand how bad we're lacking this feature.

As Dan said, landing in the middle of nowhere is just a regular situation when you use "Select an element to inspect" function and get to some element in the big tree.
From this spot what is the proper scenario?
It's really hard to see the whole picture of where are you now, and this is the problem.
Add here the fact that the tree is expanded by default for some reason and you're basically spammed with the unnecessary details.

Alternative 1

I see one alternative to what @gaearon has suggested: consider collapsing everthing else. E.g. before:

- a
  - aa
    - aaa
      - aaaa
      - aaab
    - aab
      - aaba
        - aabaa
          - aabaaa
        - aabab
          - aababa
        - aabac
          - aabaca << you're here
      - aabb
        - aabba
          - aabbaa
        - aabbb
          - aabbba
        - aabbc
          - aabbca
    - aac
      - aaca

after:

- a
  - aa
    + aaa
    - aab
      - aaba
        + aabaa
        + aabab
        - aabac
          - aabaca << you're here
      + aabb
    + aac

Alternative 2

There was one more issue reported about the same problem: #16735 reported by @zinoviev

For some reason it has been closed w/o resolution, yet the proposition was quite clever and also solved the issue effectively.

The suggestion was to collapse recursively when you're collapsing nodes. This way, to achieve the picture above, you would need to go to the root node once, collapse it, and then identify an element of your interest: to this point the other nodes are already collapsed.

Recursive collapsing is implemented for example in the JetBrains IDEs: AndroidStudio, IntelliJ, WebStorm, PhpStorm, PyCharm etc. It's much more convenient than having nodes to keep their expanded state when you collapse their ancestors.

[bvaughn]

Sounds like you're volunteering to do this work, @OnkelTem?

[OnkelTem]

@bvaughn Maybe :) I haven't looked into the code yet.

[zinoviev]

@bvaughn @OnkelTem I will be happy to work on this, if we agree which path is preffered. Ofc I like my proposal more, but ready to work on @gaearon suggestion also

[OnkelTem]

Well, I like Igor's proposition too. But how to do it properly is not clear yet.

For example, this is how Chrome DevTools Elements tab works:

• Initially the tree is collapsed.
• When you search for an elemnt to inspect, only the element's ancestors get expanded while the other elements stay collapsed.
• When any expanded element is collapsed manually, its children don't collapse recursively (in contrast to how Project Tree in the above mentioned JetBrains products works). For that to happen we can use "Collapse children" menu option from the context menu (lacking in our case).

In my opinion the best thing to do would be to create the context menu in the first place. Then we can implement any view transform tactics using it.