Scan inputs controller refactor (#975)

* Add public function to clear inputs

* Return the promise

* Pass input options directly

* Assign showAdvanced

* Add more menu options

2 files changed, 48 insertions, 11 deletions

diff --git a/ext/bg/js/settings/keyboard-mouse-input-field.js b/ext/bg/js/settings/keyboard-mouse-input-field.js
index f05de4a7..f9c6dfcd 100644
--- a/ext/bg/js/settings/keyboard-mouse-input-field.js
+++ b/ext/bg/js/settings/keyboard-mouse-input-field.js
@@ -77,6 +77,10 @@ class KeyboardMouseInputField extends EventDispatcher {
         this._penPointerIds.clear();
     }
 
+    clearInputs() {
+        this._updateInputs([]);
+    }
+
     // Private
 
     _splitValue(value) {
@@ -169,7 +173,7 @@ class KeyboardMouseInputField extends EventDispatcher {
         switch (key) {
             case 'Escape':
             case 'Backspace':
-                this._updateInputs([]);
+                this.clearInputs();
                 break;
             default:
                 this._addInputs(this._getModifierKeys(e));
diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js
index a7054b32..4f736d53 100644
--- a/ext/bg/js/settings/scan-inputs-controller.js
+++ b/ext/bg/js/settings/scan-inputs-controller.js
@@ -65,7 +65,7 @@ class ScanInputsController {
 
     setProperty(index, property, value) {
         const path = `scanning.inputs[${index}].${property}`;
-        this._settingsController.setProfileSetting(path, value);
+        return this._settingsController.setProfileSetting(path, value);
     }
 
     instantiateTemplate(name) {
@@ -93,8 +93,7 @@ class ScanInputsController {
         this._entries.length = 0;
 
         for (let i = 0, ii = inputs.length; i < ii; ++i) {
-            const {include, exclude} = inputs[i];
-            this._addOption(i, include, exclude);
+            this._addOption(i, inputs[i]);
         }
 
         this._updateCounts();
@@ -104,23 +103,22 @@ class ScanInputsController {
         e.preventDefault();
 
         const index = this._entries.length;
-        const include = '';
-        const exclude = '';
-        this._addOption(index, include, exclude);
+        const scanningInput = ScanInputsController.createDefaultMouseInput('', '');
+        this._addOption(index, scanningInput);
         this._updateCounts();
         this._modifyProfileSettings([{
             action: 'splice',
             path: 'scanning.inputs',
             start: index,
             deleteCount: 0,
-            items: [ScanInputsController.createDefaultMouseInput(include, exclude)]
+            items: [scanningInput]
         }]);
     }
 
-    _addOption(index, include, exclude) {
+    _addOption(index, scanningInput) {
         const field = new ScanInputField(this, index, this._os);
         this._entries.push(field);
-        field.prepare(this._container, include, exclude);
+        field.prepare(this._container, scanningInput);
     }
 
     _updateCounts() {
@@ -174,7 +172,9 @@ class ScanInputField {
         this._updateDataSettingTargets();
     }
 
-    prepare(container, include, exclude) {
+    prepare(container, scanningInput) {
+        const {include, exclude, options: {showAdvanced}} = scanningInput;
+
         const node = this._parent.instantiateTemplate('scan-input');
         const includeInputNode = node.querySelector('.scan-input-field[data-property=include]');
         const includeMouseButton = node.querySelector('.mouse-button[data-property=include]');
@@ -183,6 +183,8 @@ class ScanInputField {
         const removeButton = node.querySelector('.scan-input-remove');
         const menuButton = node.querySelector('.scanning-input-menu-button');
 
+        node.dataset.showAdvanced = `${showAdvanced}`;
+
         this._node = node;
         container.appendChild(node);
 
@@ -198,6 +200,7 @@ class ScanInputField {
             this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this));
         }
         if (menuButton !== null) {
+            this._eventListeners.addEventListener(menuButton, 'menuOpened', this._onMenuOpened.bind(this));
             this._eventListeners.addEventListener(menuButton, 'menuClosed', this._onMenuClosed.bind(this));
         }
 
@@ -217,6 +220,8 @@ class ScanInputField {
         }
     }
 
+    // Private
+
     _onIncludeValueChange({value}) {
         this._parent.setProperty(this._index, 'include', value);
     }
@@ -230,11 +235,33 @@ class ScanInputField {
         this._removeSelf();
     }
 
+    _onMenuOpened({detail: {menu}}) {
+        const showAdvanced = menu.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]');
+        const hideAdvanced = menu.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]');
+        const advancedVisible = (this._node.dataset.showAdvanced === 'true');
+        if (showAdvanced !== null) {
+            showAdvanced.hidden = advancedVisible;
+        }
+        if (hideAdvanced !== null) {
+            hideAdvanced.hidden = !advancedVisible;
+        }
+    }
+
     _onMenuClosed({detail: {action}}) {
         switch (action) {
             case 'remove':
                 this._removeSelf();
                 break;
+            case 'showAdvanced':
+                this._setAdvancedOptionsVisible(true);
+                break;
+            case 'hideAdvanced':
+                this._setAdvancedOptionsVisible(false);
+                break;
+            case 'clearInputs':
+                this._includeInputField.clearInputs();
+                this._excludeInputField.clearInputs();
+                break;
         }
     }
 
@@ -255,4 +282,10 @@ class ScanInputField {
     _removeSelf() {
         this._parent.removeInput(this._index);
     }
+
+    _setAdvancedOptionsVisible(showAdvanced) {
+        showAdvanced = !!showAdvanced;
+        this._node.dataset.showAdvanced = `${showAdvanced}`;
+        this._parent.setProperty(this._index, 'options.showAdvanced', showAdvanced);
+    }
 }