scanning: Create a new element for Done section

Splitting this out to a new element for better compartmentalization for
the Done section features.

http://screen/6DrzkKGwwfkXcgr

Bug: 1059779
Change-Id: Ia81015785081904d46320754977fff9fb5190a42
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2542670Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828431}

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

@@ -276,7 +276,7 @@ export function scanningAppTest() {
    * @return {!Promise}
    */
   function clickDoneButton() {
-    const button = scanningApp.$$('#doneButton');
+    const button = scanningApp.$$('scan-done-section').$$('#doneButton');
     assertTrue(!!button);
     button.click();
     return flushTasks();
@@ -380,7 +380,8 @@ export function scanningAppTest() {
           assertTrue(isVisible(helperText));
           assertFalse(isVisible(scanProgress));
           assertFalse(isVisible(
-              /** @type {!HTMLElement} */ (scanningApp.$$('#fileSaved'))));
+              /** @type {!HTMLElement} */ (
+                  scanningApp.$$('scan-done-section'))));
 
           // Click the Scan button and wait till the scan is started.
           scanButton.click();
@@ -403,7 +404,8 @@ export function scanningAppTest() {
           assertFalse(isVisible(helperText));
           assertTrue(isVisible(scanProgress));
           assertFalse(isVisible(
-              /** @type {!HTMLElement} */ (scanningApp.$$('#fileSaved'))));
+              /** @type {!HTMLElement} */ (
+                  scanningApp.$$('scan-done-section'))));
           assertEquals('Scanning page 1', progressText.textContent.trim());
           assertEquals(0, progressBar.value);
 
@@ -440,10 +442,13 @@ export function scanningAppTest() {
         })
         .then(() => {
           assertTrue(isVisible(
-              /** @type {!HTMLElement} */ (scanningApp.$$('#fileSaved'))));
+              /** @type {!HTMLElement} */ (
+                  scanningApp.$$('scan-done-section'))));
           assertEquals(
               'Scanned files saved!',
-              scanningApp.$$('#fileSaved').textContent.trim());
+              scanningApp.$$('scan-done-section')
+                  .$$('#title')
+                  .textContent.trim());
 
           // Click the Done button to return to READY state.
           return clickDoneButton();
@@ -463,7 +468,8 @@ export function scanningAppTest() {
           assertTrue(isVisible(helperText));
           assertFalse(isVisible(scanProgress));
           assertFalse(isVisible(
-              /** @type {!HTMLElement} */ (scanningApp.$$('#fileSaved'))));
+              /** @type {!HTMLElement} */ (
+                  scanningApp.$$('scan-done-section'))));
         });
   });
 

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_done_section",
     ":scan_preview",
     ":scan_to_select",
     ":scanner_select",
@@ -72,6 +73,15 @@ js_library("resolution_select") {
   ]
 }
 
+js_library("scan_done_section") {
+  deps = [
+    ":icons",
+    ":scanning_app_types",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
+  ]
+}
+
 js_library("scan_preview") {
   deps = [
     ":scanning_app_types",
@@ -107,7 +117,6 @@ js_library("scanning_app") {
   deps = [
     ":color_mode_select",
     ":file_type_select",
-    ":icons",
     ":mojo_interface_provider",
     ":page_size_select",
     ":resolution_select",
@@ -161,6 +170,7 @@ html_to_js("web_components") {
     "page_size_select.js",
     "resolution_select.js",
     "scan_preview.js",
+    "scan_done_section.js",
     "scan_settings_section.js",
     "scanner_select.js",
     "scan_to_select.js",

chromeos/components/scanning/resources/scan_done_section.html

+<style include="scanning-fonts">
+  #checkMarkIcon {
+    margin-inline-end: 12px;
+    min-width: 24px;
+    padding-bottom: 2px;
+  }
+
+  .done-button-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 32px;
+    width: 264px;
+  }
+
+  #title {
+    @apply --scanning-done-section-title-font;
+    color: var(--scanning-done-section-title-text-color);
+    display: inline-block;
+  }
+</style>
+<iron-icon id="checkMarkIcon" icon="scanning:check-mark"></iron-icon>
+<h1 id="title" >
+  [[getTitleText_(pageNumber)]]
+</h1>
+<div class="done-button-container">
+  <cr-button id="doneButton" class="action-button"
+      on-click="onDoneClick_">
+    [[i18n('doneButtonText')]]
+  </cr-button>
+</div>

chromeos/components/scanning/resources/scan_done_section.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 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import './icons.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 {AppState} from './scanning_app_types.js';
+
+/**
+ * @fileoverview
+ * 'scan-done-section' shows the post-scan user options.
+ */
+Polymer({
+  is: 'scan-done-section',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /** @type {number} */
+    pageNumber: Number,
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getTitleText_() {
+    return this.i18n(
+        this.pageNumber > 1 ? 'fileSavedTextPlural' : 'fileSavedText');
+  },
+
+  /** @private */
+  onDoneClick_() {
+    this.fire('change-app-state', AppState.READY);
+  },
+});

chromeos/components/scanning/resources/scanning_app.html

@@ -4,16 +4,6 @@
     color: var(--scanning-section-title-text-color);
   }
 
-  #checkMarkIcon {
-    margin-inline-end: 12px;
-    min-width: 24px;
-    padding-bottom: 2px;
-  }
-
-  #fileSaved {
-    display: inline-block;
-  }
-
   #moreSettingsButton {
     --ink-color: var(--menu-text-color);
     --paper-ripple-opacity: 0;
