WebUI Polymer 3: Port cr-drawer and tests

Autogenerate Polymer 3 version of cr-drawer, as well as tests for the
Polymer 3 version. Update the demo page to include a drawer.

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

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_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';
 import 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.m.js';
@@ -59,6 +60,13 @@ class HelloPolymer3Element extends PolymerElement {
           <cr-radio-button name="buttons">buttons</cr-radio-button>
         </cr-radio-group>
       </div>
+
+      <div>
+        <cr-button on-click="showDrawer_">Show drawer</cr-button>
+        <cr-drawer heading="Drawer">
+          <div class="drawer-content">Content of drawer</div>
+        </cr-drawer>
+      </div>
     `;
   }
 
@@ -76,6 +84,11 @@ class HelloPolymer3Element extends PolymerElement {
   onClick_() {
     this.shadowRoot.querySelector('cr-toast').show(2000);
   }
+
+  /** @private */
+  showDrawer_() {
+    this.shadowRoot.querySelector('cr-drawer').openDrawer();
+  }
 }  // class HelloPolymer3
 
 customElements.define('hello-polymer3', HelloPolymer3Element);

chrome/test/data/webui/BUILD.gn

@@ -160,6 +160,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_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",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_radio_group_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_drawer_tests.js",
     "cr_icon_button_tests.js",
     "cr_icon_button_focus_tests.js",
     "cr_input_test.js",

chrome/test/data/webui/cr_elements/cr_drawer_tests.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_drawer/cr_drawer.m.js';
+//
+// #import {eventToPromise} from 'chrome://test/test_util.m.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {tap} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// clang-format on
+
 suite('cr-drawer', function() {
   setup(function() {
     PolymerTest.clearBody();

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 CrElementsDrawerV3Test = class extends CrElementsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_drawer_tests.m.js';
+  }
+};
+
+TEST_F('CrElementsDrawerV3Test', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var CrElementsIconButtonV3Test = class extends CrElementsV3BrowserTest {
   /** @override */

ui/webui/resources/cr_elements/BUILD.gn

@@ -31,6 +31,7 @@ group("closure_compile") {
     # Targets for auto-generated Polymer 3 JS Modules
     "cr_button:closure_compile_module",
     "cr_checkbox:closure_compile_module",
+    "cr_drawer:closure_compile_module",
     "cr_icon_button:closure_compile_module",
     "cr_input:closure_compile_module",
     "cr_radio_button:closure_compile_module",
@@ -118,6 +119,7 @@ group("polymer3_elements") {
     ":shared_vars_css_module",
     "cr_button:cr_button_module",
     "cr_checkbox:cr_checkbox_module",
+    "cr_drawer:cr_drawer_module",
     "cr_icon_button:cr_icon_button_module",
     "cr_input:cr_input_module",
     "cr_input:cr_input_style_css_module",

ui/webui/resources/cr_elements/cr_drawer/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 = [
@@ -16,3 +17,32 @@ js_library("cr_drawer") {
     "//ui/webui/resources/js:util",
   ]
 }
+
+polymer_modulizer("cr_drawer") {
+  js_file = "cr_drawer.js"
+  html_file = "cr_drawer.html"
+  html_type = "dom-module"
+  auto_imports = [
+    "ui/webui/resources/html/assert.html|assertNotReached",
+    "ui/webui/resources/html/util.html|listenOnce",
+  ]
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_drawer.m",
+  ]
+}
+
+js_library("cr_drawer.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:util.m",
+  ]
+  extra_deps = [ ":cr_drawer_module" ]
+}

ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html

@@ -115,5 +115,5 @@
       </div>
     </dialog>
   </template>
+  <script src="cr_drawer.js"></script>
 </dom-module>
-<script src="cr_drawer.js"></script>

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -11,6 +11,11 @@
          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"
+         type="BINDATA"
+         compress="gzip" />
   <include name="IDR_CR_ELEMENTS_CR_ICON_BUTTON_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.m.js"
          use_base_dir="false"