scanning: Display scanned images

Display scanned images when a scan is complete.

Bug: 1059779
Change-Id: I1341ece7bc7043ad34ba527dcbdec111563e23a3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2545293
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828912}

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

@@ -326,6 +326,8 @@ export function scanningAppTest() {
     let progressText;
     /** @type {!HTMLElement} */
     let progressBar;
+    /** @type {!HTMLElement} */
+    let scannedImages;
 
     return initializeScanningApp(expectedScanners, capabilities)
         .then(() => {
@@ -345,6 +347,7 @@ export function scanningAppTest() {
           scanProgress = scanningApp.$$('#scanPreview').$$('#scanProgress');
           progressText = scanningApp.$$('#scanPreview').$$('#progressText');
           progressBar = scanningApp.$$('#scanPreview').$$('paper-progress');
+          scannedImages = scanningApp.$$('#scanPreview').$$('#scannedImages');
           return fakeScanService_.whenCalled('getScannerCapabilities');
         })
         .then(() => {
@@ -441,6 +444,8 @@ export function scanningAppTest() {
           return fakeScanService_.simulateScanComplete(true);
         })
         .then(() => {
+          assertTrue(isVisible(scannedImages));
+          assertEquals(2, scannedImages.querySelectorAll('img').length);
           assertTrue(isVisible(
               /** @type {!HTMLElement} */ (
                   scanningApp.$$('scan-done-section'))));
@@ -470,6 +475,8 @@ export function scanningAppTest() {
           assertFalse(isVisible(
               /** @type {!HTMLElement} */ (
                   scanningApp.$$('scan-done-section'))));
+          assertFalse(isVisible(scannedImages));
+          assertEquals(0, scannedImages.querySelectorAll('img').length);
         });
   });
 

chromeos/components/scanning/resources/scan_done_section.js

@@ -38,6 +38,6 @@ Polymer({
 
   /** @private */
   onDoneClick_() {
-    this.fire('change-app-state', AppState.READY);
+    this.fire('done-click');
   },
 });

chromeos/components/scanning/resources/scan_preview.html

@@ -7,6 +7,7 @@
   #helperText {
     @apply --scanning-helper-text-font;
     color: var(--scanning-helper-text-color);
+    margin: auto;
     text-align: center;
     width: 60%;
   }
@@ -17,19 +18,30 @@
   }
 
   #scanProgress {
+    margin: auto;
     text-align: 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;
+    overflow-y: scroll;
+  }
+
+  /* TODO(jschettler): Check with UX about adding a border around each image. */
+  .scanned-image {
+    border-radius: 4px;
+    width: 100%;
+  }
+
+  /* Add top margin to all but the first scanned image. */
+  .scanned-image:nth-of-type(n+2) {
+    margin-top: 8px;
   }
 
   paper-progress {
@@ -49,4 +61,9 @@
     <span id="progressText">[[getProgressTextString_(pageNumber)]]</span>
     <paper-progress value="[[progressPercent]]"></paper-progress>
   </div>
+  <div id="scannedImages" hidden$="[[!shouldShowScannedImages_(appState)]]">
+    <template is="dom-repeat" items="[[objectUrls]]" as="url">
+      <img class="scanned-image" src="[[url]]">
+    </template>
+  </div>
 </div>

chromeos/components/scanning/resources/scan_preview.js

@@ -27,6 +27,12 @@ Polymer({
     /** @type {!AppState} */
     appState: Number,
 
+    /**
+     * The object URLs of the scanned images.
+     * @type {!Array<string>}
+     */
+    objectUrls: Array,
+
     /** @type {number} */
     pageNumber: Number,
 
@@ -69,4 +75,12 @@ Polymer({
   shouldHideProgress_() {
     return this.appState !== AppState.SCANNING;
   },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowScannedImages_() {
+    return this.appState === AppState.DONE && this.objectUrls.length > 0;
+  },
 });

chromeos/components/scanning/resources/scanning_app.html

@@ -80,7 +80,7 @@
   <div class="panel-container">
     <div class="left-panel">
       <scan-preview id="scanPreview" app-state="[[appState_]]"
-          page-number="[[pageNumber_]]"
+          object-urls="[[objectUrls_]]" page-number="[[pageNumber_]]"
           progress-percent="[[progressPercent_]]"></scan-preview>
     </div>
     <div class="right-panel">
@@ -140,7 +140,7 @@
       </template>
       <template is="dom-if" if="[[showDoneSection_]]">
         <scan-done-section page-number="[[pageNumber_]]"
-            on-change-app-state="onChangeAppState_"></scan-done-section>
+            on-done-click="onDoneClick_"></scan-done-section>
       </template>
     </div>
   </div>

chromeos/components/scanning/resources/scanning_app.js

@@ -104,7 +104,10 @@ Polymer({
       observer: 'onAppStateChange_',
     },
 
-    /** @private {!Array<string>} */
+    /**
+     * The object URLs of the scanned images.
+     * @private {!Array<string>}
+     */
     objectUrls_: {
       type: Array,
       value: () => [],
@@ -207,6 +210,7 @@ Polymer({
    * @param {number} progressPercent
    */
   onPageProgress(pageNumber, progressPercent) {
+    assert(this.appState_ === AppState.SCANNING);
     this.pageNumber_ = pageNumber;
     this.progressPercent_ = progressPercent;
   },
@@ -216,8 +220,7 @@ Polymer({
    * @param {!Array<number>} pageData
    */
   onPageComplete(pageData) {
-    // TODO(jschettler): Display the scanned images in the preview area when the
-    // scan is complete.
+    assert(this.appState_ === AppState.SCANNING);
     const blob = new Blob([Uint8Array.from(pageData)], {'type': 'image/png'});
     this.push('objectUrls_', URL.createObjectURL(blob));
   },
@@ -315,7 +318,6 @@ Polymer({
     }
 
     this.statusText_ = '';
-    this.objectUrls_ = [];
 
     const settings = {
       'sourceName': this.selectedSource,
@@ -403,6 +405,17 @@ Polymer({
    */
   onCancelComplete(success) {},
 
+  /**
+   * Revokes and removes all of the object URLs.
+   * @private
+   */
+  clearObjectUrls_() {
+    for (const url of this.objectUrls_) {
+      URL.revokeObjectURL(url);
+    }
+    this.objectUrls_ = [];
+  },
+
   /**
    * Sets the app state if the state transition is allowed.
    * @param {!AppState} newState
@@ -426,6 +439,7 @@ Polymer({
             this.appState_ === AppState.GETTING_CAPS ||
             this.appState_ === AppState.SCANNING ||
             this.appState_ === AppState.DONE);
+        this.clearObjectUrls_();
         break;
       case (AppState.SCANNING):
         assert(this.appState_ === AppState.READY);
@@ -445,12 +459,4 @@ Polymer({
     this.showCancelButton_ = this.appState_ === AppState.SCANNING;
     this.showDoneSection_ = this.appState_ === AppState.DONE;
   },
-
-  /**
-   * @param {!Event} event
-   * @private
-   */
-  onChangeAppState_(event) {
-    this.setAppState_(event.detail);
-  }
 });