scanning: Show canceling progress bar

Add a new state CANCELING for showing a continuous progress bar when
waiting for a cancel request to complete.

http://screen/BJsFQbdZFDZscdV

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

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

@@ -23,6 +23,8 @@ export function scanPreviewTest() {
   let scanProgress;
   /** @type {!HTMLElement} */
   let scannedImages;
+  /** @type {!HTMLElement} */
+  let cancelingProgress;
 
   setup(() => {
     scanPreview = /** @type {!ScanPreviewElement} */ (
@@ -38,6 +40,8 @@ export function scanPreviewTest() {
         /** @type {!HTMLElement} */ (scanPreview.$$('#scanProgress'));
     scannedImages =
         /** @type {!HTMLElement} */ (scanPreview.$$('#scannedImages'));
+    cancelingProgress =
+        /** @type {!HTMLElement} */ (scanPreview.$$('#cancelingProgress'));
   });
 
   teardown(() => {
@@ -52,14 +56,16 @@ export function scanPreviewTest() {
    * @param {boolean} isHelperTextVisible
    * @param {boolean} isScanProgressVisible
    * @param {boolean} isScannedImagesVisible
+   * @param {boolean} isCancelingProgressVisible
    */
   function assertVisible(
       isHelpOrProgressVisible, isHelperTextVisible, isScanProgressVisible,
-      isScannedImagesVisible) {
+      isScannedImagesVisible, isCancelingProgressVisible) {
     assertEquals(isHelpOrProgressVisible, isVisible(helpOrProgress));
     assertEquals(isHelperTextVisible, isVisible(helperText));
     assertEquals(isScanProgressVisible, isVisible(scanProgress));
     assertEquals(isScannedImagesVisible, isVisible(scannedImages));
+    assertEquals(isCancelingProgressVisible, isVisible(cancelingProgress));
   }
 
   test('initializeScanPreview', () => {
@@ -86,37 +92,50 @@ export function scanPreviewTest() {
     flush();
     assertVisible(
         /*isHelpOrProgressVisible*/ true, /*isHelperTextVisible*/ true,
-        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ false);
+        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ false,
+        /*isCancelingProgressVisible*/ false);
 
     scanPreview.appState = AppState.GOT_SCANNERS;
     flush();
     assertVisible(
         /*isHelpOrProgressVisible*/ true, /*isHelperTextVisible*/ true,
-        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ false);
+        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ false,
+        /*isCancelingProgressVisible*/ false);
 
     scanPreview.appState = AppState.GETTING_CAPS;
     flush();
     assertVisible(
         /*isHelpOrProgressVisible*/ true, /*isHelperTextVisible*/ true,
-        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ false);
+        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ false,
+        /*isCancelingProgressVisible*/ false);
 
     scanPreview.appState = AppState.READY;
     flush();
     assertVisible(
         /*isHelpOrProgressVisible*/ true, /*isHelperTextVisible*/ true,
-        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ false);
+        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ false,
+        /*isCancelingProgressVisible*/ false);
 
     scanPreview.appState = AppState.SCANNING;
     flush();
     assertVisible(
         /*isHelpOrProgressVisible*/ true, /*isHelperTextVisible*/ false,
-        /*isScanProgressVisible*/ true, /*isScannedImagesVisible*/ false);
+        /*isScanProgressVisible*/ true, /*isScannedImagesVisible*/ false,
+        /*isCancelingProgressVisible*/ false);
+
+    scanPreview.appState = AppState.CANCELING;
+    flush();
+    assertVisible(
+        /*isHelpOrProgressVisible*/ true, /*isHelperTextVisible*/ false,
+        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ false,
+        /*isCancelingProgressVisible*/ true);
 
     scanPreview.objectUrls = ['image'];
     scanPreview.appState = AppState.DONE;
     flush();
     assertVisible(
         /*isHelpOrProgressVisible*/ false, /*isHelperTextVisible*/ false,
-        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ true);
+        /*isScanProgressVisible*/ false, /*isScannedImagesVisible*/ true,
+        /*isCancelingProgressVisible*/ false);
   });
 }

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

@@ -553,6 +553,8 @@ export function scanningAppTest() {
           return fakeScanService_.whenCalled('cancelScan');
         })
         .then(() => {
+          // Cancel button should be disabled while canceling is in progress.
+          assertTrue(cancelButton.disabled);
           // Simulate cancel completing successfully.
           return fakeScanService_.simulateCancelComplete(true);
         })
