MD Extensions: ensure toast is displayed above other elements and stays open while updating

Bug: 819996
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Iab8fa2d66ab07cc0f8c0c9c4509f40563dfe0dd6
Reviewed-on: https://chromium-review.googlesource.com/956242
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543897}

chrome/browser/resources/md_extensions/compiled_resources2.gyp

@@ -252,6 +252,7 @@
     {
       'target_name': 'toolbar',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/cr_toast/compiled_resources2.gyp:cr_toast',
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-a11y-announcer/compiled_resources2.gyp:iron-a11y-announcer-extracted',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',

chrome/browser/resources/md_extensions/toolbar.html

@@ -131,7 +131,7 @@
             title="$i18n{toolbarUpdateNowTooltip}">
           $i18n{toolbarUpdateNow}
         </paper-button>
-        <cr-toast duration="3000">
+        <cr-toast>
           <div>[[toastLabel_]]</div>
         </cr-toast>
 <if expr="chromeos">

chrome/browser/resources/md_extensions/toolbar.js

@@ -73,6 +73,13 @@ cr.define('extensions', function() {
       role: 'banner',
     },
 
+    /** @override */
+    detached: function() {
+      const openToastElement = this.$$('cr-toast[open]');
+      if (openToastElement)
+        openToastElement.hide();
+    },
+
     /**
      * @return {boolean}
      * @private
@@ -149,6 +156,9 @@ cr.define('extensions', function() {
       this.isUpdating_ = true;
       const toastElement = this.$$('cr-toast');
       this.toastLabel_ = this.i18n('toolbarUpdatingToast');
+
+      // Keep the toast open indefinitely.
+      toastElement.duration = 0;
       toastElement.show();
       this.delegate.updateAllExtensions()
           .then(() => {
@@ -156,10 +166,11 @@ cr.define('extensions', function() {
             const doneText = this.i18n('toolbarUpdateDone');
             this.fire('iron-announce', {text: doneText});
             this.toastLabel_ = doneText;
-            toastElement.show();
+            toastElement.show(3000);
             this.isUpdating_ = false;
           })
           .catch(function() {
+            toastElement.hide();
             this.isUpdating_ = false;
           });
     },

chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html

@@ -50,10 +50,6 @@
         padding: 8px;
       }
 
-      #undoToast {
-        z-index: 1;
-      }
-
       #exportImportMenuButtonContainer {
         -webkit-margin-end: 0;
       }

ui/webui/resources/cr_elements/cr_toast/cr_toast.html

@@ -22,6 +22,7 @@
         transition: opacity 300ms, transform 300ms, visibility 300ms;
         visibility: hidden;
         white-space: nowrap;
+        z-index: 1;
       }
 
       :host([open]) {