Improve ChromeVox incremental search experience.

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 8010c301245f166e4cbb23e8041a1cf8f575696d..a8721e0d34c633abddd74051c2ee567e393c8b6a 100644
--- a/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
+++ b/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
@@ -37,6 +37,12 @@ Panel.init = function() {
   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 */
@@ -73,6 +79,13 @@ Panel.init = function() {
    */
   this.pendingCallback_ = null;
 
+  /**
+   * True if we're currently in incremental search mode.
+   * @type {boolean}
+   * @private
+   */
+  this.searching_ = false;
+
   Panel.updateFromPrefs();
 
   Msgs.addTranslatedMessagesToDom(document);
@@ -94,12 +107,25 @@ Panel.init = function() {
 
   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';
@@ -308,10 +334,12 @@ Panel.onOpenMenus = function(opt_event) {
 Panel.onSearch = function() {
   Panel.clearMenus();
   Panel.pendingCallback_ = null;
+  Panel.searching_ = true;
+  Panel.updateFromPrefs();
 
   window.location = '#focus';
 
-  ISearchUI.get($('search'));
+  ISearchUI.get(Panel.searchInput_);
 };
 
 /**
@@ -463,6 +491,21 @@ Panel.onKeyDown = function(event) {
 };
 
 /**
+ * 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() {