Add a page to explain earcons in the tutorial

chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js

Index: chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
diff --git a/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js b/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
index 123f9f24b61d9661486f0800327bdfe03b2c16e5..b72d3b2cdb18d785464bf83ceec7ea5eea40ef2c 100644
--- a/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
+++ b/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
@@ -9,6 +9,7 @@
 goog.provide('Tutorial');
 
 goog.require('Msgs');
+goog.require('cvox.AbstractEarcons');
 
 /**
  * @constructor
@@ -24,6 +25,30 @@ Tutorial = function() {
   this.page = sessionStorage['tutorial_page_pos'] !== undefined ?
       sessionStorage['tutorial_page_pos'] : 0;
 };
+/**
+ * @param {Node} container
+ * @private
+ */
+Tutorial.buildEarconPage_ = function(container) {
+  for (var earconId in cvox.EarconDescription) {
+    var msgid = cvox.EarconDescription[earconId];
+    var earconElement = document.createElement('p');
+    earconElement.innerText = Msgs.getMsg(msgid);
+    earconElement.setAttribute('tabindex', 0);
+    var prevEarcon;
+    var playEarcon = function(earcon) {
+      if (prevEarcon) {
+        chrome.extension.getBackgroundPage()['cvox']['ChromeVox'][
+            'earcons']['cancelEarcon'](prevEarcon);
+      }
+      chrome.extension.getBackgroundPage()['cvox']['ChromeVox'][
+          'earcons']['playEarcon'](earcon);
+      prevEarcon = earcon;
+    }.bind(this, earconId);
+    earconElement.addEventListener('focus', playEarcon, false);
+    container.appendChild(earconElement);
+  }
+};
 
 /**
  * Data for the ChromeVox tutorial consisting of a list of pages,
@@ -75,6 +100,11 @@ Tutorial.PAGES = [
     { msgid: 'tutorial_chromebook_ctrl_forward', chromebookOnly: true }
   ],
   [
+    { msgid: 'tutorial_earcon_page_title', heading: true },
+    { msgid: 'tutorial_earcon_page_body' },
+    { custom: Tutorial.buildEarconPage_ }
+  ],
+  [
     { msgid: 'tutorial_learn_more_heading', heading: true },
     { msgid: 'tutorial_learn_more' },
     { msgid: 'next_command_reference',
@@ -185,6 +215,9 @@ Tutorial.prototype = {
           chrome.windows.create({url: evt.target.href});
           return false;
         }, false);
+      } else if (pageElement.custom) {
+        element = document.createElement('div');
+        pageElement.custom(element);
       } else {
         element = document.createElement('p');
       }