[tools/perf] Fix JavaScript interpolation in action_runner calls

tools/perf/page_sets/polymer.py

 # Copyright 2014 The Chromium Authors. All rights reserved.
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 from telemetry.page import page as page_module
 from telemetry.page import shared_page_state
 from telemetry import story
+from telemetry.util import js_template
 
 
 class PolymerPage(page_module.Page):
 
   def __init__(self, url, page_set, run_no_page_interactions):
     """ Base class for all polymer pages.
 
     Args:
       run_no_page_interactions: whether the page will run any interactions after
         navigate steps.
@@ skipping 87 matching lines @@
       action_runner.ExecuteJavaScript(
           "document.getElementById('fab').scrollIntoView()")
       action_runner.Wait(5)
       self.AnimateShadow(action_runner, 'card')
       #FIXME(wiltzius) disabling until this issue is fixed:
       # https://github.com/Polymer/paper-shadow/issues/12
       #self.AnimateShadow(action_runner, 'fab')
 
   def AnimateShadow(self, action_runner, eid):
     for i in range(1, 6):
-      # TODO(catapult:#3028): Fix interpolation of JavaScript values.
       action_runner.ExecuteJavaScript(
-          'document.getElementById("{0}").z = {1}'.format(eid, i))
+          'document.getElementById({{ eid }}).z = {{ i }}', eid=eid, i=i)
       action_runner.Wait(1)
 
 
 class PolymerSampler(PolymerPage):
 
   def __init__(self, page_set, anchor, run_no_page_interactions,
                scrolling_page=False):
     """Page exercising interactions with a single Paper Sampler subpage.
 
     Args:
       page_set: Page set to inforporate this page into.
       anchor: string indicating which subpage to load (matches the element
           type that page is displaying)
       scrolling_page: Whether scrolling the content pane is relevant to this
           content page or not.
     """
     super(PolymerSampler, self).__init__(
       url=('http://www.polymer-project.org/components/%s/demo.html' % anchor),
       page_set=page_set, run_no_page_interactions=run_no_page_interactions)
     self.scrolling_page = scrolling_page
     self.iframe_js = 'document'
 
   def RunNavigateSteps(self, action_runner):
     super(PolymerSampler, self).RunNavigateSteps(action_runner)
-    # TODO(catapult:#3028): Fix interpolation of JavaScript values.
-    waitForLoadJS = """
-      window.Polymer.whenPolymerReady(function() {
-        %s.contentWindow.Polymer.whenPolymerReady(function() {
-          window.__polymer_ready = true;
-        })
-      });
-      """ % self.iframe_js
-    action_runner.ExecuteJavaScript(waitForLoadJS)
+    action_runner.ExecuteJavaScript("""
+        window.Polymer.whenPolymerReady(function() {
+          {{ @iframe }}.contentWindow.Polymer.whenPolymerReady(function() {
+            window.__polymer_ready = true;
+          })
+        });
+        """, iframe=self.iframe_js)
     action_runner.WaitForJavaScriptCondition(
         'window.__polymer_ready')
 
   def PerformPageInteractions(self, action_runner):
     #TODO(wiltzius) Add interactions for input elements and shadow pages
     if self.scrolling_page:
       # Only bother scrolling the page if its been marked as worthwhile
       self.ScrollContentPane(action_runner)
     self.TouchEverything(action_runner)
 
@@ skipping 25 matching lines @@
         ]
     for tappable_type in tappable_types:
       self.DoActionOnWidgetType(action_runner, tappable_type, self.TapWidget)
     swipeable_types = ['paper-slider']
     for swipeable_type in swipeable_types:
       self.DoActionOnWidgetType(action_runner, swipeable_type, self.SwipeWidget)
 
   def DoActionOnWidgetType(self, action_runner, widget_type, action_function):
     # Find all widgets of this type, but skip any that are disabled or are
     # currently active as they typically don't produce animation frames.
-    # TODO(catapult:#3028): Fix interpolation of JavaScript values.
-    element_list_query = (self.iframe_js +
-        ('.querySelectorAll("body %s:not([disabled]):'
-         'not([active])")' % widget_type))
+    element_list_query = js_template.Render(
+        '{{ @iframe }}.querySelectorAll({{ selector }})',
+        iframe=self.iframe_js,
+        selector='body %s:not([disabled]):not([active])' % widget_type)
+
     roles_count_query = element_list_query + '.length'
     for i in range(action_runner.EvaluateJavaScript(roles_count_query)):
-      # TODO(catapult:#3028): Fix interpolation of JavaScript values.
-      element_query = element_list_query + ("[%d]" % i)
+      element_query = js_template.Render(
+        '{{ @query }}[{{ i }}]', query=element_list_query, i=i)
       if action_runner.EvaluateJavaScript(
           element_query + '.offsetParent != null'):
         # Only try to tap on visible elements (offsetParent != null)
         action_runner.ExecuteJavaScript(element_query + '.scrollIntoView()')
         action_runner.Wait(1) # wait for page to settle after scrolling
         action_function(action_runner, element_query)
 
   def TapWidget(self, action_runner, element_function):
     with action_runner.CreateInteraction('Tap_Widget', repeatable=True):
       action_runner.TapElement(element_function=element_function)
@@ skipping 41 matching lines @@
     for p in SCROLLABLE_PAGES:
       self.AddStory(PolymerSampler(
           self, p, run_no_page_interactions=run_no_page_interactions,
           scrolling_page=True))
 
     for page in self:
       assert (page.__class__.RunPageInteractions ==
               PolymerPage.RunPageInteractions), (
               'Pages in this page set must not override PolymerPage\' '
               'RunPageInteractions method.')