Report keyboard shortcuts

[Ryan McNally]

It'd be nice to add keyboard shortcuts to the execution reports, for actions like (but not limited to):

• clearing index filters
• focusing description filter
• next/previous message
• message view mode (expected/actual/diff/etc)
• diff mode
• etc

Discoverability of the shortcuts should be considered (just in the tooltips? a button to reveal all shortcuts at once?)

[Sai]

Hey, I'd like to work on this issue. As per the description given above, talks about taking input from keyboard and map it with different features and then make a tab about all the shortcuts. Is there any other documentation avail that'd help me understand more about this issue?

[Ryan McNally]

I think you've summarised it pretty well! If you look at the flow detail page (for example) you can see there's a bunch of stuff to click on (i.e.: the links in the sequence diagram to see different messages, the buttons beside the message content to change the view mode, the search button). It'd be nice to be able to navigate through the messages and change the viewmode via keyboard shortcuts.

The shortcuts could be documented in tooltips (where those already exist) and we could show a cheatsheet of all shortcuts in a snackbar when the user types ? (like gmail does).

You can get started on this by:

1. Having angular installed
2. Checking out this project
3. navigating to the report/report-ng module
4. Running ng serve --open. This should open a browser window with this failure message
5. Find this index.html file in your checkout
6. Replace the string with the json structure you see when you "view page source" on the example flow detail page
7. The browser window should automatically update - this will continue for every change to the source code you make as long as your ng serve command is running
8. Start development! All the files you need to change will be in the report-ng module. It's a more-or-less standard angular project.

Hopefully this makes sense, but give me a shout if it doesn't!