Improve ChromeVox incremental search experience.

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');
 
@@ skipping 19 matching lines @@
   /** @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.brailleTextElement_ = $('braille-text');
 
   /** @type {Element} @private */
   this.brailleCellsElement_ = $('braille-cells');
 
   /**
    * The array of top-level menus.
    * @type {!Array<PanelMenu>}
    * @private
    */
@@ skipping 16 matching lines @@
 
   /**
    * A callback function to be executed to perform the action from selecting
    * a menu item after the menu has been closed and focus has been restored
    * to the page or wherever it was previously.
    * @type {?Function}
    * @private
    */
   this.pendingCallback_ = null;
 
+  /**
+   * True if we're currently in incremental search mode.
+   * @type {boolean}
+   * @private
+   */
+  this.searching_ = false;
+
   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);
 
   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() {
+  if (Panel.searching_) {
+    this.speechContainer_.style.display = 'none';
+    this.brailleContainer_.style.display = 'none';
+    this.searchContainer_.style.display = 'block';
+    return;
+  }
+
+  this.speechContainer_.style.display = 'block';
+  this.brailleContainer_.style.display = 'block';
+  this.searchContainer_.style.display = 'none';
+
   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 188 matching lines @@
       });
 
   // Activate the first menu.
   Panel.activateMenu(Panel.menus_[0]);
 };
 
 /** Open incremental search. */
 Panel.onSearch = function() {
   Panel.clearMenus();
   Panel.pendingCallback_ = null;
+  Panel.searching_ = true;
+  Panel.updateFromPrefs();
 
   window.location = '#focus';
 
-  ISearchUI.get($('search'));
+  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) {
     var menu = this.menus_.pop();
     $('menu-bar').removeChild(menu.menuBarItemElement);
@@ skipping 131 matching lines @@
     default:
       // Don't mark this event as handled.
       return;
   }
 
   event.preventDefault();
   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.updateFromPrefs();
+      Panel.searchInput_.value = '';

[David Tseng, 2016/03/08 21:28:51]

I thought it was kind of interesting to have the previous query saved but it
might make more sense to make this input support history

[dmazzoni, 2016/03/08 21:34:21]

Yeah, we might want to make it more nuanced, but as a first pass this seems a
bit more intuitive to me. It also gives more consistent feedback when you hit
the search key.

+    }
+  }
+};
+
+/**
  * Open the ChromeVox Options.
  */
 Panel.onOptions = function() {
   var bkgnd =
       chrome.extension.getBackgroundPage()['global']['backgroundObj'];
   bkgnd['showOptionsPage']();
   window.location = '#';
 };
 
 /**
@@ skipping 24 matching lines @@
   var bkgnd =
       chrome.extension.getBackgroundPage()['global']['backgroundObj'];
   bkgnd['endExcursion']();
   if (Panel.pendingCallback_)
     Panel.pendingCallback_();
 };
 
 window.addEventListener('load', function() {
   Panel.init();
 }, false);