Add element's key and ref to tree and prop views

[Timothee]

Fixes #148.
Fixes #226.

If a key or ref is set on the React element, it's displayed before
the props in the tree view and in the PropState sidebar.

If none is set, nothing is changed.

Also removed a piece of code Node.js that would never run. (condition
is checked in the previous block that returns)

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

[Timothee]

CLA signed.

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[Timothee]

@jaredly @kassens anything I can do to get this PR looked at? Thanks!

[Timothee]

@spicyj any chance to get this looked at? Thanks!

[Timothee]

😐

[jaredly]

@Timothee sorry to take so long on this. It looks great! one request: can you make it handle the "ref is a function" case gracefully?
Also, make sure to coerce key to a string -- it's supposed to be, but in practice it might not be

[Timothee]

React also supports using a string (instead of a callback) as a ref prop on any component, although this approach is mostly legacy at this point

I suppose I've been using legacy code with regards to refs then 😄

@jaredly if ref is a function, should I just not display anything at all? From the examples, it seems that with a function, there's nothing to display really…

[Timothee]

Actually, re-reading #226:

functions don't have a meaningful representation in the sidebar

but

we might be able to get a meaningful representation of functions from name and displayName, or if the VM permits, even line number + source link

I'll look into that last one a bit, but otherwise will just skip it if it's a function. (unless you have better ideas)

[jaredly]

that sounds fine to me!

[Timothee]

@jaredly updated. Now the following JSX:

var Container = React.createClass({
    render: () => {
        return (
            <div>
                <div key='withKey'>with a key</div>
                <div ref='stringRef'>with a string ref</div>
                <div ref={()=>{}}>with an unnamed function ref</div>
                <div ref={function namedFn() {}}>with a named function ref</div>
                <div key='withKeyAndRef' ref={function namedFn() {}}>with a named function ref and a key</div>
            </div>
        );
    }
});

is shown like this:

The replacement of the unnamed function into fn() is handled by PropVal.

[montogeek]

Please merge this :)

[Timothee]

@jaredly bump 👀

[gaearon]

This is in. Thank you so much!

[montogeek]

THANKS!
@gaearon It's automatically available in the Chrome Store?