892188 - ? should open a pop up summary of available keyboard shortcuts

Status: NEW

(DevTools :: General, enhancement, P3)

Description

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

How will people ever use our keyboard shortcuts if they can't figure out what they are?

We should give them a summary of our keyboard shortcuts when they press "?" in any of our tools.

Comment 2

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Duplicating :bgrins' comment from bug 1122699:

It'd be nice if we had a way to show common keyboard shortcuts from the toolbox.  A couple of ideas:

1) Have a link that opens up https://developer.mozilla.org/en-US/docs/Tools/Keyboard_shortcuts
2) Open up a dialog when the user presses "?".  You can see an example of this on github.com.

The benefit of 2 is that we know what platform they are on, so they wouldn't have to see a table including platforms irrelevant to them.  Also, there may be some flexibility to show context-specific shortcuts more prevalently (if you are on the inspector tab, maybe those could show up near the top).

If we went with something like 2, it'd be nice to somehow share the list of shortcuts between the MDN documentation and this dialog so we didn't have to maintain two separate lists.  Not sure how that would best work, especially as new shortcuts are added to the toolbox.

Comment 3

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Keyboard shortcuts change every now and then, and when this happens the MDN page has to either list all variations over time or show only the newest one, or (accidentally) remain out of date, or something.

(2) can avoid this by showing the current shortcut for not only your platform but also your version of firefox.

Comment 4

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

I experimented with this briefly in the past...  At the time, it seemed like a good approach would be to move shortcuts to some kind of JSON file / object in JS so that the shortcut help dialog can be built automatically from the available shortcuts.  This way, you don't have to do anything extra when adding a new shortcut to get it to appear.

I was imagining each tool could have it's own shortcut file / object, and the help window would gather this data together to build the items it shows.

Of course, there may be various exceptions, items we don't want to present, etc. that complicate doing this in a totally automated fashion, but it's at least worth considering I think.

Comment 5

[Julian Descottes [:jdescottes]]

I'd like to work on this bug. 

To clarify I want to implement a cheatsheet displayed in devtools when pressing "?" (or another shortcut, but this one seems pretty universal).

(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #4)
> I experimented with this briefly in the past...  At the time, it seemed like
> a good approach would be to move shortcuts to some kind of JSON file /
> object in JS so that the shortcut help dialog can be built automatically
> from the available shortcuts.  This way, you don't have to do anything extra
> when adding a new shortcut to get it to appear.
> 
> I was imagining each tool could have it's own shortcut file / object, and
> the help window would gather this data together to build the items it shows.
> 
> Of course, there may be various exceptions, items we don't want to present,
> etc. that complicate doing this in a totally automated fashion, but it's at
> least worth considering I think.

Totally agree with the approach, I will try to prototype it along these lines.

Comment 6

[Brian Grinstead [:bgrins]]

(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #4)
> I experimented with this briefly in the past...  At the time, it seemed like
> a good approach would be to move shortcuts to some kind of JSON file /
> object in JS so that the shortcut help dialog can be built automatically
> from the available shortcuts.  This way, you don't have to do anything extra
> when adding a new shortcut to get it to appear.
> 
> I was imagining each tool could have it's own shortcut file / object, and
> the help window would gather this data together to build the items it shows.
> 
> Of course, there may be various exceptions, items we don't want to present,
> etc. that complicate doing this in a totally automated fashion, but it's at
> least worth considering I think.

This sounds like it could be related to some kind of plan to get off of XUL <key> elements (bug 1260493).  I think it'd have to be a JS file that exports an object (instead of JSON) so that it could pull in localized strings (at least we have localized strings for key shortcuts right now, maybe we don't want to support that for shortcuts).

Maybe for binding the shortcuts we could have the framework pull that object and build <key> elements for now, but I'd like if we could also discuss what the future plans / ideal API for binding these key shortcuts will look like if we are going to make changes to this (might be worth looking at how a couple of other tools deal with shortcut registration: https://github.com/atom/electron/blob/master/docs/api/global-shortcut.md and http://codemirror.net/doc/manual.html#keymaps).

Also I think it's OK / desirable if it's not 100% automated.  The help menu could reference a hardcoded set of shortcuts from these modules and as long as it's relatively easy to modify we can keep the list up to date.

Comment 8

[Helen V. Holmes (:helenvholmes) (:✨)]

I think we might also consider (either in addition, or as an alternative) to the ideas proposed here that we use the options panel as a place to show all of the available keyboard shortcuts. We could potentially as an enhancement use this area as a place where users can remap keyboard shortcuts.

A current blocker for this is that there need to be some new proposals for the design of the options panel as the current options panel would be overwhelmed by adding keyboard shortcuts to it.

Comment 9

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Julian, are you actively working on this issue?

Comment 10

[Julian Descottes [:jdescottes]]

Not at the moment, unassigning myself.

Comment 12

[Patrick Brosset <:pbro>]

I think Julian meant to unassigning himself but that didn't work.

Comment 13

[Sebastian Zartner [:sebo]]

? is keyboard layout dependent. Could F1 be used instead/additionally (currently toggling the toolbox options)?

Sebastian

Comment 14

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Sebastian Zartner [:sebo] from comment #13)
> ? is keyboard layout dependent. Could F1 be used instead/additionally
> (currently toggling the toolbox options)?
> 
> Sebastian

I would recommend not changing current keyboard shortcuts.

Comment 15

[Jan Honza Odvarko [:Honza] (always need-info? me)]

See also Bug 492557 - it will do the same for the entire browser.

Honza

Comment 17

[Janelle Torres]

Attachment: same problem

Thanks from hangnydisa1986.