WebUI Polymer3: Add support for type-checking Polymer 3 code.

 - Add a new |polymer3_args| collection of JS Compiler flags in
   closure_args.gni, needed for type-checking Polymer3 modules.
 - Adding a new |is_polymer3| parameter to js_binary/js_type_check
   (defaults to false)
 - Updating compile_js.gni to not use polymer_externs for Polymer3,
   since Polymer itself is passed to the compiler (otherwise compilation
   fails)
 - Add js_type_check() targets for cr-button, cr-checkbox, cr-toast,
   cr-toggle, cr-view-manager.

Also fixing a bug where editing closure_args.gni did not trigger
js_type_check() targets to re-run.

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

third_party/closure_compiler/closure_args.gni

@@ -44,4 +44,21 @@ default_closure_args = strict_error_checking_closure_args + [
                          "js_module_root=gen/ui/webui/resources/",
                        ]
 
+polymer3_args = [
+  "browser_resolver_prefix_replacements=\"../polymer/polymer_bundled.min.js=../polymer/polymer_bundled.js\"",
+  "browser_resolver_prefix_replacements=\"chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js=../../third_party/polymer/v3_0/components-chromium/polymer/polymer_bundled.js\"",
+  "browser_resolver_prefix_replacements=\"chrome://resources/polymer/v3_0/=../../third_party/polymer/v3_0/components-chromium/\"",
+
+  # Turn off, primarily because cr.define() should not be used in any
+  # Polymer3/JS module code, but also because of b/133333578.
+  "chrome_pass=false",
+  "hide_warnings_for=externs.zip",
+  "hide_warnings_for=../../third_party/polymer/v3_0/components-chromium/",
+  "module_resolution=BROWSER_WITH_TRANSFORMED_PREFIXES",
+  "polymer_pass=false",
+
+  # Note: "2" is counter-intuitively the correct value to use for Polymer 3.
+  "polymer_version=2",
+]
+
 default_disabled_closure_args = [ "jscomp_off=duplicate" ]

third_party/closure_compiler/compile_js.gni

@@ -162,6 +162,7 @@ template("js_binary") {
                              "externs_list",
                              "extra_deps",
                              "outputs",
+                             "is_polymer3",
                              "sources",
                              "testonly",
                            ])
@@ -208,26 +209,41 @@ template("js_binary") {
       sources += config_files
     }
 
+    if (defined(checks_only) && checks_only) {
+      args += [ "--checks-only" ]
+    }
+
+    if (!defined(is_polymer3)) {
+      is_polymer3 = false
+    }
+
     # |minifying_closure_args| from
     # //third_party/closure_compiler/closure_args.gni
     if (!defined(closure_flags)) {
       closure_flags = default_closure_args
-    }
-    if (defined(checks_only) && checks_only) {
-      args += [ "--checks-only" ]
+
+      if (is_polymer3) {
+        closure_flags += polymer3_args
+      }
     }
     args += [ "--flags" ] + closure_flags
     args += [
       "--externs",
       rebase_path("$chrome_externs", root_build_dir),
-      rebase_path("$polymer_externs", root_build_dir),
     ]
     inputs = [
+      "$script_path/closure_args.gni",
       chrome_externs,
       compiler_path,
-      polymer_externs,
     ]
 
+    # |polymer_externs| should only be added for Polymer versions 1 and 2. For
+    # Polymer3, Polymer sources are directly passed to the compiler instead.
+    if (!is_polymer3) {
+      args += [ rebase_path("$polymer_externs", root_build_dir) ]
+      inputs += [ polymer_externs ]
+    }
+
     if (defined(externs_list)) {
       args += rebase_path(externs_list, root_build_dir)
       sources += externs_list
@@ -250,8 +266,9 @@ template("js_type_check") {
       checks_only = true
       forward_variables_from(invoker,
                              [
-                               "deps",
                                "closure_flags",
+                               "deps",
+                               "is_polymer3",
                                "testonly",
                              ])
     }

ui/webui/resources/cr_elements/BUILD.gn

@@ -26,6 +26,13 @@ group("closure_compile") {
     "cr_toggle:closure_compile",
     "cr_view_manager:closure_compile",
     "policy:closure_compile",
+
+    # Targets for auto-generated Polymer 3 JS Modules
+    "cr_button:closure_compile_module",
+    "cr_checkbox:closure_compile_module",
+    "cr_toast:closure_compile_module",
+    "cr_toggle:closure_compile_module",
+    "cr_view_manager:closure_compile_module",
   ]
 
   if (is_chromeos) {

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

@@ -23,3 +23,22 @@ polymer_modulizer("cr_button") {
   html_file = "cr_button.html"
   html_type = "dom-module"
 }
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_button.m",
+  ]
+}
+
+js_library("cr_button.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_button/cr_button.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/paper-behaviors:paper-ripple-behavior",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js/cr/ui:focus_outline_manager.m",
+  ]
+  extra_deps = [ ":cr_button_module" ]
+}

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

@@ -22,3 +22,21 @@ polymer_modulizer("cr_checkbox") {
   html_file = "cr_checkbox.html"
   html_type = "dom-module"
 }
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_checkbox.m",
+  ]
+}
+
+js_library("cr_checkbox.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/paper-behaviors:paper-ripple-behavior",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":cr_checkbox_module" ]
+}

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

@@ -29,3 +29,20 @@ polymer_modulizer("cr_toast") {
   html_file = "cr_toast.html"
   html_type = "dom-module"
 }
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_toast.m",
+  ]
+}
+
+js_library("cr_toast.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_toast/cr_toast.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":cr_toast_module" ]
+}

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

@@ -13,7 +13,6 @@ js_type_check("closure_compile") {
 
 js_library("cr_toggle") {
   deps = [
-    "//third_party/polymer/v1_0/components-chromium/iron-behaviors:iron-button-state-extracted",
     "//third_party/polymer/v1_0/components-chromium/paper-behaviors:paper-ripple-behavior-extracted",
   ]
 }
@@ -23,3 +22,21 @@ polymer_modulizer("cr_toggle") {
   html_file = "cr_toggle.html"
   html_type = "dom-module"
 }
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_toggle.m",
+  ]
+}
+
+js_library("cr_toggle.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_toggle/cr_toggle.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/paper-behaviors:paper-ripple-behavior",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":cr_toggle_module" ]
+}

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

@@ -24,3 +24,21 @@ polymer_modulizer("cr_view_manager") {
   html_type = "dom-module"
   auto_imports = [ "ui/webui/resources/html/assert.html|assert" ]
 }
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_view_manager.m",
+  ]
+}
+
+js_library("cr_view_manager.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_view_manager/cr_view_manager.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+  ]
+  extra_deps = [ ":cr_view_manager_module" ]
+}

ui/webui/resources/js/cr/ui/BUILD.gn

@@ -268,3 +268,10 @@ js_library("tree") {
 js_modulizer("modulize") {
   input_files = [ "focus_outline_manager.js" ]
 }
+
+js_library("focus_outline_manager.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/js/cr/ui/focus_outline_manager.m.js",
+  ]
+  extra_deps = [ ":modulize" ]
+}