scanning: Create skeleton Scan To select

This change creates the basic structure of the 'Scan To' dropdown
responsible for choosing the directory to save completed scans. This
iteration will only have one option defaulted to the 'My files'
directory and the follow up CL will let the user choose the
directory through the select dialog.

'My files' needs to be created as separate string for displaying because
the underlying filepath is always "../../MyFiles".

Screenshot: http://screen/AZ6RRV9pPGUKEsN

Bug: 1059779
Change-Id: I3f6ebff75c9a81ca8ed13c8d8cd49f5346978cff
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2503854
Auto-Submit: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822019}

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

@@ -755,3 +755,33 @@ suite('ScanPreviewTest', () => {
     assertTrue(!!scanPreview.$$('.preview'));
   });
 });
+
+suite('ScanToSelectTest', () => {
+  /** @type {?ScanToSelectElement} */
+  let scanToSelect = null;
+
+  /** {string} */
+  const myFiles = 'My files';
+
+  setup(() => {
+    scanToSelect = document.createElement('scan-to-select');
+    assertTrue(!!scanToSelect);
+    document.body.appendChild(scanToSelect);
+  });
+
+  teardown(() => {
+    if (scanToSelect) {
+      scanToSelect.remove();
+    }
+    scanToSelect = null;
+  });
+
+  test('initializeScanToSelect', () => {
+    // The dropdown should be disabled and only have one entry for 'My files'.
+    const select = scanToSelect.$$('select');
+    assertTrue(!!select);
+    assertTrue(select.disabled);
+    assertEquals(1, select.length);
+    assertEquals(myFiles, select.options[0].textContent.trim());
+  });
+});

chromeos/chromeos_strings.grd

@@ -498,6 +498,12 @@ Try tapping the mic to ask me anything.
       <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>
+      <message name="IDS_SCANNING_APP_SCAN_TO_DROPDOWN_LABEL" desc="The label for the dropdown that displays the chosen directory to save scans.">
+        Scan to
+      </message>
+      <message name="IDS_SCANNING_APP_MY_FILES_SELECT_OPTION" desc="The text displayed in the Scan To dropdown when the user chooses the local 'My files' folder from the select dialog.">
+        My files
+      </message>
 
       <!-- Diagnostics App -->
       <!-- TODO(michaelcheco): Update with finalized copies of the strings -->

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_MY_FILES_SELECT_OPTION.png.sha1

+af5584dda2b2b3fac83219b0f98827a81bdfafc5
\ No newline at end of file

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_SCAN_TO_DROPDOWN_LABEL.png.sha1

+03b160bac577a3e1dd52cb8fa036346c4f5a33f9
\ No newline at end of file

chromeos/components/scanning/resources/BUILD.gn

@@ -16,6 +16,7 @@ js_type_check("closure_compile_module") {
     ":page_size_select",
     ":resolution_select",
     ":scan_preview",
+    ":scan_to_select",
     ":scanner_select",
     ":scanning_app",
     ":scanning_app_types",
@@ -75,6 +76,15 @@ js_library("scan_preview") {
   ]
 }
 
+js_library("scan_to_select") {
+  deps = [
+    ":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("scanner_select") {
   deps = [
     ":scanning_app_types",
@@ -94,6 +104,7 @@ js_library("scanning_app") {
     ":page_size_select",
     ":resolution_select",
     ":scan_preview",
+    ":scan_to_select",
     ":scanner_select",
     ":scanning_app_types",
     ":scanning_app_util",
@@ -143,6 +154,7 @@ html_to_js("web_components") {
     "scan_preview.js",
     "scan_settings_section.js",
     "scanner_select.js",
+    "scan_to_select.js",
     "scanning_app.js",
     "scanning_shared_css.js",
     "source_select.js",

chromeos/components/scanning/resources/scan_to_select.html

+<scan-settings-section>
+  <span id="scanToLabel" slot="label">[[i18n('scanToDropdownLabel')]]</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" disabled="[[disabled]]">
+      <option>
+        [[i18n('myFilesSelectOption')]]
+      </option>
+    </select>
+  </div>
+</scan-settings-section>

chromeos/components/scanning/resources/scan_to_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 './scan_settings_section.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 {SelectBehavior} from './select_behavior.js';
+
+/**
+ * @fileoverview
+ * 'scan-to-select' displays the chosen directory to save completed scans.
+ */
+Polymer({
+  is: 'scan-to-select',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [I18nBehavior, SelectBehavior],
+});

chromeos/components/scanning/resources/scanning_app.html

@@ -33,6 +33,8 @@
       <source-select id="sourceSelect" sources="[[capabilities_.sources]]"
           settings-disabled="[[settingsDisabled_]]"
           selected-source="{{selectedSource}}"></source-select>
+      <scan-to-select id="scanToSelect"
+          settings-disabled="[[settingsDisabled_]]"></scan-to-select>
       <file-type-select id="fileTypeSelect" settings-disabled="[[settingsDisabled_]]"
           selected-file-type="{{selectedFileType}}"></file-type-select>
       <color-mode-select id="colorModeSelect"
@@ -54,4 +56,3 @@
       <p id="statusText">[[statusText_]]</p>
     </div>
   </div>
-</div>

chromeos/components/scanning/resources/scanning_app.js

@@ -11,6 +11,7 @@ import './file_type_select.js';
 import './page_size_select.js';
 import './resolution_select.js';
 import './scan_preview.js';
+import './scan_to_select.js';
 import './scanner_select.js';
 import './scanning_shared_css.js';
 import './source_select.js';

chromeos/components/scanning/resources/scanning_app_resources.grd

@@ -16,6 +16,8 @@
       <include name="IDR_SCANNING_APP_INDEX_HTML" file="index.html" type="BINDATA" />
       <include name="IDR_SCANNING_MOJO_LITE_JS" file="${root_gen_dir}/chromeos/components/scanning/mojom/scanning.mojom-lite.js" use_base_dir="false" type="BINDATA" />
       <include name="IDR_SCANNING_APP_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/scanning_app.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_SCANNING_APP_SCAN_TO_SELECT_HTML" file="scan_to_select.html" type="BINDATA"/>
+      <include name="IDR_SCANNING_APP_SCAN_TO_SELECT_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/scan_to_select.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_SCANNER_SELECT_HTML" file="scanner_select.html" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_SCANNER_SELECT_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/scanner_select.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_SOURCE_SELECT_HTML" file="source_select.html" type="BINDATA"/>

chromeos/components/scanning/scanning_ui.cc

@@ -53,12 +53,14 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"colorModeDropdownLabel", IDS_SCANNING_APP_COLOR_MODE_DROPDOWN_LABEL},
       {"fileTypeDropdownLabel", IDS_SCANNING_APP_FILE_TYPE_DROPDOWN_LABEL},
       {"jpgOptionText", IDS_SCANNING_APP_JPG_OPTION_TEXT},
+      {"myFilesSelectOption", IDS_SCANNING_APP_MY_FILES_SELECT_OPTION},
       {"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},
+      {"scanToDropdownLabel", IDS_SCANNING_APP_SCAN_TO_DROPDOWN_LABEL},
       {"scannerDropdownLabel", IDS_SCANNING_APP_SCANNER_DROPDOWN_LABEL},
       {"sourceDropdownLabel", IDS_SCANNING_APP_SOURCE_DROPDOWN_LABEL}};