DevTools: Improve props/state value editing interface

[bvaughn]

Follow up to a discussion thread on #294 and a Messenger chat with @gaearon.

The current UI for editing props/state/hooks values has a couple of shortcomings:

• strings/numeric values are sometimes of an unclear type. (DevTools uses the correct <input type> but this is subtle. Showing e.g. quotation marks around strings could be more helpful.
• null initial values can only become strings at the moment. (DevTools does not attempt to parse numeric or boolean values and change the input type. If it did, we would probably also need to enable a way for you to opt back out of that input type somehow in case it was incorrect.)
• fields that maybe support multiple types (e.g. string | number) are locked into a single type (whichever type they happen to be initially).

Additional quirks that might be worth ironing out:

• Non-editable strings are currently wrapped in quotation marks but editable ones aren't.

---

Originally reported via bvaughn/react-devtools-experimental#321

[a-x-]

Also:

1. nested objects shown as 'Object' strings (also, when copy props button pressed)
   
   

   {...
       "accounts": ["Object", "Object", "Object"],
       "resetForms": "fn()"
   ...}
   

2. context menu on fn() missed. in previous devtools I was able to jump to func-prop definition source

[bvaughn]

@a-x- The above comment doesn't really seem related to this issue. Please file a new issue?

nested objects shown as 'Object' strings (also, when copy props button pressed)

Please also include:

• Which version of DevTools you have installed
• Which browser you are using
• An example project (Code Sandbox would be nice) that shows this bug. (I'm not seeing it in DevTools when I look now.)

If you look at the demo app and search for "InspectableElements", you'll see that nested arrays and objects are serialized correctly:

DevTools also has tests specifically for this.