[DevTools]: More compact rendering of deeply nested component trees when there is a single child

On Reddit.com:  It's a very common pattern in React to have deep chains of components with only one single child. # Options ## a. VSCode style This problem is also enountered in Java project trees. VSCode does it like this:  https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#compact-folders-in-explorer IntelliJ similar. Maybe we could do the same as VSCode? ## b. No indent for single child Another approach would be to just not indent when there is only one child. ``` h Context.Provider - {props: {foo: 1}} I Context.Provider E Context.Provider Context.Provider Context.Provider l - Context.Provider (2 children - collapse all) mg d Context.Provider + Component (1 child - expand all) vg hg Context.Provider + hg (1 child - expand all) ``` We could also indicate when there are multiple children and provide some controls to collapse all the children's children. This would help with https://github.com/facebook/react/issues/16463. Advantage: As another feature I'd also be interested in adding some inline annotations to the right of each component to show some props to better identify components. Moving these nested trees horizontal would block this ability, so this approach works better. Design decision: Where to place the arrow to toggle folding? At the first element with multiple children (indicated above)? Or at the top. Or maybe we can create a really tall button on hover to show. Design decision: How to clearly and visually deliniate that the components are nested vs siblings. Maybe we need to add an extra space (as shown in example above). Maybe color coding as well. Or alternate grey shading. # Related - https://github.com/facebook/react/issues/16463 - h…