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.

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/+/2448668Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#813959}

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. -->

chromeos/components/scanning/resources/scanner_select.js

@@ -35,6 +35,12 @@ Polymer({
       value: () => [],
     },
 
+    /** @type {?string} */
+    selectedScannerId: {
+      type: String,
+      notify: true,
+    },
+
     loaded: Boolean,
 
     /** @private */
@@ -66,14 +72,6 @@ Polymer({
     return tokenToString(scanner.id);
   },
 
-  /**
-   * @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

chromeos/components/scanning/resources/scanning_app.html

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

chromeos/components/scanning/resources/scanning_app.js

@@ -38,11 +38,8 @@ Polymer({
       value: () => [],
     },
 
-    /**
-     * @type {?mojoBase.mojom.UnguessableToken}
-     * @private
-     */
-    selectedScannerId_: Object,
+    /** @type (?string) */
+    selectedScannerId: String,
 
     /**
      * @type {?chromeos.scanning.mojom.ScannerCapabilities}
@@ -50,11 +47,8 @@ Polymer({
      */
     capabilities_: Object,
 
-    /**
-     * @type {?chromeos.scanning.mojom.ScanSource}
-     * @private
-     */
-    selectedSoure_: Object,
+    /** @type {?string} */
+    selectedSource: String,
 
     /** @private */
     loaded_: {
@@ -63,10 +57,7 @@ Polymer({
     },
   },
 
-  listeners: {
-    'selected-scanner-change': 'onSelectedScannerChange_',
-    'selected-source-change': 'onSelectedSourceChange_',
-  },
+  observers: ['onSelectedScannerIdChange_(selectedScannerId)'],
 
   /** @override */
   created() {
@@ -88,7 +79,7 @@ Polymer({
 
     // 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 @@ Polymer({
     // 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;
-      }
-    }
-  },
 });

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">

chromeos/components/scanning/resources/source_select.js

@@ -33,6 +33,12 @@ Polymer({
       value: () => [],
     },
 
+    /** @type {?string} */
+    selectedSource: {
+      type: String,
+      notify: true,
+    },
+
     /** @private */
     disabled_: Boolean,
   },
@@ -50,14 +56,6 @@ Polymer({
     return getSourceTypeString(mojoSourceType);
   },
 
-  /**
-   * @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