Input type filters (#806)

* Add options for scanning input types

* Move buttons in layout, refactor CSS

* Add options for input types

* Use input type filters

* Add _getMatchingInputGroupFromEvent

* Use input filters for touch events

5 files changed, 109 insertions, 21 deletions

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 6d32c9c5..0bf15f01 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -133,10 +133,7 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
 }
 .scan-input-table {
     width: 100%;
-}
-.scan-input-list:not(:empty)+#scan-input-add {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    margin-bottom: 8px;
 }
 .scan-input-index-cell {
     position: relative;
@@ -153,6 +150,7 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
     background-color: #eee;
     border: 1px solid #ccc;
     border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -174,22 +172,46 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
 .scan-input-input-cell {
     width: 100%;
 }
-.scan-input-input-cell>input {
-    border-radius: 0;
+.scan-input-input-cell-inner {
+    display: flex;
 }
-.scan-input-mouse-button-cell>button {
+.scan-input-input-cell-inner .form-control,
+.scan-input-input-cell-inner button {
     border-radius: 0;
 }
+.scan-input-input-cell-inner button {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.scan-input-input-cell-inner button>span {
+    width: 20px;
+}
 .scan-input-remove-button-cell>button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-.scan-input:nth-child(n+2) .scan-input-index {
-    border-top-left-radius: 0;
-}
-.scan-input:last-child tr:last-of-type .scan-input-mouse-button-cell>button {
+.scan-input tr:last-of-type .scan-input-input-cell-inner button:last-of-type,
+.scan-input tr:last-of-type .scan-input-input-cell-inner .form-control:last-of-type {
     border-bottom-right-radius: 4px;
 }
+.scan-input-type-list {
+    display: flex;
+}
+.scan-input-type {
+    font-weight: normal;
+    margin: 0;
+}
+.scan-input-type+.scan-input-type {
+    margin-left: 1em;
+}
+.scan-input-type>input[type=checkbox] {
+    margin: 0 0.375em 0 0;
+    padding: 0;
+    vertical-align: middle;
+}
+.scan-input-type>span {
+    vertical-align: middle;
+}
 
 .generic-input-list {
     counter-reset: generic-input-id;
diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index 17fe096c..e9677e95 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -341,13 +341,28 @@
                                         "default": [
                                             {
                                                 "include": "shift",
-                                                "exclude": ""
+                                                "exclude": "",
+                                                "types": {
+                                                    "mouse": true,
+                                                    "touch": false,
+                                                    "pen": false
+                                                }
+                                            },
+                                            {
+                                                "include": "",
+                                                "exclude": "",
+                                                "types": {
+                                                    "mouse": false,
+                                                    "touch": true,
+                                                    "pen": true
+                                                }
                                             }
                                         ],
                                         "items": {
                                             "required": [
                                                 "include",
-                                                "exclude"
+                                                "exclude",
+                                                "types"
                                             ],
                                             "properties": {
                                                 "include": {
@@ -357,6 +372,28 @@
                                                 "exclude": {
                                                     "type": "string",
                                                     "default": ""
+                                                },
+                                                "types": {
+                                                    "type": "object",
+                                                    "required": [
+                                                        "mouse",
+                                                        "touch",
+                                                        "pen"
+                                                    ],
+                                                    "properties": {
+                                                        "mouse": {
+                                                            "type": "boolean",
+                                                            "default": true
+                                                        },
+                                                        "touch": {
+                                                            "type": "boolean",
+                                                            "default": true
+                                                        },
+                                                        "pen": {
+                                                            "type": "boolean",
+                                                            "default": true
+                                                        }
+                                                    }
                                                 }
                                             }
                                         }
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index ac42fc09..e61e1c48 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -491,7 +491,7 @@ class OptionsUtil {
             profileOptions.general.usePopupWindow = false;
             profileOptions.scanning.hideDelay = 0;
 
-            const {modifier, middleMouse} = profileOptions.scanning;
+            const {modifier, middleMouse, touchInputEnabled} = profileOptions.scanning;
             const scanningInputs = [];
             let modifierInput = '';
             switch (modifier) {
@@ -507,12 +507,21 @@ class OptionsUtil {
             }
             scanningInputs.push({
                 include: modifierInput,
-                exclude: ''
+                exclude: '',
+                types: {mouse: true, touch: false, pen: false}
             });
             if (middleMouse) {
                 scanningInputs.push({
                     include: 'mouse2',
-                    exclude: ''
+                    exclude: '',
+                    types: {mouse: true, touch: false, pen: false}
+                });
+            }
+            if (touchInputEnabled) {
+                scanningInputs.push({
+                    include: '',
+                    exclude: '',
+                    types: {mouse: false, touch: true, pen: true}
                 });
             }
             profileOptions.scanning.inputs = scanningInputs;
diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js
index 3b3945ff..3cd2b513 100644
--- a/ext/bg/js/settings/scan-inputs-controller.js
+++ b/ext/bg/js/settings/scan-inputs-controller.js
@@ -142,6 +142,11 @@ class ScanInputField {
         this._eventListeners.on(this._includeInputField, 'change', this._onIncludeValueChange.bind(this));
         this._eventListeners.on(this._excludeInputField, 'change', this._onExcludeValueChange.bind(this));
         this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this));
+
+        for (const typeCheckbox of node.querySelectorAll('.scan-input-type-checkbox')) {
+            const {type} = typeCheckbox.dataset;
+            typeCheckbox.dataset.setting = `scanning.inputs[${this._index}].types.${type}`;
+        }
     }
 
     cleanup() {
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 5e6af7f7..64a510cc 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -436,16 +436,31 @@
                     <template id="scan-input-template"><div class="scan-input">
                         <table class="scan-input-table"><tbody>
                             <tr class="scan-input-include">
-                                <td class="scan-input-index-cell" rowspan="2"><div class="scan-input-index"></div></td>
+                                <td class="scan-input-index-cell" rowspan="3"><div class="scan-input-index"></div></td>
                                 <td class="scan-input-prefix-cell"><div class="scan-input-prefix">Include</div></td>
-                                <td class="scan-input-input-cell"><input type="text" class="form-control scan-input-field" placeholder="No inputs"></td>
-                                <td class="scan-input-mouse-button-cell"><button class="btn btn-default mouse-button" title="Mouse button"><span class="mouse-button-icon"></span></button></td>
+                                <td class="scan-input-input-cell"><div class="scan-input-input-cell-inner">
+                                    <input type="text" class="form-control scan-input-field" placeholder="No inputs">
+                                    <button class="btn btn-default mouse-button" title="Mouse button"><span class="mouse-button-icon"></span></button>
+                                </div></td>
                                 <td class="scan-input-remove-button-cell"><button class="btn btn-danger scan-input-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></td>
                             </tr>
                             <tr class="scan-input-exclude">
                                 <td class="scan-input-prefix-cell"><div class="scan-input-prefix">Exclude</div></td>
-                                <td class="scan-input-input-cell"><input type="text" class="form-control scan-input-field" placeholder="No inputs"></td>
-                                <td class="scan-input-mouse-button-cell"><button class="btn btn-default mouse-button" title="Mouse button"><span class="mouse-button-icon"></span></button></td>
+                                <td class="scan-input-input-cell"><div class="scan-input-input-cell-inner">
+                                    <input type="text" class="form-control scan-input-field" placeholder="No inputs">
+                                    <button class="btn btn-default mouse-button" title="Mouse button"><span class="mouse-button-icon"></span></button>
+                                </div></td>
+                                <td class="scan-input-empty-cell"></td>
+                            </tr>
+                            <tr class="scan-input-types">
+                                <td class="scan-input-prefix-cell"><div class="scan-input-prefix">Types</div></td>
+                                <td class="scan-input-input-cell"><div class="scan-input-input-cell-inner">
+                                    <div class="form-control scan-input-type-list">
+                                        <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="mouse"><span>Mouse</span></label>
+                                        <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="touch"><span>Touch</span></label>
+                                        <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="pen"><span>Pen</span></label>
+                                    </div>
+                                </div></td>
                                 <td class="scan-input-empty-cell"></td>
                             </tr>
                         </tbody></table>