scanning: Add dropdown for page size

Add a new Polymer element, page-size-select, to display the page sizes
in a dropdown.

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

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

@@ -9,7 +9,7 @@ import 'chrome://scanning/scanning_app.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {setScanServiceForTesting} from 'chrome://scanning/mojo_interface_provider.js';
 import {ScannerArr} from 'chrome://scanning/scanning_app_types.js';
-import {getColorModeString, getSourceTypeString, tokenToString} from 'chrome://scanning/scanning_app_util.js';
+import {getColorModeString, getPageSizeString, getSourceTypeString, tokenToString} from 'chrome://scanning/scanning_app_util.js';
 
 const ColorMode = {
   BLACK_AND_WHITE: chromeos.scanning.mojom.ColorMode.kBlackAndWhite,
@@ -23,6 +23,12 @@ const FileType = {
   PNG: chromeos.scanning.mojom.FileType.kPng,
 };
 
+const PageSize = {
+  A4: chromeos.scanning.mojom.PageSize.kIsoA4,
+  Letter: chromeos.scanning.mojom.PageSize.kNaLetter,
+  Max: chromeos.scanning.mojom.PageSize.kMax,
+};
+
 const SourceType = {
   FLATBED: chromeos.scanning.mojom.SourceType.kFlatbed,
   ADF_SIMPLEX: chromeos.scanning.mojom.SourceType.kAdfSimplex,
@@ -226,7 +232,11 @@ suite('ScanningAppTest', () => {
 
     const firstCapabilities = {
       sources: [
-        {type: SourceType.FLATBED, name: 'platen'},
+        {
+          type: SourceType.FLATBED,
+          name: 'platen',
+          pageSizes: [PageSize.A4, PageSize.Letter, PageSize.Max]
+        },
         {type: SourceType.ADF_DUPLEX, name: 'adf duplex'}
       ],
       colorModes: [ColorMode.BLACK_AND_WHITE, ColorMode.COLOR],
@@ -255,6 +265,9 @@ suite('ScanningAppTest', () => {
           assertEquals(
               firstCapabilities.colorModes[0].toString(),
               scanningApp.selectedColorMode);
+          assertEquals(
+              firstCapabilities.sources[0].pageSizes[0].toString(),
+              scanningApp.selectedPageSize);
           assertEquals(
               firstCapabilities.resolutions[0].toString(),
               scanningApp.selectedResolution);
@@ -270,6 +283,8 @@ suite('ScanningAppTest', () => {
           const colorModeSelect =
               scanningApp.$$('#colorModeSelect').$$('select');
           assertFalse(colorModeSelect.disabled);
+          const pageSizeSelect = scanningApp.$$('#pageSizeSelect').$$('select');
+          assertFalse(pageSizeSelect.disabled);
           const resolutionSelect =
               scanningApp.$$('#resolutionSelect').$$('select');
           assertFalse(resolutionSelect.disabled);
@@ -291,6 +306,7 @@ suite('ScanningAppTest', () => {
           assertTrue(sourceSelect.disabled);
           assertTrue(fileTypeSelect.disabled);
           assertTrue(colorModeSelect.disabled);
+          assertTrue(pageSizeSelect.disabled);
           assertTrue(resolutionSelect.disabled);
           assertTrue(scanButton.disabled);
           assertEquals('Scanning...', statusText.textContent.trim());
@@ -304,6 +320,7 @@ suite('ScanningAppTest', () => {
           assertFalse(scanningApp.$$('#sourceSelect').$$('select').disabled);
           assertFalse(scanningApp.$$('#fileTypeSelect').$$('select').disabled);
           assertFalse(scanningApp.$$('#colorModeSelect').$$('select').disabled);
+          assertFalse(scanningApp.$$('#pageSizeSelect').$$('select').disabled);
           assertFalse(
               scanningApp.$$('#resolutionSelect').$$('select').disabled);
           assertFalse(scanningApp.$$('#scanButton').disabled);
@@ -563,6 +580,74 @@ suite('ColorModeSelectTest', () => {
   });
 });
 
+suite('PageSizeSelectTest', () => {
+  /** @type {!PageSizeSelectElement} */
+  let pageSizeSelect;
+
+  setup(() => {
+    pageSizeSelect = document.createElement('page-size-select');
+    assertTrue(!!pageSizeSelect);
+    document.body.appendChild(pageSizeSelect);
+  });
+
+  teardown(() => {
+    pageSizeSelect.remove();
+    pageSizeSelect = null;
+  });
+
+  test('initializePageSizeSelect', () => {
+    // Before options are added, the dropdown should be disabled and empty.
+    const select = pageSizeSelect.$$('select');
+    assertTrue(!!select);
+    assertTrue(select.disabled);
+    assertEquals(0, select.length);
+
+    const firstPageSize = PageSize.A4;
+    const secondPageSize = PageSize.Max;
+    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);
+    assertEquals(2, select.length);
+    assertEquals(
+        getPageSizeString(firstPageSize), select.options[0].textContent.trim());
+    assertEquals(
+        getPageSizeString(secondPageSize),
+        select.options[1].textContent.trim());
+    assertEquals(firstPageSize.toString(), select.value);
+
+    // Selecting a different option should update the selected value.
+    select.value = secondPageSize.toString();
+    select.dispatchEvent(new CustomEvent('change'));
+    flush();
+
+    assertEquals(secondPageSize.toString(), pageSizeSelect.selectedPageSize);
+  });
+
+  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);
+  });
+});
+
 suite('ResolutionSelectTest', () => {
   /** @type {!ResolutionSelectElement} */
   let resolutionSelect;

chromeos/chromeos_strings.grd

@@ -489,6 +489,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_COLOR_MODE_DROPDOWN_LABEL" desc="The label for the dropdown that displays available color modes (e.g. color, grayscale, black and white, etc.).">
         Color mode
       </message>
+      <message name="IDS_SCANNING_APP_PAGE_SIZE_DROPDOWN_LABEL" desc="The label for the dropdown that displays available page sizes.">
+        Page size
+      </message>
       <message name="IDS_SCANNING_APP_RESOLUTION_DROPDOWN_LABEL" desc="The label for the dropdown that displays available resolutions (e.g. 150 dpi, 300 dpi, etc.).">
         Resolution
       </message>

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_PAGE_SIZE_DROPDOWN_LABEL.png.sha1

+9916a93033bb44a6e5056b84a827c7c971a8f198
\ No newline at end of file

chromeos/components/scanning/resources/BUILD.gn

@@ -13,6 +13,7 @@ js_type_check("closure_compile_module") {
     ":color_mode_select",
     ":file_type_select",
     ":mojo_interface_provider",
+    ":page_size_select",
     ":resolution_select",
     ":scanner_select",
     ":scanning_app",
@@ -42,6 +43,16 @@ js_library("file_type_select") {
   ]
 }
 
+js_library("page_size_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",
+  ]
+}
+
 js_library("resolution_select") {
   deps = [
     ":select_behavior",
@@ -68,6 +79,7 @@ js_library("scanning_app") {
     ":color_mode_select",
     ":file_type_select",
     ":mojo_interface_provider",
+    ":page_size_select",
     ":resolution_select",
     ":scanner_select",
     ":scanning_app_types",
@@ -108,6 +120,7 @@ html_to_js("web_components") {
   js_files = [
     "color_mode_select.js",
     "file_type_select.js",
+    "page_size_select.js",
     "resolution_select.js",
     "scan_settings_section.js",
     "scanner_select.js",

chromeos/components/scanning/resources/page_size_select.html

+<scan-settings-section>
+  <span id="pageSizeLabel" slot="label">[[i18n('pageSizeDropdownLabel')]]</span>
+  <div slot="settings">
+    <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
+        should announce when a new option is focused). -->
+    <select class="md-select" value="{{selectedPageSize::change}}"
+        disabled="[[disabled_]]">
+      <!-- TODO(jschettler): Sort the page sizes. -->
+      <template is="dom-repeat" items="[[pageSizes]]" as="pageSize">
+        <option value="[[pageSize]]">
+          [[getPageSizeString_(pageSize)]]
+        </option>
+      </template>
+    </select>
+  </div>
+</scan-settings-section>

chromeos/components/scanning/resources/page_size_select.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 './scanning.mojom-lite.js';
+import './scan_settings_section.js';
+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 {getPageSizeString} from './scanning_app_util.js';
+import {SelectBehavior} from './select_behavior.js';
+
+/**
+ * @fileoverview
+ * 'page-size-select' displays the available page sizes in a dropdown.
+ */
+Polymer({
+  is: 'page-size-select',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [I18nBehavior, SelectBehavior],
+
+  properties: {
+    /** @type {!Array<chromeos.scanning.mojom.PageSize>} */
+    pageSizes: {
+      type: Array,
+      value: () => [],
+    },
+
+    /** @type {?string} */
+    selectedPageSize: {
+      type: String,
+      notify: true,
+    },
+  },
+
+  observers: ['onNumOptionsChange(pageSizes.length)'],
+
+  /**
+   * @param {chromeos.scanning.mojom.PageSize} pageSize
+   * @return {!string}
+   * @private
+   */
+  getPageSizeString_(pageSize) {
+    return getPageSizeString(pageSize);
+  },
+});

chromeos/components/scanning/resources/scanning_app.html

@@ -11,6 +11,9 @@
     color-modes="[[capabilities_.colorModes]]"
     settings-disabled="[[settingsDisabled_]]"
     selected-color-mode="{{selectedColorMode}}"></color-mode-select>
+<page-size-select id="pageSizeSelect" page-sizes="[[selectedSourcePageSizes_]]"
+    settings-disabled="[[settingsDisabled_]]"
+    selected-page-size="{{selectedPageSize}}"></page-size-select>
 <resolution-select id="resolutionSelect"
     resolutions="[[capabilities_.resolutions]]"
     settings-disabled="[[settingsDisabled_]]"

chromeos/components/scanning/resources/scanning_app.js

@@ -8,6 +8,7 @@ import 'chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-lite.js';
 import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
 import './color_mode_select.js';
 import './file_type_select.js';
+import './page_size_select.js';
 import './resolution_select.js';
 import './scanner_select.js';
 import './source_select.js';
@@ -17,7 +18,7 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
 
 import {getScanService} from './mojo_interface_provider.js';
 import {ScannerArr} from './scanning_app_types.js';
-import {colorModeFromString, tokenToString} from './scanning_app_util.js';
+import {colorModeFromString, pageSizeFromString, tokenToString} from './scanning_app_util.js';
 
 /**
  * @fileoverview
@@ -64,9 +65,22 @@ Polymer({
     /** @type {?string} */
     selectedColorMode: String,
 
+    /** @type {?string} */
+    selectedPageSize: String,
+
     /** @type {?string} */
     selectedResolution: String,
 
+    /**
+     * @type {!Array<chromeos.scanning.mojom.PageSize>}
+     * @private
+     */
+    selectedSourcePageSizes_: {
+      type: Array,
+      value: () => [],
+      computed: 'computePageSizes_(selectedSource)',
+    },
+
     /**
      * @type {?string}
      * @private
@@ -107,6 +121,21 @@ Polymer({
         });
   },
 
+  /**
+   * @param {?string} selectedSource
+   * @return {!Array<chromeos.scanning.mojom.PageSize>}
+   * @private
+   */
+  computePageSizes_(selectedSource) {
+    for (const source of this.capabilities_.sources) {
+      if (source.name === selectedSource) {
+        return source.pageSizes;
+      }
+    }
+
+    return [];
+  },
+
   /**
    * @param {!{capabilities: !chromeos.scanning.mojom.ScannerCapabilities}}
    *     response
@@ -119,6 +148,8 @@ Polymer({
     // 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();
     this.selectedResolution = this.capabilities_.resolutions[0].toString();
 
     // PDF is the default file type.
@@ -173,7 +204,7 @@ Polymer({
   onScanClick_() {
     if (!this.selectedScannerId || !this.selectedSource ||
         !this.selectedFileType || !this.selectedColorMode ||
-        !this.selectedResolution) {
+        !this.selectedPageSize || !this.selectedResolution) {
       // TODO(jschettler): Replace status text with finalized i18n strings.
       this.statusText_ = 'Failed to start scan.';
       return;
@@ -196,7 +227,7 @@ Polymer({
       'sourceName': this.selectedSource,
       'fileType': chromeos.scanning.mojom.FileType.kPng,
       'colorMode': colorModeFromString(this.selectedColorMode),
-      'pageSize': chromeos.scanning.mojom.PageSize.kNaLetter,
+      'pageSize': pageSizeFromString(this.selectedPageSize),
       'resolutionDpi': Number(this.selectedResolution),
     };
     this.scanService_

chromeos/components/scanning/resources/scanning_app_resources.grd

@@ -24,6 +24,8 @@
       <include name="IDR_SCANNING_APP_FILE_TYPE_SELECT_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/file_type_select.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_COLOR_MODE_SELECT_HTML" file="color_mode_select.html" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_COLOR_MODE_SELECT_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/color_mode_select.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_SCANNING_APP_PAGE_SIZE_SELECT_HTML" file="page_size_select.html" type="BINDATA"/>
+      <include name="IDR_SCANNING_APP_PAGE_SIZE_SELECT_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/page_size_select.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_RESOLUTION_SELECT_HTML" file="resolution_select.html" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_RESOLUTION_SELECT_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/resolution_select.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_SCAN_SETTINGS_SECTION_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/scan_settings_section.js" use_base_dir="false" type="BINDATA"/>

chromeos/components/scanning/resources/scanning_app_util.js

@@ -45,6 +45,27 @@ export function getColorModeString(mojoColorMode) {
   }
 }
 
+/**
+ * Converts a chromeos.scanning.mojom.PageSize to a string that can be
+ * displayed in the page size dropdown.
+ * @param {chromeos.scanning.mojom.PageSize} pageSize
+ * @return {!string}
+ */
+export function getPageSizeString(pageSize) {
+  // TODO(jschettler): Replace with finalized i18n strings.
+  switch (pageSize) {
+    case chromeos.scanning.mojom.PageSize.kIsoA4:
+      return 'A4';
+    case chromeos.scanning.mojom.PageSize.kNaLetter:
+      return 'Letter';
+    case chromeos.scanning.mojom.PageSize.kMax:
+      return 'Fit to scan area';
+    default:
+      assertNotReached();
+      return 'Unknown';
+  }
+}
+
 /**
  * Converts a chromeos.scanning.mojom.SourceType to a string that can be
  * displayed in the source dropdown.
@@ -69,6 +90,26 @@ export function getSourceTypeString(mojoSourceType) {
   }
 }
 
+/**
+ * Converts a chromeos.scanning.mojom.PageSize string to the corresponding enum
+ * value.
+ * @param {!string} pageSizeString
+ * @return {chromeos.scanning.mojom.PageSize}
+ */
+export function pageSizeFromString(pageSizeString) {
+  switch (pageSizeString) {
+    case chromeos.scanning.mojom.PageSize.kIsoA4.toString():
+      return chromeos.scanning.mojom.PageSize.kIsoA4;
+    case chromeos.scanning.mojom.PageSize.kNaLetter.toString():
+      return chromeos.scanning.mojom.PageSize.kNaLetter;
+    case chromeos.scanning.mojom.PageSize.kMax.toString():
+      return chromeos.scanning.mojom.PageSize.kMax;
+    default:
+      assertNotReached();
+      return chromeos.scanning.mojom.PageSize.kNaLetter;
+  }
+}
+
 /**
  * Converts an unguessable token to a string by combining the high and low
  * values as strings with a hashtag as the separator.

chromeos/components/scanning/scanning_ui.cc

@@ -55,6 +55,7 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"noScannersText", IDS_SCANNING_APP_NO_SCANNERS_TEXT},
       {"pdfOptionText", IDS_SCANNING_APP_PDF_OPTION_TEXT},
       {"pngOptionText", IDS_SCANNING_APP_PNG_OPTION_TEXT},
+      {"pageSizeDropdownLabel", IDS_SCANNING_APP_PAGE_SIZE_DROPDOWN_LABEL},
       {"resolutionDropdownLabel", IDS_SCANNING_APP_RESOLUTION_DROPDOWN_LABEL},
       {"resolutionOptionText", IDS_SCANNING_APP_RESOLUTION_OPTION_TEXT},
       {"scannerDropdownLabel", IDS_SCANNING_APP_SCANNER_DROPDOWN_LABEL},