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,8 +31,12 @@ suite('cr-toast-manager', () => {
     assertFalse(toastManager.$.button.hidden);
 
     toastManager.hide();
-    assertEquals(
-        'hidden', window.getComputedStyle(toastManager.$.button).visibility);
+    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 () => {

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,120 +4,129 @@
 
 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({
-  is: 'cr-toast-manager',
+  /**
+   * @fileoverview Element which shows toasts with optional undo button.
+   */
+  // eslint-disable-next-line
+  /* #export */ let CrToastManagerElement = Polymer({
+    is: 'cr-toast-manager',
 
-  properties: {
-    duration: {
-      type: Number,
-      value: 0,
-    },
+    properties: {
+      duration: {
+        type: Number,
+        value: 0,
+      },
 
-    /** @private */
-    showUndo_: Boolean,
+      /** @private */
+      showUndo_: Boolean,
 
-    undoDescription: String,
+      undoDescription: String,
 
-    undoLabel: String,
-  },
+      undoLabel: String,
+    },
 
-  /** @return {boolean} */
-  get isToastOpen() {
-    return this.$.toast.open;
-  },
+    /** @return {boolean} */
+    get isToastOpen() {
+      return this.$.toast.open;
+    },
 
-  /** @return {boolean} */
-  get isUndoButtonHidden() {
-    return this.$.button.hidden;
-  },
+    /** @return {boolean} */
+    get isUndoButtonHidden() {
+      return this.$.button.hidden;
+    },
 
-  /** @override */
-  attached: function() {
-    assert(!cr.toastManager.toastManagerInstance);
-    cr.toastManager.toastManagerInstance = this;
-  },
+    /** @override */
+    attached: function() {
+      cr.toastManager.setInstance(this);
+    },
 
-  /** @override */
-  detached: function() {
-    cr.toastManager.toastManagerInstance = null;
-  },
+    /** @override */
+    detached: function() {
+      cr.toastManager.setInstance(null);
+    },
 
-  /**
-   * @param {string} label The label to display inside the toast.
-   * @param {boolean} showUndo Whether the undo button should be shown.
-   */
-  show: function(label, showUndo) {
-    this.$.content.textContent = label;
-    this.showInternal_(showUndo);
-    this.$.toast.show();
-  },
+    /**
+     * @param {string} label The label to display inside the toast.
+     * @param {boolean} showUndo Whether the undo button should be shown.
+     */
+    show: function(label, showUndo) {
+      this.$.content.textContent = label;
+      this.showInternal_(showUndo);
+      this.$.toast.show();
+    },
 
-  /**
-   * Shows the toast, making certain text fragments collapsible.
-   * @param {!Array<!{value: string, collapsible: boolean}>} pieces
-   * @param {boolean} showUndo Whether the undo button should be shown.
-   */
-  showForStringPieces: function(pieces, showUndo) {
-    const content = this.$.content;
-    content.textContent = '';
-    pieces.forEach(function(p) {
-      if (p.value.length == 0) {
-        return;
-      }
+    /**
+     * Shows the toast, making certain text fragments collapsible.
+     * @param {!Array<!{value: string, collapsible: boolean}>} pieces
+     * @param {boolean} showUndo Whether the undo button should be shown.
+     */
+    showForStringPieces: function(pieces, showUndo) {
+      const content = this.$.content;
+      content.textContent = '';
+      pieces.forEach(function(p) {
+        if (p.value.length == 0) {
+          return;
+        }
+
+        const span = document.createElement('span');
+        span.textContent = p.value;
+        if (p.collapsible) {
+          span.classList.add('collapsible');
+        }
+
+        content.appendChild(span);
+      });
+
+      this.showInternal_(showUndo);
+    },
 
-      const span = document.createElement('span');
-      span.textContent = p.value;
-      if (p.collapsible) {
-        span.classList.add('collapsible');
+    /**
+     * @param {boolean} showUndo Whether the undo button should be shown.
+     * @private
+     */
+    showInternal_: function(showUndo) {
+      this.showUndo_ = showUndo;
+      Polymer.IronA11yAnnouncer.requestAvailability();
+      this.fire('iron-announce', {
+        text: this.$.content.textContent,
+      });
+      if (showUndo && this.undoDescription) {
+        this.fire('iron-announce', {
+          text: this.undoDescription,
+        });
       }
+      this.$.toast.show();
+    },
 
-      content.appendChild(span);
-    });
+    hide: function() {
+      this.$.toast.hide();
+    },
 
-    this.showInternal_(showUndo);
-  },
+    /** @private */
+    onUndoClick_: function() {
+      this.fire('undo-click');
+    },
+  });
 
-  /**
-   * @param {boolean} showUndo Whether the undo button should be shown.
-   * @private
-   */
-  showInternal_: function(showUndo) {
-    this.showUndo_ = showUndo;
-    Polymer.IronA11yAnnouncer.requestAvailability();
-    this.fire('iron-announce', {
-      text: this.$.content.textContent,
-    });
-    if (showUndo && this.undoDescription) {
-      this.fire('iron-announce', {
-        text: this.undoDescription,
-      });
-    }
-    this.$.toast.show();
-  },
-
-  hide: function() {
-    this.$.toast.hide();
-  },
-
-  /** @private */
-  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"