1141569 - Display keyboard shortcuts when '?' is pressed

Status: RESOLVED FIXED

(Tree Management :: Treeherder, defect, P3)

Description

[Ed Morley [:emorley]]

(In reply to Ed Morley [:edmorley] from bug 1125264 comment #0)
> * Lack of full help/documentation:
>   - Docs can get out of date really fast, so I'd prefer something like an
> in-app overlay that explains the various features (even something as simple
> as showing the contents of all the existing button/toolbar tooltips next to
> their respective elements).

(In reply to Jonathan French (:jfrench) from bug 1137755 comment #1)
> Ed had a great idea recently for in-app help context help for all key ui
> elements(+). Possibly exposed as a toggle shortcut ("?" anyone?) which flips
> all these in-app balloon annotations on/off en masse. And we'd give that
> shortcut prominence in the Help menu, and turn the current Help icon into a
> drop down to either launch Help, or turn on in-app annotations.
> 
> The in-app annotations would provide a slightly more in-depth explanation,
> and you'd find the item immediately since the help balloon would appear
> right beside the ui you are trying to find.
> 
> For multi-paragraph detail on functionality, I could see additions to
> ReadTheDocs or similar, which could be linked from those in-app help
> balloons.

Comment 1

[Ed Morley [:emorley]]

For a pretty cool example of this, go to https://reviewable.io and press the F1 key and then click on the highlighted buttons to see help text. Or even better, open a review on reviewable and do the same thing - explains all of the UI.

Comment 2

[Jonathan French (:jfrench)]

Pretty cool :)

Comment 3

[Jonathan French (:jfrench)]

I'll also try out Reviewable on a low horsepower machine I have, I'm curious to see how that overlay behaves.

Comment 4

[Jonathan French (:jfrench)]

The Reviewable overlay seems to work pretty well on a low gfx/cpu capability machine. I tried an old Win box with minimum memory and GeForce6200 with both Release and Chrome. It seems quick enough to be usable :)

Comment 5

[Jonathan French (:jfrench)]

Attachment: onscreenShortcutsProposed

With the recent bug/user queries about shortcuts, I started mocking up the first part, a shortcut overlay for '?' (or whatever keyboard we'd like to hook it to).

Comment 6

[Jonathan French (:jfrench)]

Attachment: PR 1005 - onscreen shortcuts

PR for onscreen shortcuts for review. :)

Comment 7

[Ed Morley [:emorley]]

Comment on attachment 8665503 [details] [review]
PR 1005 - onscreen shortcuts

Left some comments :-)

Comment 8

[Jonathan French (:jfrench)]

Comment on attachment 8665503 [details] [review]
PR 1005 - onscreen shortcuts

I have a CI nit to fix, but this can get re-reviewed at this point I think :)

Comment 9

[Ed Morley [:emorley]]

Comment on attachment 8665503 [details] [review]
PR 1005 - onscreen shortcuts

Thanks - please squash before landing :-)

Comment 10

[Treeherder GitHub Bugbot]

Commit pushed to master at https://github.com/mozilla/treeherder

https://github.com/mozilla/treeherder/commit/ca700dce6f9831b24bf49dbf5e223534413d3d8f
Bug 1141569 - Display onscreen keyboard shortcuts

Comment 11

[Jonathan French (:jfrench)]

The onscreen shortcuts via '?' are merged per above. The css overlay panel support is there in treeherder-global.css for any eventual F1 inline UI help, which this bug represents. Excerpting my PR description here for reference for that work:

> unlike Github we set two properties on head,body, and once we get to the point where we are
> displaying inline Help for all UI elements, I think we'll need to ng-class override these when
> onscreenOverlayShowing = true. Otherwise the user won't be able to access the scroll bar
> to navigate down the page.

Comment 12

[Ed Morley [:emorley]]

Unfortunately grunt build is failing with 'Parse Error' (bug ) - this is easily fixed with a closing bracket.

However minification isn't being performed on the user guide JS assets - they need to be inside a build block in userguide.html and then listed in Gruntfile.js, like we do for logviewer.html etc. I tried added those quickly now, but then get:

Error: [$injector:nomod] Module 'userguide' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Comment 13

[Jonathan French (:jfrench)]

I had a similar error to get Travis passing, where I needed to add an entry to karma
https://github.com/mozilla/treeherder/blob/28d5708d7f285e82ca03b5c97608daa8d0c42cb2/tests/ui/config/karma.conf.js#L26

I wonder if we need to specify 'treeherder' as a dependency (2nd argument) here for Grunt? ie. ['treeherder']. It didn't seem needed though for Travis at the time.
https://github.com/mozilla/treeherder/blob/28d5708d7f285e82ca03b5c97608daa8d0c42cb2/ui/js/userguide.js#L3

Comment 14

[Ed Morley [:emorley]]

A s/userguide.app/userguide/ fixed it - PR in bug 1209523.

Comment 15

[Jonathan French (:jfrench)]

Verified 'part1' - Display onscreen keyboard shortcuts PR1005, working fine on stage.

Comment 16

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Can this be closed?

Comment 17

[Jonathan French (:jfrench)]

Updating this bug for posterity, to describe the scope of what we did and didn't do.