Web UI: Add tags to beginning and end of HTML templates

When autogenerating Polymer 3 JS files, add
<!--_html_template_start_--> to the beginning of the template and
<!--_html_template_end_--> to the end.

This will be used to identify HTML start and end locations for
performing i18n replacements in a followup CL. Adding the tags allows
the replacement code to search for only one set of markers, instead of
needing to handle multiple syntaxes.

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

tools/polymer/polymer.py

@@ -190,10 +190,16 @@ def _extract_dom_module_id(html_file):
     return match.group(1)
 
 
+def _add_template_markers(html_template):
+  return '<!--_html_template_start_-->%s<!--_html_template_end_-->' % \
+      html_template;
+
+
 def _extract_template(html_file, html_type):
   if html_type == 'v3-ready':
     with io.open(html_file, encoding='utf-8', mode='r') as f:
-      return f.read()
+      template = f.read()
+      return _add_template_markers('\n' + template)
 
   if html_type == 'dom-module':
     with io.open(html_file, encoding='utf-8', mode='r') as f:
@@ -212,7 +218,7 @@ def _extract_template(html_file, html_type):
           assert re.match(r'\s*</template>', lines[i - 2])
           assert re.match(r'\s*<script ', lines[i - 1])
           end_line = i - 3;
-    return '\n' + ''.join(lines[start_line:end_line + 1])
+    return _add_template_markers('\n' + ''.join(lines[start_line:end_line + 1]))
 
   if html_type == 'style-module':
     with io.open(html_file, encoding='utf-8', mode='r') as f:

tools/polymer/tests/dom_module_expected.js

@@ -4,14 +4,14 @@ import '../shared_vars_css.m.js';
 import './foo.m.js';
 
 Polymer({
-  _template: html`
+  _template: html`<!--_html_template_start_-->
     <style>
       div {
         font-size: 2rem;
       }
     </style>
     <div>Hello world</div>
-`,
+<!--_html_template_end_-->`,
   is: 'cr-test-foo',
   behaviors: [PaperRippleBehavior],
 });

tools/polymer/tests/dom_module_iife_expected.js

@@ -6,14 +6,14 @@ import './foo.m.js';
 const foo = 'foo';
 
 Polymer({
-  _template: html`
+  _template: html`<!--_html_template_start_-->
     <style>
       div {
         font-size: 2rem;
       }
     </style>
     <div>Hello world</div>
-`,
+<!--_html_template_end_-->`,
   is: 'cr-test-foo',
   behaviors: [PaperRippleBehavior],
 });

tools/polymer/tests/dom_module_with_define_expected.js

@@ -22,14 +22,14 @@ import './foo.m.js';
   }
 
   export let CrTestFooElement = Polymer({
-  _template: html`
+  _template: html`<!--_html_template_start_-->
     <style>
       div {
         font-size: 2rem;
       }
     </style>
     <div>Hello world</div>
-`,
+<!--_html_template_end_-->`,
     is: 'cr-test-foo',
     behaviors: [PaperRippleBehavior],
   });

tools/polymer/tests/v3_ready_expected.js

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