scanning: Add cancel button

Clicking the cancel button tells the scanner to cancel the currently
active scan job and immediately switches the UI back to ready state.

In a future update, a "Canceling Scan" UI will be shown when the cancel
button is clicked.

http://screen/73tpTmXpt8ALqR6

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

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

@@ -91,6 +91,7 @@ class FakeScanService {
     this.resolverMap_.set('getScanners', new PromiseResolver());
     this.resolverMap_.set('getScannerCapabilities', new PromiseResolver());
     this.resolverMap_.set('startScan', new PromiseResolver());
+    this.resolverMap_.set('cancelScan', new PromiseResolver());
   }
 
   /**
@@ -313,6 +314,8 @@ export function scanningAppTest() {
     let resolutionSelect;
     /** @type {!CrButtonElement} */
     let scanButton;
+    /** @type {!CrButtonElement} */
+    let cancelButton;
     /** @type {!HTMLElement} */
     let statusText;
     /** @type {!HTMLElement} */
@@ -334,6 +337,8 @@ export function scanningAppTest() {
           resolutionSelect = scanningApp.$$('#resolutionSelect').$$('select');
           scanButton =
               /** @type {!CrButtonElement} */ (scanningApp.$$('#scanButton'));
+          cancelButton =
+              /** @type {!CrButtonElement} */ (scanningApp.$$('#cancelButton'));
           statusText =
               /** @type {!HTMLElement} */ (scanningApp.$$('#statusText'));
           helperText = scanningApp.$$('#scanPreview').$$('#helperText');
@@ -369,6 +374,8 @@ export function scanningAppTest() {
           assertFalse(pageSizeSelect.disabled);
           assertFalse(resolutionSelect.disabled);
           assertFalse(scanButton.disabled);
+          assertTrue(isVisible(scanButton));
+          assertFalse(isVisible(cancelButton));
           assertEquals('', statusText.textContent.trim());
           assertTrue(isVisible(helperText));
           assertFalse(isVisible(scanProgress));
@@ -391,6 +398,8 @@ export function scanningAppTest() {
           assertTrue(pageSizeSelect.disabled);
           assertTrue(resolutionSelect.disabled);
           assertTrue(scanButton.disabled);
+          assertFalse(isVisible(scanButton));
+          assertTrue(isVisible(cancelButton));
           assertFalse(isVisible(helperText));
           assertTrue(isVisible(scanProgress));
           assertFalse(isVisible(
@@ -449,6 +458,8 @@ export function scanningAppTest() {
           assertFalse(pageSizeSelect.disabled);
           assertFalse(resolutionSelect.disabled);
           assertFalse(scanButton.disabled);
+          assertTrue(isVisible(scanButton));
+          assertFalse(isVisible(cancelButton));
           assertTrue(isVisible(helperText));
           assertFalse(isVisible(scanProgress));
           assertFalse(isVisible(
@@ -456,6 +467,65 @@ export function scanningAppTest() {
         });
   });
 
+  test('CancelScan', () => {
+    const expectedScanners = [
+      createScanner(firstScannerId, firstScannerName),
+      createScanner(secondScannerId, secondScannerName)
+    ];
+
+    let capabilities = new Map();
+    capabilities.set(firstScannerId, firstCapabilities);
+    capabilities.set(secondScannerId, secondCapabilities);
+
+    /** @type {!CrButtonElement} */
+    let scanButton;
+    /** @type {!CrButtonElement} */
+    let cancelButton;
+
+    return initializeScanningApp(expectedScanners, capabilities)
+        .then(() => {
+          scanButton =
+              /** @type {!CrButtonElement} */ (scanningApp.$$('#scanButton'));
+          cancelButton =
+              /** @type {!CrButtonElement} */ (scanningApp.$$('#cancelButton'));
+          return fakeScanService_.whenCalled('getScannerCapabilities');
+        })
+        .then(() => {
+          // Before the scan button is clicked, the scan button should be
+          // visible and enabled, and the cancel button shouldn't be visible.
+          assertFalse(scanButton.disabled);
+          assertTrue(isVisible(scanButton));
+          assertFalse(isVisible(cancelButton));
+
+          // Click the Scan button and wait till the scan is started.
+          scanButton.click();
+          return fakeScanService_.whenCalled('startScan');
+        })
+        .then(() => {
+          // After the scan button is clicked and the scan has started, the scan
+          // button should be disabled and not visible, and the cancel button
+          // should be visible.
+          assertTrue(scanButton.disabled);
+          assertFalse(isVisible(scanButton));
+          assertTrue(isVisible(cancelButton));
+
+          // Simulate a progress update and verify the progress bar and text are
+          // updated correctly.
+          return fakeScanService_.simulateProgress(1, 17);
+        })
+        .then(() => {
+          // Click the cancel button to cancel the scan.
+          cancelButton.click();
+          return fakeScanService_.cancelScan();
+        })
+        .then(() => {
+          // After canceling is complete, the scan button should be visible and
+          // enabled, and the cancel button shouldn't be visible.
+          assertTrue(isVisible(scanButton));
+          assertFalse(isVisible(cancelButton));
+        });
+  });
+
   test('PanelContainerContent', () => {
     const scanners = [];
     const capabilities = new Map();

chromeos/chromeos_strings.grd

@@ -570,6 +570,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_DONE_BUTTON_TEXT" desc="The text displayed for the button the user clicks to return to the intial Scanning App page after a scan job is completed.">
         Done
       </message>
+      <message name="IDS_SCANNING_APP_CANCEL_BUTTON_TEXT" desc="The text displayed for the button to cancel an ongoing scan job.">
+        Cancel
+      </message>
 
       <!-- Diagnostics App -->
       <!-- TODO(michaelcheco): Update with finalized copies of the strings -->

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_CANCEL_BUTTON_TEXT.png.sha1

+26cd0a3d5ec5481f7cdd51682119a76dd5402c55
\ No newline at end of file

chromeos/components/scanning/resources/scanning_app.html

@@ -143,9 +143,14 @@
         </iron-collapse>
         <div class="scan-button-container">
           <cr-button id="scanButton" class="action-button" on-click="onScanClick_"
-              disabled$="[[areSettingsDisabled_(appState_)]]">
+              disabled$="[[areSettingsDisabled_(appState_)]]"
+              hidden$="[[shouldShowCancelButton_(appState_)]]">
             [[i18n('scanButtonText')]]
           </cr-button>
+          <cr-button id="cancelButton" on-click="onCancelClick_"
+              hidden$="[[!shouldShowCancelButton_(appState_)]]">
+            [[i18n('cancelButtonText')]]
+          </cr-button>
         </div>
         <p id="statusText">[[statusText_]]</p>
       </template>

chromeos/components/scanning/resources/scanning_app.js

@@ -386,12 +386,28 @@ Polymer({
     return this.i18n(fileSavedText);
   },
 
+  /** @private */
+  onCancelClick_() {
+    assert(this.appState_ === AppState.SCANNING);
+
+    this.scanService_.cancelScan();
+    this.setAppState_(AppState.READY);
+  },
+
   /**
    * Overrides chromeos.scanning.mojom.ScanJobObserverInterface.
    * @param {boolean} success
    */
   onCancelComplete(success) {},
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowCancelButton_() {
+    return this.appState_ === AppState.SCANNING;
+  },
+
   /**
    * Sets the app state if the state transition is allowed.
    * @param {!AppState} newState

chromeos/components/scanning/scanning_ui.cc

@@ -55,6 +55,7 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"a4OptionText", IDS_SCANNING_APP_A4_OPTION_TEXT},
       {"appTitle", IDS_SCANNING_APP_TITLE},
       {"blackAndWhiteOptionText", IDS_SCANNING_APP_BLACK_AND_WHITE_OPTION_TEXT},
+      {"cancelButtonText", IDS_SCANNING_APP_CANCEL_BUTTON_TEXT},
       {"colorModeDropdownLabel", IDS_SCANNING_APP_COLOR_MODE_DROPDOWN_LABEL},
       {"colorOptionText", IDS_SCANNING_APP_COLOR_OPTION_TEXT},
       {"defaultSourceOptionText", IDS_SCANNING_APP_DEFAULT_SOURCE_OPTION_TEXT},