A11y: Show toast when reloading extensions.

Refactored how the toolbar shows toast to avoid having two toasts.
Also noticed bug in cr-toast-manager that would try to announce an
element instead of its textContent.

Bug: 27175
Change-Id: I1128106498f159242c5e0011d5e879641cf863fa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1740652Reviewed-by: Devlin <rdevlin.cronin@chromium.org>
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#686161}

chrome/app/extensions_strings.grdp

@@ -277,6 +277,12 @@
   <message name="IDS_EXTENSIONS_ITEM_VERSION" desc="The label above an extension's version.">
     Version
   </message>
+  <message name="IDS_EXTENSIONS_ITEM_RELOADED" desc="Text displayed in a toast popup message when an extension has been reloaded.">
+    Reloaded
+  </message>
+  <message name="IDS_EXTENSIONS_ITEM_RELOADING" desc="Text displayed in a toast popup message when an extension is reloading.">
+    Reloading...
+  </message>
   <message name="IDS_EXTENSIONS_LOAD_ERROR_HEADING" desc="The title of the dialog displaying the error when loading an unpacked extension fails.">
     Failed to load extension
   </message>
@@ -382,7 +388,7 @@
   <message name="IDS_EXTENSIONS_TOOLBAR_UPDATE_NOW_TOOLTIP" desc="Text displayed over the 'update' menu that provides more context as a tooltip.">
     Update extensions now
   </message>
-  <message name="IDS_EXTENSIONS_TOOLBAR_UPDATE_DONE" desc="Text used to announce when extensions have been updated. This is for accessibility.">
+  <message name="IDS_EXTENSIONS_TOOLBAR_UPDATE_DONE" desc="Text displayed in a toast popup message when extensions have been updated.">
     Extensions updated
   </message>
   <message name="IDS_EXTENSIONS_TOOLBAR_UPDATING_TOAST" desc="Text displayed in a toast popup message while extensions are updating.">

chrome/browser/resources/extensions/BUILD.gn

