Hotword Audio Verification App: UI polishes.

chrome/browser/resources/hotword_audio_verification/steps/hotword_only_step.html

Index: chrome/browser/resources/hotword_audio_verification/steps/hotword_only_step.html
diff --git a/chrome/browser/resources/hotword_audio_verification/steps/hotword_only_step.html b/chrome/browser/resources/hotword_audio_verification/steps/hotword_only_step.html
index 08897198176885bbcd15dcca8336511f0ff77f03..ca4ee8798306ff4b1db35b1307c41f5ccdf13dbc 100644
--- a/chrome/browser/resources/hotword_audio_verification/steps/hotword_only_step.html
+++ b/chrome/browser/resources/hotword_audio_verification/steps/hotword_only_step.html
@@ -2,7 +2,7 @@
   <div class="mic"></div>
   <div class="container">
     <div class="header">
-      <span class="close"></span>
+      <span id="ho-close-button" class="speech-close"></span>

[Dan Beam, 2014/10/23 23:56:01]

s/ho/hotword-only/g

[kcarattini, 2014/10/24 07:02:42]

I've been consistently using the two-letter namespace in this app in all of the
other step html files. I think it would be best to remain consistent here.

[Dan Beam, 2014/10/24 19:07:03]

everywhere else in chrome disagrees with you

[kcarattini, 2014/10/25 03:47:56]

Done.

       <div class="header-text">
         <h1>Voice search at any time</h1>
         <h2>Say 'Ok Google' any time your screen is on</h2>
@@ -19,17 +19,18 @@
       </div>
       <div class="col-spacing"></div>
       <div class="col-2">
-        <div class="train listening">
+        <div id="ho-train-1" class="train listening">
           <span class="icon"></span>
-          <span class="text">Say 'Ok Google'</span>
+          <span id="ho-train-text-1" class="text">Say 'Ok Google'</span>
         </div>
-        <div class="train not-started">
+        <div id="ho-train-2" class="train not-started">
           <span class="icon"></span>
-          <span class="text">Say 'Ok Google' again</span>
+          <span id="ho-train-text-2" class="text">Say 'Ok Google' again</span>
         </div>
-        <div class="train not-started">
+        <div id="ho-train-3" class="train not-started">

[Dan Beam, 2014/10/23 23:56:01]

can't these just be querySelected, e.g.

  $('ho-training').querySelectorAll('.train')

?

[kcarattini, 2014/10/24 07:02:42]

Done.

           <span class="icon"></span>
-          <span class="text">Say 'Ok Google' one last time</span>
+          <span id="ho-train-text-3"
+              class="text">Say 'Ok Google' one last time</span>
         </div>
       </div>
     </div>