More scanning options (#815)

* Reorganize options

* Add advanced options

* Add a setting transform 'setRelativeAttribute'

* Add advanced options to HTML/CSS

2 files changed, 37 insertions, 4 deletions

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;
     }
 }