Scanning: Add instructions to scan preview

Spec: http://shortn/_3CsQ13LODA
Screenshot: http://shortn/_wsgjicXnSz

Bug: 1059779
Test: browser_tests --gtest_filter=ScanningAppBrowserTest.All
Change-Id: Ifc823668a2576e3dc36d08494c06f75db53d83db
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2511490
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#823579}

chromeos/chromeos_strings.grd

@@ -513,6 +513,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_MORE_SETTINGS" desc="The text displayed for the button that shows and hides additional settings.">
         More settings
       </message>
+      <message name="IDS_SCANNING_APP_SCAN_PREVIEW_HELPER_TEXT" desc="The text displayed in the scan preview that explains how to scan a document.">
+        Place your document, and click Scan to get started
+      </message>
 
       <!-- Diagnostics App -->
       <!-- TODO(michaelcheco): Update with finalized copies of the strings -->

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_SCAN_PREVIEW_HELPER_TEXT.png.sha1

+f4d29a856ed9ae3ff26fc5a7da5c4cb3b684834c
\ No newline at end of file

chromeos/components/scanning/resources/scan_preview.html

-<style include="scanning-shared">
+<style include="scanning-shared scanning-fonts">
+  #helperText {
+    @apply --scanning-helper-text-font;
+    color: var(--scanning-helper-text-color);
+    text-align-last: center;
+    width: 60%;
+  }
   .preview {
+    align-items: center;
     border: 1px solid var(--google-grey-200);
     border-radius: 4px;
+    display: flex;
     /* TODO(michaelcheco): Replace with correct height for
      * preview container. */
     height: 420px;
+    justify-content: center;
   }
 </style>
-<div class="preview"></div>
+<div class="preview">
\ No newline at end of file
+  <div id="helperText">[[i18n('scanPreviewHelperText')]]</div>
+</div>
\ No newline at end of file

chromeos/components/scanning/resources/scan_preview.js

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './scanning_fonts_css.js';
 import './scanning_shared_css.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';
 
 /**
@@ -14,4 +16,6 @@ Polymer({
   is: 'scan-preview',
 
   _template: html`{__html_template__}`,
+
+  behaviors: [I18nBehavior],
 });

chromeos/components/scanning/resources/scanning_fonts_css.html

 <template>
   <style>
     :host {
+      --scanning-helper-text-font-family: "Google Sans", Roboto, sans-serif;
       --scanning-more-settings-font-family: Roboto;
       --scanning-section-title-font-family: "Google Sans", Roboto, sans-serif;
       --scanning-select-font-family: Roboto;
 
       --scanning-chevron-icon-font-size: 20px;
+      --scanning-helper-text-font-size: 16px;
       --scanning-more-settings-font-size: 12px;
       --scanning-section-title-font-size: 22px;
       --scanning-select-font-size: 13px;
 
       --scanning-chevron-icon-color: var(--google-grey-700);
+      --scanning-helper-text-color: var(--google-grey-700);
       --scanning-more-settings-text-color: var(--google-grey-700);
       --scanning-section-title-text-color: var(--google-grey-900);
       --scanning-select-text-color: var(--google-grey-900);
@@ -24,6 +27,11 @@
           font-family: var(--scanning-select-font-family);
           font-size: var(--scanning-select-font-size);
       };
+
+      --scanning-helper-text-font: {
+        font-family: var(--scanning-helper-text-font-family);
+        font-size: var(--scanning-helper-text-font-size);
+      }
     }
   </style>
 </template>
\ No newline at end of file

chromeos/components/scanning/scanning_ui.cc

@@ -61,6 +61,7 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"pageSizeDropdownLabel", IDS_SCANNING_APP_PAGE_SIZE_DROPDOWN_LABEL},
       {"resolutionDropdownLabel", IDS_SCANNING_APP_RESOLUTION_DROPDOWN_LABEL},
       {"resolutionOptionText", IDS_SCANNING_APP_RESOLUTION_OPTION_TEXT},
+      {"scanPreviewHelperText", IDS_SCANNING_APP_SCAN_PREVIEW_HELPER_TEXT},
       {"scanToDropdownLabel", IDS_SCANNING_APP_SCAN_TO_DROPDOWN_LABEL},
       {"scannerDropdownLabel", IDS_SCANNING_APP_SCANNER_DROPDOWN_LABEL},
       {"selectFolderOption", IDS_SCANNING_APP_SELECT_FOLDER_OPTION},