@@ -85,12 +75,6 @@
     justify-content: flex-end;
     width: 289px;
   }
-
-  .done-button-container {
-    display: flex;
-    justify-content: flex-end;
-    width: 280px;
-  }
 </style>
 <div id="scanningContainer">
   <div class="panel-container">
@@ -100,7 +84,7 @@
           progress-percent="[[progressPercent_]]"></scan-preview>
     </div>
     <div class="right-panel">
-      <template is="dom-if" if="[[!shouldShowDonePage_(appState_)]]">
+      <template is="dom-if" if="[[!shouldShowDoneSection_(appState_)]]">
         <h1 id="appTitle">[[i18n('appTitle')]]</h1>
         <scanner-select id="scannerSelect" scanners="[[scanners_]]"
             loaded="[[areScannersLoaded_(appState_)]]"
@@ -154,17 +138,9 @@
         </div>
         <p id="statusText">[[statusText_]]</p>
       </template>
-      <template is="dom-if" if="[[shouldShowDonePage_(appState_)]]">
-        <iron-icon id="checkMarkIcon" icon="scanning:check-mark"></iron-icon>
-        <h1 id="fileSaved" class="title">
-          [[getFileSavedText_(pageNumber_)]]
-        </h1>
-        <div class="done-button-container">
-          <cr-button id="doneButton" class="action-button"
-              on-click="onDoneClick_">
-            [[i18n('doneButtonText')]]
-          </cr-button>
-        </div>
+      <template is="dom-if" if="[[shouldShowDoneSection_(appState_)]]">
+        <scan-done-section page-number="[[pageNumber_]]"
+            on-change-app-state="onChangeAppState_"></scan-done-section>
       </template>
     </div>
   </div>

chromeos/components/scanning/resources/scanning_app.js

@@ -12,9 +12,9 @@ import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './file_path.mojom-lite.js';
 import './color_mode_select.js';
 import './file_type_select.js';
-import './icons.js';
 import './page_size_select.js';
 import './resolution_select.js';
+import './scan_done_section.js';
 import './scan_preview.js';
 import './scan_to_select.js';
 import './scanner_select.js';
@@ -372,7 +372,7 @@ Polymer({
    * @return {boolean}
    * @private
    */
-  shouldShowDonePage_() {
+  shouldShowDoneSection_() {
     return this.appState_ === AppState.DONE;
   },
 
@@ -442,4 +442,12 @@ Polymer({
 
     this.appState_ = newState;
   },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onChangeAppState_(event) {
+    this.setAppState_(event.detail);
+  }
 });

chromeos/components/scanning/resources/scanning_app_resources.grd

@@ -23,6 +23,8 @@
       <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"/>
       <include name="IDR_SCANNING_APP_SOURCE_SELECT_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/source_select.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_SCANNING_APP_SCAN_DONE_SECTION_HTML" file="scan_done_section.html" type="BINDATA"/>
+      <include name="IDR_SCANNING_APP_SCAN_DONE_SECTION_JS" file="${root_gen_dir}/chromeos/components/scanning/resources/scan_done_section.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_FILE_TYPE_SELECT_HTML" file="file_type_select.html" 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" type="BINDATA"/>
       <include name="IDR_SCANNING_APP_COLOR_MODE_SELECT_HTML" file="color_mode_select.html" type="BINDATA"/>

chromeos/components/scanning/resources/scanning_fonts_css.html

 <template>
   <style>
     :host {
+      --scanning-done-section-title-font-family: "Google Sans", Roboto, sans-serif;
+      --scanning-done-section-option-font-family: Roboto;
       --scanning-helper-text-font-family: "Google Sans", Roboto, sans-serif;
       --scanning-more-settings-font-family: Roboto;
       --scanning-progress-text-font-family: "Google Sans", Roboto, sans-serif;
@@ -8,6 +10,8 @@
       --scanning-select-font-family: Roboto;
 
       --scanning-chevron-icon-font-size: 20px;
+      --scanning-done-section-title-font-size: 20px;
+      --scanning-done-section-options-font-size: 13px;
       --scanning-helper-text-font-size: 16px;
       --scanning-more-settings-font-size: 12px;
       --scanning-progress-text-font-size: 16px;
@@ -15,6 +19,8 @@
       --scanning-select-font-size: 13px;
 
       --scanning-chevron-icon-color: var(--google-grey-700);
+      --scanning-done-section-title-text-color: var(--google-grey-900);
+      --scanning-done-section-option-text-color: var(--google-grey-900);
       --scanning-helper-text-color: var(--google-grey-700);
       --scanning-more-settings-text-color: var(--google-grey-700);
       --scanning-progress-text-color: var(--google-grey-700);
@@ -40,6 +46,16 @@
         font-family: var(--scanning-progress-text-font-family);
         font-size: var(--scanning-progress-text-font-size);
       }
+
+      --scanning-done-section-title-font: {
+        font-family: var(--scanning-done-section-title-font-family);
+        font-size: var(--scanning-done-section-title-font-size);
+      }
+
+      --scanning-done-section-option-font: {
+        font-family: var(--scanning-done-section-option-font-family);
+        font-size: var(--scanning-done-section-option-font-size);
+      }
     }
   </style>
 </template>