Use modes to switch cvox panel between collapsed, menus, focused, and tutorial

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

Index: chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
diff --git a/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js b/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
index f7a7a31030813a1df6d780912f83570afdd63aa0..2a8b32cf64ebf032765145b482c954e237ee95d7 100644
--- a/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
+++ b/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
@@ -25,6 +25,16 @@ 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() {
@@ -46,6 +56,9 @@ Panel.init = function() {
   /** @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>}
@@ -125,15 +138,15 @@ Panel.init = function() {
  */
 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';
@@ -222,7 +235,7 @@ Panel.exec = function(command) {
 Panel.onEnableMenus = function() {
   Panel.menusEnabled_ = true;
   $('menus_button').disabled = false;
-  $('triangle').style.display = '';
+  $('triangle').hidden = false;
 };
 
 /**
@@ -231,7 +244,38 @@ Panel.onEnableMenus = function() {
 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);
 };
 
 /**
@@ -252,9 +296,7 @@ Panel.onOpenMenus = function(opt_event, opt_activateMenuTitle) {
     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();
@@ -378,8 +420,7 @@ Panel.onSearch = function() {
   Panel.pendingCallback_ = null;
   Panel.searching_ = true;
   Panel.updateFromPrefs();
-
-  window.location = '#focus';
+  Panel.setMode(Panel.Mode.FOCUSED);
 
   ISearchUI.get(Panel.searchInput_);
 };
@@ -535,6 +576,11 @@ Panel.onMouseUp = function(event) {
  * @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;
 
@@ -590,8 +636,7 @@ 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 = '';
     }
@@ -605,13 +650,15 @@ 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';
 };
 
@@ -633,7 +680,13 @@ 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) {
@@ -647,7 +700,7 @@ Panel.closeMenusAndRestoreFocus = function() {
     Panel.clearMenus();
 
     // Make sure we're not in full-screen mode.
-    window.location = '#';
+    Panel.setMode(Panel.Mode.COLLAPSED);
 
     this.activeMenu_ = null;
   });
@@ -659,11 +712,7 @@ Panel.closeMenusAndRestoreFocus = function() {
 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();
 };
@@ -686,9 +735,7 @@ Panel.onTutorialPrevious = function() {
  * 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() {