Use code instead of key (#1234)

* Update KeyboardMouseInputField to use .code instead of .key

* Update Display to use .code instead of .key

* Remove unused function

3 files changed, 22 insertions, 20 deletions

diff --git a/ext/bg/js/settings/keyboard-mouse-input-field.js b/ext/bg/js/settings/keyboard-mouse-input-field.js
index 448841f6..5e7a2f2e 100644
--- a/ext/bg/js/settings/keyboard-mouse-input-field.js
+++ b/ext/bg/js/settings/keyboard-mouse-input-field.js
@@ -156,7 +156,7 @@ class KeyboardMouseInputField extends EventDispatcher {
         // This is a hack and only works when both Shift and Alt are not pressed.
         if (
             !modifiers.has('meta') &&
-            DocumentUtil.getKeyFromEvent(e) === 'Meta' &&
+            e.key === 'Meta' &&
             !(
                 modifiers.size === 2 &&
                 modifiers.has('shift') &&
@@ -170,10 +170,16 @@ class KeyboardMouseInputField extends EventDispatcher {
 
     _isModifierKey(keyName) {
         switch (keyName) {
-            case 'Alt':
-            case 'Control':
-            case 'Meta':
-            case 'Shift':
+            case 'AltLeft':
+            case 'AltRight':
+            case 'ControlLeft':
+            case 'ControlRight':
+            case 'MetaLeft':
+            case 'MetaRight':
+            case 'ShiftLeft':
+            case 'ShiftRight':
+            case 'OSLeft':
+            case 'OSRight':
                 return true;
             default:
                 return false;
@@ -183,7 +189,8 @@ class KeyboardMouseInputField extends EventDispatcher {
     _onModifierKeyDown(e) {
         e.preventDefault();
 
-        const key = DocumentUtil.getKeyFromEvent(e);
+        let key = e.code;
+        if (key === 'Unidentified' || key === '') { key = void 0; }
         if (this._keySupported) {
             this._updateModifiers([...this._getModifierKeys(e)], this._isModifierKey(key) ? void 0 : key);
         } else {
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 6a1ebba6..e361a3a1 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -140,14 +140,14 @@ class Display extends EventDispatcher {
             {key: 'Home',      modifiers: ['alt'],  action: 'firstEntry'},
             {key: 'ArrowUp',   modifiers: ['alt'],  action: 'previousEntry'},
             {key: 'ArrowDown', modifiers: ['alt'],  action: 'nextEntry'},
-            {key: 'B',         modifiers: ['alt'],  action: 'historyBackward'},
-            {key: 'F',         modifiers: ['alt'],  action: 'historyForward'},
-            {key: 'K',         modifiers: ['alt'],  action: 'addNoteKanji'},
-            {key: 'E',         modifiers: ['alt'],  action: 'addNoteTermKanji'},
-            {key: 'R',         modifiers: ['alt'],  action: 'addNoteTermKana'},
-            {key: 'P',         modifiers: ['alt'],  action: 'playAudio'},
-            {key: 'V',         modifiers: ['alt'],  action: 'viewNote'},
-            {key: 'C',         modifiers: ['ctrl'], action: 'copyHostSelection'}
+            {key: 'KeyB',      modifiers: ['alt'],  action: 'historyBackward'},
+            {key: 'KeyF',      modifiers: ['alt'],  action: 'historyForward'},
+            {key: 'KeyK',      modifiers: ['alt'],  action: 'addNoteKanji'},
+            {key: 'KeyE',      modifiers: ['alt'],  action: 'addNoteTermKanji'},
+            {key: 'KeyR',      modifiers: ['alt'],  action: 'addNoteTermKana'},
+            {key: 'KeyP',      modifiers: ['alt'],  action: 'playAudio'},
+            {key: 'KeyV',      modifiers: ['alt'],  action: 'viewNote'},
+            {key: 'KeyC',      modifiers: ['ctrl'], action: 'copyHostSelection'}
         ]);
         this.registerMessageHandlers([
             ['setMode', {async: false, handler: this._onMessageSetMode.bind(this)}]
@@ -273,7 +273,7 @@ class Display extends EventDispatcher {
     }
 
     onKeyDown(e) {
-        const key = DocumentUtil.getKeyFromEvent(e);
+        const key = e.code;
         const handlers = this._hotkeys.get(key);
         if (typeof handlers === 'undefined') { return false; }
 
diff --git a/ext/mixed/js/document-util.js b/ext/mixed/js/document-util.js
index 42d3556b..0c0a2153 100644
--- a/ext/mixed/js/document-util.js
+++ b/ext/mixed/js/document-util.js
@@ -227,11 +227,6 @@ class DocumentUtil {
         return buttons;
     }
 
-    static getKeyFromEvent(event) {
-        const key = event.key;
-        return (typeof key === 'string' ? (key.length === 1 ? key.toUpperCase() : key) : '');
-    }
-
     static addFullscreenChangeEventListener(onFullscreenChanged, eventListenerCollection=null) {
         const target = document;
         const options = false;