Modifier key refactor (#784)

* Add functions for getting keyboard key information

* Use os + DocumentUtil to get modifier key names

* Remove keyboard modifier info from environment info

4 files changed, 19 insertions, 19 deletions

diff --git a/ext/bg/js/settings/keyboard-mouse-input-field.js b/ext/bg/js/settings/keyboard-mouse-input-field.js
index d1dc76e0..b1530c1b 100644
--- a/ext/bg/js/settings/keyboard-mouse-input-field.js
+++ b/ext/bg/js/settings/keyboard-mouse-input-field.js
@@ -20,18 +20,18 @@
  */
 
 class KeyboardMouseInputField extends EventDispatcher {
-    constructor(inputNode, mouseButton, inputNameMap, keySeparator) {
+    constructor(inputNode, mouseButton, os) {
         super();
         this._inputNode = inputNode;
-        this._keySeparator = keySeparator;
+        this._mouseButton = mouseButton;
+        this._keySeparator = ' + ';
+        this._inputNameMap = new Map(DocumentUtil.getModifierKeys(os));
         this._keyPriorities = new Map([
             ['meta', -4],
             ['ctrl', -3],
             ['alt', -2],
             ['shift', -1]
         ]);
-        this._mouseButton = mouseButton;
-        this._inputNameMap = inputNameMap;
         this._mouseInputNamePattern = /^mouse(\d+)$/;
         this._eventListeners = new EventListenerCollection();
         this._value = '';
diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js
index b29744ac..f775cd57 100644
--- a/ext/bg/js/settings/main.js
+++ b/ext/bg/js/settings/main.js
@@ -22,6 +22,7 @@
  * ClipboardPopupsController
  * DictionaryController
  * DictionaryImportController
+ * DocumentUtil
  * GenericSettingController
  * PopupPreviewController
  * ProfileController
@@ -43,12 +44,12 @@ async function settingsPopulateModifierKeys() {
     const scanModifierKeySelect = document.querySelector('#scan-modifier-key');
     scanModifierKeySelect.textContent = '';
 
-    const environment = await api.getEnvironmentInfo();
+    const {platform: {os}} = await api.getEnvironmentInfo();
     const modifierKeys = [
-        {value: 'none', name: 'None'},
-        ...environment.modifiers.keys
+        ['none', 'None'],
+        DocumentUtil.getModifierKeys(os)
     ];
-    for (const {value, name} of modifierKeys) {
+    for (const [value, name] of modifierKeys) {
         const option = document.createElement('option');
         option.value = value;
         option.textContent = name;
diff --git a/ext/bg/js/settings/profile-conditions-ui.js b/ext/bg/js/settings/profile-conditions-ui.js
index 4fb181cf..d88f932b 100644
--- a/ext/bg/js/settings/profile-conditions-ui.js
+++ b/ext/bg/js/settings/profile-conditions-ui.js
@@ -22,8 +22,7 @@
 class ProfileConditionsUI {
     constructor(settingsController) {
         this._settingsController = settingsController;
-        this._keySeparator = '';
-        this._keyNames = new Map();
+        this._os = null;
         this._conditionGroupsContainer = null;
         this._addConditionGroupButton = null;
         this._children = [];
@@ -80,12 +79,12 @@ class ProfileConditionsUI {
         return this._settingsController.profileIndex;
     }
 
-    setKeyInfo(separator, keyNames) {
-        this._keySeparator = separator;
-        this._keyNames.clear();
-        for (const {value, name} of keyNames) {
-            this._keyNames.set(value, name);
-        }
+    get os() {
+        return this._os;
+    }
+
+    set os(value) {
+        this._os = value;
     }
 
     prepare(conditionGroups) {
@@ -209,7 +208,7 @@ class ProfileConditionsUI {
     }
 
     createKeyboardMouseInputField(inputNode, mouseButton) {
-        return new KeyboardMouseInputField(inputNode, mouseButton, this._keyNames, this._keySeparator);
+        return new KeyboardMouseInputField(inputNode, mouseButton, this._os);
     }
 
     // Private
diff --git a/ext/bg/js/settings/profiles.js b/ext/bg/js/settings/profiles.js
index c1961e20..6cd95d9c 100644
--- a/ext/bg/js/settings/profiles.js
+++ b/ext/bg/js/settings/profiles.js
@@ -47,8 +47,8 @@ class ProfileController {
     // Private
 
     async _onOptionsChanged() {
-        const {modifiers} = await api.getEnvironmentInfo();
-        this._profileConditionsUI.setKeyInfo(modifiers.separator, modifiers.keys);
+        const {platform: {os}} = await api.getEnvironmentInfo();
+        this._profileConditionsUI.os = os;
 
         const optionsFull = await this._settingsController.getOptionsFullMutable();
         this._formWrite(optionsFull);