Hotkeys (#1236)

* Set up hotkey inputs

* Improve key display

* Add setInput

* Add KeyboardShortcutController

* Update how display handles hotkeys

1 files changed, 17 insertions, 4 deletions

diff --git a/ext/bg/js/settings/keyboard-mouse-input-field.js b/ext/bg/js/settings/keyboard-mouse-input-field.js
index 5e7a2f2e..d48b130f 100644
--- a/ext/bg/js/settings/keyboard-mouse-input-field.js
+++ b/ext/bg/js/settings/keyboard-mouse-input-field.js
@@ -49,11 +49,9 @@ class KeyboardMouseInputField extends EventDispatcher {
     prepare(key, modifiers, mouseModifiersSupported=false, keySupported=false) {
         this.cleanup();
 
-        this._key = key;
-        this._modifiers = this._sortModifiers(modifiers);
         this._mouseModifiersSupported = mouseModifiersSupported;
         this._keySupported = keySupported;
-        this._updateDisplayString();
+        this.setInput(key, modifiers);
         const events = [
             [this._inputNode, 'keydown', this._onModifierKeyDown.bind(this), false]
         ];
@@ -73,6 +71,12 @@ class KeyboardMouseInputField extends EventDispatcher {
         }
     }
 
+    setInput(key, modifiers) {
+        this._key = key;
+        this._modifiers = this._sortModifiers(modifiers);
+        this._updateDisplayString();
+    }
+
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         this._modifiers = [];
@@ -131,11 +135,20 @@ class KeyboardMouseInputField extends EventDispatcher {
         }
         if (this._key !== null) {
             if (!first) { displayValue += this._keySeparator; }
-            displayValue += this._key;
+            displayValue += this._getDisplayKey(this._key);
         }
         this._inputNode.value = displayValue;
     }
 
+    _getDisplayKey(key) {
+        if (typeof key === 'string') {
+            if (key.length === 4 && key.startsWith('Key')) {
+                key = key.substring(3);
+            }
+        }
+        return key;
+    }
+
     _getModifierName(modifier) {
         const pattern = this._mouseInputNamePattern;
         const match = pattern.exec(modifier);