scanning: Show cancel scan succeeded toast

Show toast when scan is canceled.

http://screen/A6FWUDiuK9pdp8T

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

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

@@ -561,6 +561,14 @@ export function scanningAppTest() {
           // enabled, and the cancel button shouldn't be visible.
           assertTrue(isVisible(scanButton));
           assertFalse(isVisible(cancelButton));
+          assertTrue(scanningApp.$$('#toast').open);
+          assertFalse(isVisible(
+              /** @type {!HTMLElement} */ (scanningApp.$$('#infoIcon'))));
+          assertFalse(isVisible(
+              /** @type {!HTMLElement} */ (scanningApp.$$('#getHelpLink'))));
+          assertEquals(
+              scanningApp.i18n('scanCanceledToastText'),
+              scanningApp.$$('#toastText').textContent.trim());
         });
   });
 
@@ -608,6 +616,10 @@ export function scanningAppTest() {
         .then(() => {
           // After canceling fails, the error toast should pop up.
           assertTrue(scanningApp.$$('#toast').open);
+          assertTrue(isVisible(
+              /** @type {!HTMLElement} */ (scanningApp.$$('#infoIcon'))));
+          assertTrue(isVisible(
+              /** @type {!HTMLElement} */ (scanningApp.$$('#getHelpLink'))));
           assertEquals(
               scanningApp.i18n('cancelFailedToastText'),
               scanningApp.$$('#toastText').textContent.trim());
@@ -649,6 +661,10 @@ export function scanningAppTest() {
         })
         .then(() => {
           assertTrue(scanningApp.$$('#toast').open);
+          assertTrue(isVisible(
+              /** @type {!HTMLElement} */ (scanningApp.$$('#infoIcon'))));
+          assertTrue(isVisible(
+              /** @type {!HTMLElement} */ (scanningApp.$$('#getHelpLink'))));
           assertEquals(
               scanningApp.i18n('startScanFailedToast'),
               scanningApp.$$('#toastText').textContent.trim());

chromeos/chromeos_strings.grd

@@ -585,6 +585,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_CANCEL_FAILED_TOAST_TEXT" desc="The error message displayed when a user attempts to cancel a scan job but the cancel request fails.">
         Couldn't cancel scanning
       </message>
+      <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>
 
       <!-- Diagnostics App -->
       <!-- TODO(michaelcheco): Update with finalized copies of the strings -->

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_SCAN_CANCELED_TOAST_TEXT.png.sha1

+90b295e3dd019d9bab0ddee82c11c290284d157f
\ No newline at end of file

chromeos/components/scanning/resources/scanning_app.html

@@ -180,11 +180,13 @@
   </div>
   <cr-toast id="toast" duration="5000">
     <div id="toastDiv">
-      <iron-icon id="infoIcon" icon="cr:info-outline"></iron-icon>
+      <iron-icon id="infoIcon" icon="cr:info-outline"
+          hidden="[[!showToastInfoIcon_]]"></iron-icon>
       <span id="toastText">[[i18n(toastMessageKey_)]]</span>
       <!-- TODO(gavinwill): Add href to the help link when available -->
       <div id="getHelpDiv">
-        <a id="getHelpLink" href="#">[[i18n('getHelpLinkText')]]</a>
+        <a id="getHelpLink" href="#" hidden="[[!showToastHelpLink_]]">
+          [[i18n('getHelpLinkText')]]</a>
       </div>
     </div>
   </cr-toast>

chromeos/components/scanning/resources/scanning_app.js

@@ -185,7 +185,22 @@ Polymer({
      * The key to retrieve the appropriate string to display in the toast.
      * @private {string}
      */
-    toastMessageKey_: String,
+    toastMessageKey_: {
+      type: String,
+      observer: 'onToastMessageKeyChange_',
+    },
+
+    /** @private {boolean} */
+    showToastInfoIcon_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** @private {boolean} */
+    showToastHelpLink_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /** @override */
@@ -267,6 +282,7 @@ Polymer({
       return;
     }
 
+    this.showToast_('scanCanceledToastText');
     this.setAppState_(AppState.READY);
   },
 
@@ -494,4 +510,10 @@ Polymer({
     this.toastMessageKey_ = toastMessageKey;
     this.$.toast.show();
   },
+
+  /** @private */
+  onToastMessageKeyChange_() {
+    this.showToastInfoIcon_ = this.toastMessageKey_ !== 'scanCanceledToastText';
+    this.showToastHelpLink_ = this.toastMessageKey_ !== 'scanCanceledToastText';
+  },
 });

chromeos/components/scanning/scanning_ui.cc

@@ -84,6 +84,7 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"resolutionDropdownLabel", IDS_SCANNING_APP_RESOLUTION_DROPDOWN_LABEL},
       {"resolutionOptionText", IDS_SCANNING_APP_RESOLUTION_OPTION_TEXT},
       {"scanButtonText", IDS_SCANNING_APP_SCAN_BUTTON_TEXT},
+      {"scanCanceledToastText", IDS_SCANNING_APP_SCAN_CANCELED_TOAST_TEXT},
       {"scanPreviewHelperText", IDS_SCANNING_APP_SCAN_PREVIEW_HELPER_TEXT},
       {"scanPreviewProgressText", IDS_SCANNING_APP_SCAN_PREVIEW_PROGRESS_TEXT},
       {"scanToDropdownLabel", IDS_SCANNING_APP_SCAN_TO_DROPDOWN_LABEL},