scanning: Stop disabling dropdowns based on number of options

Dropdowns are currently disabled based on the app state and the number
of options they contain. Only disable dropdowns based on the app state.

Bug: 1059779
Change-Id: I6b817c0590d38091a26f639d434c9e975b2d90f1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2545688Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828524}

chrome/test/data/webui/chromeos/scanning/color_mode_select_test.js

@@ -34,10 +34,10 @@ export function colorModeSelectTest() {
   });
 
   test('initializeColorModeSelect', () => {
-    // Before options are added, the dropdown should be disabled and empty.
+    // Before options are added, the dropdown should be enabled and empty.
     const select = colorModeSelect.$$('select');
     assertTrue(!!select);
-    assertTrue(select.disabled);
+    assertFalse(select.disabled);
     assertEquals(0, select.length);
 
     const firstColorMode = ColorMode.COLOR;
@@ -45,9 +45,8 @@ export function colorModeSelectTest() {
     colorModeSelect.colorModes = [firstColorMode, secondColorMode];
     flush();
 
-    // Verify that adding more than one color mode results in the dropdown
-    // becoming enabled with the correct options.
-    assertFalse(select.disabled);
+    // Verify that adding color modes results in the dropdown displaying the
+    // correct options.
     assertEquals(2, select.length);
     assertEquals(
         getColorModeString(firstColorMode),
@@ -58,27 +57,6 @@ export function colorModeSelectTest() {
     assertEquals(firstColorMode.toString(), select.value);
   });
 
-  test('colorModeSelectDisabled', () => {
-    const select = colorModeSelect.$$('select');
-    assertTrue(!!select);
-
-    let colorModeArr = [ColorMode.BLACK_AND_WHITE];
-    colorModeSelect.colorModes = colorModeArr;
-    flush();
-
-    // Verify the dropdown is disabled when there's only one option.
-    assertEquals(1, select.length);
-    assertTrue(select.disabled);
-
-    colorModeArr = colorModeArr.concat([ColorMode.GRAYSCALE]);
-    colorModeSelect.colorModes = colorModeArr;
-    flush();
-
-    // Verify the dropdown is enabled when there's more than one option.
-    assertEquals(2, select.length);
-    assertFalse(select.disabled);
-  });
-
   test('colorModesSortedAlphabetically', () => {
     colorModeSelect.colorModes =
         [ColorMode.GRAYSCALE, ColorMode.BLACK_AND_WHITE, ColorMode.COLOR];

chrome/test/data/webui/chromeos/scanning/page_size_select_test.js

@@ -34,11 +34,11 @@ export function pageSizeSelectTest() {
   });
 
   test('initializePageSizeSelect', () => {
-    // Before options are added, the dropdown should be disabled and empty.
+    // Before options are added, the dropdown should be enabled and empty.
     const select =
         /** @type {!HTMLSelectElement} */ (pageSizeSelect.$$('select'));
     assertTrue(!!select);
-    assertTrue(select.disabled);
+    assertFalse(select.disabled);
     assertEquals(0, select.length);
 
     const firstPageSize = PageSize.A4;
@@ -46,9 +46,8 @@ export function pageSizeSelectTest() {
     pageSizeSelect.pageSizes = [firstPageSize, secondPageSize];
     flush();
 
-    // Verify that adding more than one page size results in the dropdown
-    // becoming enabled with the correct options.
-    assertFalse(select.disabled);
+    // Verify that adding page sizes results in the dropdown displaying the
+    // correct options.
     assertEquals(2, select.length);
     assertEquals(
         getPageSizeString(firstPageSize), select.options[0].textContent.trim());
@@ -66,27 +65,6 @@ export function pageSizeSelectTest() {
         });
   });
 
-  test('pageSizeSelectDisabled', () => {
-    const select = pageSizeSelect.$$('select');
-    assertTrue(!!select);
-
-    let pageSizeArr = [PageSize.Letter];
-    pageSizeSelect.pageSizes = pageSizeArr;
-    flush();
-
-    // Verify the dropdown is disabled when there's only one option.
-    assertEquals(1, select.length);
-    assertTrue(select.disabled);
-
-    pageSizeArr = pageSizeArr.concat([PageSize.A4]);
-    pageSizeSelect.pageSizes = pageSizeArr;
-    flush();
-
-    // Verify the dropdown is enabled when there's more than one option.
-    assertEquals(2, select.length);
-    assertFalse(select.disabled);
-  });
-
   test('pageSizesSortedCorrectly', () => {
     pageSizeSelect.pageSizes = [PageSize.Letter, PageSize.Max, PageSize.A4];
     flush();

chrome/test/data/webui/chromeos/scanning/resolution_select_test.js

@@ -27,11 +27,11 @@ export function resolutionSelectTest() {
   });
 
   test('initializeResolutionSelect', () => {
-    // Before options are added, the dropdown should be disabled and empty.
+    // Before options are added, the dropdown should be enabled and empty.
     const select =
         /** @type {!HTMLSelectElement} */ (resolutionSelect.$$('select'));
     assertTrue(!!select);
-    assertTrue(select.disabled);
+    assertFalse(select.disabled);
     assertEquals(0, select.length);
 
     const firstResolution = 75;
@@ -39,9 +39,8 @@ export function resolutionSelectTest() {
     resolutionSelect.resolutions = [firstResolution, secondResolution];
     flush();
 
-    // Verify that adding more than one resolution results in the dropdown
-    // becoming enabled with the correct options.
-    assertFalse(select.disabled);
+    // Verify that adding resolutions results in the dropdown displaying the
+    // correct options.
     assertEquals(2, select.length);
     assertEquals(
         secondResolution.toString() + ' dpi',
@@ -60,27 +59,6 @@ export function resolutionSelectTest() {
         });
   });
 
-  test('resolutionSelectDisabled', () => {
-    const select = resolutionSelect.$$('select');
-    assertTrue(!!select);
-
-    let resolutionArr = [75];
-    resolutionSelect.resolutions = resolutionArr;
-    flush();
-
-    // Verify the dropdown is disabled when there's only one option.
-    assertEquals(1, select.length);
-    assertTrue(select.disabled);
-
-    resolutionArr = resolutionArr.concat([150]);
-    resolutionSelect.resolutions = resolutionArr;
-    flush();
-
-    // Verify the dropdown is enabled when there's more than one option.
-    assertEquals(2, select.length);
-    assertFalse(select.disabled);
-  });
-
   test('resolutionsSortedCorrectly', () => {
     resolutionSelect.resolutions = [150, 300, 75, 600, 1200, 200];
     flush();

chrome/test/data/webui/chromeos/scanning/scanner_select_test.js

@@ -72,29 +72,6 @@ export function scannerSelectTest() {
     assertEquals(tokenToString(firstScannerId), select.value);
   });
 
-  test('scannerSelectDisabled', () => {
-    const select = scannerSelect.$$('select');
-    assertTrue(!!select);
-
-    let scannerArr = [createScanner(firstScannerId, firstScannerName)];
-    scannerSelect.scanners = scannerArr;
-    scannerSelect.loaded = true;
-    flush();
-
-    // Verify the dropdown is disabled when there's only one option.
-    assertEquals(1, select.length);
-    assertTrue(select.disabled);
-
-    scannerArr =
-        scannerArr.concat([createScanner(secondScannerId, secondScannerName)]);
-    scannerSelect.scanners = scannerArr;
-    flush();
-
-    // Verify the dropdown is enabled when there's more than one option.
-    assertEquals(2, select.length);
-    assertFalse(select.disabled);
-  });
-
   test('noScanners', () => {
     const select = scannerSelect.$$('select');
     assertTrue(!!select);
@@ -107,11 +84,10 @@ export function scannerSelectTest() {
     // Verify that scanner connection help text is visible.
     assertFalse(helpLink.hidden);
 
-    // Verify the dropdown is disabled and displays the default option when no
-    // scanners are available.
+    // Verify the dropdown displays the default option when no scanners are
+    // available.
     assertEquals(1, select.length);
     assertEquals('No available scanners', select.options[0].textContent.trim());
-    assertTrue(select.disabled);
   });
 
   test('scannersSortedAlphabetically', () => {

chrome/test/data/webui/chromeos/scanning/source_select_test.js

@@ -48,10 +48,10 @@ export function sourceSelectTest() {
   });
 
   test('initializeSourceSelect', () => {
-    // Before options are added, the dropdown should be disabled and empty.
+    // Before options are added, the dropdown should be enabled and empty.
     const select = sourceSelect.$$('select');
     assertTrue(!!select);
-    assertTrue(select.disabled);
+    assertFalse(select.disabled);
     assertEquals(0, select.length);
 
     const firstSource =
@@ -62,9 +62,8 @@ export function sourceSelectTest() {
     sourceSelect.sources = sourceArr;
     flush();
 
-    // Verify that adding more than one source results in the dropdown becoming
-    // enabled with the correct options.
-    assertFalse(select.disabled);
+    // Verify that adding sources results in the dropdown displaying the correct
+    // options.
     assertEquals(2, select.length);
     assertEquals(
         getSourceTypeString(firstSource.type),
@@ -75,29 +74,6 @@ export function sourceSelectTest() {
     assertEquals(secondSource.name, select.value);
   });
 
-  test('sourceSelectDisabled', () => {
-    const select = sourceSelect.$$('select');
-    assertTrue(!!select);
-
-    let sourceArr =
-        [createScannerSource(SourceType.FLATBED, 'flatbed', pageSizes)];
-    sourceSelect.sources = sourceArr;
-    flush();
-
-    // Verify the dropdown is disabled when there's only one option.
-    assertEquals(1, select.length);
-    assertTrue(select.disabled);
-
-    sourceArr = sourceArr.concat(
-        [createScannerSource(SourceType.ADF_DUPLEX, 'adf duplex', pageSizes)]);
-    sourceSelect.sources = sourceArr;
-    flush();
-
-    // Verify the dropdown is enabled when there's more than one option.
-    assertEquals(2, select.length);
-    assertFalse(select.disabled);
-  });
-
   test('sourcesSortedAlphabetically', () => {
     const sources = [
       createScannerSource(SourceType.FLATBED, 'C', pageSizes),

chromeos/components/scanning/resources/color_mode_select.js

@@ -40,9 +40,7 @@ Polymer({
     },
   },
 
-  observers: [
-    'onNumOptionsChange(colorModes.length)', 'onColorModesChange_(colorModes.*)'
-  ],
+  observers: ['onColorModesChange_(colorModes.*)'],
 
   /**
    * @param {chromeos.scanning.mojom.ColorMode} mojoColorMode

chromeos/components/scanning/resources/file_type_select.js

@@ -29,10 +29,4 @@ Polymer({
       notify: true,
     },
   },
-
-  /** @override */
-  created() {
-    // The dropdown always contains one option per FileType.
-    this.onNumOptionsChange(chromeos.scanning.mojom.FileType.MAX_VALUE + 1);
-  },
 });

chromeos/components/scanning/resources/page_size_select.js

@@ -40,9 +40,7 @@ Polymer({
     },
   },
 
-  observers: [
-    'onNumOptionsChange(pageSizes.length)', 'onPageSizesChange_(pageSizes.*)'
-  ],
+  observers: ['onPageSizesChange_(pageSizes.*)'],
 
   /**
    * @param {!chromeos.scanning.mojom.PageSize} pageSize

chromeos/components/scanning/resources/resolution_select.js

@@ -40,10 +40,7 @@ Polymer({
     },
   },
 
-  observers: [
-    'onNumOptionsChange(resolutions.length)',
-    'onResolutionsChange_(resolutions.*)'
-  ],
+  observers: ['onResolutionsChange_(resolutions.*)'],
 
   /**
    * @param {number} resolution

chromeos/components/scanning/resources/scan_to_select.js

@@ -44,9 +44,6 @@ Polymer({
     // Default option is 'My files'.
     this.displayText_ = this.i18n('myFilesSelectOption');
 
-    // The dropdown always has 2 options.
-    this.onNumOptionsChange(2);
-
     this.browserProxy_ = ScanningBrowserProxyImpl.getInstance();
     this.browserProxy_.initialize();
   },

chromeos/components/scanning/resources/scanner_select.js

@@ -44,8 +44,7 @@ Polymer({
     loaded: Boolean,
   },
 
-  observers:
-      ['onNumOptionsChange(scanners.length)', 'onScannersChange_(scanners.*)'],
+  observers: ['onScannersChange_(scanners.*)'],
 
   /**
    * @param {!chromeos.scanning.mojom.Scanner} scanner

chromeos/components/scanning/resources/scanning_app.html

@@ -88,17 +88,17 @@
         <h1 id="appTitle">[[i18n('appTitle')]]</h1>
         <scanner-select id="scannerSelect" scanners="[[scanners_]]"
             loaded="[[scannersLoaded_]]"
-            settings-disabled="[[settingsDisabled_]]"
+            disabled="[[settingsDisabled_]]"
             selected-scanner-id="{{selectedScannerId}}"></scanner-select>
         <source-select id="sourceSelect" sources="[[capabilities_.sources]]"
-            settings-disabled="[[settingsDisabled_]]"
+            disabled="[[settingsDisabled_]]"
             selected-source="{{selectedSource}}"></source-select>
         <scan-to-select id="scanToSelect"
-            settings-disabled="[[settingsDisabled_]]"
+            disabled="[[settingsDisabled_]]"
             selected-file-path="{{selectedFilePath}}">
         </scan-to-select>
         <file-type-select id="fileTypeSelect"
-            settings-disabled="[[settingsDisabled_]]"
+            disabled="[[settingsDisabled_]]"
             selected-file-type="{{selectedFileType}}"></file-type-select>
         <div id="more-settings-line-separator"></div>
         <cr-button id="moreSettingsButton" on-click="toggleClicked_"
@@ -111,17 +111,17 @@
         <iron-collapse id="collapse" opened="{{opened}}">
           <color-mode-select id="colorModeSelect"
               color-modes="[[capabilities_.colorModes]]"
-              settings-disabled="[[settingsDisabled_]]"
+              disabled="[[settingsDisabled_]]"
               selected-color-mode="{{selectedColorMode}}">
           </color-mode-select>
           <page-size-select id="pageSizeSelect"
               page-sizes="[[selectedSourcePageSizes_]]"
-              settings-disabled="[[settingsDisabled_]]"
+              disabled="[[settingsDisabled_]]"
               selected-page-size="{{selectedPageSize}}">
           </page-size-select>
           <resolution-select id="resolutionSelect"
               resolutions="[[capabilities_.resolutions]]"
-              settings-disabled="[[settingsDisabled_]]"
+              disabled="[[settingsDisabled_]]"
               selected-resolution="{{selectedResolution}}">
           </resolution-select>
         </iron-collapse>

chromeos/components/scanning/resources/select_behavior.js

@@ -4,9 +4,6 @@
 
 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.
@@ -14,48 +11,8 @@ const REQUIRED_NUM_OPTIONS = 2;
  */
 export const SelectBehavior = {
   properties: {
-    /** Controls whether the select element is disabled. */
-    disabled: {
-      type: Boolean,
-      computed: 'computeDisabled_(numOptions_, settingsDisabled)',
-    },
-
-    /**
-     * Indicates whether all scan settings have been disabled by the parent
-     * element.
-     */
-    settingsDisabled: Boolean,
-
-    /**
-     * The number of options in the select element.
-     * @type {number}
-     * @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;
+    /** @type {boolean} */
+    disabled: Boolean,
   },
 
   /**

chromeos/components/scanning/resources/source_select.js

@@ -37,10 +37,7 @@ Polymer({
     },
   },
 
-  observers: [
-    'onNumOptionsChange(sources.length)',
-    'onSourcesChange_(sources.*)',
-  ],
+  observers: ['onSourcesChange_(sources.*)'],
 
   /**
    * @param {chromeos.scanning.mojom.SourceType} mojoSourceType