Add a page to explain earcons in the tutorial

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

 // Copyright 2016 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.
 
 /**
  * @fileoverview Introduces users to ChromeVox.
  */
 
 goog.provide('Tutorial');
 
 goog.require('Msgs');
+goog.require('cvox.AbstractEarcons');
 
 /**
  * @constructor
  */
 Tutorial = function() {
   /**
    * The 0-based index of the current page of the tutorial.
    * @type {number}
    * @private
    */
   this.page_;
 
   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'][

[dmazzoni, 2016/11/12 00:03:59]

note: at some point we should probably come up with an abstract interface for
the background page
so this is typesafe

[David Tseng, 2016/11/13 07:32:56]

Acknowledged.

+          'earcons']['cancelEarcon'](prevEarcon);

[dmazzoni, 2016/11/12 00:03:59]

nit: indent by 4

[David Tseng, 2016/11/13 07:32:56]

Done.

+      }
+      chrome.extension.getBackgroundPage()['cvox']['ChromeVox'][
+        'earcons']['playEarcon'](earcon);

[dmazzoni, 2016/11/12 00:03:59]

nit: indent by 4

[David Tseng, 2016/11/13 07:32:56]

Done.

+      prevEarcon = earcon;
+    }.bind(this, earconId);
+    earconElement.addEventListener('focus', playEarcon, false);
+    container.appendChild(earconElement);
+  }
+};
 
 /**
  * Data for the ChromeVox tutorial consisting of a list of pages,
  * each one of which contains a list of objects, where each object has
  * a message ID for some text, and optional attributes indicating if it's
  * a heading, link, text for only one platform, etc.
  *
  * @type Array<Array<Object>>
  */
 Tutorial.PAGES = [
@@ skipping 31 matching lines @@
     { msgid: 'tutorial_menus_heading', heading: true },
     { msgid: 'tutorial_menus' },
     { msgid: 'tutorial_click_next' },
   ],
   [
     { msgid: 'tutorial_chrome_shortcuts_heading', heading: true },
     { msgid: 'tutorial_chrome_shortcuts' },
     { 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',
       link: 'http://www.chromevox.com/next_keyboard_shortcuts.html' },
     { msgid: 'chrome_keyboard_shortcuts',
       link: 'https://support.google.com/chromebook/answer/183101?hl=en' },
     { msgid: 'touchscreen_accessibility',
       link: 'https://support.google.com/chromebook/answer/6103702?hl=en' },
   ],
 ];
@@ skipping 90 matching lines @@
         element = document.createElement('li');
       } else if (pageElement.link) {
         element = document.createElement('a');
         element.href = pageElement.link;
         element.setAttribute('tabindex', 0);
         element.addEventListener('click', function(evt) {
           Panel.closeMenusAndRestoreFocus();
           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');
       }
       if (text)
         element.innerText = text;
       container.appendChild(element);
     }
     if (focus)
       focus.focus();
   },
 
   /** @private */
   finalizeDom_: function() {
     var disableNext = this.page == (Tutorial.PAGES.length - 1);
     var disablePrevious = this.page == 0;
     $('tutorial_next').setAttribute('aria-disabled', disableNext);
     $('tutorial_previous').setAttribute('aria-disabled', disablePrevious);
   },
 
   get page() {
     return this.page_;
   },
 
   set page(val) {
     this.page_ = val;
     sessionStorage['tutorial_page_pos'] = this.page_;
   }
 };