Proposal: Dim Components with Parens in Name

[gaearon]

Inspired by #503, I want to propose a super simple heuristic for making HOCs less prominent.

How about we just dim the components in the tree that have ( or ) in their names? These are always HOCs, as people commonly use X(Y) convention like Connect(App), Relay(FeedItem), or withStyles(Button). You can’t accidentally put parens into the name so it’s always intentional. HOCs that don’t adhere to this convention could easily adapt to it.

We wouldn’t completely hide the HOCs (at least, I’d like to start without it) because it obscures the data flow. But I think even making them dim in the tree would make a visual difference. Does anyone want to prototype this?

I don’t know if dimming will be helpful in practice or not but I’d like to experiment with it. If not, then we could add a “Hide Wrappers” checkbox that also uses ( and ) as a heuristic.

[mattvagni]

Can I take this on? I think this could feel really nice and it seems like a good first bug to get to know how the dev tools are built.

[neeharv]

I'd like to prototype something out, if no one else has started work on this.

I like the idea of dimming it out, but I'm worried for people new to react dev tools it might look "disabled". Let me try a few styles out and send screenshots.

[gaearon]

Seems like @mattvagni got there first!

[gaearon]

(But seriously, feel free to prototype and collaborate. I’m not sure if this is viable, but it may work if someone figures out a good balance.)

[mattvagni]

Initial impressions is that it works pretty well just dimmed out.

However it would need some more consideration when searching:

NOTE: Currently just styling the HigherOrderComponent vs. doing it properly and only matching components with () since I haven't yet found out how to change the pretend application.

[arturmuller]

I would love a "Hide Wrappers" checkbox!

[iamstarkov]

related #604

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools