scanning: Add behavior for select-based elements

Add a new behavior, SelectBehavior, for shared functions of custom
elements that implement scan settings using select elements.

Bug: 1059779
Change-Id: Ieba696d8844c994fb4a944d0dc91edbd85ac04c5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2480809Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#818088}

chromeos/components/scanning/resources/BUILD.gn

@@ -18,6 +18,7 @@ js_type_check("closure_compile_module") {
     ":scanning_app",
     ":scanning_app_types",
     ":scanning_app_util",
+    ":select_behavior",
     ":source_select",
   ]
 }
@@ -25,6 +26,7 @@ js_type_check("closure_compile_module") {
 js_library("color_mode_select") {
   deps = [
     ":scanning_app_util",
+    ":select_behavior",
     "//chromeos/components/scanning/mojom:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -33,6 +35,7 @@ js_library("color_mode_select") {
 
 js_library("file_type_select") {
   deps = [
+    ":select_behavior",
     "//chromeos/components/scanning/mojom:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -41,6 +44,7 @@ js_library("file_type_select") {
 
 js_library("resolution_select") {
   deps = [
+    ":select_behavior",
     "//chromeos/components/scanning/mojom:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -52,6 +56,7 @@ js_library("scanner_select") {
   deps = [
     ":scanning_app_types",
     ":scanning_app_util",
+    ":select_behavior",
     "//chromeos/components/scanning/mojom:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -79,9 +84,13 @@ js_library("scanning_app_types") {
 js_library("scanning_app_util") {
 }
 
+js_library("select_behavior") {
+}
+
 js_library("source_select") {
   deps = [
     ":scanning_app_util",
+    ":select_behavior",
     "//chromeos/components/scanning/mojom:mojom_js_library_for_compile",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",

chromeos/components/scanning/resources/color_mode_select.js

@@ -10,9 +10,7 @@ import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getColorModeString} from './scanning_app_util.js';
-
-/** @type {number} */
-const NUM_REQUIRED_COLOR_MODES = 2;
+import {SelectBehavior} from './select_behavior.js';
 
 /**
  * @fileoverview
@@ -23,7 +21,7 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, SelectBehavior],
 
   properties: {
     /** @type {!Array<chromeos.scanning.mojom.ColorMode>} */
@@ -37,16 +35,9 @@ Polymer({
       type: chromeos.scanning.mojom.ColorMode,
       notify: true,
     },
-
-    settingsDisabled: Boolean,
-
-    /** @private */
-    disabled_: Boolean,
   },
 
-  observers: [
-    'updateDisabled_(colorModes.length, settingsDisabled)',
-  ],
+  observers: ['onNumOptionsChange(colorModes.length)'],
 
   /**
    * @param {number} mojoColorMode
@@ -56,14 +47,4 @@ Polymer({
   getColorModeString_(mojoColorMode) {
     return getColorModeString(mojoColorMode);
   },
-
-  /**
-   * Disables the dropdown if settings are disabled or the number of available
-   * color modes is less than the number of required color modes.
-   * @private
-   */
-  updateDisabled_() {
-    this.disabled_ = this.settingsDisabled ||
-        this.colorModes.length < NUM_REQUIRED_COLOR_MODES;
-  },
 });

chromeos/components/scanning/resources/file_type_select.js

@@ -9,6 +9,8 @@ import './strings.m.js';
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {SelectBehavior} from './select_behavior.js';
+
 /**
  * @fileoverview
  * 'file-type-select' displays the available file types in a dropdown.
@@ -18,7 +20,7 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, SelectBehavior],
 
   properties: {
     /** @type {chromeos.scanning.mojom.FileType|undefined} */
@@ -26,10 +28,11 @@ Polymer({
       type: chromeos.scanning.mojom.FileType,
       notify: true,
     },
+  },
 
-    /**
-     * Indicates whether all settings have been disabled by the parent element.
-     */
-    settingsDisabled: Boolean,
+  /** @override */
+  created() {
+    // The dropdown always contains one option per FileType.
+    this.numOptions = chromeos.scanning.mojom.FileType.MAX_VALUE + 1;
   },
 });

chromeos/components/scanning/resources/resolution_select.js

@@ -10,8 +10,7 @@ import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-/** @type {number} */
-const NUM_REQUIRED_RESOLUTIONS = 2;
+import {SelectBehavior} from './select_behavior.js';
 
 /**
  * @fileoverview
@@ -22,7 +21,7 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, SelectBehavior],
 
   properties: {
     /** @type {!Array<number>} */
@@ -36,22 +35,10 @@ Polymer({
       type: Number,
       notify: true,
     },
-
-    /**
-     * Indicates whether all settings have been disabled by the parent element.
-     */
-    settingsDisabled: Boolean,
-
-    /**
-     * Controls whether the dropdown is disabled.
-     * @private
-     */
-    disabled_: {
-      type: Boolean,
-      computed: 'computeDisabled_(resolutions.length, settingsDisabled)',
-    },
   },
 
+  observers: ['onNumOptionsChange(resolutions.length)'],
+
   /**
    * @param {number} resolution
    * @return {!string}
@@ -61,15 +48,4 @@ Polymer({
     return loadTimeData.getStringF(
         'resolutionOptionText', resolution.toString());
   },
-
-  /**
-   * Disables the dropdown if settings are disabled or the number of available
-   * resolutions is less than the number of required resolutions.
-   * @return {boolean}
-   * @private
-   */
-  computeDisabled_() {
-    return this.settingsDisabled ||
-        this.resolutions.length < NUM_REQUIRED_RESOLUTIONS;
-  },
 });

chromeos/components/scanning/resources/scanner_select.js

@@ -15,9 +15,7 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
 
 import {ScannerArr} from './scanning_app_types.js';
 import {tokenToString} from './scanning_app_util.js';
-
-/** @type {number} */
-const NUM_REQUIRED_SCANNERS = 2;
+import {SelectBehavior} from './select_behavior.js';
 
 /**
  * @fileoverview
@@ -28,7 +26,7 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, SelectBehavior],
 
   properties: {
     /** @type {!ScannerArr} */
@@ -44,16 +42,9 @@ Polymer({
     },
 
     loaded: Boolean,
-
-    settingsDisabled: Boolean,
-
-    /** @private */
-    disabled_: Boolean,
   },
 
-  observers: [
-    'updateDisabled_(scanners.length, settingsDisabled)',
-  ],
+  observers: ['onNumOptionsChange(scanners.length)'],
 
   /**
    * @param {!chromeos.scanning.mojom.Scanner} scanner
@@ -75,14 +66,4 @@ Polymer({
   getTokenAsString_(scanner) {
     return tokenToString(scanner.id);
   },
-
-  /**
-   * Disables the dropdown if settings are disabled or the number of available
-   * scanners is less than the number of required scanners.
-   * @private
-   */
-  updateDisabled_() {
-    this.disabled_ =
-        this.settingsDisabled || this.scanners.length < NUM_REQUIRED_SCANNERS;
-  },
 });

chromeos/components/scanning/resources/scanning_app_resources.grd

@@ -33,6 +33,7 @@
 
     <structures>
       <structure name="IDR_SCANNING_APP_MOJO_INTERFACE_PROVIDER_JS" file="mojo_interface_provider.js" type="chrome_html" />
+      <structure name="IDR_SCANNING_APP_SELECT_BEHAVIOR_JS" file="select_behavior.js" type="chrome_html" />
       <structure name="IDR_SCANNING_APP_TYPES_JS" file="scanning_app_types.js" type="chrome_html" />
       <structure name="IDR_SCANNING_APP_UTIL_JS" file="scanning_app_util.js" type="chrome_html" />
     </structures>

chromeos/components/scanning/resources/select_behavior.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/** @type {number} */
+const REQUIRED_NUM_OPTIONS = 2;
+
+/**
+ * Helper functions for custom elements that implement a scan setting using a
+ * single select element.
+ * @polymerBehavior
+ */
+export const SelectBehavior = {
+  properties: {
+    /**
+     * Indicates whether all scan settings have been disabled by the parent
+     * element.
+     */
+    settingsDisabled: Boolean,
+
+    /**
+     * Controls whether the select element is disabled.
+     * @private
+     */
+    disabled_: {
+      type: Boolean,
+      computed: 'computeDisabled_(numOptions_, settingsDisabled)',
+    },
+
+    /**
+     * The number of options in the select element.
+     * @private
+     */
+    numOptions_: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  /**
+   * Called by the custom element when the number of options in its select
+   * element changes.
+   * @param {number} numOptions
+   */
+  onNumOptionsChange(numOptions) {
+    this.numOptions_ = numOptions;
+  },
+
+  /**
+   * Determines whether the select element should be disabled based on its
+   * number of options and whether settings are disabled.
+   * @param {number} numOptions
+   * @param {boolean} settingsDisabled
+   * @return {boolean}
+   * @private
+   */
+  computeDisabled_(numOptions, settingsDisabled) {
+    return numOptions < REQUIRED_NUM_OPTIONS || settingsDisabled;
+  },
+};

chromeos/components/scanning/resources/source_select.js

@@ -10,9 +10,7 @@ import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getSourceTypeString} from './scanning_app_util.js';
-
-/** @type {number} */
-const NUM_REQUIRED_SOURCES = 2;
+import {SelectBehavior} from './select_behavior.js';
 
 /**
  * @fileoverview
@@ -23,7 +21,7 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, SelectBehavior],
 
   properties: {
     /** @type {!Array<!chromeos.scanning.mojom.ScanSource>} */
@@ -37,16 +35,9 @@ Polymer({
       type: String,
       notify: true,
     },
-
-    settingsDisabled: Boolean,
-
-    /** @private */
-    disabled_: Boolean,
   },
 
-  observers: [
-    'updateDisabled_(sources.length, settingsDisabled)',
-  ],
+  observers: ['onNumOptionsChange(sources.length)'],
 
   /**
    * @param {number} mojoSourceType
@@ -56,14 +47,4 @@ Polymer({
   getSourceTypeString_(mojoSourceType) {
     return getSourceTypeString(mojoSourceType);
   },
-
-  /**
-   * Disables the dropdown if settings are disabled or the number of available
-   * sources is less than the number of required sources.
-   * @private
-   */
-  updateDisabled_() {
-    this.disabled_ =
-        this.settingsDisabled || this.sources.length < NUM_REQUIRED_SOURCES;
-  },
 });