Initial draft of ChromeVox Next tutorial.

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

 // Copyright 2015 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 The ChromeVox panel and menus.
  */
 
 goog.provide('Panel');
 
 goog.require('ISearchUI');
 goog.require('Msgs');
 goog.require('PanelCommand');
 goog.require('PanelMenu');
 goog.require('PanelMenuItem');
+goog.require('Tutorial');
 goog.require('cvox.ChromeVoxKbHandler');
 goog.require('cvox.CommandStore');
 
 /**
  * Class to manage the panel.
  * @constructor
  */
 Panel = function() {
 };
 
@@ skipping 53 matching lines @@
    */
   this.pendingCallback_ = null;
 
   /**
    * True if we're currently in incremental search mode.
    * @type {boolean}
    * @private
    */
   this.searching_ = false;
 
+  /**
+   * @type {Tutorial}
+   * @private
+   */
+  this.tutorial_ = new Tutorial();
+
   Panel.updateFromPrefs();
 
   Msgs.addTranslatedMessagesToDom(document);
 
   window.addEventListener('storage', function(event) {
     if (event.key == 'brailleCaptions') {
       Panel.updateFromPrefs();
     }
   }, false);
 
   window.addEventListener('message', function(message) {
     var command = JSON.parse(message.data);
     Panel.exec(/** @type {PanelCommand} */(command));
   }, false);
 
   $('menus_button').addEventListener('mousedown', Panel.onOpenMenus, false);
   $('options').addEventListener('click', Panel.onOptions, false);
   $('close').addEventListener('click', Panel.onClose, false);
 
+  $('tutorial_next').addEventListener('click', Panel.onTutorialNext, false);
+  $('tutorial_previous').addEventListener(
+      'click', Panel.onTutorialPrevious, false);
+  $('close_tutorial').addEventListener('click', Panel.onCloseTutorial, false);
+
   document.addEventListener('keydown', Panel.onKeyDown, false);
   document.addEventListener('mouseup', Panel.onMouseUp, false);
 
   Panel.searchInput_.addEventListener('blur', Panel.onSearchInputBlur, false);
 };
 
 /**
  * Update the display based on prefs.
  */
 Panel.updateFromPrefs = function() {
@@ skipping 65 matching lines @@
       break;
     case PanelCommandType.DISABLE_MENUS:
       Panel.onDisableMenus();
       break;
     case PanelCommandType.OPEN_MENUS:
       Panel.onOpenMenus(undefined, command.data);
       break;
     case PanelCommandType.SEARCH:
       Panel.onSearch();
       break;
+    case PanelCommandType.TUTORIAL:
+      Panel.onTutorial();
+      break;
   }
 };
 
 /**
  * Enable the ChromeVox Menus.
  */
 Panel.onEnableMenus = function() {
   Panel.menusEnabled_ = true;
   $('menus_button').disabled = false;
   $('triangle').style.display = '';
@@ skipping 260 matching lines @@
 };
 
 /**
  * Called when the user releases the mouse button. If it's anywhere other
  * than on the menus button, close the menus and return focus to the page,
  * and if the mouse was released over a menu item, execute that item's
  * callback.
  * @param {Event} event The mouse event.
  */
 Panel.onMouseUp = function(event) {
+  if (!Panel.activeMenu_)
+    return;
+
   var target = event.target;
   while (target && !target.classList.contains('menu-item')) {
     // Allow the user to click and release on the menu button and leave
-    // the menu button. Otherwise releasing the mouse anywhere else will
-    // close the menu.
+    // the menu button.
     if (target.id == 'menus_button')
       return;
 
     target = target.parentElement;
   }
 
   if (target && Panel.activeMenu_)
     Panel.pendingCallback_ = Panel.activeMenu_.getCallbackForElement(target);
   Panel.closeMenusAndRestoreFocus();
 };
 
 /**
  * Called when a key is pressed. Handle arrow keys to navigate the menus,
  * Esc to close, and Enter/Space to activate an item.
  * @param {Event} event The key event.
  */
 Panel.onKeyDown = function(event) {
+  if (!Panel.activeMenu_)
+    return;
+
   if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
     return;
 
   switch (event.key) {
     case 'ArrowLeft':
       Panel.advanceActiveMenuBy(-1);
       break;
     case 'ArrowRight':
       Panel.advanceActiveMenuBy(1);
       break;
@@ skipping 63 matching lines @@
 };
 
 /**
  * Close the menus and restore focus to the page. If a menu item's callback
  * was queued, execute it once focus is restored.
  */
 Panel.closeMenusAndRestoreFocus = function() {
   // Make sure we're not in full-screen mode.
   window.location = '#';
 
+  this.activeMenu_ = null;
+
   var bkgnd =
       chrome.extension.getBackgroundPage()['ChromeVoxState']['instance'];
   bkgnd['endExcursion'](Panel.pendingCallback_);
 };
 
+/**
+ * Open the tutorial.
+ */
+Panel.onTutorial = function() {
+  var bkgnd =
+      chrome.extension.getBackgroundPage()['ChromeVoxState']['instance'];
+  bkgnd['startExcursion']();
+
+  // Change the url fragment to 'fullscreen', which signals the native
+  // host code to make the window fullscreen, revealing the menus.
+  window.location = '#fullscreen';
+
+  $('main').style.display = 'none';
+  $('menus_background').style.display = 'none';
+  $('tutorial').style.display = 'block';
+
+  Panel.tutorial_.firstPage();
+};
+
+/**
+ * Move to the next page in the tutorial.
+ */
+Panel.onTutorialNext = function() {
+  Panel.tutorial_.nextPage();
+};
+
+/**
+ * Move to the previous page in the tutorial.
+ */
+Panel.onTutorialPrevious = function() {
+  Panel.tutorial_.previousPage();
+};
+
+/**
+ * Close the tutorial.
+ */
+Panel.onCloseTutorial = function() {
+  $('main').style.display = 'block';
+  $('tutorial').style.display = 'none';
+  Panel.closeMenusAndRestoreFocus();
+};
+
 window.addEventListener('load', function() {
   Panel.init();
 }, false);
 
 window.addEventListener('hashchange', function() {
   if (location.hash == '#fullscreen' || location.hash == '#focus') {
     this.originalStickyState_ = cvox.ChromeVox.isStickyPrefOn;
     cvox.ChromeVox.isStickyPrefOn = false;
   } else {
     cvox.ChromeVox.isStickyPrefOn = this.originalStickyState_;
   }
 }, false);