Web UI Polymer 3: Port cr-toast-manager

- Modify polymer.py to handle cr.define(), assuming only 1 cr.define
per file, and that nothing after #cr_define_end is needed (similar to
js_modulizer.py).
- Move Polymer() call inside cr.define() in cr_toast_manager, and add
a setInstance() method.
- Autogenerate Polymer 3 versions of cr-toast-manager and tests
- Add cr-toast-manager to the Polymer 3 demo page

Bug: 965770
Change-Id: I29079b0a07986cba84deaaaaf53a39b788fdf1b4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1802661
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697005}

chrome/browser/resources/print_preview/polymer3/demo.js

@@ -26,6 +26,7 @@ import 'chrome://resources/cr_elements/policy/cr_tooltip_icon.m.js';
 import 'chrome://resources/js/action_link.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
+import * as crToastManager from 'chrome://resources/cr_elements/cr_toast/cr_toast_manager.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 class HelloPolymer3Element extends PolymerElement {
@@ -148,6 +149,13 @@ class HelloPolymer3Element extends PolymerElement {
       </div>
 
       <a is="action-link">I am an action link</a>
+
+      <div>
+        <cr-toast-manager></cr-toast-manager>
+        <cr-button on-click="showToastWithManager_">
+          Show toast for 2s
+        </cr-button>
+      </div>
     `;
   }
 
@@ -176,6 +184,12 @@ class HelloPolymer3Element extends PolymerElement {
         type: Array,
         value: () => (['A', 'B']),
       },
+
+      /** @private */
+      isFirst_: {
+        type: Boolean,
+        value: true,
+      },
     };
   }
 
@@ -222,6 +236,15 @@ class HelloPolymer3Element extends PolymerElement {
   showActionMenu_(e) {
     this.shadowRoot.querySelector('cr-action-menu').showAt(e.target);
   }
+
+  /** @private */
+  showToastWithManager_() {
+    const toastManager = crToastManager.getInstance();
+    toastManager.duration = 2000;
+    toastManager.show(
+        'I am toasted ' + (this.isFirst_ ? 'first' : 'second'), false);
+    this.isFirst_ = !this.isFirst_;
+  }
 }  // class HelloPolymer3
 
 customElements.define('hello-polymer3', HelloPolymer3Element);

chrome/test/data/webui/BUILD.gn

@@ -176,6 +176,7 @@ js2gtest("browser_tests_js_webui") {
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_radio_group_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_search_field_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toast_test.m.js",
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toast_manager_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toolbar_search_field_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_view_manager_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/mock_timer.m.js",

chrome/test/data/webui/cr_elements/BUILD.gn

@@ -25,12 +25,14 @@ js_modulizer("modulize") {
     "cr_toolbar_search_field_tests.js",
     "cr_tabs_test.js",
     "cr_toast_test.js",
+    "cr_toast_manager_test.js",
     "cr_toggle_test.js",
     "cr_view_manager_test.js",
   ]
   namespace_rewrites = [
     "cr.isMac|isMac",
     "cr.isWindows|isWindows",
+    "cr.toastManager.getInstance|getInstance",
     "MockInteractions.blur|blur",
     "MockInteractions.downAndUp|downAndUp",
     "MockInteractions.keyDownOn|keyDownOn",

chrome/test/data/webui/cr_elements/cr_elements_v3_browsertest.js

@@ -199,6 +199,18 @@ TEST_F('CrElementsToolbarSearchFieldV3Test', 'All', function() {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var CrElementsToastManagerV3Test = class extends CrElementsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_toast_manager_test.m.js';
+  }
+};
+
+TEST_F('CrElementsToastManagerV3Test', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var CrElementsViewManagerV3Test = class extends CrElementsV3BrowserTest {
   /** @override */

chrome/test/data/webui/cr_elements/cr_toast_manager_test.js

@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {getInstance} from 'chrome://resources/cr_elements/cr_toast/cr_toast_manager.m.js';
+// #import {eventToPromise} from 'chrome://test/test_util.m.js';
+// clang-format on
+
 suite('cr-toast-manager', () => {
   let toastManager;
 
@@ -26,9 +31,13 @@ suite('cr-toast-manager', () => {
     assertFalse(toastManager.$.button.hidden);
 
     toastManager.hide();
+    const whenDone =
+        new Promise(resolve => window.requestAnimationFrame(resolve));
+    return whenDone.then(() => {
       assertEquals(
           'hidden', window.getComputedStyle(toastManager.$.button).visibility);
     });
+  });
 
   test('undo-click fired when undo button is clicked', async () => {
     toastManager.show('test', true);

ui/webui/resources/cr_elements/BUILD.gn

@@ -161,6 +161,7 @@ group("polymer3_elements") {
     "cr_search_field:cr_search_field_module",
     "cr_search_field:modulize",
     "cr_tabs:cr_tabs_module",
+    "cr_toast:cr_toast_manager_module",
     "cr_toast:cr_toast_module",
     "cr_toggle:cr_toggle_module",
     "cr_toolbar:cr_toolbar_module",

ui/webui/resources/cr_elements/cr_toast/BUILD.gn

@@ -30,10 +30,22 @@ polymer_modulizer("cr_toast") {
   html_type = "dom-module"
 }
 
+polymer_modulizer("cr_toast_manager") {
+  js_file = "cr_toast_manager.js"
+  html_file = "cr_toast_manager.html"
+  html_type = "dom-module"
+  auto_imports = [ "ui/webui/resources/html/assert.html|assert" ]
+  namespace_rewrites = [
+    "cr.toastManager.setInstance|setInstance",
+    "cr.toastManager.CrToastManagerElement|CrToastManagerElement",
+  ]
+}
+
 js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
     ":cr_toast.m",
+    ":cr_toast_manager.m",
   ]
 }
 
@@ -46,3 +58,16 @@ js_library("cr_toast.m") {
   ]
   extra_deps = [ ":cr_toast_module" ]
 }
+
+js_library("cr_toast_manager.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.m.js",
+  ]
+  deps = [
+    ":cr_toast.m",
+    "//third_party/polymer/v3_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+  ]
+  extra_deps = [ ":cr_toast_manager_module" ]
+}

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

@@ -4,24 +4,26 @@
 
 cr.define('cr.toastManager', () => {
   /* eslint-disable */
-  /** @private {?CrToastManagerElement} */
+  /** @private {?cr.toastManager.CrToastManagerElement} */
   let toastManagerInstance = null;
   /* eslint-enable */
 
-  /** @return {!CrToastManagerElement} */
-  function getInstance() {
-    return assert(cr.toastManager.toastManagerInstance);
+  /** @return {!cr.toastManager.CrToastManagerElement} */
+  /* #export */ function getInstance() {
+    return assert(toastManagerInstance);
   }
 
-  return {
-    getInstance: getInstance,
-  };
-});
+  /** @param {?cr.toastManager.CrToastManagerElement} instance */
+  /* #export */ function setInstance(instance) {
+    assert(!instance || !toastManagerInstance);
+    toastManagerInstance = instance;
+  }
 
-/**
+  /**
    * @fileoverview Element which shows toasts with optional undo button.
    */
-Polymer({
+  // eslint-disable-next-line
+  /* #export */ let CrToastManagerElement = Polymer({
     is: 'cr-toast-manager',
 
     properties: {
@@ -50,13 +52,12 @@ Polymer({
 
     /** @override */
     attached: function() {
-    assert(!cr.toastManager.toastManagerInstance);
-    cr.toastManager.toastManagerInstance = this;
+      cr.toastManager.setInstance(this);
     },
 
     /** @override */
     detached: function() {
-    cr.toastManager.toastManagerInstance = null;
+      cr.toastManager.setInstance(null);
     },
 
     /**
@@ -120,4 +121,12 @@ Polymer({
     onUndoClick_: function() {
       this.fire('undo-click');
     },
+  });
+
+  // #cr_define_end
+  return {
+    CrToastManagerElement: CrToastManagerElement,
+    getInstance: getInstance,
+    setInstance: setInstance,
+  };
 });

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -126,6 +126,11 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_TOAST_MANAGER_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
   <include name="IDR_CR_ELEMENTS_CR_TOGGLE_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.m.js"
          use_base_dir="false"