Web UI Polymer 3: Port cr-dialog

- Autogenerate modulized CrContainerShadowBehavior
- Autogenerate Polymer 3 version of cr-dialog
- Autogenerate Polymer 3 cr-dialog test
- Add cr-dialog to Polymer 3 demo page

Bug: 965770
Change-Id: I6e8c8994b71edb80366cf30f6fff41ed98382722
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1779435
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#693318}

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

@@ -4,6 +4,7 @@
 
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
+import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import 'chrome://resources/cr_elements/cr_drawer/cr_drawer.m.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
@@ -81,6 +82,13 @@ class HelloPolymer3Element extends PolymerElement {
           </template>
         </div>
       </div>
+
+      <div>
+        <cr-button on-click="showDialog_">Click to open dialog</cr-button>
+        <cr-dialog id="dialog">
+          <div slot="title">I am a dialog</div>
+        </cr-dialog>
+      </div>
     `;
   }
 
@@ -116,6 +124,11 @@ class HelloPolymer3Element extends PolymerElement {
     this.shadowRoot.querySelector('cr-drawer').openDrawer();
   }
 
+  /** @private */
+  showDialog_() {
+    this.shadowRoot.querySelector('cr-dialog').showModal();
+  }
+
   /**
    * @return {boolean}
    * @private

chrome/test/data/webui/BUILD.gn

@@ -161,6 +161,7 @@ js2gtest("browser_tests_js_webui") {
   ]
   data = [
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_button_tests.m.js",
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_dialog_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_drawer_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_icon_button_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_radio_button_test.m.js",

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

@@ -8,6 +8,7 @@ js_modulizer("modulize") {
   input_files = [
     "cr_button_tests.js",
     "cr_checkbox_test.js",
+    "cr_dialog_test.js",
     "cr_drawer_tests.js",
     "cr_icon_button_tests.js",
     "cr_icon_button_focus_tests.js",

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

@@ -2,6 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
+//
+// #import {eventToPromise, flushTasks} from 'chrome://test/test_util.m.js';
+// #import {keyDownOn, keyEventOn, tap} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// #import {Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// clang-format on
+
 suite('cr-dialog', function() {
   function pressEnter(element) {
     MockInteractions.keyEventOn(element, 'keypress', 13, undefined, 'Enter');
@@ -36,6 +44,11 @@ suite('cr-dialog', function() {
 
   setup(function() {
     PolymerTest.clearBody();
+    // Ensure svg, which is referred to by a relative URL, is loaded from
+    // chrome://resources and not chrome://test
+    const base = document.createElement('base');
+    base.href = 'chrome://resources/cr_elements/';
+    document.head.appendChild(base);
   });
 
   test('cr-dialog-open event fires when opened', function() {
@@ -423,7 +436,7 @@ suite('cr-dialog', function() {
     assertTrue(dialog.open);
     assertTrue(dialog.hasAttribute('open'));
 
-    e = new CustomEvent('cancel', {cancelable: true});
+    const e = new CustomEvent('cancel', {cancelable: true});
     dialog.getNative().dispatchEvent(e);
 
     assertFalse(dialog.open);

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

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

ui/webui/resources/cr_elements/BUILD.gn

@@ -4,6 +4,7 @@
 
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/polymer/polymer.gni")
+import("//ui/webui/resources/tools/js_modulizer.gni")
 
 group("closure_compile") {
   deps = [
@@ -29,8 +30,10 @@ group("closure_compile") {
     "policy:closure_compile",
 
     # Targets for auto-generated Polymer 3 JS Modules
+    ":cr_elements_module_resources",
     "cr_button:closure_compile_module",
     "cr_checkbox:closure_compile_module",
+    "cr_dialog:closure_compile_module",
     "cr_drawer:closure_compile_module",
     "cr_icon_button:closure_compile_module",
     "cr_input:closure_compile_module",
@@ -110,16 +113,23 @@ polymer_modulizer("icons") {
   html_type = "iron-iconset"
 }
 
+js_modulizer("modulize") {
+  input_files = [ "cr_container_shadow_behavior.js" ]
+  deps = []
+}
+
 group("polymer3_elements") {
   deps = [
     ":cr_icons_css_module",
     ":hidden_style_css_module",
     ":icons_module",
     ":md_select_css_module",
+    ":modulize",
     ":shared_style_css_module",
     ":shared_vars_css_module",
     "cr_button:cr_button_module",
     "cr_checkbox:cr_checkbox_module",
+    "cr_dialog:cr_dialog_module",
     "cr_drawer:cr_drawer_module",
     "cr_icon_button:cr_icon_button_module",
     "cr_input:cr_input_module",
@@ -134,3 +144,19 @@ group("polymer3_elements") {
     "cr_view_manager:cr_view_manager_module",
   ]
 }
+
+js_type_check("cr_elements_module_resources") {
+  deps = [
+    ":cr_container_shadow_behavior.m",
+  ]
+}
+
+js_library("cr_container_shadow_behavior.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_container_shadow_behavior.m.js",
+  ]
+  deps = [
+    "//ui/webui/resources/js:assert.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}

ui/webui/resources/cr_elements/cr_container_shadow_behavior.js

@@ -31,14 +31,18 @@
  * '#cr-container-shadow-[top/bottom].has-shadow', or define their own styles.
  */
 
+// clang-format off
+// #import {assert} from 'chrome://resources/js/assert.m.js'
+// clang-format on
+
 /** @enum {string} */
-const CrContainerShadowSide = {
+/* #export */ const CrContainerShadowSide = {
   TOP: 'top',
   BOTTOM: 'bottom',
 };
 
 /** @polymerBehavior */
-const CrContainerShadowBehavior = {
+/* #export */ const CrContainerShadowBehavior = {
   /** @private {?IntersectionObserver} */
   intersectionObserver_: null,
 

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

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -17,3 +18,33 @@ js_library("cr_dialog") {
   ]
   externs_list = [ "$externs_path/web_animations.js" ]
 }
+
+polymer_modulizer("cr_dialog") {
+  js_file = "cr_dialog.js"
+  html_file = "cr_dialog.html"
+  html_type = "dom-module"
+  auto_imports = [
+    "ui/webui/resources/cr_elements/cr_container_shadow_behavior.html|CrContainerShadowBehavior",
+    "ui/webui/resources/html/assert.html|assert",
+  ]
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_dialog.m",
+  ]
+}
+
+js_library("cr_dialog.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.m.js",
+  ]
+  deps = [
+    "..:cr_container_shadow_behavior.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+  ]
+  extra_deps = [ ":cr_dialog_module" ]
+  externs_list = [ "$externs_path/web_animations.js" ]
+}

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js

@@ -253,7 +253,7 @@ Polymer({
    * @return {!HTMLDialogElement}
    */
   getNative: function() {
-    return this.$.dialog;
+    return /** @type {!HTMLDialogElement} */ (this.$.dialog);
   },
 
   /**
@@ -318,7 +318,7 @@ Polymer({
           {transform: 'scale(1.02)', offset: 0.6},
           {transform: 'scale(1)', offset: 1},
         ],
-        /** @type {!KeyframeEffectOptions} */ ({
+        /** @type {!KeyframeAnimationOptions} */ ({
           duration: 180,
           easing: 'ease-in-out',
           iterations: 1,

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -11,6 +11,16 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_CONTAINER_SHADOW_BEHAVIOR_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_container_shadow_behavior.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_DIALOG_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
   <include name="IDR_CR_ELEMENTS_CR_DRAWER_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.m.js"
          use_base_dir="false"