Scanning: Add scan-preview element

- Shows a preview of a scanned document
- A follow-up CL will use and style this element

Bug: 1059779
Test: browser_tests --gtest_filter=ScanningUIBrowserTest.All
Change-Id: Ib5a9fe49f87c14059391900777247615cf7a6184
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2500430
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#821591}

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

@@ -4,6 +4,7 @@
 
 // TODO(jschettler): Use es6 module for mojo binding (crbug/1004256).
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+import 'chrome://scanning/scan_preview.js';
 import 'chrome://scanning/scanning_app.js';
 
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -717,3 +718,25 @@ suite('ResolutionSelectTest', () => {
     assertFalse(select.disabled);
   });
 });
+
+suite('ScanPreviewTest', () => {
+  /** @type {?ScanPreviewElement} */
+  let scanPreview = null;
+
+  setup(() => {
+    scanPreview = document.createElement('scan-preview');
+    assertTrue(!!scanPreview);
+    document.body.appendChild(scanPreview);
+  });
+
+  teardown(() => {
+    if (scanPreview) {
+      scanPreview.remove();
+    }
+    scanPreview = null;
+  });
+
+  test('initializeScanPreview', () => {
+    assertTrue(!!scanPreview.$$('.preview'));
+  });
+});

chromeos/components/scanning/resources/BUILD.gn

@@ -15,6 +15,7 @@ js_type_check("closure_compile_module") {
     ":mojo_interface_provider",
     ":page_size_select",
     ":resolution_select",
+    ":scan_preview",
     ":scanner_select",
     ":scanning_app",
     ":scanning_app_types",
@@ -63,6 +64,16 @@ js_library("resolution_select") {
   ]
 }
 
+js_library("scan_preview") {
+  deps = [
+    ":scanning_app_types",
+    ":scanning_app_util",
+    "//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",
@@ -81,6 +92,7 @@ js_library("scanning_app") {
     ":mojo_interface_provider",
     ":page_size_select",
     ":resolution_select",
+    ":scan_preview",
     ":scanner_select",
     ":scanning_app_types",
     ":scanning_app_util",
@@ -122,6 +134,7 @@ html_to_js("web_components") {
     "file_type_select.js",
     "page_size_select.js",
     "resolution_select.js",
+    "scan_preview.js",
     "scan_settings_section.js",
     "scanner_select.js",
     "scanning_app.js",

chromeos/components/scanning/resources/scan_preview.html

+<style include="scanning-shared">
+  .preview {
+    border: 1px solid var(--google-grey-200);
+    border-radius: 4px;
+  }
+</style>
+<div class="preview"></div>
\ No newline at end of file

chromeos/components/scanning/resources/scan_preview.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_shared_css.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/**
+ * @fileoverview
+ * 'scan-preview' shows a preview of a scanned document.
+ */
+Polymer({
+  is: 'scan-preview',
+
+  _template: html`{__html_template__}`,
+});

chromeos/components/scanning/resources/scanning_app_resources.grd

@@ -31,6 +31,8 @@
       <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"/>
       <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_SCANNING_SHARED_CSS_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/scanning_shared_css.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_SCANNING_APP_SCAN_PREVIEW_HTML" file="scan_preview.html" type="BINDATA"/>
+      <include name="IDR_SCANNING_APP_SCAN_PREVIEW_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/scan_preview.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_ICON_16" file="scanning_app_icon_16.png" type="BINDATA" />
       <include name="IDR_SCANNING_APP_ICON_32" file="scanning_app_icon_32.png" type="BINDATA" />
       <include name="IDR_SCANNING_APP_ICON_48" file="scanning_app_icon_48.png" type="BINDATA" />