scanning: Add dropdown for file type

Add a new Polymer element, file-type-dropdown, to display the file types
in a dropdown.

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

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

@@ -17,6 +17,12 @@ const ColorMode = {
   COLOR: chromeos.scanning.mojom.ColorMode.kColor,
 };
 
+const FileType = {
+  JPG: chromeos.scanning.mojom.FileType.kJpg,
+  PDF: chromeos.scanning.mojom.FileType.kPdf,
+  PNG: chromeos.scanning.mojom.FileType.kPng,
+};
+
 const SourceType = {
   FLATBED: chromeos.scanning.mojom.SourceType.kFlatbed,
   ADF_SIMPLEX: chromeos.scanning.mojom.SourceType.kAdfSimplex,
@@ -245,6 +251,7 @@ suite('ScanningAppTest', () => {
               tokenToString(firstScannerId), scanningApp.selectedScannerId);
           assertEquals(
               firstCapabilities.sources[0].name, scanningApp.selectedSource);
+          assertEquals(FileType.PDF, scanningApp.selectedFileType);
           assertEquals(
               firstCapabilities.colorModes[0], scanningApp.selectedColorMode);
           assertEquals(
@@ -256,6 +263,8 @@ suite('ScanningAppTest', () => {
           assertFalse(scannerSelect.disabled);
           const sourceSelect = scanningApp.$$('#sourceSelect').$$('select');
           assertFalse(sourceSelect.disabled);
+          const fileTypeSelect = scanningApp.$$('#fileTypeSelect').$$('select');
+          assertFalse(fileTypeSelect.disabled);
           const colorModeSelect =
               scanningApp.$$('#colorModeSelect').$$('select');
           assertFalse(colorModeSelect.disabled);
@@ -273,6 +282,7 @@ suite('ScanningAppTest', () => {
           // scanning is in progress.
           assertTrue(scannerSelect.disabled);
           assertTrue(sourceSelect.disabled);
+          assertTrue(fileTypeSelect.disabled);
           assertTrue(colorModeSelect.disabled);
           assertTrue(resolutionSelect.disabled);
           assertTrue(scanButton.disabled);
@@ -285,6 +295,7 @@ suite('ScanningAppTest', () => {
           // complete.
           assertFalse(scanningApp.$$('#scannerSelect').$$('select').disabled);
           assertFalse(scanningApp.$$('#sourceSelect').$$('select').disabled);
+          assertFalse(scanningApp.$$('#fileTypeSelect').$$('select').disabled);
           assertFalse(scanningApp.$$('#colorModeSelect').$$('select').disabled);
           assertFalse(
               scanningApp.$$('#resolutionSelect').$$('select').disabled);
@@ -447,6 +458,42 @@ suite('SourceSelectTest', () => {
   });
 });
 
+suite('FileTypeSelectTest', () => {
+  /** @type {!FileTypeSelectElement} */
+  let fileTypeSelect;
+
+  setup(() => {
+    fileTypeSelect = document.createElement('file-type-select');
+    assertTrue(!!fileTypeSelect);
+    document.body.appendChild(fileTypeSelect);
+  });
+
+  teardown(() => {
+    fileTypeSelect.remove();
+    fileTypeSelect = null;
+  });
+
+  test('initializeFileTypeSelect', () => {
+    // The dropdown should be initialized as enabled with three options. The
+    // default option should be PDF.
+    const select = fileTypeSelect.$$('select');
+    assertTrue(!!select);
+    assertFalse(select.disabled);
+    assertEquals(3, select.length);
+    assertEquals('JPG', select.options[0].textContent.trim());
+    assertEquals('PDF', select.options[1].textContent.trim());
+    assertEquals('PNG', select.options[2].textContent.trim());
+    assertEquals(FileType.PDF.toString(), select.value);
+
+    // Selecting a different option should update the selected value.
+    select.value = FileType.JPG.toString();
+    select.dispatchEvent(new CustomEvent('change'));
+    flush();
+
+    assertEquals(FileType.JPG.toString(), fileTypeSelect.selectedFileType);
+  });
+});
+
 suite('ColorModeSelectTest', () => {
   /** @type {!ColorModeSelectElement} */
   let colorModeSelect;

chromeos/chromeos_strings.grd

@@ -472,6 +472,18 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_SOURCE_DROPDOWN_LABEL" desc="The label for the dropdown that displays available scan sources (e.g. flatbed, document feeder, etc.).">
         Source
       </message>
+      <message name="IDS_SCANNING_APP_FILE_TYPE_DROPDOWN_LABEL" desc="The label for the dropdown that displays available file types.">
+        File type
+      </message>
+      <message name="IDS_SCANNING_APP_JPG_OPTION_TEXT" desc="The text displayed for the JPG file type option.">
+        JPG
+      </message>
+      <message name="IDS_SCANNING_APP_PDF_OPTION_TEXT" desc="The text displayed for the PDF file type option.">
+        PDF
+      </message>
+      <message name="IDS_SCANNING_APP_PNG_OPTION_TEXT" desc="The text displayed for the PNG file type option.">
+        PNG
+      </message>
       <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>

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_FILE_TYPE_DROPDOWN_LABEL.png.sha1

+086936e86b46d2a6d557fd41b0067935bf54031c
\ No newline at end of file

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_JPG_OPTION_TEXT.png.sha1

+63f399f4f3917a1405a86f945f09c5cf1ed32e7e
\ No newline at end of file

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_PDF_OPTION_TEXT.png.sha1

+63f399f4f3917a1405a86f945f09c5cf1ed32e7e
\ No newline at end of file

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_PNG_OPTION_TEXT.png.sha1

+63f399f4f3917a1405a86f945f09c5cf1ed32e7e
\ No newline at end of file

chromeos/components/scanning/resources/BUILD.gn

@@ -11,6 +11,7 @@ js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
     ":color_mode_select",
+    ":file_type_select",
     ":mojo_interface_provider",
     ":resolution_select",
     ":scanner_select",
@@ -30,6 +31,14 @@ js_library("color_mode_select") {
   ]
 }
 
+js_library("file_type_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",
+  ]
+}
+
 js_library("resolution_select") {
   deps = [
     "//chromeos/components/scanning/mojom:mojom_js_library_for_compile",
@@ -52,6 +61,7 @@ js_library("scanner_select") {
 js_library("scanning_app") {
   deps = [
     ":color_mode_select",
+    ":file_type_select",
     ":mojo_interface_provider",
     ":resolution_select",
     ":scanner_select",
@@ -87,6 +97,7 @@ js_library("mojo_interface_provider") {
 html_to_js("web_components") {
   js_files = [
     "color_mode_select.js",
+    "file_type_select.js",
     "resolution_select.js",
     "scanner_select.js",
     "scanning_app.js",

chromeos/components/scanning/resources/file_type_select.html

+<style>
+  #title {
+    height: 32px;
+    padding-inline-end: 10px;
+  }
+
+  #controls {
+    display: inline-block;
+    height: 32px;
+    width: 300px;
+  }
+</style>
+<span id="title">[[i18n('fileTypeDropdownLabel')]]</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="{{selectedFileType::change}}"
+      disabled="[[settingsDisabled]]">
+    <!-- The option values must match the chromeos.scanning.mojom.FileType
+        values they correspond to. -->
+    <option value="0">[[i18n('jpgOptionText')]]</option>
+    <option value="1" selected>[[i18n('pdfOptionText')]]</option>
+    <option value="2">[[i18n('pngOptionText')]]</option>
+  </select>
+</div>

chromeos/components/scanning/resources/file_type_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 './strings.js';
+
+/**
+ * @fileoverview
+ * 'file-type-select' displays the available file types in a dropdown.
+ */
+Polymer({
+  is: 'file-type-select',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /** @type {chromeos.scanning.mojom.FileType|undefined} */
+    selectedFileType: {
+      type: chromeos.scanning.mojom.FileType,
+      notify: true,
+    },
+
+    /**
+     * Indicates whether all settings have been disabled by the parent element.
+     */
+    settingsDisabled: Boolean,
+  },
+});

chromeos/components/scanning/resources/scanning_app.html

@@ -9,6 +9,11 @@
       settings-disabled="[[settingsDisabled_]]"
       selected-source="{{selectedSource}}"></source-select>
 </div>
+<div>
+  <file-type-select id="fileTypeSelect"
+      settings-disabled="[[settingsDisabled_]]"
+      selected-file-type="{{selectedFileType}}"></file-type-select>
+</div>
 <div>
   <color-mode-select id="colorModeSelect"
       color-modes="[[capabilities_.colorModes]]"

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 './file_type_select.js';
 import './resolution_select.js';
 import './scanner_select.js';
 import './source_select.js';
@@ -53,6 +54,9 @@ Polymer({
     /** @type {?string} */
     selectedSource: String,
 
+    /** @type {chromeos.scanning.mojom.FileType|undefined} */
+    selectedFileType: chromeos.scanning.mojom.FileType,
+
     /** @type {chromeos.scanning.mojom.ColorMode|undefined} */
     selectedColorMode: chromeos.scanning.mojom.ColorMode,
 
@@ -113,6 +117,9 @@ Polymer({
     this.selectedColorMode = this.capabilities_.colorModes[0];
     this.selectedResolution = this.capabilities_.resolutions[0];
 
+    // PDF is the default file type.
+    this.selectedFileType = chromeos.scanning.mojom.FileType.kPdf;
+
     this.scanButtonDisabled_ = false;
   },
 
@@ -161,6 +168,7 @@ Polymer({
   /** @private */
   onScanClick_() {
     if (!this.selectedScannerId || !this.selectedSource ||
+        this.selectedFileType === undefined ||
         this.selectedColorMode === undefined ||
         this.selectedResolution === undefined) {
       // TODO(jschettler): Replace status text with finalized i18n strings.
@@ -172,8 +180,8 @@ Polymer({
     this.settingsDisabled_ = true;
     this.scanButtonDisabled_ = true;
 
-    // TODO(jschettler): Set file type using the selected value when the
-    // corresponding dropdown is added.
+    // TODO(jschettler): Use the selected file type when ScanService supports
+    // it.
     const settings = {
       'sourceName': this.selectedSource,
       'fileType': chromeos.scanning.mojom.FileType.kPng,

chromeos/components/scanning/resources/scanning_app_resources.grd

@@ -20,6 +20,8 @@
       <include name="IDR_SCANNING_APP_SCANNER_SELECT_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/scanner_select.js" use_base_dir="false" compress="gzip" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_SOURCE_SELECT_HTML" file="source_select.html" compress="gzip" type="BINDATA"/>
       <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_FILE_TYPE_SELECT_HTML" file="file_type_select.html" compress="gzip" type="BINDATA"/>
+      <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" 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"/>

chromeos/components/scanning/scanning_ui.cc

@@ -52,6 +52,10 @@ 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},
+      {"fileTypeDropdownLabel", IDS_SCANNING_APP_FILE_TYPE_DROPDOWN_LABEL},
+      {"jpgOptionText", IDS_SCANNING_APP_JPG_OPTION_TEXT},
+      {"pdfOptionText", IDS_SCANNING_APP_PDF_OPTION_TEXT},
+      {"pngOptionText", IDS_SCANNING_APP_PNG_OPTION_TEXT},
       {"colorModeDropdownLabel", IDS_SCANNING_APP_COLOR_MODE_DROPDOWN_LABEL},
       {"resolutionDropdownLabel", IDS_SCANNING_APP_RESOLUTION_DROPDOWN_LABEL},
       {"resolutionOptionText", IDS_SCANNING_APP_RESOLUTION_OPTION_TEXT}};