scanning: Add dropdown for resolution

Add a new Polymer element, resolution-select, to display the available
resolutions in a dropdown.

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

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

@@ -247,6 +247,8 @@ suite('ScanningAppTest', () => {
               firstCapabilities.sources[0].name, scanningApp.selectedSource);
           assertEquals(
               firstCapabilities.colorModes[0], scanningApp.selectedColorMode);
+          assertEquals(
+              firstCapabilities.resolutions[0], scanningApp.selectedResolution);
 
           // Before the scan button is clicked, the settings and scan button
           // should be enabled, and there should be no scan status.
@@ -257,6 +259,9 @@ suite('ScanningAppTest', () => {
           const colorModeSelect =
               scanningApp.$$('#colorModeSelect').$$('select');
           assertFalse(colorModeSelect.disabled);
+          const resolutionSelect =
+              scanningApp.$$('#resolutionSelect').$$('select');
+          assertFalse(resolutionSelect.disabled);
           const scanButton = scanningApp.$$('#scanButton');
           assertFalse(scanButton.disabled);
           const statusText = scanningApp.$$('#statusText');
@@ -269,6 +274,7 @@ suite('ScanningAppTest', () => {
           assertTrue(scannerSelect.disabled);
           assertTrue(sourceSelect.disabled);
           assertTrue(colorModeSelect.disabled);
+          assertTrue(resolutionSelect.disabled);
           assertTrue(scanButton.disabled);
           assertEquals('Scanning...', statusText.textContent.trim());
           return fakeScanService_.whenCalled('scan');
@@ -280,6 +286,8 @@ suite('ScanningAppTest', () => {
           assertFalse(scanningApp.$$('#scannerSelect').$$('select').disabled);
           assertFalse(scanningApp.$$('#sourceSelect').$$('select').disabled);
           assertFalse(scanningApp.$$('#colorModeSelect').$$('select').disabled);
+          assertFalse(
+              scanningApp.$$('#resolutionSelect').$$('select').disabled);
           assertFalse(scanningApp.$$('#scanButton').disabled);
           assertEquals(
               'Scan complete! File(s) saved to My files.',
@@ -500,3 +508,73 @@ suite('ColorModeSelectTest', () => {
     assertFalse(select.disabled);
   });
 });
+
+suite('ResolutionSelectTest', () => {
+  /** @type {!ResolutionSelectElement} */
+  let resolutionSelect;
+
+  setup(() => {
+    resolutionSelect = document.createElement('resolution-select');
+    assertTrue(!!resolutionSelect);
+    document.body.appendChild(resolutionSelect);
+  });
+
+  teardown(() => {
+    resolutionSelect.remove();
+    resolutionSelect = null;
+  });
+
+  test('initializeResolutionSelect', () => {
+    // Before options are added, the dropdown should be disabled and empty.
+    const select = resolutionSelect.$$('select');
+    assertTrue(!!select);
+    assertTrue(select.disabled);
+    assertEquals(0, select.length);
+
+    const firstResolution = 75;
+    const secondResolution = 300;
+    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);
+    assertEquals(2, select.length);
+    assertEquals(
+        firstResolution.toString() + ' dpi',
+        select.options[0].textContent.trim());
+    assertEquals(
+        secondResolution.toString() + ' dpi',
+        select.options[1].textContent.trim());
+    assertEquals(firstResolution.toString(), select.value);
+
+    // Selecting a different option should update the selected value.
+    select.value = secondResolution;
+    select.dispatchEvent(new CustomEvent('change'));
+    flush();
+
+    assertEquals(
+        secondResolution.toString(), resolutionSelect.selectedResolution);
+  });
+
+  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);
+  });
+});

chromeos/chromeos_strings.grd

@@ -475,6 +475,12 @@ 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_RESOLUTION_DROPDOWN_LABEL" desc="The label for the dropdown that displays available resolutions (e.g. 150 dpi, 300 dpi, etc.).">
+        Resolution
+      </message>
+      <message name="IDS_SCANNING_APP_RESOLUTION_OPTION_TEXT" desc="The text displayed for an option in the resolution dropdown.">
+        <ph name="RESOLUTION_VALUE">$1<ex>300</ex></ph> dpi
+      </message>
 
       <!-- Diagnostics App -->
       <!-- TODO(michaelcheco): Update with finalized copies of the strings -->

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_RESOLUTION_DROPDOWN_LABEL.png.sha1

+3af4adb42d4fe7ee3152e4e748b2d54494be6ab5
\ No newline at end of file

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_RESOLUTION_OPTION_TEXT.png.sha1

+7fb844b4b0a7728cf735dee1fc8846c36fe4b85b
\ No newline at end of file

chromeos/components/scanning/resources/BUILD.gn

@@ -12,6 +12,7 @@ js_type_check("closure_compile_module") {
   deps = [
     ":color_mode_select",
     ":mojo_interface_provider",
+    ":resolution_select",
     ":scanner_select",
     ":scanning_app",
     ":scanning_app_types",
@@ -29,6 +30,15 @@ js_library("color_mode_select") {
   ]
 }
 
+js_library("resolution_select") {
+  deps = [
+    "//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",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+}
+
 js_library("scanner_select") {
   deps = [
     ":scanning_app_types",
@@ -43,6 +53,7 @@ js_library("scanning_app") {
   deps = [
     ":color_mode_select",
     ":mojo_interface_provider",
+    ":resolution_select",
     ":scanner_select",
     ":scanning_app_types",
     ":scanning_app_util",
@@ -76,6 +87,7 @@ js_library("mojo_interface_provider") {
 html_to_js("web_components") {
   js_files = [
     "color_mode_select.js",
+    "resolution_select.js",
     "scanner_select.js",
     "scanning_app.js",
     "source_select.js",

chromeos/components/scanning/resources/resolution_select.html

+<style>
+  #title {
+    height: 32px;
+    padding-inline-end: 10px;
+  }
+
+  #controls {
+    display: inline-block;
+    height: 32px;
+    width: 300px;
+  }
+</style>
+<span id="title">[[i18n('resolutionDropdownLabel')]]</span>
+<div id="controls">
+  <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
+      should announce when a new option is focused). -->
+  <select class="md-select" value="{{selectedResolution::change}}"
+      disabled="[[disabled_]]">
+    <!-- TODO(jschettler): Sort the resolutions. -->
+    <template is="dom-repeat" items="[[resolutions]]" as="resolution">
+      <option value="[[resolution]]">
+        [[getResolutionString_(resolution)]]
+      </option>
+    </template>
+  </select>
+</div>

chromeos/components/scanning/resources/resolution_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 {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import './strings.js';
+
+/** @type {number} */
+const NUM_REQUIRED_RESOLUTIONS = 2;
+
+/**
+ * @fileoverview
+ * 'resolution-select' displays the available scan resolutions in a dropdown.
+ */
+Polymer({
+  is: 'resolution-select',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /** @type {!Array<number>} */
+    resolutions: {
+      type: Array,
+      value: () => [],
+    },
+
+    /** @type {number|undefined} */
+    selectedResolution: {
+      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)',
+    },
+  },
+
+  /**
+   * @param {number} resolution
+   * @return {!string}
+   * @private
+   */
+  getResolutionString_(resolution) {
+    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/scanning_app.html

@@ -15,6 +15,12 @@
       settings-disabled="[[settingsDisabled_]]"
       selected-color-mode="{{selectedColorMode}}"></color-mode-select>
 </div>
+<div>
+  <resolution-select id="resolutionSelect"
+      resolutions="[[capabilities_.resolutions]]"
+      settings-disabled="[[settingsDisabled_]]"
+      selected-resolution="{{selectedResolution}}"></resolution-select>
+</div>
 <!-- TODO(jschettler): Replace button label with finalized i18n string. -->
 <cr-button id="scanButton" on-click="onScanClick_"
     disabled$="[[scanButtonDisabled_]]">

chromeos/components/scanning/resources/scanning_app.js

@@ -7,6 +7,7 @@ import 'chrome://resources/mojo/mojo/public/mojom/base/big_buffer.mojom-lite.js'
 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 './resolution_select.js';
 import './scanner_select.js';
 import './source_select.js';
 
@@ -55,6 +56,9 @@ Polymer({
     /** @type {chromeos.scanning.mojom.ColorMode|undefined} */
     selectedColorMode: chromeos.scanning.mojom.ColorMode,
 
+    /** @type {number|undefined} */
+    selectedResolution: Number,
+
     /**
      * @type {?string}
      * @private
@@ -107,6 +111,7 @@ Polymer({
     // first options in the dropdowns.
     this.selectedSource = this.capabilities_.sources[0].name;
     this.selectedColorMode = this.capabilities_.colorModes[0];
+    this.selectedResolution = this.capabilities_.resolutions[0];
 
     this.scanButtonDisabled_ = false;
   },
@@ -156,7 +161,8 @@ Polymer({
   /** @private */
   onScanClick_() {
     if (!this.selectedScannerId || !this.selectedSource ||
-        this.selectedColorMode === undefined) {
+        this.selectedColorMode === undefined ||
+        this.selectedResolution === undefined) {
       // TODO(jschettler): Replace status text with finalized i18n strings.
       this.statusText_ = 'Failed to start scan.';
       return;
@@ -166,12 +172,10 @@ Polymer({
     this.settingsDisabled_ = true;
     this.scanButtonDisabled_ = true;
 
-    // TODO(jschettler): Set resolution using the selected value when the
-    // corresponding dropdowns are added.
     const settings = {
       'sourceName': this.selectedSource,
       'colorMode': this.selectedColorMode,
-      'resolutionDpi': 100,
+      'resolutionDpi': this.selectedResolution,
     };
     this.scanService_
         .scan(this.scannerIds_.get(this.selectedScannerId), settings)

chromeos/components/scanning/resources/scanning_app_resources.grd

@@ -22,6 +22,8 @@
       <include name="IDR_SCANNING_APP_SOURCE_SELECT_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/source_select.js" use_base_dir="false" compress="gzip" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_COLOR_MODE_SELECT_HTML" file="color_mode_select.html" compress="gzip" 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" compress="gzip" type="BINDATA"/>
+      <include name="IDR_SCANNING_APP_RESOLUTION_SELECT_HTML" file="resolution_select.html" compress="gzip" 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" compress="gzip" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_THROBBER_CSS_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/throbber_css.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_ICON" file="app_icon_192.png" type="BINDATA" />
     </includes>

chromeos/components/scanning/scanning_ui.cc

@@ -52,7 +52,9 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"scannerDropdownLabel", IDS_SCANNING_APP_SCANNER_DROPDOWN_LABEL},
       {"noScannersText", IDS_SCANNING_APP_NO_SCANNERS_TEXT},
       {"sourceDropdownLabel", IDS_SCANNING_APP_SOURCE_DROPDOWN_LABEL},
-      {"colorModeDropdownLabel", IDS_SCANNING_APP_COLOR_MODE_DROPDOWN_LABEL}};
+      {"colorModeDropdownLabel", IDS_SCANNING_APP_COLOR_MODE_DROPDOWN_LABEL},
+      {"resolutionDropdownLabel", IDS_SCANNING_APP_RESOLUTION_DROPDOWN_LABEL},
+      {"resolutionOptionText", IDS_SCANNING_APP_RESOLUTION_OPTION_TEXT}};
 
   for (const auto& str : kLocalizedStrings)
     html_source->AddLocalizedString(str.name, str.id);