Update KeyboardMouseInputField (#1232)

* Assign missing type

* Update KeyboardMouseInputField to use an array instead of a string

* Use "modifiers" instead of "value" or "inputs"

* Simplify

* Add support for using keys

* Use bool args instead of a string

1 files changed, 17 insertions, 8 deletions

diff --git a/ext/bg/js/settings/profile-conditions-ui.js b/ext/bg/js/settings/profile-conditions-ui.js
index 69319574..77c9db77 100644
--- a/ext/bg/js/settings/profile-conditions-ui.js
+++ b/ext/bg/js/settings/profile-conditions-ui.js
@@ -525,11 +525,12 @@ class ProfileConditionUI {
         }
     }
 
-    _onModifierInputChange({validate, normalize}, {value}) {
-        const okay = this._validateValue(value, validate);
-        this._value = value;
+    _onModifierInputChange({validate, normalize}, {modifiers}) {
+        modifiers = this._joinModifiers(modifiers);
+        const okay = this._validateValue(modifiers, validate);
+        this._value = modifiers;
         if (okay) {
-            const normalizedValue = this._normalizeValue(value, normalize);
+            const normalizedValue = this._normalizeValue(modifiers, normalize);
             this.settingsController.setGlobalSetting(this.getPath('value'), normalizedValue);
         }
     }
@@ -589,7 +590,7 @@ class ProfileConditionUI {
         let inputType = 'text';
         let inputValue = value;
         let inputStep = null;
-        let mouseButtonHidden = true;
+        let showMouseButton = false;
         const events = [];
         const inputData = {validate, normalize};
         const node = this._valueInput;
@@ -603,9 +604,9 @@ class ProfileConditionUI {
             case 'modifierKeys':
             case 'modifierInputs':
                 inputValue = null;
-                mouseButtonHidden = (type !== 'modifierInputs');
+                showMouseButton = (type === 'modifierInputs');
                 this._kbmInputField = this._parent.parent.createKeyboardMouseInputField(node, this._mouseButton);
-                this._kbmInputField.prepare(value, type);
+                this._kbmInputField.prepare(null, this._splitModifiers(value), showMouseButton, false);
                 events.push(['on', this._kbmInputField, 'change', this._onModifierInputChange.bind(this, inputData), false]);
                 break;
             default: // 'string'
@@ -624,7 +625,7 @@ class ProfileConditionUI {
         } else {
             node.removeAttribute('step');
         }
-        this._mouseButtonContainer.hidden = mouseButtonHidden;
+        this._mouseButtonContainer.hidden = !showMouseButton;
         for (const args of events) {
             this._inputEventListeners.addGeneric(...args);
         }
@@ -645,4 +646,12 @@ class ProfileConditionUI {
     _removeSelf() {
         this._parent.removeCondition(this);
     }
+
+    _splitModifiers(modifiersString) {
+        return modifiersString.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0);
+    }
+
+    _joinModifiers(modifiersArray) {
+        return modifiersArray.join(', ');
+    }
 }