Hotword Audio Verification App: UI polishes.

chrome/browser/resources/hotword_audio_verification/main.js

Index: chrome/browser/resources/hotword_audio_verification/main.js
diff --git a/chrome/browser/resources/hotword_audio_verification/main.js b/chrome/browser/resources/hotword_audio_verification/main.js
index 8c78ef4a4f05b56f796e6e51e81022f7d3b88722..eab99c8655cb96bb1640fba399f3808c3d1a42ef 100644
--- a/chrome/browser/resources/hotword_audio_verification/main.js
+++ b/chrome/browser/resources/hotword_audio_verification/main.js
@@ -8,75 +8,86 @@ document.addEventListener('DOMContentLoaded', function() {
   var flow = new Flow();
   flow.startFlow();
 
-  // Make the close buttons close the app window.
-  var closeButtons = document.getElementsByClassName('close');
-  for (var i = 0; i < closeButtons.length; ++i) {
-    var closeButton = closeButtons[i];
-    closeButton.addEventListener('click', function(e) {
+  var closeAppWindow = function(e) {
+    var classes = e.target.classList;
+    if (classes.contains('close') || classes.contains('finish-button')) {
       appWindow.close();
       e.preventDefault();
-    });
-  }
+    }
+  };
 
-  $('ah-cancel-button').addEventListener('click', function(e) {
-    appWindow.close();
-    e.preventDefault();
-  });
+  // TODO(kcarattini): Cancel training in NaCl module for hotword-only and
+  // speech-training close and cancel buttons.
+  $('steps').addEventListener('click', closeAppWindow);
 
-  $('done-button').addEventListener('click', function(e) {
-    appWindow.close();
+  $('hw-agree-button').addEventListener('click', function(e) {
+    flow.advanceStep();
     e.preventDefault();
   });
 
-  $('ho-cancel-button').addEventListener('click', function(e) {
-    appWindow.close();
+  $('settings-link').addEventListener('click', function(e) {
+    chrome.browser.openTab({'url': 'chrome://settings'}, function() {});
     e.preventDefault();
   });
 
-  $('hw-cancel-button').addEventListener('click', function(e) {
-    appWindow.close();
-    e.preventDefault();
-  });
+  /**
+   * Updates steps of the training UI.
+   * @param {string} pagePrefix Prefix of the element ids for this page.
+   * @param {Event} e The click event.
+   */
+  function doTraining(pagePrefix, e) {
+    // TODO(kcarattini): Update this to respond to a hotword trigger once
+    // speech training is implemented.
+    var steps = $(pagePrefix + '-training').querySelectorAll('.train');
+    var index = Array.prototype.indexOf.call(steps, e.currentTarget);
+    if (!steps[index])
+      return;
 
-  $('st-cancel-button').addEventListener('click', function(e) {
-    appWindow.close();
-    e.preventDefault();
-  });
+    // TODO(kcarattini): Localize this string.
+    steps[index].querySelector('.text').textContent = 'Recorded';
+    steps[index].classList.remove('listening');
+    steps[index].classList.add('recorded');
 
-  $('ah-agree-button').addEventListener('click', function(e) {
-    // TODO(kcarattini): Set the Audio History setting.
-    appWindow.close();
-    e.preventDefault();
-  });
+    if (steps[index + 1]) {
+      steps[index + 1].classList.remove('not-started');
+      steps[index + 1].classList.add('listening');
+    }
+  }
 
-  $('hw-agree-button').addEventListener('click', function(e) {
-    flow.advanceStep();
-    e.preventDefault();
-  });
+  /**
+   * Adds event listeners to the training UI.
+   * @param {string} pagePrefix Prefix of the element ids for this page.
+   */
+  function addTrainingEventListeners(pagePrefix) {
+    var steps = $(pagePrefix + '-training').querySelectorAll('.train');
+    for (var i = 0; i < steps.length; ++i) {
+      steps[i].addEventListener('click', function(e) {
+        doTraining(pagePrefix, e);
+        e.preventDefault();
 
-  // TODO(kcarattini): Remove this once speech training is implemented. The
-  // way to get to the next page will be to complete the speech training.
-  $('st-training').addEventListener('click', function(e) {
-    if (chrome.hotwordPrivate.setAudioLoggingEnabled)
-      chrome.hotwordPrivate.setAudioLoggingEnabled(true, function() {});
+        if (e.currentTarget != steps[steps.length - 1])
+          return;
 
-    if (chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled) {
-      chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled(true,
-          flow.advanceStep.bind(flow));
-    }
-    e.preventDefault();
-  });
+        // Update the 'Cancel' button.
+        var buttonElem = $(pagePrefix + '-cancel-button');
+        // TODO(kcarattini): Localize this string.
+        buttonElem.textContent = 'Please wait ...';
+        buttonElem.classList.add('grayed-out');
+        buttonElem.classList.remove('finish-button');
 
-  // TODO(kcarattini): Remove this once speech training is implemented. The
-  // way to get to the next page will be to complete the speech training.
-  $('ho-training').addEventListener('click', function(e) {
-    if (chrome.hotwordPrivate.setAudioLoggingEnabled)
-      chrome.hotwordPrivate.setAudioLoggingEnabled(true, function() {});
+        setTimeout(function() {
+          if (chrome.hotwordPrivate.setAudioLoggingEnabled)
+            chrome.hotwordPrivate.setAudioLoggingEnabled(true, function() {});
 
-    if (chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled) {
-      chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled(true,
-          flow.advanceStep.bind(flow));
+          if (chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled) {
+            chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled(true,
+                flow.advanceStep.bind(flow));
+          }
+        }, 2000);
+      });
     }
-    e.preventDefault();
-  });
+  }
+
+  addTrainingEventListeners('speech-training');
+  addTrainingEventListeners('hotword-only');
 });