[web-ui settings] Fixes and improvements for settings page searching.

chrome/browser/resources/options/search_page.js

 // Copyright (c) 2011 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.
 
 cr.define('options', function() {
   const OptionsPage = options.OptionsPage;
 
   /**
    * Encapsulated handling of a search bubble.
    * @constructor
@@ skipping 87 matching lines @@
     }
   }
 
   /**
    * Encapsulated handling of the search page.
    * @constructor
    */
   function SearchPage() {
     OptionsPage.call(this, 'search', templateData.searchPageTabTitle,
         'searchPage');
-    this.searchActive = false;
   }
 
   cr.addSingletonGetter(SearchPage);
 
   SearchPage.prototype = {
     // Inherit SearchPage from OptionsPage.
     __proto__: OptionsPage.prototype,
 
     /**
+     * A boolean to prevent recursion. Used by setSearchText_().
+     * @type {Boolean}
+     * @private
+     */
+    insideSetSearchText_: false,
+
+    /**
      * Initialize the page.
      */
     initializePage: function() {
       // Call base class implementation to start preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
       var self = this;
 
       // Create a search field element.
       var searchField = document.createElement('input');
@@ skipping 10 matching lines @@
       self.tab.onclick = self.tab.onkeydown = self.tab.onkeypress = undefined;
       self.tab.tabIndex = -1;
       self.tab.setAttribute('role', '');
 
       // Don't allow the focus on the search navbar. http://crbug.com/77989
       self.tab.onfocus = self.tab.blur;
 
       // Handle search events. (No need to throttle, WebKit's search field
       // will do that automatically.)
       searchField.onsearch = function(e) {
-        self.setSearchText_(SearchPage.canonicalizeQuery(this.value));
+        self.setSearchText_(this.value);
       };
 
       // We update the history stack every time the search field blurs. This way
       // we get a history entry for each search, roughly, but not each letter
       // typed.
       searchField.onblur = function(e) {
         var query = SearchPage.canonicalizeQuery(searchField.value);
         if (!query)
           return;
 
@@ skipping 118 matching lines @@
         this.removeSearchBubbles_();
       }
     },
 
     /**
      * Set the current search criteria.
      * @param {string} text Search text.
      * @private
      */
     setSearchText_: function(text) {
+      // Prevent recursive execution of this method.
+      if (this.insideSetSearchText_) return;
+      this.insideSetSearchText_ = true;
+
+      // Cleanup the search query string.
+      text = SearchPage.canonicalizeQuery(text);
+
+      // Notify listeners about the new search query, some pages may wish to
+      // show/hide elements based on the query.
+      var event = new cr.Event('searchChanged');
+      event.searchText = text;
+      this.dispatchEvent(event);
+
       // Toggle the search page if necessary.
       if (text.length) {
         if (!this.searchActive_)
           OptionsPage.navigateToPage(this.name);
       } else {
         if (this.searchActive_)
           OptionsPage.showDefaultPage();
+
+        this.insideSetSearchText_ = false;
         return;
       }
 
       var foundMatches = false;
       var bubbleControls = [];
 
       // Remove any prior search results.
       this.unhighlightMatches_();
       this.removeSearchBubbles_();
 
@@ skipping 70 matching lines @@
       // Configure elements on the search results page based on search results.
       if (foundMatches)
         $('searchPageNoMatches').classList.add('search-hidden');
       else
         $('searchPageNoMatches').classList.remove('search-hidden');
 
       // Create search balloons for sub-page results.
       length = bubbleControls.length;
       for (var i = 0; i < length; i++)
         this.createSearchBubble_(bubbleControls[i], text);
+
+      // Cleanup the recursion-prevention variable.
+      this.insideSetSearchText_ = false;
     },
 
     /**
      * Performs a string replacement based on a regex and replace string.
      * @param {RegEx} regex A regular expression for finding search matches.
      * @param {String} replace A string to apply the replace operation.
      * @param {Element} element An HTML container element.
      * @returns {Boolean} true if the element was changed.
      * @private
      */
@@ skipping 171 matching lines @@
     // Trim beginning and ending whitespace.
     return text.replace(/^\s+|\s+$/g, '');
   };
 
   // Export
   return {
     SearchPage: SearchPage
   };
 
 });