scanning: Sort color modes in color mode dropdown

Sort the color modes alphabetically and correctly select the default
option.

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

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

@@ -9,6 +9,8 @@ import {getColorModeString} from 'chrome://scanning/scanning_app_util.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 
+import {assertOrderedAlphabetically} from './scanning_app_test_utils.js';
+
 const ColorMode = {
   BLACK_AND_WHITE: chromeos.scanning.mojom.ColorMode.kBlackAndWhite,
   GRAYSCALE: chromeos.scanning.mojom.ColorMode.kGrayscale,
@@ -76,4 +78,28 @@ export function colorModeSelectTest() {
     assertEquals(2, select.length);
     assertFalse(select.disabled);
   });
+
+  test('colorModesSortedAlphabetically', () => {
+    colorModeSelect.colorModes =
+        [ColorMode.GRAYSCALE, ColorMode.BLACK_AND_WHITE, ColorMode.COLOR];
+    flush();
+
+    // Verify the color modes are sorted alphabetically and that black and white
+    // is selected by default.
+    assertOrderedAlphabetically(
+        colorModeSelect.colorModes,
+        (colorMode) => getColorModeString(colorMode));
+    assertEquals(
+        ColorMode.BLACK_AND_WHITE.toString(),
+        colorModeSelect.selectedColorMode);
+  });
+
+  test('firstColorModeUsedWhenDefaultNotAvailable', () => {
+    colorModeSelect.colorModes = [ColorMode.GRAYSCALE, ColorMode.COLOR];
+    flush();
+
+    // Verify the first color mode in the sorted color mode array is selected by
+    // default when black and white is not an available option.
+    assertEquals(ColorMode.COLOR.toString(), colorModeSelect.selectedColorMode);
+  });
 }

chromeos/components/scanning/resources/color_mode_select.html

@@ -8,7 +8,8 @@
         disabled="[[disabled]]">
       <!-- TODO(jschettler): Determine how the color modes should be sorted. -->
       <template is="dom-repeat" items="[[colorModes]]" as="colorMode">
-        <option value="[[colorMode]]">
+        <option value="[[colorMode]]"
+            selected$="[[isDefaultColorMode_(colorMode)]]">
           [[getColorModeString_(colorMode)]]
         </option>
       </template>

chromeos/components/scanning/resources/color_mode_select.js

@@ -9,9 +9,12 @@ 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 {getColorModeString} from './scanning_app_util.js';
+import {alphabeticalCompare, getColorModeString} from './scanning_app_util.js';
 import {SelectBehavior} from './select_behavior.js';
 
+/** @type {chromeos.scanning.mojom.ColorMode} */
+const DEFAULT_COLOR_MODE = chromeos.scanning.mojom.ColorMode.kBlackAndWhite;
+
 /**
  * @fileoverview
  * 'color-mode-select' displays the available scanner color modes in a dropdown.
@@ -37,7 +40,9 @@ Polymer({
     },
   },
 
-  observers: ['onNumOptionsChange(colorModes.length)'],
+  observers: [
+    'onNumOptionsChange(colorModes.length)', 'onColorModesChange_(colorModes.*)'
+  ],
 
   /**
    * @param {chromeos.scanning.mojom.ColorMode} mojoColorMode
@@ -47,4 +52,46 @@ Polymer({
   getColorModeString_(mojoColorMode) {
     return getColorModeString(mojoColorMode);
   },
+
+  /**
+   * Black and white should be the default option if it exists. If not, use
+   * the first color mode in the color modes array.
+   * @return {string}
+   * @private
+   */
+  getDefaultSelectedColorMode_() {
+    const blackAndWhiteIndex = this.colorModes.findIndex((colorMode) => {
+      return this.isDefaultColorMode_(colorMode);
+    });
+
+    return blackAndWhiteIndex === -1 ?
+        this.colorModes[0].toString() :
+        this.colorModes[blackAndWhiteIndex].toString();
+  },
+
+  /**
+   * Sorts the color modes and sets the selected color mode when the color modes
+   * array changes.
+   * @private
+   */
+  onColorModesChange_() {
+    if (this.colorModes.length > 1) {
+      this.colorModes = this.customSort(
+          this.colorModes, alphabeticalCompare,
+          (colorMode) => getColorModeString(colorMode));
+    }
+
+    if (this.colorModes.length > 0) {
+      this.selectedColorMode = this.getDefaultSelectedColorMode_();
+    }
+  },
+
+  /**
+   * @param {!chromeos.scanning.mojom.ColorMode} colorMode
+   * @return {boolean}
+   * @private
+   */
+  isDefaultColorMode_(colorMode) {
+    return colorMode === DEFAULT_COLOR_MODE;
+  },
 });

chromeos/components/scanning/resources/scanning_app.js

@@ -229,7 +229,6 @@ Polymer({
 
     // Set the first options as the selected options since they will be the
     // first options in the dropdowns.
-    this.selectedColorMode = this.capabilities_.colorModes[0].toString();
     this.selectedPageSize =
         this.capabilities_.sources[0].pageSizes[0].toString();