dom-ui settings: Implement search capability for top level panels....

chrome/browser/resources/options/search_page.js

 // Copyright (c) 2010 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 the search page.
+   * @constructor
    */
   function SearchPage() {
     OptionsPage.call(this, 'search', templateData.searchPage, 'searchPage');
+    this.searchActive = false;
   }
 
   cr.addSingletonGetter(SearchPage);
 
   SearchPage.prototype = {
     // Inherit SearchPage from OptionsPage.
     __proto__: OptionsPage.prototype,
 
-    // Initialize SearchPage.
+    /**
+     * 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');
       searchField.id = 'searchField';
       searchField.type = 'search';
       searchField.setAttribute('autosave', 'org.chromium.options.search');
       searchField.setAttribute('results', '10');
+      searchField.setAttribute('incremental', 'true');
 
       // Replace the contents of the navigation tab with the search field.
-      this.tab.textContent = '';
-      this.tab.appendChild(searchField);
+      self.tab.textContent = '';
+      self.tab.appendChild(searchField);
+
+      // Handle search events. (No need to throttle, WebKit's search field
+      // will do that automatically.)
+      searchField.onsearch = function(e) {
+        self.setSearchText_(this.value);
+      };
     },
-  };
 
-  SearchPage.updateForEmptySearch = function() {
-    $('searchPageInfo').classList.remove('hidden');
-    $('searchPageNoMatches').classList.add('hidden');
-  };
+    /**
+     * Called after this page has shown.
+     */
+    didShowPage: function() {
+      this.setSearchActive_(true);

[James Hawkins, 2010/12/02 23:11:44]

It looks like setSearchActive_ is synonymous with the page being visible. Can we
just use `var active = amIVisible()`?

[csilv, 2010/12/02 23:40:21]

setSearchActive_() performs a bunch of dom manipulation as the search page goes
in/out of active state.  Does that answer your question...?

+    },
 
-  SearchPage.updateForNoSearchResults = function(message) {
-    $('searchPageInfo').classList.add('hidden');
-    $('searchPageNoMatches').classList.remove('hidden');
-  };
+    /**
+     * Called before this page will be hidden.
+     */
+    willHidePage: function() {

[James Hawkins, 2010/12/02 23:11:44]

You're using willHidePage here but didShowPage above; do we want didHidePage
here, and if not, what's the diff?

[csilv, 2010/12/02 23:40:21]

The reason is that when search is made active, we want to get the notification
after the dom has been changed for all pages.  When search is made inactive, we
want that notification before the dom has changed for all pages.  This allows us
to apply search specific changes to the dom, and then to undo those changes at
the appropriate time.

+      this.setSearchActive_(false);
+    },
 
-  SearchPage.updateForSuccessfulSearch = function(enable) {
-    $('searchPageInfo').classList.add('hidden');
-    $('searchPageNoMatches').classList.add('hidden');
+    /**
+     * Update the UI to reflect whether we are in a search state.
+     * @param {boolean} active True if we are on the search page.
+     * @private
+     */
+    setSearchActive_: function(active) {
+      // It's fine to exit if search wasn't active and we're not going to
+      // activate it now.
+      if (!this.searchActive_ && !active)
+        return;
+
+      if (this.searchActive_ != active) {
+        this.searchActive_ = active;
+        if (active) {
+          // Reset the search criteria, effectively hiding all the sections.
+          this.setSearchText_('');
+        } else {
+          // Just wipe out any active search text since it's no longer relevant.
+          $('searchField').value = '';
+        }
+      }
+
+      var page, length, childDiv;
+
+      for (var name in OptionsPage.registeredPages) {
+        if (name == this.name)
+          continue;
+
+        // Update the visible state of all top-level elements that are not
+        // sections (ie titles, button strips).
+        page = OptionsPage.registeredPages[name];
+        length = page.pageDiv.childNodes.length;
+        for (var i = 0; i < length; i++) {
+          childDiv = page.pageDiv.childNodes[i];
+          if (childDiv.nodeType == 1) {
+            if (active) {
+              if (childDiv.nodeName.toLowerCase() != 'section')
+                childDiv.classList.add('search-hidden');
+            } else {
+                childDiv.classList.remove('search-hidden');
+            }
+          }
+        }
+
+        // Toggle the visibility state of the page.
+        if (active) {
+          // When search is active, remove the 'hidden' tag.  This tag may have
+          // been added by the OptionsPage.
+          page.pageDiv.classList.remove('hidden');
+        } else {
+          page.visible = false;
+        }
+      }
+    },
+
+    /**
+     * Set the current search criteria.
+     * @param {string} text Search text.
+     * @private
+     */
+    setSearchText_: function(text) {
+      if (!this.searchActive_)

[James Hawkins, 2010/12/02 23:11:44]

When can setSearchText_() be called when search is not active?

[csilv, 2010/12/02 23:40:21]

Perhaps never. I need to test whether an explicit set of the search field (ie:
$('searchField').value = '') will cause the onsearch handler to be invoked.  As
long as that handler is not called I can remove this condition.

[csilv, 2010/12/03 00:03:31]

After testing, removed this check, it's not needed.

+        return;
+
+      var searchText = text.toLowerCase();
+      var foundMatches = false;
+
+      // Build a list of pages to search.  Omit the search page.
+      var pagesToSearch = [];
+      for (var name in OptionsPage.registeredPages) {
+        if (name != this.name)
+          pagesToSearch.push(OptionsPage.registeredPages[name]);
+      }
+
+      // Hide all sections.  If the search string matches a title page, show
+      // all sections of that page.
+      for (var key in pagesToSearch) {
+        var page = pagesToSearch[key];
+        var pageTitle = page.title.toLowerCase();
+        // Hide non-sections in each page.
+        for (var i = 0; i < page.pageDiv.childNodes.length; i++) {
+          var childDiv = page.pageDiv.childNodes[i];
+          if (childDiv.nodeType == 1 &&
+              childDiv.nodeName.toLowerCase() == 'section') {
+            if (pageTitle == searchText) {
+              childDiv.classList.remove('search-hidden');
+              foundMatches = true;
+            } else {
+              childDiv.classList.add('search-hidden');
+            }
+          }
+        }
+      }
+
+      // Now search all sections for anchored string matches.
+      if (!foundMatches && searchText.length) {
+        var searchRegEx = new RegExp('\\b' + searchText, 'i');
+        for (var key in pagesToSearch) {
+          var page = pagesToSearch[key];
+          for (var i = 0; i < page.pageDiv.childNodes.length; i++) {
+            var childDiv = page.pageDiv.childNodes[i];
+            if (childDiv.nodeType == 1 &&
+                childDiv.nodeName.toLowerCase() == 'section') {
+              var isMatch = false;
+              var sectionElements = childDiv.getElementsByTagName("*");
+              var length = sectionElements.length;
+              var element;
+              for (var j = 0; j < length; j++) {
+                element = sectionElements[j];
+                if (searchRegEx.test(element.textContent)) {
+                  isMatch = true;
+                  break;
+                }
+              }
+              if (isMatch) {
+                childDiv.classList.remove('search-hidden');
+                foundMatches = true;
+              }
+            }
+          }
+        }
+      }
+
+      // Configure elements on the search results page based on search results.
+      if (searchText.length == 0) {
+        $('searchPageInfo').classList.remove('search-hidden');
+        $('searchPageNoMatches').classList.add('search-hidden');
+      } else if (foundMatches) {
+        $('searchPageInfo').classList.add('search-hidden');
+        $('searchPageNoMatches').classList.add('search-hidden');
+      } else {
+        $('searchPageInfo').classList.add('search-hidden');
+        $('searchPageNoMatches').classList.remove('search-hidden');
+      }
+    }
   };
 
   // Export
   return {
     SearchPage: SearchPage
   };
 
 });