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..031174eedd71210b3586752ab7e847c918c63f69 100644
--- a/chrome/browser/resources/hotword_audio_verification/main.js
+++ b/chrome/browser/resources/hotword_audio_verification/main.js
@@ -8,75 +8,96 @@ 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) {
-      appWindow.close();
-      e.preventDefault();
-    });
-  }
+  var closeAppWindow = function(e) {
+    var classes = e.target && e.target.className.split(' ');
+    if (classes) {
+      for (var i = 0; i < classes.length; ++i) {
+        if (classes[i] == 'close' || classes[i] == 'finish-button') {

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

var classes = e.target.classList;
if (classes.contains('close') || classes.contains('finish-button'))

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

Done.

+          appWindow.close();
+          e.preventDefault();
+        }
+      }
+    }
+  };
 
-  $('ah-cancel-button').addEventListener('click', function(e) {
-    appWindow.close();
-    e.preventDefault();
-  });
+  // TODO(kcarattini): Cancel training in NaCl module for ho- and st-
+  // 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 = 0;

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

var index = Math.min(0, Array.prototype.indexOf.call(steps, e.currentTarget));

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

Done.

+    for (var i = 0; i < steps.length; ++i) {
+      if (steps[i] == e.currentTarget)
+        index = i;
+    }
 
-  $('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 (index != steps.length - 1) {

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

nit: why not if (steps[index + 1]) ?

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

Done.

+      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) {
+  // Loop only until the second to last step because the last step
+  // has different behavior.

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

indent off

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

Done.

+    var steps = $(pagePrefix + '-training').querySelectorAll('.train');
+    for (var i = 0; i < steps.length - 1; ++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() {});
+    steps[steps.length - 1].addEventListener('click', function(e) {
+      doTraining(pagePrefix, e);
 
-    if (chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled) {
-      chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled(true,
-          flow.advanceStep.bind(flow));
-    }
-    e.preventDefault();
-  });
+      // Update the 'Cancel' button.

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

nit: just use the same event listener and detect the last time, e.g.,

for (var i = 0; i < steps.length; ++i) {
  steps[i].addEventListener('click', function(e) {
    doTraining(pagePrefix, e);
    e.preventDefault();

    if (e.currentTarget != steps[steps.length])
      return;

    ...last step code here...
  });
}
  

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

Done.

+      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));
-    }
-    e.preventDefault();
-  });
+        if (chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled) {
+          chrome.hotwordPrivate.setHotwordAlwaysOnSearchEnabled(true,
+              flow.advanceStep.bind(flow));
+        }
+        e.preventDefault();
+      }, 2000);
+    });
+  }
+
+  addTrainingEventListeners('st');
+  addTrainingEventListeners('ho');
 });