[M87] scanning: Replace custom events with data bindings
Instead of firing custom events when dropdown selections are changed,
use data bindings to set the scanning-app element's properties to the
selected values.
(cherry picked from commit 401353ef23bb65ec1bc3f4939fbc8b69e88e4729)
Bug: 1059779
Test: Select a scanner and verify its capabilities are obtained.
Change-Id: If8927a4898dca25720c7f8550fe640fad160178a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2448668
Reviewed-by: Jimmy Gong <[email protected]>
Commit-Queue: Jesse Schettler <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#813959}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2460146
Reviewed-by: Jesse Schettler <[email protected]>
Cr-Commit-Position: refs/branch-heads/4280@{#126}
Cr-Branched-From: ea420fb963f9658c9969b6513c56b8f47efa1a2a-refs/heads/master@{#812852}
diff --git a/chromeos/components/scanning/resources/scanner_select.html b/chromeos/components/scanning/resources/scanner_select.html
index adaad8c..af9bc5a 100644
--- a/chromeos/components/scanning/resources/scanner_select.html
+++ b/chromeos/components/scanning/resources/scanner_select.html
@@ -17,7 +17,7 @@
</div>
<!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
should announce when a new option is focused). -->
- <select class="md-select" on-change="onSelectedScannerChange_"
+ <select class="md-select" value="{{selectedScannerId::change}}"
hidden$="[[!loaded]]" disabled="[[disabled_]]">
<!-- TODO(jschettler): Figure out why hiding/disabling the option doesn't
remove it from the dropdown. -->
diff --git a/chromeos/components/scanning/resources/scanner_select.js b/chromeos/components/scanning/resources/scanner_select.js
index 1815583..0e718fa 100644
--- a/chromeos/components/scanning/resources/scanner_select.js
+++ b/chromeos/components/scanning/resources/scanner_select.js
@@ -35,6 +35,12 @@
value: () => [],
},
+ /** @type {?string} */
+ selectedScannerId: {
+ type: String,
+ notify: true,
+ },
+
loaded: Boolean,
/** @private */
@@ -67,14 +73,6 @@
},
/**
- * @param {!Event} event
- * @private
- */
- onSelectedScannerChange_(event) {
- this.fire('selected-scanner-change', event.target);
- },
-
- /**
* Disables the dropdown based on the number of available scanners.
* @param {number} numScanners
* @private
diff --git a/chromeos/components/scanning/resources/scanning_app.html b/chromeos/components/scanning/resources/scanning_app.html
index b3e7acd..473c89b4 100644
--- a/chromeos/components/scanning/resources/scanning_app.html
+++ b/chromeos/components/scanning/resources/scanning_app.html
@@ -1,7 +1,9 @@
<div id="header"></div>
<div>
- <scanner-select scanners="[[scanners_]]" loaded="[[loaded_]]"></scanner-select>
+ <scanner-select scanners="[[scanners_]]" loaded="[[loaded_]]"
+ selected-scanner-id="{{selectedScannerId}}"></scanner-select>
</div>
<div>
- <source-select sources="[[capabilities_.sources]]"></source-select>
+ <source-select sources="[[capabilities_.sources]]"
+ selected-source="{{selectedSource}}"></source-select>
</div>
diff --git a/chromeos/components/scanning/resources/scanning_app.js b/chromeos/components/scanning/resources/scanning_app.js
index b25c7f0..420a0ae 100644
--- a/chromeos/components/scanning/resources/scanning_app.js
+++ b/chromeos/components/scanning/resources/scanning_app.js
@@ -38,11 +38,8 @@
value: () => [],
},
- /**
- * @type {?mojoBase.mojom.UnguessableToken}
- * @private
- */
- selectedScannerId_: Object,
+ /** @type (?string) */
+ selectedScannerId: String,
/**
* @type {?chromeos.scanning.mojom.ScannerCapabilities}
@@ -50,11 +47,8 @@
*/
capabilities_: Object,
- /**
- * @type {?chromeos.scanning.mojom.ScanSource}
- * @private
- */
- selectedSoure_: Object,
+ /** @type {?string} */
+ selectedSource: String,
/** @private */
loaded_: {
@@ -63,10 +57,7 @@
},
},
- listeners: {
- 'selected-scanner-change': 'onSelectedScannerChange_',
- 'selected-source-change': 'onSelectedSourceChange_',
- },
+ observers: ['onSelectedScannerIdChange_(selectedScannerId)'],
/** @override */
created() {
@@ -88,7 +79,7 @@
// Set the first source as the selected source since it will be the first
// option in the dropdown.
- this.selectedSoure_ = this.capabilities_.sources[0];
+ this.selectedSource = this.capabilities_.sources[0].name;
},
/**
@@ -109,37 +100,20 @@
// Since the first scanner is the default option in the dropdown, set the
// selected ID to the fist scanner's ID until a different scanner is
// selected.
- this.selectedScannerId_ = this.scanners_[0].id;
- this.scanService_.getScannerCapabilities(this.selectedScannerId_)
- .then(this.onCapabilitiesReceived_.bind(this));
+ this.selectedScannerId = tokenToString(this.scanners_[0].id);
},
/**
- * @param {!Event} event
+ * @param {!string} selectedScannerId
* @private
*/
- onSelectedScannerChange_(event) {
- const value = event.detail.value;
- if (!this.scannerIds_.has(value)) {
+ onSelectedScannerIdChange_(selectedScannerId) {
+ if (!this.scannerIds_.has(selectedScannerId)) {
return;
}
- this.selectedScannerId_ = this.scannerIds_.get(value);
- this.scanService_.getScannerCapabilities(this.selectedScannerId_)
+ this.scanService_
+ .getScannerCapabilities(this.scannerIds_.get(selectedScannerId))
.then(this.onCapabilitiesReceived_.bind(this));
},
-
- /**
- * @param {!Event} event
- * @private
- */
- onSelectedSourceChange_(event) {
- const value = event.detail.value;
- for (const source of this.capabilities_.sources) {
- if (source.name === value) {
- this.selectedSoure_ = source;
- break;
- }
- }
- },
});
diff --git a/chromeos/components/scanning/resources/source_select.html b/chromeos/components/scanning/resources/source_select.html
index 16cbb4f6..0aebf8a 100644
--- a/chromeos/components/scanning/resources/source_select.html
+++ b/chromeos/components/scanning/resources/source_select.html
@@ -14,7 +14,7 @@
<div id="controls">
<!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
should announce when a new option is focused). -->
- <select class="md-select" on-change="onSelectedSourceChange_"
+ <select class="md-select" value="{{selectedSource::change}}"
disabled="[[disabled_]]">
<!-- TODO(jschettler): Determine how the sources should be sorted. -->
<template is="dom-repeat" items="[[sources]]" as="source">
diff --git a/chromeos/components/scanning/resources/source_select.js b/chromeos/components/scanning/resources/source_select.js
index 0779582..442ac80 100644
--- a/chromeos/components/scanning/resources/source_select.js
+++ b/chromeos/components/scanning/resources/source_select.js
@@ -33,6 +33,12 @@
value: () => [],
},
+ /** @type {?string} */
+ selectedSource: {
+ type: String,
+ notify: true,
+ },
+
/** @private */
disabled_: Boolean,
},
@@ -51,14 +57,6 @@
},
/**
- * @param {!Event} event
- * @private
- */
- onSelectedSourceChange_(event) {
- this.fire('selected-source-change', event.target);
- },
-
- /**
* Disables the dropdown based on the number of available sources.
* @param {number} numSources
* @private
