warrenday / graphql-network-inspector

A better network inspector for viewing and debugging GraphQL requests.
MIT License
466 stars 46 forks source link

Minor UX tweaks #36

Closed dutzi closed 3 months ago

dutzi commented 2 years ago

Suppose you find a request in the sidebar and you'd like to view its response, you'd have to click on it in the sidebar, click on the Response tab, and then click on the response object to view/traverse it.

Since this is a pretty common use-case I suggest the following:

When the user double clicks a sidebar list item, the item's Response tab should immediately open, with the response object either fully expanded, or only the root level expanded and the root key focused, leaving you where you can just use the keyboard arrow keys to traverse the object.

Possible improvements on top of that:

@warrenday, what do you think?

I'll have a PR ready not long after you'll approve 🙂

warrenday commented 2 years ago

Hey @dutzi I like the idea of these power features. I am all for adding these. Do you have any ideas around presenting this functionality to users?

We could of course update the readme on github and/or include a link to these docs within the tool?

dutzi commented 2 years ago

A pretty common way to handle this is to display a Shortcuts modal when the user hits the question mark sign on their keyboard. But this modal will be pretty lame, displaying only four shortcuts :)

Also, just want to add that after playing around with these changes locally I find it needs more work. It's still not super intuitive.

warrenday commented 2 years ago

I have added a bunch of extra components like "modal" so will get this merged into master shortly.

dutzi commented 2 years ago

Great.

I'm going to make some small changes. Turns out hitting Escape brings up the Console, and it's not avoidable. So Escape to bring the focus back to the sidebar isn't an option.

There are a few more subtle changes, for example clicking anywhere within the JSON object viewer should focus on the keys, I'll them later as I go.