@@ -610,6 +612,8 @@ export function scanningAppTest() {
           return fakeScanService_.whenCalled('cancelScan');
         })
         .then(() => {
+          // Cancel button should be disabled while canceling is in progress.
+          assertTrue(cancelButton.disabled);
           // Simulate cancel failing.
           return fakeScanService_.simulateCancelComplete(false);
         })

chromeos/chromeos_strings.grd

@@ -588,6 +588,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_SCAN_CANCELED_TOAST_TEXT" desc="The message displayed when a scan job is successfully canceled.">
         Scanning has been canceled
       </message>
+      <message name="IDS_SCANNING_APP_CANCELING_SCANNING_TEXT" desc="The text displayed in the scan preview to indicate a scan job is being canceled.">
+        Canceling scanning
+      </message>
 
       <!-- Diagnostics App -->
       <!-- TODO(michaelcheco): Update with finalized copies of the strings -->

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_CANCELING_SCANNING_TEXT.png.sha1

+209056995bbc15942d75ea539ef44749d1d14cd1
\ No newline at end of file

chromeos/components/scanning/resources/scan_preview.html

@@ -18,12 +18,14 @@
     height: calc(1.2941 * var(--left-panel-width));
   }
 
-  #progressText {
+  #progressText,
+  #cancelingText {
     @apply --scanning-progress-text-font;
     color: var(--scanning-progress-text-color);
   }
 
-  #scanProgress {
+  #scanProgress,
+  #cancelingProgress {
     margin: auto;
     text-align: center;
     width: 60%;
@@ -57,13 +59,21 @@
   }
 
   paper-progress {
-    --paper-progress-active-color: var(--google-blue-600);
-    --paper-progress-container-color: var(--google-blue-200);
     border-radius: 4px;
     height: 4px;
     margin-top: 12px;
     width: 256px;
   }
+
+  #scanProgressBar {
+    --paper-progress-active-color: var(--google-blue-600);
+    --paper-progress-container-color: var(--google-blue-200);
+  }
+
+  #cancelingProgressBar {
+    --paper-progress-active-color: var(--google-grey-refresh-500);
+    --paper-progress-container-color: var(--google-grey-200);
+  }
 </style>
 <div class="preview">
   <div id="helpOrProgress" class="preview-item"
@@ -73,7 +83,12 @@
     </div>
     <div id="scanProgress" hidden$="[[!showScanProgress_]]">
       <span id="progressText">[[getProgressTextString_(pageNumber)]]</span>
-      <paper-progress value="[[progressPercent]]"></paper-progress>
+      <paper-progress id="scanProgressBar" value="[[progressPercent]]">
+      </paper-progress>
+    </div>
+    <div id="cancelingProgress" hidden$="[[!showCancelingProgress_]]">
+      <span id="cancelingText">[[i18n('cancelingScanningText')]]</span>
+      <paper-progress id="cancelingProgressBar" indeterminate></paper-progress>
     </div>
   </div>
   <div id="scannedImages" hidden$="[[!showScannedImages_]]">

chromeos/components/scanning/resources/scan_preview.js

@@ -59,6 +59,12 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /** @private {boolean} */
+    showCancelingProgress_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /**
@@ -84,8 +90,10 @@ Polymer({
   onAppStateChange_() {
     this.showScannedImages_ =
         this.appState === AppState.DONE && this.objectUrls.length > 0;
+    this.showScanProgress_ =
+        this.appState === AppState.SCANNING || this.appState === AppState.DONE;
+    this.showCancelingProgress_ = this.appState === AppState.CANCELING;
     this.showHelperText_ =
-        this.appState !== AppState.SCANNING && this.appState !== AppState.DONE;
-    this.showScanProgress_ = !this.showHelperText_;
+        !this.showScanProgress_ && !this.showCancelingProgress_;
   },
 });

chromeos/components/scanning/resources/scanning_app.html

@@ -164,7 +164,8 @@
             [[i18n('scanButtonText')]]
           </cr-button>
           <cr-button id="cancelButton" on-click="onCancelClick_"
-              hidden$="[[!showCancelButton_]]">
+              hidden$="[[!showCancelButton_]]"
+              disabled$="[[cancelButtonDisabled_]]">
             [[i18n('cancelButtonText')]]
           </cr-button>
         </div>

chromeos/components/scanning/resources/scanning_app.js

@@ -174,6 +174,12 @@ Polymer({
       value: false,
     },
 
+    /** @private {boolean} */
+    cancelButtonDisabled_: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * The file path of the last scanned page of a successful scan job. Used to
      * open the Files app with the correct file highlighted.
