More scanning options (#815)

* Reorganize options

* Add advanced options

* Add a setting transform 'setRelativeAttribute'

* Add advanced options to HTML/CSS

6 files changed, 123 insertions, 23 deletions

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index a66a0455..17bb4ac0 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -138,9 +138,6 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
     width: 100%;
     margin-bottom: 8px;
 }
-.scan-input-index-cell {
-    grid-area: 1/1/4/1;
-}
 .scan-input-index {
     height: 100%;
     width: 40px;
@@ -185,6 +182,9 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
 .scan-input-prefix-cell[data-property=types] {
     grid-area: 3/2/3/2;
 }
+.scan-input-prefix-cell[data-property=options] {
+    grid-area: 4/2/4/2;
+}
 .scan-input-content-cell[data-property=include] {
     grid-area: 1/3/1/3;
 }
@@ -194,9 +194,15 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
 .scan-input-content-cell[data-property=types] {
     grid-area: 3/3/3/3;
 }
+.scan-input-content-cell[data-property=options] {
+    grid-area: 4/3/4/3;
+}
 .scan-input-suffix-cell {
     grid-area: 1/4/1/4;
 }
+.scan-input-index-cell {
+    grid-area: 1/1/5/1;
+}
 .scan-input-suffix-cell>button {
     height: 100%;
 }
@@ -221,24 +227,33 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
     padding-top: 5px;
     padding-bottom: 5px;
 }
+.scan-input-toggle {
+    font-weight: normal;
+    margin: 0;
+}
+.scan-input-toggle>input[type=checkbox] {
+    margin: 0 0.375em 0 0;
+    padding: 0;
+    vertical-align: middle;
+}
+.scan-input-toggle>span {
+    vertical-align: middle;
+}
 .scan-input-type-list {
     display: flex;
     flex-flow: row wrap;
     margin-left: -1em;
 }
 .scan-input-type {
-    font-weight: normal;
-    margin: 0;
-    white-space: nowrap;
     margin-left: 1em;
+    white-space: nowrap;
 }
-.scan-input-type>input[type=checkbox] {
-    margin: 0 0.375em 0 0;
-    padding: 0;
-    vertical-align: middle;
+.scan-input:not([data-show-advanced=true]) .scan-input-prefix-cell[data-property=options],
+.scan-input:not([data-show-advanced=true]) .scan-input-content-cell[data-property=options] {
+    display: none;
 }
-.scan-input-type>span {
-    vertical-align: middle;
+.scan-input[data-show-advanced=true] .scan-input-content-cell[data-property=types] .scan-input-input-cell-inner>.scan-input-type-list-container {
+    border-bottom-right-radius: 0;
 }
 
 .generic-input-list {
diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index e9677e95..9cc8837d 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -362,7 +362,8 @@
                                             "required": [
                                                 "include",
                                                 "exclude",
-                                                "types"
+                                                "types",
+                                                "options"
                                             ],
                                             "properties": {
                                                 "include": {
@@ -394,6 +395,33 @@
                                                             "default": true
                                                         }
                                                     }
+                                                },
+                                                "options": {
+                                                    "type": "object",
+                                                    "required": [
+                                                        "showAdvanced",
+                                                        "scanOnPenHover",
+                                                        "scanOnPenPress",
+                                                        "scanOnPenRelease"
+                                                    ],
+                                                    "properties": {
+                                                        "showAdvanced": {
+                                                            "type": "boolean",
+                                                            "default": false
+                                                        },
+                                                        "scanOnPenHover": {
+                                                            "type": "boolean",
+                                                            "default": true
+                                                        },
+                                                        "scanOnPenPress": {
+                                                            "type": "boolean",
+                                                            "default": true
+                                                        },
+                                                        "scanOnPenRelease": {
+                                                            "type": "boolean",
+                                                            "default": false
+                                                        }
+                                                    }
                                                 }
                                             }
                                         }
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index d3220194..3470da58 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -517,6 +517,12 @@ class OptionsUtil {
                 }
             }
         }
