Files app: Generate JS Module for <files-ripple>, <files-toggle-ripple>

and <files-icon-button>

Bug: 1133186
Change-Id: Iadbe0630cf2398c41c2a1eb2a50851528543b6bd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2526893Reviewed-by: Jeremie Boulic <jboulic@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826012}

ui/file_manager/audio_player/elements/BUILD.gn

@@ -83,8 +83,7 @@ js_library("control_panel.m") {
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_slider:cr_slider.m",
     "//ui/webui/resources/js:assert.m",
-
-    #TODO: Add dependency on //ui/file_manager/file_manager/elements/files_icon_button when it has Polymer3.
+    "//ui/file_manager/file_manager/foreground/elements:files_icon_button.m",
   ]
   extra_deps = [ ":control_panel_module" ]
 }
@@ -164,8 +163,7 @@ js_library("repeat_button.m") {
     "//third_party/polymer/v3_0/components-chromium/iron-behaviors:iron-button-state",
     "//third_party/polymer/v3_0/components-chromium/iron-behaviors:iron-control-state",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-
-    #TODO: Add dependency on //ui/file_manager/file_manager/elements/files_toggle_ripple when it has Polymer3.
+    "//ui/file_manager/file_manager/foreground/elements:files_toggle_ripple.m",
   ]
   extra_deps = [ ":repeat_button_module" ]
 }

ui/file_manager/file_manager/foreground/elements/BUILD.gn

@@ -5,6 +5,7 @@
 import("//third_party/closure_compiler/compile_js.gni")
 import("//third_party/closure_compiler/js_unit_tests.gni")
 import("//ui/file_manager/base/gn/js_test_gen_html.gni")
+import("//tools/polymer/polymer.gni")
 
 visibility = [ "//ui/file_manager/file_manager/foreground/*" ]
 
@@ -12,12 +13,13 @@ group("closure_compile") {
   testonly = true
   visibility += [ "//ui/file_manager:closure_compile" ]
   deps = [
-    ":closure_compile_module",
+    ":closure_compile_internal",
+    ":closure_compile_jsmodules",
     ":js_test_gen_html_type_check_auto",
   ]
 }
 
-js_type_check("closure_compile_module") {
+js_type_check("closure_compile_internal") {
   deps = [
     ":files_format_dialog",
     ":files_icon_button",
@@ -40,6 +42,15 @@ js_type_check("closure_compile_module") {
   ]
 }
 
+js_type_check("closure_compile_jsmodules") {
+  is_polymer3 = true
+  deps = [
+    ":files_icon_button.m",
+    ":files_toggle_ripple.m",
+    ":files_ripple.m",
+  ]
+}
+
 js_library("files_format_dialog") {
   deps = [
     "//ui/file_manager/file_manager/common/js:util",
@@ -57,6 +68,37 @@ js_library("files_icon_button") {
   ]
 }
 
+polymer_modulizer("files_icon_button") {
+  js_file = "files_icon_button.js"
+  html_file = "files_icon_button.html"
+  html_type = "dom-module"
+  preserve_url_scheme = true
+
+  namespace_rewrites = [
+    "Polymer.IronButtonState|IronButtonState",
+    "Polymer.IronControlState|IronControlState",
+  ]
+
+  auto_imports = [
+    "third_party/polymer/v1_0/components-chromium/iron-behaviors/iron-button-state.html|IronButtonState",
+    "third_party/polymer/v1_0/components-chromium/iron-behaviors/iron-control-state.html|IronControlState",
+  ]
+}
+
+js_library("files_icon_button.m") {
+  visibility += [ "//ui/file_manager/audio_player/*" ]
+  sources = [
+    "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/files_icon_button.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/iron-behaviors:iron-button-state",
+    "//third_party/polymer/v3_0/components-chromium/iron-behaviors:iron-control-state",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    ":files_toggle_ripple.m",
+  ]
+  extra_deps = [ ":files_icon_button_module" ]
+}
+
 js_library("files_message") {
   deps = [
     "//ui/webui/resources/cr_elements/cr_button:cr_button",
@@ -110,6 +152,26 @@ js_library("files_ripple") {
   deps = [ "//ui/webui/resources/js:assert" ]
 }
 
+polymer_modulizer("files_ripple") {
+  js_file = "files_ripple.js"
+  html_file = "files_ripple.html"
+  html_type = "dom-module"
+  preserve_url_scheme = true
+
+  auto_imports = [ "ui/webui/resources/html/assert.html|assert,assertInstanceof" ]
+}
+
+js_library("files_ripple.m") {
+  sources = [
+    "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/files_ripple.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+  ]
+  extra_deps = [ ":files_ripple_module" ]
+}
+
 js_library("files_safe_media") {
 }
 
@@ -133,6 +195,24 @@ js_library("files_toggle_ripple") {
   visibility += [ "//ui/file_manager/gallery/*" ]
 }
 
+polymer_modulizer("files_toggle_ripple") {
+  js_file = "files_toggle_ripple.js"
+  html_file = "files_toggle_ripple.html"
+  html_type = "dom-module"
+  preserve_url_scheme = true
+}
+
+js_library("files_toggle_ripple.m") {
+  visibility += [ "//ui/file_manager/audio_player/*" ]
+  sources = [
+    "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":files_toggle_ripple_module" ]
+}
+
 # TODO(tapted): Move this to //ui/file_manager/base.
 js_library("files_tooltip") {
   visibility += [ "//ui/file_manager/gallery/*" ]

ui/file_manager/file_manager/foreground/elements/files_icon_button.html

@@ -15,6 +15,7 @@
 
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-behaviors/iron-button-state.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-behaviors/iron-control-state.html">
 <link rel="import" href="files_ripple.html">
 <link rel="import" href="files_toggle_ripple.html">
 
@@ -51,6 +52,5 @@
     <files-ripple hidden="[[toggles]]"></files-ripple>
     <files-toggle-ripple activated="[[active]]"></files-toggle-ripple>
   </template>
-
   <script src="files_icon_button.js"></script>
 </dom-module>

ui/file_manager/file_manager/foreground/elements/files_ripple.html

@@ -4,6 +4,7 @@
   -->
 
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/assert.html">
 
 <dom-module id="files-ripple">
   <template>
@@ -35,6 +36,5 @@
     </style>
     <div id="ripple" class="ripple"></div>
   </template>
-
   <script src="files_ripple.js"></script>
 </dom-module>

ui/file_manager/file_manager/foreground/elements/files_ripple.js

@@ -7,7 +7,7 @@
  *
  * Circle ripple effect with burst animation.
  */
-const FilesRipple = Polymer({
+Polymer({
   is: 'files-ripple',
 
   properties: {
@@ -27,8 +27,8 @@ const FilesRipple = Polymer({
   pressAnimationPromise_: null,
 
   ready: function() {
-    /** @type {HTMLElement} */
-    this.ripple_ = this.$.ripple;
+    /** @type {!HTMLElement} */
+    this.ripple_ = assertInstanceof(this.$.ripple, HTMLElement);
   },
 
   attached: function() {

ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html

@@ -46,6 +46,5 @@
       <div class="ripple" id="ripple"></div>
     </div>
   </template>
-
   <script src="files_toggle_ripple.js"></script>
 </dom-module>