Standalone DevTools Profiler should work with no connected clients

[mrkev]

When the standalone DevTools are opened without a running React application, this is what's currently shown:

Being able to use the standalone app without any connected clients, just to inspect saved profiles, would be a nice to have though. We should move the greeting message / instructions into the Components tab (when there's no connected apps) and let the Profiler be used to import previous profiles.

Note that doing this will likely require a new prop being passed to the outer DevTools component.

[bvaughn]

The messaging on this splash page is pretty important. Maybe we could keep it, but somehow show it inside of the Components tab– and the Profiler tab could be functional in a read-only (import only) form.

[mrkev]

That sounds like a good idea, yeah. If the components tab is the one that shows first by default too, people wouldn't miss this information.

[hristo-kanchev]

Hey, @bvaughn I can take a look at this during this weekend. 👍

[bvaughn]

Hey @hristo-kanchev. Sure, that'd be fine!

I'm going to take a pass at updating the description to match my thinking.

[hristo-kanchev]

I'm going to take a pass at updating the description to match my thinking.

Sure thing. Thanks!

[gabrieltrompiz]

Hi @bvaughn, I was taking a look at this issue yesterday and didn't notice @hristo-kanchev asked to take it and forgot to ask myself, sorry for any inconvenience and would understand if my solution is not considered.

I think an alternative solution would be to add a "Profiler" section in the greeting/instructions page, that contains a button/link that redirects to the DevTools with the "Profiler" tab opened by default. I think it requires less changes (if any) directly to the DevTools component and can be made by just changing some things in the splash page and in the devtools-core.

I took the time to quickly change the HTML of the splash page and it would look like this (might need some rewording):

The other thing I wanted to mention was that, as far as I understand it (correct me if I'm wrong), the DevTools component depends on the connection with the client to be made, since it makes use of the Store and the Bridge, which are created when the connection is established. So, in order to render the DevTools before the connection is made, that dependency has to be resolved or a "fake" Bridge and Store would be necessary (while the "real" Bridge and Store would be created upon the connection being established). My solution in this case was to instantiate a "fake" Bridge and Store in the devtools-core, and that would be the one used by the component while in "read-only" or "Profiler" mode, and when the real Bridge and Store are created it just updates and starts showing the Component tree and everything as usual, but I'm not sure if that's the most appropriate solution.

[bvaughn]

Hey @gabrieltrompiz. That's an interesting alternative proposal. Would be happy to review a proof of concept.

[hristo-kanchev]

Hiya @gabrieltrompiz! If you need help or want me to take over feel free to ping me. ^^

[bvaughn]

Going to mark this task as owned by the three of us so it will at least be clearly taken. We can coordinate the details going forward. Really appreciate the help!

[gabrieltrompiz]

Thanks @bvaughn and @hristo-kanchev, I just submitted the PR for further discussion of the changes!