[tools/perf] Fix JavaScript interpolation in action_runner calls

tools/perf/page_sets/key_silk_cases.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
 
 
 class KeySilkCasesPage(page_module.Page):
 
@@ skipping 400 matching lines @@
 
   def ExpandKnowledgeCard(self, action_runner):
     # expand card
     with action_runner.CreateInteraction('Action_TapAction'):
       action_runner.TapElement(
           element_function='document.getElementsByClassName("vk_arc")[0]')
       action_runner.Wait(2)
 
   def ScrollKnowledgeCardToTop(self, action_runner, card_id):
     # scroll until the knowledge card is at the top
-    # TODO(catapult:#3028): Fix interpolation of JavaScript values.
     action_runner.ExecuteJavaScript(
-        "document.getElementById('%s').scrollIntoView()" % card_id)
+        "document.getElementById({{ card_id }}).scrollIntoView()",
+        card_id=card_id)
 
   def PerformPageInteractions(self, action_runner):
     self.ExpandKnowledgeCard(action_runner)
 
 
 class GwsGoogleExpansion(GwsExpansionPage):
 
   """ Why: Animating height of a complex content card is common. """
 
   def __init__(self, page_set, run_no_page_interactions):
@@ skipping 207 matching lines @@
   def __init__(self, page_set, run_no_page_interactions):
     super(PolymerTopeka, self).__init__(
       url='https://polymer-topeka.appspot.com/',
       page_set=page_set, run_no_page_interactions=run_no_page_interactions)
 
   def PerformPageInteractions(self, action_runner):
     profile = 'html /deep/ topeka-profile /deep/ '
     first_name = profile + 'paper-input#first /deep/ input'
     action_runner.WaitForElement(selector=first_name)
     # Input First Name:
-    # TODO(catapult:#3028): Fix interpolation of JavaScript values.
     action_runner.ExecuteJavaScript('''
-        var fn = document.querySelector('%s');
+        var fn = document.querySelector({{ first_name }});
         fn.value = 'Chrome';
-        fn.fire('input');''' % first_name)
+        fn.fire('input');''',
+        first_name=first_name)
     # Input Last Initial:
-    # TODO(catapult:#3028): Fix interpolation of JavaScript values.
     action_runner.ExecuteJavaScript('''
-        var li = document.querySelector('%s paper-input#last /deep/ input');
+        var li = document.querySelector({{ selector }});
         li.value = 'E';
-        li.fire('input');''' % profile)
+        li.fire('input');''',
+        selector='%s paper-input#last /deep/ input' % profile)
     with action_runner.CreateInteraction('animation_interaction'):
       # Click the check-mark to login:
-      # TODO(catapult:#3028): Fix interpolation of JavaScript values.
       action_runner.ExecuteJavaScript('''
           window.topeka_page_transitions = 0;
           [].forEach.call(document.querySelectorAll(
               'html /deep/ core-animated-pages'), function(p){
                   p.addEventListener(
                       'core-animated-pages-transition-end', function(e) {
                           window.topeka_page_transitions++;
                       });
               });
-          document.querySelector('%s paper-fab').fire('tap')''' % profile)
+          document.querySelector({{ selector }}).fire('tap')''',
+          selector='%s paper-fab' % profile)
       # Wait for category list to animate in:
       action_runner.WaitForJavaScriptCondition('''
           window.topeka_page_transitions === 1''')
       # Click a category to start a quiz:
       action_runner.ExecuteJavaScript('''
           document.querySelector('\
               html /deep/ core-selector.category-list').fire(
               'tap',1,document.querySelector('html /deep/ \
                       div.category-item.red-theme'));''')
       # Wait for the category splash to animate in:
@@ skipping 74 matching lines @@
     self.AddStory(SilkFinance(self, run_no_page_interactions))
     # Flaky interaction steps on Android; crbug.com/507865
     # self.AddStory(PolymerTopeka(self, run_no_page_interactions))
     self.AddStory(Masonry(self, run_no_page_interactions))
 
     for page in self:
       assert (page.__class__.RunPageInteractions ==
               KeySilkCasesPage.RunPageInteractions), (
               'Pages in this page set must not override KeySilkCasesPage\' '
               'RunPageInteractions method.')