dom-ui settings: Enable searching for sub-pages...

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
@@ skipping 31 matching lines @@
       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);
       };
     },
 
     /**
+     * @inheritDoc
+     */
+    get sticky() {
+      return true;
+    },
+
+    /**
      * Called after this page has shown.
      */
     didShowPage: function() {
       // This method is called by the Options page after all pages have
       // had their visibilty attribute set.  At this point we can perform the
       // search specific DOM manipulation.
       this.setSearchActive_(true);
     },
 
     /**
@@ skipping 22 matching lines @@
         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.
           $('search-field').value = '';
         }
       }
 
-      var page, length, childDiv;
+      var page, key, length, childDiv, i;

[James Hawkins, 2010/12/23 19:29:44]

Why did you pull these out of scope?

[csilv, 2010/12/23 19:56:24]

Attempts to re-use variables.  There's no benefit to moving key out of scope in
this method, but 'i' will benefit from (some) re-use.

       var pagesToSearch = this.getSearchablePages_();
-      for (var key in pagesToSearch) {
-        var page = pagesToSearch[key];
+      for (key in pagesToSearch) {
+        page = pagesToSearch[key];
 
-        if (!active) {
+        if (!active)
           page.visible = false;
-          this.unhighlightMatches_(page.tab);
-          this.unhighlightMatches_(page.pageDiv);
-        }
 
         // Update the visible state of all top-level elements that are not
         // sections (ie titles, button strips).  We do this before changing
         // the page visibility to avoid excessive re-draw.
         length = page.pageDiv.childNodes.length;
-        for (var i = 0; i < length; i++) {
+        for (i = 0; i < length; i++) {
           childDiv = page.pageDiv.childNodes[i];
           if (childDiv.nodeType == document.ELEMENT_NODE) {
             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');
         }
       }
+
+      // After hiding all page content, remove any highlighted matches.
+      if (!active)
+        this.unhighlightMatches_();
     },
 
     /**
      * Set the current search criteria.
      * @param {string} text Search text.
      * @private
      */
     setSearchText_: function(text) {
       var foundMatches = false;
 
+      // Remove any highlighted matches.
+      this.unhighlightMatches_();
+
       // Generate search text by applying lowercase and escaping any characters
       // that would be problematic for regular expressions.
       var searchText =
           text.toLowerCase().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 
       // Generate a regular expression and replace string for hilighting
       // search terms.
       var regEx = new RegExp('(\\b' + searchText + ')', 'ig');
       var replaceString = '<span class="search-highlighted">$1</span>';
 
       // Initialize all sections.  If the search string matches a title page,
       // show sections for that page.
+      var page, key, pageMatch, childDiv, i;
       var pagesToSearch = this.getSearchablePages_();
-      for (var key in pagesToSearch) {
-        var page = pagesToSearch[key];
-        this.unhighlightMatches_(page.tab);
-        this.unhighlightMatches_(page.pageDiv);
-        var pageMatch = false;
+      for (key in pagesToSearch) {
+        page = pagesToSearch[key];
+        pageMatch = false;
         if (searchText.length) {
           pageMatch = this.performReplace_(regEx, replaceString, page.tab);
         }
         if (pageMatch)
           foundMatches = true;
-        for (var i = 0; i < page.pageDiv.childNodes.length; i++) {
-          var childDiv = page.pageDiv.childNodes[i];
+        for (i = 0; i < page.pageDiv.childNodes.length; i++) {
+          childDiv = page.pageDiv.childNodes[i];
           if (childDiv.nodeType == document.ELEMENT_NODE &&
               childDiv.nodeName.toLowerCase() == 'section') {
             if (pageMatch) {
               childDiv.classList.remove('search-hidden');
             } else {
               childDiv.classList.add('search-hidden');
             }
           }
         }
       }
 
-      // Search all sections for anchored string matches.
       if (searchText.length) {
-        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];
+        // Search all sub-pages, generating an array of top-level sections that
+        // we need to make visible.
+        var subPagesToSearch = this.getSearchableSubPages_();
+        var control, node;
+        for (key in subPagesToSearch) {
+          page = subPagesToSearch[key];
+          if (this.performReplace_(regEx, replaceString, page.pageDiv)) {
+            section = page.associatedSection;
+            if (section)
+              section.classList.remove('search-hidden');
+            controls = page.associatedControls;
+            if (controls) {
+              // TODO(csilv): highlight each control.
+            }
+
+            foundMatches = true;
+          }
+        }
+
+        // Search all top-level sections for anchored string matches.
+        for (key in pagesToSearch) {
+          page = pagesToSearch[key];
+          for (i = 0; i < page.pageDiv.childNodes.length; i++) {
+            childDiv = page.pageDiv.childNodes[i];
             if (childDiv.nodeType == document.ELEMENT_NODE &&
                 childDiv.nodeName.toLowerCase() == 'section' &&
                 this.performReplace_(regEx, replaceString, childDiv)) {
               childDiv.classList.remove('search-hidden');
               foundMatches = true;
             }
           }
         }
       }
 
@@ skipping 55 matching lines @@
           tmp.parentNode.removeChild(tmp);
         } else {
           node = walker.nextNode();
         }
       }
 
       return found;
     },
 
     /**
-     * Removes all search highlight tags from a container element.
-     * @param {Element} element An HTML container element.
+     * Removes all search highlight tags from the document.
      * @private
      */
-    unhighlightMatches_: function(element) {
+    unhighlightMatches_: function() {
       // Find all search highlight elements.
-      var elements = element.querySelectorAll('.search-highlighted');
+      var elements = document.querySelectorAll('.search-highlighted');
 
       // For each element, remove the highlighting.
       var node, parent, i, length = elements.length;
       for (i = 0; i < length; i++) {
         node = elements[i];
         parent = node.parentNode;
 
         // Replace the highlight element with the first child (the text node).
         parent.replaceChild(node.firstChild, node);
 
         // Normalize the parent so that multiple text nodes will be combined.
         parent.normalize();
       }
     },
 
     /**
-     * Builds a list of pages to search.  Omits the search page.
+     * Builds a list of top-level pages to search.  Omits the search page and
+     * all sub-pages.
      * @returns {Array} An array of pages to search.
      * @private
      */
     getSearchablePages_: function() {
-      var pages = [];
-      for (var name in OptionsPage.registeredPages) {
-        if (name != this.name)
-          pages.push(OptionsPage.registeredPages[name]);
+      var name, page, pages = [];
+      for (name in OptionsPage.registeredPages) {
+        if (name != this.name) {
+          page = OptionsPage.registeredPages[name];
+          if (!page.parentPage)
+            pages.push(page);
+        }
+      }
+      return pages;
+    },
+
+    /**
+     * Builds a list of sub-pages (and overlay pages) to search.  Ignore pages
+     * that have no associated controls.
+     * @returns {Array} An array of pages to search.
+     * @private
+     */
+    getSearchableSubPages_: function() {
+      var name, pageInfo, page, pages = [];
+      for (name in OptionsPage.registeredPages) {
+        page = OptionsPage.registeredPages[name];
+        if (page.parentPage && page.associatedSection)
+          pages.push(page);
+      }
+      for (name in OptionsPage.registeredOverlayPages) {
+        page = OptionsPage.registeredOverlayPages[name];
+        if (page.associatedSection && page.pageDiv != undefined)
+          pages.push(page);
       }
       return pages;
     }
   };
 
   // Export
   return {
     SearchPage: SearchPage
   };
 
 });