@@ -165,6 +165,7 @@ js_library("item") {
     ":item_behavior",
     ":item_util",
     ":navigation_helper",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js:i18n_behavior",
@@ -370,7 +371,7 @@ js_library("sidebar") {
 js_library("toolbar") {
   deps = [
     "//third_party/polymer/v1_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer-extracted",
-    "//ui/webui/resources/cr_elements/cr_toast:cr_toast",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager",
     "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:util",

chrome/browser/resources/extensions/item.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast_manager.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">

chrome/browser/resources/extensions/item.js

@@ -117,6 +117,9 @@ cr.define('extensions', function() {
       },
     },
 
+    /** Prevents reloading the same item while it's already being reloaded. */
+    isReloading_: false,
+
     observers: [
       'observeIdVisibility_(inDevMode, showingDetails_, data.id)',
     ],
@@ -213,9 +216,30 @@ cr.define('extensions', function() {
 
     /** @private */
     onReloadTap_: function() {
-      this.delegate.reloadItem(this.data.id).catch(loadError => {
-        this.fire('load-error', loadError);
-      });
+      // Don't reload if in the middle of an update.
+      if (this.isReloading_) {
+        return;
+      }
+
+      this.isReloading_ = true;
+
+      const toastManager = cr.toastManager.getInstance();
+      // Keep the toast open indefinitely.
+      toastManager.duration = 0;
+      toastManager.show(this.i18n('itemReloading'), false);
+      this.delegate.reloadItem(this.data.id)
+          .then(
+              () => {
+                toastManager.hide();
+                toastManager.duration = 3000;
+                toastManager.show(this.i18n('itemReloaded'), false);
+                this.isReloading_ = false;
+              },
+              loadError => {
+                this.fire('load-error', loadError);
+                toastManager.hide();
+                this.isReloading_ = false;
+              });
     },
 
     /** @private */

chrome/browser/resources/extensions/manager.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_drawer/cr_drawer.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast_manager.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_view_manager/cr_view_manager.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
@@ -138,6 +139,7 @@
           install-warnings="[[installWarnings_]]">
       </extensions-install-warnings-dialog>
     </template>
+    <cr-toast-manager></cr-toast-manager>
   </template>
   <script src="manager.js"></script>
 </dom-module>

chrome/browser/resources/extensions/toolbar.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast_manager.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
@@ -91,14 +91,6 @@
       .more-actions span {
         margin-inline-end: 16px;
       }
-
-      cr-toast > div {
-        display: flex;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
     </style>
     <cr-toolbar page-name="$i18n{toolbarTitle}" search-prompt="$i18n{search}"
         clear-label="$i18n{clearSearch}" menu-label="$i18n{mainMenu}" show-menu
@@ -143,9 +135,6 @@
 </if>
       </div>
     </div>
-    <cr-toast>
-      <div>[[toastLabel_]]</div>
-    </cr-toast>
   </template>
   <script src="toolbar.js"></script>
 </dom-module>

chrome/browser/resources/extensions/toolbar.js

@@ -54,12 +54,6 @@ cr.define('extensions', function() {
       /** @private */
       showPackDialog_: Boolean,
 
-      /**
-       * Text to display in update toast
-       * @private
-       */
-      toastLabel_: String,
-
       /**
        * Prevents initiating update while update is in progress.
        * @private
@@ -73,14 +67,6 @@ cr.define('extensions', function() {
       role: 'banner',
     },
 
-    /** @override */
-    detached: function() {
-      const openToastElement = this.$$('cr-toast[open]');
-      if (openToastElement) {
-        openToastElement.hide();
-      }
-    },
-
     /**
      * @return {boolean}
      * @private
@@ -163,23 +149,20 @@ cr.define('extensions', function() {
       }
 
       this.isUpdating_ = true;
-      const toastElement = this.$$('cr-toast');
-      this.toastLabel_ = this.i18n('toolbarUpdatingToast');
 
+      const toastManager = cr.toastManager.getInstance();
       // Keep the toast open indefinitely.
-      toastElement.duration = 0;
-      toastElement.show();
-      this.delegate.updateAllExtensions()
-          .then(() => {
-            Polymer.IronA11yAnnouncer.requestAvailability();
-            const doneText = this.i18n('toolbarUpdateDone');
-            this.fire('iron-announce', {text: doneText});
-            this.toastLabel_ = doneText;
-            toastElement.show(3000);
+      toastManager.duration = 0;
+      toastManager.show(this.i18n('toolbarUpdatingToast'), false);
+      this.delegate.updateAllExtensions().then(
+          () => {
+            toastManager.hide();
+            toastManager.duration = 3000;
+            toastManager.show(this.i18n('toolbarUpdateDone'), false);
             this.isUpdating_ = false;
-          })
-          .catch(function() {
-            toastElement.hide();
+          },
+          () => {
+            toastManager.hide();
             this.isUpdating_ = false;
           });
     },

chrome/browser/ui/webui/extensions/extensions_ui.cc

@@ -178,6 +178,8 @@ content::WebUIDataSource* CreateMdExtensionsSource(Profile* profile,
     {"itemSourceUnpacked", IDS_EXTENSIONS_ITEM_SOURCE_UNPACKED},
     {"itemSourceWebstore", IDS_EXTENSIONS_ITEM_SOURCE_WEBSTORE},
     {"itemVersion", IDS_EXTENSIONS_ITEM_VERSION},
+    {"itemReloaded", IDS_EXTENSIONS_ITEM_RELOADED},
+    {"itemReloading", IDS_EXTENSIONS_ITEM_RELOADING},
     // TODO(dpapad): Replace this with an Extensions specific string.
     {"itemSize", IDS_DIRECTORY_LISTING_SIZE},
     {"itemAllowOnFileUrls", IDS_EXTENSIONS_ALLOW_FILE_ACCESS},

chrome/test/data/webui/extensions/item_test.js

@@ -99,6 +99,8 @@ cr.define('extension_item_tests', function() {
       item.set('data', extensionData);
       item.set('delegate', mockDelegate);
       document.body.appendChild(item);
+      const toastManager = document.createElement('cr-toast-manager');
+      document.body.appendChild(toastManager);
     });
 
     test(assert(TestNames.ElementVisibilityNormalState), function() {

chrome/test/data/webui/extensions/toolbar_test.js

@@ -92,11 +92,12 @@ cr.define('extension_toolbar_tests', function() {
             return mockDelegate.whenCalled('loadUnpacked');
           })
           .then(function() {
-            assertFalse(toolbar.$$('cr-toast').open);
+            const toastManager = cr.toastManager.getInstance();
+            assertFalse(toastManager.isToastOpen);
             toolbar.$.updateNow.click();
             // Simulate user rapidly clicking update button multiple times.
             toolbar.$.updateNow.click();
-            assertTrue(toolbar.$$('cr-toast').open);
+            assertTrue(toastManager.isToastOpen);
             return mockDelegate.whenCalled('updateAllExtensions');
           })
           .then(function() {

ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js

@@ -95,7 +95,7 @@ Polymer({
     this.showUndo_ = showUndo;
     Polymer.IronA11yAnnouncer.requestAvailability();
     this.fire('iron-announce', {
-      text: this.$.content,
+      text: this.$.content.textContent,
     });
     if (showUndo && this.undoDescription) {
       this.fire('iron-announce', {