Use modes to switch cvox panel between collapsed, menus, focused, and 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() {
 };
 
 /**
+ * @enum {string}
+ */
+Panel.Mode = {
+  COLLAPSED: 'collapsed',
+  FOCUSED: 'focused',
+  FULLSCREEN_MENUS: 'menus',
+  FULLSCREEN_TUTORIAL: 'tutorial'

[David Tseng, 2016/10/28 21:24:35]

Is there a non full screen tutorial (and menu)?

[dmazzoni, 2016/10/28 21:29:13]

Nope, the idea was just to make it clear what the purpose of the mode was. I
could do that with a comment instead.

I'd like to add options and keyboard explorer as fullscreen modes too.

[David Tseng, 2016/10/28 23:02:13]

Not really an issue besides the enum values being different.

+};
+
+/**
  * Initialize the panel.
  */
 Panel.init = function() {
   /** @type {Element} @private */
   this.speechContainer_ = $('speech-container');
 
   /** @type {Element} @private */
   this.speechElement_ = $('speech');
 
   /** @type {Element} @private */
   this.brailleContainer_ = $('braille-container');
 
   /** @type {Element} @private */
   this.searchContainer_ = $('search-container');
 
   /** @type {Element} @private */
   this.searchInput_ = $('search');
 
   /** @type {Element} @private */
   this.brailleTableElement_ = $('braille-table');
 
+  /** @type {Panel.Mode} @private */
+  this.mode_ = Panel.Mode.COLLAPSED;
+
   /**
    * The array of top-level menus.
    * @type {!Array<PanelMenu>}
    * @private
    */
   this.menus_ = [];
 
   /**
    * The currently active menu, if any.
    * @type {PanelMenu}
@@ skipping 59 matching lines @@
   document.addEventListener('mouseup', Panel.onMouseUp, false);
 
   Panel.searchInput_.addEventListener('blur', Panel.onSearchInputBlur, false);
 };
 
 /**
  * Update the display based on prefs.
  */
 Panel.updateFromPrefs = function() {
   if (Panel.searching_) {
-    this.speechContainer_.style.display = 'none';
-    this.brailleContainer_.style.display = 'none';
-    this.searchContainer_.style.display = 'block';
+    this.speechContainer_.hidden = true;
+    this.brailleContainer_.hidden = true;
+    this.searchContainer_.hidden = false;
     return;
   }
 
-  this.speechContainer_.style.display = 'block';
-  this.brailleContainer_.style.display = 'block';
-  this.searchContainer_.style.display = 'none';
+  this.speechContainer_.hidden = false;
+  this.brailleContainer_.hidden = false;
+  this.searchContainer_.hidden = true;
 
   if (localStorage['brailleCaptions'] === String(true)) {
     this.speechContainer_.style.visibility = 'hidden';
     this.brailleContainer_.style.visibility = 'visible';
   } else {
     this.speechContainer_.style.visibility = 'visible';
     this.brailleContainer_.style.visibility = 'hidden';
   }
 };
 
@@ skipping 68 matching lines @@
       break;
   }
 };
 
 /**
  * Enable the ChromeVox Menus.
  */
 Panel.onEnableMenus = function() {
   Panel.menusEnabled_ = true;
   $('menus_button').disabled = false;
-  $('triangle').style.display = '';
+  $('triangle').hidden = false;
 };
 
 /**
  * Disable the ChromeVox Menus.
  */
 Panel.onDisableMenus = function() {
   Panel.menusEnabled_ = false;
   $('menus_button').disabled = true;
-  $('triangle').style.display = 'none';
+  $('triangle').hidden = true;
 };
 
 /**
+ * Sets the mode, which determines the size of the panel and what objects
+ *     are shown or hidden.
+ * @param {Panel.Mode} mode The new mode.
+ */
+Panel.setMode = function(mode) {
+  if (this.mode_ == mode)
+    return;
+
+  this.mode_ = mode;

[David Tseng, 2016/10/28 23:02:13]

This is also perhaps a good opportunity to ensure we don't move from certain
modes to others (e.g. tutorial -> menu, focus -> tutorial, or whatever you think
is invalid here).

[dmazzoni, 2016/11/01 22:31:22]

I think I need to figure out how to support the menu
while the tutorial is open, as a follow-up - or else
disable the menu.

In the meantime, I tested those permutations and they
all work fine or at least they leave you in a consistent
state now, which is much better than before so I want
to land this first and keep improving it.

+
+  if (this.mode_ == Panel.Mode.FULLSCREEN_MENUS ||
+      this.mode_ == Panel.Mode.FULLSCREEN_TUTORIAL) {
+    // Change the url fragment to 'fullscreen', which signals the native
+    // host code to make the window fullscreen and give it focus.
+    window.location = '#fullscreen';
+  } else if (this.mode_ == Panel.Mode.FOCUSED) {
+    // // Change the url fragment to 'focus', which signals the native
+    // host code to give the window focus.
+    window.location = '#focus';
+  } else {
+    // Remove the url fragment, which signals the native host code to
+    // collapse the panel to its normal size and cause it to lose focus.
+    window.location = '#';
+  }
+
+  $('main').hidden = (this.mode_ == Panel.Mode.FULLSCREEN_TUTORIAL);
+  $('menus_background').hidden = (this.mode_ != Panel.Mode.FULLSCREEN_MENUS);
+  $('tutorial').hidden = (this.mode_ != Panel.Mode.FULLSCREEN_TUTORIAL);
+};
+
+/**
  * Open / show the ChromeVox Menus.
  * @param {Event=} opt_event An optional event that triggered this.
  * @param {*=} opt_activateMenuTitle Title msg id of menu to open.
  */
 Panel.onOpenMenus = function(opt_event, opt_activateMenuTitle) {
   // Don't open the menu if it's not enabled, such as when ChromeVox Next
   // is not active.
   if (!Panel.menusEnabled_)
     return;
 
   // Eat the event so that a mousedown isn't turned into a drag, allowing
   // users to click-drag-release to select a menu item.
   if (opt_event) {
     opt_event.stopPropagation();
     opt_event.preventDefault();
   }
 
-  // Change the url fragment to 'fullscreen', which signals the native
-  // host code to make the window fullscreen, revealing the menus.
-  window.location = '#fullscreen';
+  Panel.setMode(Panel.Mode.FULLSCREEN_MENUS);
 
   // Clear any existing menus and clear the callback.
   Panel.clearMenus();
   Panel.pendingCallback_ = null;
 
   // Build the top-level menus.
   var jumpMenu = Panel.addMenu('panel_menu_jump');
   var speechMenu = Panel.addMenu('panel_menu_speech');
   var tabsMenu = Panel.addMenu('panel_menu_tabs');
   var chromevoxMenu = Panel.addMenu('panel_menu_chromevox');
@@ skipping 103 matching lines @@
   }
   Panel.activateMenu(selectedMenu);
 };
 
 /** Open incremental search. */
 Panel.onSearch = function() {
   Panel.clearMenus();
   Panel.pendingCallback_ = null;
   Panel.searching_ = true;
   Panel.updateFromPrefs();
-
-  window.location = '#focus';
+  Panel.setMode(Panel.Mode.FOCUSED);
 
   ISearchUI.get(Panel.searchInput_);
 };
 
 /**
  * Clear any previous menus. The menus are all regenerated each time the
  * menus are opened.
  */
 Panel.clearMenus = function() {
   while (this.menus_.length) {
@@ skipping 135 matching lines @@
     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 (event.key == 'Escape' && Panel.mode_ == Panel.Mode.FULLSCREEN_TUTORIAL) {
+    Panel.setMode(Panel.Mode.COLLAPSED);
+    return;
+  }
+
   if (!Panel.activeMenu_)
     return;
 
   if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
     return;
 
   switch (event.key) {
     case 'ArrowLeft':
       Panel.advanceActiveMenuBy(-1);
       break;
@@ skipping 35 matching lines @@
   event.stopPropagation();
 };
 
 /**
  * Called when focus leaves the search input.
  */
 Panel.onSearchInputBlur = function() {
   if (Panel.searching_) {
     if (document.activeElement != Panel.searchInput_ || !document.hasFocus()) {
       Panel.searching_ = false;
-      if (window.location == '#focus')
-        window.location = '#';
+      Panel.setMode(Panel.Mode.COLLAPSED);

[David Tseng, 2016/10/28 21:24:35]

Not equivalent to the removed code.

[dmazzoni, 2016/10/28 21:31:29]

What does setMode do that it shouldn't?

[David Tseng, 2016/10/28 23:02:13]

Previously, we only collapsed if we were focused. Just making sure you meant to
always collapse here.

       Panel.updateFromPrefs();
       Panel.searchInput_.value = '';
     }
   }
 };
 
 /**
  * Open the ChromeVox Options.
  */
 Panel.onOptions = function() {
   var bkgnd =
       chrome.extension.getBackgroundPage()['ChromeVoxState']['instance'];
   bkgnd['showOptionsPage']();
-  window.location = '#';
+  Panel.setMode(Panel.Mode.COLLAPSED);
 };
 
 /**
  * Exit ChromeVox.
  */
 Panel.onClose = function() {
+  // Change the url fragment to 'close', which signals the native code
+  // to exit ChromeVox.
   window.location = '#close';
 };
 
 /**
  * Get the callback for whatever item is currently selected.
  * @return {Function} The callback for the current item.
  */
 Panel.getCallbackForCurrentItem = function() {
   if (this.activeMenu_)
     return this.activeMenu_.getCallbackForCurrentItem();
   return null;
 };
 
 /**
  * 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() {
   // Watch for the next focus event.
   var onFocus = function(desktop, evt) {
     desktop.removeEventListener(chrome.automation.EventType.focus, onFocus);
-    Panel.pendingCallback_ && Panel.pendingCallback_();
+    if (Panel.pendingCallback_) {
+      // Clear it before calling it, in case the callback itself triggers
+      // another pending callback.
+      var pendingCallback = Panel.pendingCallback_;
+      Panel.pendingCallback_ = null;
+      pendingCallback();
+    }
   }.bind(this);
 
   chrome.automation.getDesktop(function(desktop) {
     onFocus = /** @type {function(chrome.automation.AutomationEvent)} */(
         onFocus.bind(this, desktop));
     desktop.addEventListener(chrome.automation.EventType.focus,
                              onFocus,
                              true);
 
     // Make sure all menus are cleared to avoid bogous output when we re-open.
     Panel.clearMenus();
 
     // Make sure we're not in full-screen mode.
-    window.location = '#';
+    Panel.setMode(Panel.Mode.COLLAPSED);
 
     this.activeMenu_ = null;
   });
 };
 
 /**
  * Open the tutorial.
  */
 Panel.onTutorial = function() {
   // 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.setMode(Panel.Mode.FULLSCREEN_TUTORIAL);
 
   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();
+  Panel.setMode(Panel.Mode.COLLAPSED);
 };
 
 window.addEventListener('load', function() {
   Panel.init();
 
   switch (location.search.slice(1)) {
     case 'tutorial':
       Panel.onTutorial();
   }
 }, 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);