WebUI Polymer3: Add tool to auto-generate Polymer3 from v2 files.

This CL adds the core functionality of the polymer_modulizer() GN rule.
In follow up CLs, the js_modulizer() will be added, and some code will
be shared between the two tools.

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

tools/polymer/polymer.gni

@@ -2,17 +2,32 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
-template("js_html_template") {
-  action(target_name + "_js_html_template") {
+common_namespace_rewrites = [
+  "Polymer.PaperRippleBehavior|PaperRippleBehavior",
+  "cr.ui.FocusOutlineManager|FocusOutlineManager",
+
+  # TODO(dpapad): Add more such rewrites as they get discovered.
+]
+
+template("polymer_modulizer") {
+  action(target_name + "_module") {
     script = "//tools/polymer/polymer.py"
 
     inputs = [
-      invoker.js_file,
       invoker.html_file,
     ]
 
+    if (invoker.html_type == "dom-module" || invoker.html_type == "v3-ready") {
+      inputs += [ invoker.js_file ]
+    }
+
+    output_js_file = "$target_gen_dir/" + invoker.js_file
+    if (invoker.html_type == "dom-module") {
+      output_js_file =
+          "$target_gen_dir/" + get_path_info(invoker.js_file, "file") + ".m.js"
+    }
     outputs = [
-      "$target_gen_dir/" + invoker.js_file,
+      "$target_gen_dir/" + output_js_file,
     ]
 
     args = [
@@ -27,5 +42,10 @@ template("js_html_template") {
       "--out_folder",
       rebase_path(target_gen_dir, root_build_dir),
     ]
+
+    args += [ "--namespace_rewrites" ] + common_namespace_rewrites
+    if (defined(invoker.namespace_rewrites)) {
+      args += invoker.namespace_rewrites
+    }
   }
 }

tools/polymer/polymer_test.py

@@ -13,156 +13,65 @@ import unittest
 _HERE_DIR = os.path.dirname(__file__)
 
 
-class HtmlToJsTest(unittest.TestCase):
+class PolymerModulizerTest(unittest.TestCase):
   def setUp(self):
     self._out_folder = None
-    self._tmp_dirs = []
-    self._tmp_src_dir = None
 
   def tearDown(self):
-    for tmp_dir in self._tmp_dirs:
-      shutil.rmtree(tmp_dir)
-
-  def _write_file_to_src_dir(self, file_path, file_contents):
-    if not self._tmp_src_dir:
-      self._tmp_src_dir = self._create_tmp_dir()
-    file_path_normalized = os.path.normpath(os.path.join(self._tmp_src_dir,
-                                                         file_path))
-    file_dir = os.path.dirname(file_path_normalized)
-    if not os.path.exists(file_dir):
-      os.makedirs(file_dir)
-    with open(file_path_normalized, 'w') as tmp_file:
-      tmp_file.write(file_contents)
-
-  def _create_tmp_dir(self):
-    tmp_dir = tempfile.mkdtemp(dir=_HERE_DIR)
-    self._tmp_dirs.append(tmp_dir)
-    return tmp_dir
+    shutil.rmtree(self._out_folder)
 
   def _read_out_file(self, file_name):
     assert self._out_folder
     return open(os.path.join(self._out_folder, file_name), 'r').read()
 
-  def _run_html_to_js(self, js_file, html_file, html_type):
+  def _run_test(self, html_type, html_file, js_file,
+      js_out_file, js_file_expected):
     assert not self._out_folder
-    self._out_folder = self._create_tmp_dir()
+    self._out_folder = tempfile.mkdtemp(dir=_HERE_DIR)
     polymer.main([
-      '--in_folder', self._tmp_src_dir,
+      '--in_folder', 'tests',
       '--out_folder', self._out_folder,
       '--js_file',  js_file,
       '--html_file',  html_file,
       '--html_type',  html_type,
+      '--namespace_rewrites',  'Polymer.PaperRippleBehavior|PaperRippleBehavior',
     ])
 
-  def _run_test_(self, html_type, src_html, src_js, expected_js):
-    self._write_file_to_src_dir('foo.html', src_html)
-    self._write_file_to_src_dir('foo.js', src_js)
-    self._run_html_to_js('foo.js', 'foo.html', html_type)
-    actual_js = self._read_out_file('foo.js')
+    actual_js = self._read_out_file(js_out_file)
+    expected_js = open(os.path.join('tests', js_file_expected), 'r').read()
     self.assertEquals(expected_js, actual_js)
 
   # Test case where HTML is extracted from a Polymer2 <dom-module>.
   def testSuccess_DomModule(self):
-    self._run_test_('dom-module', '''
-<link rel="import" href="../../foo/bar.html">
-<link rel="import" href="chrome://resources/foo/bar.html">
-
-<dom-module id="cr-checkbox">
-  <template>
-    <style>
-      div {
-        font-size: 2rem;
-      }
-    </style>
-    <div>Hello world</div>
-  </template>
-  <script src="foo.js"></script>
-</dom-module>
-''', '''
-Polymer({
-  is: 'cr-foo',
-
-  _template: html`
-{__html_template__}
-  `,
-});
-''', '''
-Polymer({
-  is: 'cr-foo',
-
-  _template: html`
-    <style>
-      div {
-        font-size: 2rem;
-      }
-    </style>
-    <div>Hello world</div>
-
-  `,
-});
-''')
+    self._run_test(
+        'dom-module', 'dom_module.html', 'dom_module.js',
+        'dom_module.m.js', 'dom_module_expected.js')
+
+  # Test case where HTML is extracted from a Polymer2 style module.
+  def testSuccess_StyleModule(self):
+    self._run_test(
+        'style-module', 'style_module.html', 'style_module.m.js',
+        'style_module.m.js', 'style_module_expected.js')
+    return
 
   # Test case where HTML is extracted from a Polymer2 <custom-style>.
   def testSuccess_CustomStyle(self):
-    self._run_test_('custom-style', '''
-<link rel="import" href="../../foo/bar.html">
-<link rel="import" href="chrome://resources/foo/bar.html">
-
-<custom-style>
-  <style>
-    html {
-      --foo-bar: 2rem;
-    }
-  </style>
-</custom-style>
-''', '''
-$_documentContainer.innerHTML = `
-{__html_template__}
-  `;
-''', '''
-$_documentContainer.innerHTML = `
-<custom-style>
-  <style>
-    html {
-      --foo-bar: 2rem;
-    }
-  </style>
-</custom-style>
-
-  `;
-''')
+    self._run_test(
+        'custom-style', 'custom_style.html', 'custom_style.m.js',
+        'custom_style.m.js', 'custom_style_expected.js')
+
+  # Test case where HTML is extracted from a Polymer2 iron-iconset-svg file.
+  def testSuccess_IronIconset(self):
+    self._run_test(
+        'iron-iconset', 'iron_iconset.html', 'iron_iconset.m.js',
+        'iron_iconset.m.js', 'iron_iconset_expected.js')
 
   # Test case where the provided HTML is already in the form needed by Polymer3.
   def testSuccess_V3Ready(self):
-    self._run_test_('v3-ready', '''<style>
-  div {
-    font-size: 2rem;
-  }
-</style>
-<div>Hello world</div>
-''', '''
-Polymer({
-  is: 'cr-foo',
-
-  _template: html`
-{__html_template__}
-  `,
-});
-''', '''
-Polymer({
-  is: 'cr-foo',
-
-  _template: html`
-<style>
-  div {
-    font-size: 2rem;
-  }
-</style>
-<div>Hello world</div>
-
-  `,
-});
-''')
+    self._run_test(
+        'v3-ready', 'v3_ready.html', 'v3_ready.js',
+        'v3_ready.js', 'v3_ready_expected.js')
+
 
 if __name__ == '__main__':
   unittest.main()

tools/polymer/tests/custom_style.html

+<link rel="import" href="../../html/polymer.html">
+
+<custom-style>
+  <style>
+    html {
+      --foo-bar: 2rem;
+    }
+  </style>
+</custom-style>

tools/polymer/tests/custom_style_expected.js

+import {Polymer, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+const $_documentContainer = document.createElement('template');
+$_documentContainer.innerHTML = `
+<custom-style>
+  <style>
+    html {
+      --foo-bar: 2rem;
+    }
+  </style>
+</custom-style>
+`;
+document.head.appendChild($_documentContainer.content);
\ No newline at end of file

tools/polymer/tests/dom_module.html

+<link rel="import" href="../../html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
+<link rel="import" href="../shared_vars_css.html">
+
+<dom-module id="cr-test-foo">
+  <template>
+    <style>
+      div {
+        font-size: 2rem;
+      }
+    </style>
+    <div>Hello world</div>
+  </template>
+  <script src="dom_module.js"></script>
+</dom-module>

tools/polymer/tests/dom_module.js

+Polymer({
+  is: 'cr-test-foo',
+  behaviors: [Polymer.PaperRippleBehavior],
+});

tools/polymer/tests/dom_module_expected.js

+import {Polymer, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PaperRippleBehavior} from 'chrome://resources/polymer/v3_0/paper-behaviors/paper-ripple-behavior.js';
+import '../shared_vars_css.m.js';
+
+Polymer({
+  _template: html`
+    <style>
+      div {
+        font-size: 2rem;
+      }
+    </style>
+    <div>Hello world</div>
+`,
+  is: 'cr-test-foo',
+  behaviors: [PaperRippleBehavior],
+});

tools/polymer/tests/iron_iconset.html

+<link rel="import" href="../html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg name="cr_foo_20" size="20">
+  <svg>
+    <defs>
+      <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
+<iron-iconset-svg name="cr_foo_24" size="24">
+  <svg>
+    <defs>
+      <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

tools/polymer/tests/iron_iconset_expected.js

+import {Polymer, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
+const template = html`
+<iron-iconset-svg name="cr_foo_20" size="20">
+  <svg>
+    <defs>
+      <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
+<iron-iconset-svg name="cr_foo_24" size="24">
+  <svg>
+    <defs>
+      <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
+`;
+document.head.appendChild(template.content);

tools/polymer/tests/style_module.html

+<link rel="import" href="../html/polymer.html">
+
+<link rel="import" href="some_other_style.html">
+
+<dom-module id="cr-foo-style">
+  <template>
+    <style include="some-other-style">
+      :host {
+        margin: 0;
+      }
+    </style>
+  </template>
+</dom-module>

tools/polymer/tests/style_module_expected.js

+import {Polymer, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import 'some_other_style.m.js';
+const styleElement = document.createElement('dom-module');
+styleElement.innerHTML = `
+  <template>
+    <style include="some-other-style">
+      :host {
+        margin: 0;
+      }
+    </style>
+  </template>
+`;
+styleElement.register('cr-foo-style');
\ No newline at end of file

tools/polymer/tests/v3_ready.html

+<style>
+  div {
+    font-size: 2rem;
+  }
+</style>
+<div>Hello world</div>

tools/polymer/tests/v3_ready.js

+Polymer({
+  is: 'cr-foo',
+
+  _template: html`
+{__html_template__}
+  `,
+});

tools/polymer/tests/v3_ready_expected.js

+Polymer({
+  is: 'cr-foo',
+
+  _template: html`
+<style>
+  div {
+    font-size: 2rem;
+  }
+</style>
+<div>Hello world</div>
+
+  `,
+});