Add color to the extension icon when GraphiQL is connected

[kachkaev]

I was trying to figure out why the extension was not connecting to the app and it turned out that I simply forgot connectToDevTools: true. While I was in the process of fixing this, I noticed that the icon in the corner of the browser looks the same for both connected and disconnected apps. The redux one, however, becomes colorful if the store is discoverable so it's easy to know if the state can be debugged or not.

If the Apollo icon also highlighted itself, the overall devs' UX would improve in my view. I can also imagine an extra menu item at the top of the dropdown menu, which would open the corresponding developer tools tab.

WDYT?

[stubailo]

That would be awesome! Are you interested in sending a PR to add a feature like this?

[kachkaev]

Hi @stubailo. Emotionally I am, but realistically I won't be able to find time on this in the next couple of months :–( Will be happy if someone else does it – this is probably just some copy-paste work from the redux extension. Thanks for wrapping graphiql - really convenient!

[rrdelaney]

This should be in v1.0.9! I'll close this when the release goes out.

[rrdelaney]

This got pushed out in the release yesterday 😃