Currently, the shortcut editor mostly just uses the KeyboardEvent.key
field to determine what to display in response to user input. This works
well for en-us keyboard on Windows, but often results in confusing
behavior on keyboards which input special characters with the alt key,
such as Option+c to produce ç on the default Mac US keyboard. In order
to better represent these keypresses, this CL adds KeyboardEvent.code as
a fallback for determining how to display a key in a shortcut.
The W3C details the relationship between physical keys and keycodes at
[1], but it is essentially a string equivalent to the now-deprecated
keyCode field that the DevTools have long used to determine whether
a keypress matches a shortcut. Due to the way Macs handle dead keys, it
is also necessary to set maxlength=0 on the input field to prevent the
OS from appending special characters to it.
Before/after, Ctrl+Option+C on mac: https://imgur.com/a/bizQhMJ
[1] https://www.w3.org/TR/uievents-code/#keyboard-key-codes
Bug: 174309
Change-Id: Ieff84821641d3206ec67b05658f6b23f9d0d36e4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2643919
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
This CL adds the ability to create chords, or multi-keypress shortcuts,
to the shortcut editor. The ability for built-in chord shortcuts was
added here [1] in order to support those necessary for VS Code and
potentially other editor-matching presets (currently the only example is
Ctrl+K Ctrl+S to open the shortcuts settings with VS Code shortcuts
enabled).
The event listener that handles shortcut input keystrokes now starts a
timeout when it receives a non-modifier keypress, allowing the user to
begin a second key within 1000ms. If the user does, then the timeout is
cleared and the second key is added to the shortcut. Otherwise, any new
keystrokes after the timeout are considered the beginning of a new
shortcut entirely and the input's contents are replaced with the new
key.
[1] https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2125620
Video showing chord creation and timeout: https://i.imgur.com/wTjyxSg.mp4
Bug: 174309
Change-Id: Ic45fca8a5213f9befab6880c0c4ffbf41e22142a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2521142
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Brian Cui <brcui@microsoft.com>
Nancy Li