Mouse inputs (#783)

* Add mouse icon

* Add _updateModifiers

* Add support for mouse button modifiers

* Improve names of mouse inputs

* Improve mouse input sorting

* Rename getModifierKeyStrings to getModifierInputStrings

* Refactor keyboard/mouse inputs into KeyboardMouseInputField

1 files changed, 27 insertions, 93 deletions

diff --git a/ext/bg/js/settings/profile-conditions-ui.js b/ext/bg/js/settings/profile-conditions-ui.js
index 4c8d1132..4fb181cf 100644
--- a/ext/bg/js/settings/profile-conditions-ui.js
+++ b/ext/bg/js/settings/profile-conditions-ui.js
@@ -16,7 +16,7 @@
  */
 
 /* global
- * DocumentUtil
+ * KeyboardMouseInputField
  */
 
 class ProfileConditionsUI {
@@ -203,35 +203,15 @@ class ProfileConditionsUI {
         return value.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0);
     }
 
-    getModifierKeyStrings(modifiers) {
-        let value = '';
-        let displayValue = '';
-        let first = true;
-        for (const modifier of modifiers) {
-            let keyName = this._keyNames.get(modifier);
-            if (typeof keyName === 'undefined') { keyName = modifier; }
-
-            if (first) {
-                first = false;
-            } else {
-                value += ', ';
-                displayValue += this._keySeparator;
-            }
-            value += modifier;
-            displayValue += keyName;
-        }
-        return {value, displayValue};
-    }
-
-    sortModifiers(modifiers) {
-        return modifiers.sort();
-    }
-
     getPath(property) {
         property = (typeof property === 'string' ? `.${property}` : '');
         return `profiles[${this.index}]${property}`;
     }
 
+    createKeyboardMouseInputField(inputNode, mouseButton) {
+        return new KeyboardMouseInputField(inputNode, mouseButton, this._keyNames, this._keySeparator);
+    }
+
     // Private
 
     _onAddConditionGroupButtonClick() {
@@ -425,7 +405,9 @@ class ProfileConditionUI {
         this._operatorInput = null;
         this._valueInputContainer = null;
         this._removeButton = null;
+        this._mouseButton = null;
         this._value = '';
+        this._kbmInputField = null;
         this._eventListeners = new EventListenerCollection();
         this._inputEventListeners = new EventListenerCollection();
     }
@@ -460,6 +442,7 @@ class ProfileConditionUI {
         this._operatorOptionContainer = this._operatorInput.querySelector('optgroup');
         this._valueInput = this._node.querySelector('.condition-input-inner');
         this._removeButton = this._node.querySelector('.condition-remove');
+        this._mouseButton = this._node.querySelector('.condition-mouse-button');
 
         const operatorDetails = this._getOperatorDetails(type, operator);
         this._updateTypes(type);
@@ -538,32 +521,7 @@ class ProfileConditionUI {
         }
     }
 
-    _onModifierKeyDown({validate, normalize}, e) {
-        e.preventDefault();
-        const node = e.currentTarget;
-
-        let modifiers;
-        const key = DocumentUtil.getKeyFromEvent(e);
-        switch (key) {
-            case 'Escape':
-            case 'Backspace':
-                modifiers = [];
-                break;
-            default:
-                {
-                    modifiers = this._getModifiers(e);
-                    const currentModifier = this._splitValue(this._value);
-                    for (const modifier of currentModifier) {
-                        modifiers.add(modifier);
-                    }
-                    modifiers = [...modifiers];
-                    modifiers = this._sortModifiers(modifiers);
-                }
-                break;
-        }
-
-        const {value, displayValue} = this._getModifierKeyStrings(modifiers);
-        node.value = displayValue;
+    _onModifierInputChange({validate, normalize}, {value}) {
         const okay = this._validateValue(value, validate);
         this._value = value;
         if (okay) {
@@ -588,18 +546,6 @@ class ProfileConditionUI {
         return this._parent.parent.getOperatorDetails(type, operator);
     }
 
-    _getModifierKeyStrings(modifiers) {
-        return this._parent.parent.getModifierKeyStrings(modifiers);
-    }
-
-    _sortModifiers(modifiers) {
-        return this._parent.parent.sortModifiers(modifiers);
-    }
-
-    _splitValue(value) {
-        return this._parent.parent.splitValue(value);
-    }
-
     _updateTypes(type) {
         const types = this._getDescriptorTypes();
         this._updateSelect(this._typeInput, this._typeOptionContainer, types, type);
@@ -623,10 +569,15 @@ class ProfileConditionUI {
 
     _updateValueInput(value, {type, validate, normalize}) {
         this._inputEventListeners.removeAllEventListeners();
+        if (this._kbmInputField !== null) {
+            this._kbmInputField.cleanup();
+            this._kbmInputField = null;
+        }
 
         let inputType = 'text';
         let inputValue = value;
         let inputStep = null;
+        let mouseButtonHidden = true;
         const events = [];
         const inputData = {validate, normalize};
         const node = this._valueInput;
@@ -635,32 +586,35 @@ class ProfileConditionUI {
             case 'integer':
                 inputType = 'number';
                 inputStep = '1';
-                events.push([node, 'change', this._onValueInputChange.bind(this, inputData), false]);
+                events.push(['addEventListener', node, 'change', this._onValueInputChange.bind(this, inputData), false]);
                 break;
             case 'modifierKeys':
-                {
-                    const modifiers = this._splitValue(value);
-                    const {displayValue} = this._getModifierKeyStrings(modifiers);
-                    inputValue = displayValue;
-                    events.push([node, 'keydown', this._onModifierKeyDown.bind(this, inputData), false]);
-                }
+            case 'modifierInputs':
+                inputValue = null;
+                mouseButtonHidden = (type !== 'modifierInputs');
+                this._kbmInputField = this._parent.parent.createKeyboardMouseInputField(node, this._mouseButton);
+                this._kbmInputField.prepare(value, type);
+                events.push(['on', this._kbmInputField, 'change', this._onModifierInputChange.bind(this, inputData), false]);
                 break;
             default: // 'string'
-                events.push([node, 'change', this._onValueInputChange.bind(this, inputData), false]);
+                events.push(['addEventListener', node, 'change', this._onValueInputChange.bind(this, inputData), false]);
                 break;
         }
 
         this._value = value;
         node.classList.remove('is-invalid');
         node.type = inputType;
-        node.value = inputValue;
+        if (inputValue !== null) {
+            node.value = inputValue;
+        }
         if (typeof inputStep === 'string') {
             node.step = inputStep;
         } else {
             node.removeAttribute('step');
         }
+        this._mouseButton.hidden = mouseButtonHidden;
         for (const args of events) {
-            this._inputEventListeners.addEventListener(...args);
+            this._inputEventListeners.addGeneric(...args);
         }
 
         this._validateValue(value, validate);
@@ -675,24 +629,4 @@ class ProfileConditionUI {
     _normalizeValue(value, normalize) {
         return (normalize !== null ? normalize(value) : value);
     }
-
-    _getModifiers(e) {
-        const modifiers = DocumentUtil.getActiveModifiers(e);
-        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey
-        // https://askubuntu.com/questions/567731/why-is-shift-alt-being-mapped-to-meta
-        // It works with mouse events on some platforms, so try to determine if metaKey is pressed.
-        // This is a hack and only works when both Shift and Alt are not pressed.
-        if (
-            !modifiers.has('meta') &&
-            DocumentUtil.getKeyFromEvent(e) === 'Meta' &&
-            !(
-                modifiers.size === 2 &&
-                modifiers.has('shift') &&
-                modifiers.has('alt')
-            )
-        ) {
-            modifiers.add('meta');
-        }
-        return modifiers;
-    }
 }