Scanning: Sort source select options

 - Options are sorted alphabetically (http://shortn/_nYkelby30A)
 - "Default" will be displayed before scanner capabilities are loaded
    or when the scanner does not report any sources.
 - A follow-up CL will update "getSourceTypeString_" to return
   localized strings.

Bug: 1059779
Test: browser_tests --gtest_filter=ScanningAppBrowserTest.All
Change-Id: I148e720ae3345baa069c385f6a977d8d90e809a1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2508366
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825406}

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

@@ -267,8 +267,8 @@ export function scanningAppTest() {
 
     const firstCapabilities = {
       sources: [
-        createScannerSource(SourceType.FLATBED, 'platen', pageSizes),
         createScannerSource(SourceType.ADF_DUPLEX, 'adf duplex', pageSizes),
+        createScannerSource(SourceType.FLATBED, 'platen', pageSizes),
       ],
       colorModes: [ColorMode.BLACK_AND_WHITE, ColorMode.COLOR],
       resolutions: [75, 100, 300]
@@ -317,8 +317,10 @@ export function scanningAppTest() {
         .then(() => {
           assertEquals(
               tokenToString(firstScannerId), scanningApp.selectedScannerId);
+          // A scanner with type "FLATBED" will be used as the selectedSource
+          // if it exists.
           assertEquals(
-              firstCapabilities.sources[0].name, scanningApp.selectedSource);
+              firstCapabilities.sources[1].name, scanningApp.selectedSource);
           assertEquals(FileType.PNG.toString(), scanningApp.selectedFileType);
           assertEquals(
               firstCapabilities.colorModes[0].toString(),

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

@@ -9,7 +9,7 @@ import {getSourceTypeString} from 'chrome://scanning/scanning_app_util.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 
-import {createScannerSource} from './scanning_app_test_utils.js';
+import {assertOrderedAlphabetically, createScannerSource} from './scanning_app_test_utils.js';
 
 const FileType = {
   JPG: chromeos.scanning.mojom.FileType.kJpg,
@@ -55,9 +55,9 @@ export function sourceSelectTest() {
     assertEquals(0, select.length);
 
     const firstSource =
-        createScannerSource(SourceType.FLATBED, 'platen', pageSizes);
-    const secondSource =
         createScannerSource(SourceType.ADF_SIMPLEX, 'adf simplex', pageSizes);
+    const secondSource =
+        createScannerSource(SourceType.FLATBED, 'platen', pageSizes);
     const sourceArr = [firstSource, secondSource];
     sourceSelect.sources = sourceArr;
     flush();
@@ -72,7 +72,7 @@ export function sourceSelectTest() {
     assertEquals(
         getSourceTypeString(secondSource.type),
         select.options[1].textContent.trim());
-    assertEquals(firstSource.name, select.value);
+    assertEquals(secondSource.name, select.value);
   });
 
   test('sourceSelectDisabled', () => {
@@ -97,4 +97,40 @@ export function sourceSelectTest() {
     assertEquals(2, select.length);
     assertFalse(select.disabled);
   });
+
+  test('sourcesSortedAlphabetically', () => {
+    const sources = [
+      createScannerSource(SourceType.FLATBED, 'C', pageSizes),
+      createScannerSource(SourceType.ADF_DUPLEX, 'B', pageSizes),
+      createScannerSource(SourceType.FLATBED, 'D', pageSizes),
+      createScannerSource(SourceType.ADF_DUPLEX, 'A', pageSizes),
+    ];
+    sourceSelect.sources = sources;
+    flush();
+    assertOrderedAlphabetically(
+        sourceSelect.sources, (source) => getSourceTypeString(source.type));
+  });
+
+  test('flatbedSelectedByDefaultIfProvided', () => {
+    const sources = [
+      createScannerSource(SourceType.FLATBED, 'C', pageSizes),
+      createScannerSource(SourceType.ADF_SIMPLEX, 'B', pageSizes),
+      createScannerSource(SourceType.ADF_DUPLEX, 'A', pageSizes),
+    ];
+    sourceSelect.sources = sources;
+    flush();
+    const flatbedSource =
+        sourceSelect.sources.find(source => source.type === SourceType.FLATBED);
+    assertEquals(sourceSelect.selectedSource, flatbedSource.name);
+  });
+
+  test('firstSourceUsedWhenFlatbedNotProvided', () => {
+    const sources = [
+      createScannerSource(SourceType.ADF_SIMPLEX, 'C', pageSizes),
+      createScannerSource(SourceType.ADF_DUPLEX, 'B', pageSizes),
+    ];
+    sourceSelect.sources = sources;
+    flush();
+    assertEquals(sourceSelect.selectedSource, sourceSelect.sources[0].name);
+  });
 }

chromeos/chromeos_strings.grd

@@ -522,6 +522,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_MY_DRIVE" desc="The text displayed in the Scan To dropdown when the user selects to save completed scans to their Google Drive 'My Drive' folder.">
         My Drive
       </message>
+      <message name="IDS_SCANNING_APP_DEFAULT_SOURCE_OPTION_TEXT" desc="The text displayed for the default source option.">
+        Default
+      </message>
 
       <!-- Diagnostics App -->
       <!-- TODO(michaelcheco): Update with finalized copies of the strings -->

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_DEFAULT_SOURCE_OPTION_TEXT.png.sha1

+7fbac2a53bc03e78be0955efa12cfd5cefe123e7
\ No newline at end of file

chromeos/components/scanning/resources/scanning_app.js

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

chromeos/components/scanning/resources/source_select.html

@@ -6,9 +6,14 @@
         should announce when a new option is focused). -->
     <select class="md-select" value="{{selectedSource::change}}"
         disabled="[[disabled]]">
-      <!-- TODO(jschettler): Determine how the sources should be sorted. -->
+      <template is="dom-if" if="[[!sources.length]]" restamp>
+        <option value="">
+          [[i18n('defaultSourceOptionText')]]
+        </option>
+      </template>
       <template is="dom-repeat" items="[[sources]]" as="source">
-        <option value="[[source.name]]">
+        <option value="[[source.name]]"
+            selected$='[[isDefaultSource_(source.type)]]'>
           [[getSourceTypeString_(source.type)]]
         </option>
       </template>

chromeos/components/scanning/resources/source_select.js

@@ -9,7 +9,7 @@ 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 {getSourceTypeString} from './scanning_app_util.js';
+import {alphabeticalCompare, getSourceTypeString} from './scanning_app_util.js';
 import {SelectBehavior} from './select_behavior.js';
 
 /**
@@ -37,7 +37,10 @@ Polymer({
     },
   },
 
-  observers: ['onNumOptionsChange(sources.length)'],
+  observers: [
+    'onNumOptionsChange(sources.length)',
+    'sortSources_(sources.*)',
+  ],
 
   /**
    * @param {chromeos.scanning.mojom.SourceType} mojoSourceType
@@ -47,4 +50,44 @@ Polymer({
   getSourceTypeString_(mojoSourceType) {
     return getSourceTypeString(mojoSourceType);
   },
+
+  /**
+   * "Flatbed" should always be the default option if it exists. If not, use
+   * the first source in the sorted sources array.
+   * @param {!Array<!chromeos.scanning.mojom.ScanSource>} sources
+   * @return {string}
+   * @private
+   */
+  getDefaultSelectedSource_(sources) {
+    const flatbedSourceIndex = sources.findIndex((source) => {
+      return source.type === chromeos.scanning.mojom.SourceType.kFlatbed;
+    });
+
+    return flatbedSourceIndex === -1 ? sources[0].name :
+                                       sources[flatbedSourceIndex].name;
+  },
+
+  /** @private */
+  sortSources_() {
+    if (this.sources.length <= 1) {
+      return;
+    }
+
+    const sortedSources = this.customSort(
+        this.sources, alphabeticalCompare,
+        (source) => getSourceTypeString(source.type));
+
+    const defaultSelectedSource = this.getDefaultSelectedSource_(sortedSources);
+    this.setProperties(
+        {sources: sortedSources, selectedSource: defaultSelectedSource});
+  },
+
+  /**
+   * @param {!chromeos.scanning.mojom.SourceType} sourceType
+   * @return {boolean}
+   * @private
+   */
+  isDefaultSource_(sourceType) {
+    return sourceType === chromeos.scanning.mojom.SourceType.kFlatbed;
+  },
 });

chromeos/components/scanning/scanning_ui.cc

@@ -54,6 +54,7 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
       {"appTitle", IDS_SCANNING_APP_TITLE},
       {"colorModeDropdownLabel", IDS_SCANNING_APP_COLOR_MODE_DROPDOWN_LABEL},
+      {"defaultSourceOptionText", IDS_SCANNING_APP_DEFAULT_SOURCE_OPTION_TEXT},
       {"fileTypeDropdownLabel", IDS_SCANNING_APP_FILE_TYPE_DROPDOWN_LABEL},
       {"jpgOptionText", IDS_SCANNING_APP_JPG_OPTION_TEXT},
       {"moreSettings", IDS_SCANNING_APP_MORE_SETTINGS},