@@ -240,7 +246,9 @@ Polymer({
    * @param {number} progressPercent
    */
   onPageProgress(pageNumber, progressPercent) {
-    assert(this.appState_ === AppState.SCANNING);
+    assert(
+        this.appState_ === AppState.SCANNING ||
+        this.appState_ === AppState.CANCELING);
     this.pageNumber_ = pageNumber;
     this.progressPercent_ = progressPercent;
   },
@@ -250,7 +258,9 @@ Polymer({
    * @param {!Array<number>} pageData
    */
   onPageComplete(pageData) {
-    assert(this.appState_ === AppState.SCANNING);
+    assert(
+        this.appState_ === AppState.SCANNING ||
+        this.appState_ === AppState.CANCELING);
     const blob = new Blob([Uint8Array.from(pageData)], {'type': 'image/png'});
     this.push('objectUrls_', URL.createObjectURL(blob));
   },
@@ -278,6 +288,7 @@ Polymer({
   onCancelComplete(success) {
     // If the cancel request fails, continue showing the scan progress page.
     if (!success) {
+      this.setAppState_(AppState.SCANNING);
       this.showToast_('cancelFailedToastText');
       return;
     }
@@ -444,6 +455,7 @@ Polymer({
   /** @private */
   onCancelClick_() {
     assert(this.appState_ === AppState.SCANNING);
+    this.setAppState_(AppState.CANCELING);
     this.scanService_.cancelScan();
   },
 
@@ -480,13 +492,21 @@ Polymer({
         assert(
             this.appState_ === AppState.GETTING_CAPS ||
             this.appState_ === AppState.SCANNING ||
-            this.appState_ === AppState.DONE);
+            this.appState_ === AppState.DONE ||
+            this.appState_ === AppState.CANCELING);
         this.clearObjectUrls_();
         break;
       case (AppState.SCANNING):
-        assert(this.appState_ === AppState.READY);
+        assert(
+            this.appState_ === AppState.READY ||
+            this.appState_ === AppState.CANCELING);
         break;
       case (AppState.DONE):
+        assert(
+            this.appState_ === AppState.SCANNING ||
+            this.appState_ === AppState.CANCELING);
+        break;
+      case (AppState.CANCELING):
         assert(this.appState_ === AppState.SCANNING);
         break;
     }
@@ -498,7 +518,9 @@ Polymer({
   onAppStateChange_() {
     this.scannersLoaded_ = this.appState_ !== AppState.GETTING_SCANNERS;
     this.settingsDisabled_ = this.appState_ !== AppState.READY;
-    this.showCancelButton_ = this.appState_ === AppState.SCANNING;
+    this.showCancelButton_ = this.appState_ === AppState.SCANNING ||
+        this.appState_ === AppState.CANCELING;
+    this.cancelButtonDisabled_ = this.appState_ === AppState.CANCELING;
     this.showDoneSection_ = this.appState_ === AppState.DONE;
   },
 

chromeos/components/scanning/resources/scanning_app_types.js

@@ -13,6 +13,7 @@ export const AppState = {
   READY: 3,
   SCANNING: 4,
   DONE: 5,
+  CANCELING: 6,
 };
 
 /**

chromeos/components/scanning/scanning_ui.cc

@@ -57,6 +57,7 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"blackAndWhiteOptionText", IDS_SCANNING_APP_BLACK_AND_WHITE_OPTION_TEXT},
       {"cancelButtonText", IDS_SCANNING_APP_CANCEL_BUTTON_TEXT},
       {"cancelFailedToastText", IDS_SCANNING_APP_CANCEL_FAILED_TOAST_TEXT},
+      {"cancelingScanningText", IDS_SCANNING_APP_CANCELING_SCANNING_TEXT},
       {"colorModeDropdownLabel", IDS_SCANNING_APP_COLOR_MODE_DROPDOWN_LABEL},
       {"colorOptionText", IDS_SCANNING_APP_COLOR_OPTION_TEXT},
       {"defaultSourceOptionText", IDS_SCANNING_APP_DEFAULT_SOURCE_OPTION_TEXT},