+        const createInputDefaultOptions = () => ({
+            showAdvanced: false,
+            scanOnPenHover: true,
+            scanOnPenPress: true,
+            scanOnPenRelease: false
+        });
         for (const {options: profileOptions} of options.profiles) {
             profileOptions.general.usePopupWindow = false;
             profileOptions.scanning.hideDelay = 0;
@@ -538,20 +544,23 @@ class OptionsUtil {
             scanningInputs.push({
                 include: modifierInput,
                 exclude: '',
-                types: {mouse: true, touch: false, pen: false}
+                types: {mouse: true, touch: false, pen: false},
+                options: createInputDefaultOptions()
             });
             if (middleMouse) {
                 scanningInputs.push({
                     include: 'mouse2',
                     exclude: '',
-                    types: {mouse: true, touch: false, pen: false}
+                    types: {mouse: true, touch: false, pen: false},
+                    options: createInputDefaultOptions()
                 });
             }
             if (touchInputEnabled) {
                 scanningInputs.push({
                     include: '',
                     exclude: '',
-                    types: {mouse: false, touch: true, pen: true}
+                    types: {mouse: false, touch: true, pen: true},
+                    options: createInputDefaultOptions()
                 });
             }
             profileOptions.scanning.inputs = scanningInputs;
diff --git a/ext/bg/js/settings/generic-setting-controller.js b/ext/bg/js/settings/generic-setting-controller.js
index bdea8e3d..de218816 100644
--- a/ext/bg/js/settings/generic-setting-controller.js
+++ b/ext/bg/js/settings/generic-setting-controller.js
@@ -32,6 +32,7 @@ class GenericSettingController {
         });
         this._transforms = new Map([
             ['setDocumentAttribute', this._setDocumentAttribute.bind(this)],
+            ['setRelativeAttribute', this._setRelativeAttribute.bind(this)],
             ['splitTags', this._splitTags.bind(this)],
             ['joinTags', this._joinTags.bind(this)]
         ]);
@@ -122,6 +123,20 @@ class GenericSettingController {
         return value;
     }
 
+    _setRelativeAttribute(value, metadata, element) {
+        const {ancestorDistance, relativeSelector, relativeAttribute} = element.dataset;
+        let relativeElement = this._getAncestor(element, ancestorDistance);
+        if (relativeElement !== null) {
+            if (typeof relativeSelector === 'string') {
+                relativeElement = relativeElement.querySelector(relativeSelector);
+            }
+            if (relativeElement !== null) {
+                relativeElement.setAttribute(relativeAttribute, `${value}`);
+            }
+        }
+        return value;
+    }
+
     _splitTags(value) {
         return `${value}`.split(/[,; ]+/).filter((v) => !!v);
     }
@@ -129,4 +144,16 @@ class GenericSettingController {
     _joinTags(value) {
         return value.join(' ');
     }
+
+    _getAncestor(node, ancestorDistance) {
+        if (typeof ancestorDistance === 'string') {
+            const ii = Number.parseInt(ancestorDistance, 10);
+            if (Number.isFinite(ii)) {
+                for (let i = 0; i < ii && node !== null; ++i) {
+                    node = node.parentNode;
+                }
+            }
+        }
+        return node;
+    }
 }
diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js
index 5895ccea..09decaf3 100644
--- a/ext/bg/js/settings/scan-inputs-controller.js
+++ b/ext/bg/js/settings/scan-inputs-controller.js
@@ -96,7 +96,13 @@ class ScanInputsController {
             items: [{
                 include,
                 exclude,
-                types: {mouse: true, touch: false, pen: false}
+                types: {mouse: true, touch: false, pen: false},
+                options: {
+                    showAdvanced: false,
+                    scanOnPenHover: true,
+                    scanOnPenPress: true,
+                    scanOnPenRelease: false
+                }
             }]
         }]);
     }
@@ -148,9 +154,9 @@ class ScanInputField {
         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')) {
+        for (const typeCheckbox of node.querySelectorAll('.scan-input-settings-checkbox')) {
             const {property} = typeCheckbox.dataset;
-            typeCheckbox.dataset.setting = `scanning.inputs[${this._index}].types.${property}`;
+            typeCheckbox.dataset.setting = `scanning.inputs[${this._index}].${property}`;
         }
     }
 
@@ -188,7 +194,7 @@ class ScanInputField {
 
     _isPointerTypeSupported(pointerType) {
         if (this._node === null) { return false; }
-        const node = this._node.querySelector(`input.scan-input-type-checkbox[data-type=${pointerType}]`);
+        const node = this._node.querySelector(`input.scan-input-settings-checkbox[data-property="types.${pointerType}"]`);
         return node !== null && node.checked;
     }
 }
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index e934a92c..cc6f93e0 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -453,9 +453,24 @@
                             <div class="scan-input-prefix-cell" data-property="types"><div class="scan-input-prefix">Types</div></div>
                             <div class="scan-input-content-cell" data-property="types"><div class="scan-input-input-cell-inner">
                                 <div class="scan-input-type-list-container form-control"><div class="scan-input-type-list">
-                                    <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="mouse"><span>Mouse</span></label>
-                                    <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="touch"><span>Touch</span></label>
-                                    <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="pen"><span>Pen</span></label>
+                                    <label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="types.mouse"><span>Mouse</span></label>
+                                    <label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="types.touch"><span>Touch</span></label>
+                                    <label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="types.pen"><span>Pen</span></label>
+                                    <label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="options.showAdvanced"
+                                        data-transform-pre="setRelativeAttribute"
+                                        data-transform-post="setRelativeAttribute"
+                                        data-ancestor-distance="7"
+                                        data-relative-attribute="data-show-advanced"
+                                    ><span>Advanced</span></label>
+                                </div></div>
+                            </div></div>
+
+                            <div class="scan-input-prefix-cell" data-property="options"><div class="scan-input-prefix">Options</div></div>
+                            <div class="scan-input-content-cell" data-property="options"><div class="scan-input-input-cell-inner">
+                                <div class="scan-input-type-list-container form-control"><div>
+                                    <div><label class="scan-input-toggle"><input type="checkbox" class="scan-input-settings-checkbox" data-property="options.scanOnPenHover"><span>Scan on pen hover</span></label></div>
+                                    <div><label class="scan-input-toggle"><input type="checkbox" class="scan-input-settings-checkbox" data-property="options.scanOnPenPress"><span>Scan on pen press</span></label></div>
+                                    <div><label class="scan-input-toggle"><input type="checkbox" class="scan-input-settings-checkbox" data-property="options.scanOnPenRelease"><span>Scan on pen release</span></label></div>
                                 </div></div>
                             </div></div>
                         </div>