webui settings:...

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 74 matching lines @@
         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;
+      var pagesToSearch = this.getSearchablePages_();
+      for (var key in pagesToSearch) {
+        var page = pagesToSearch[key];
+
+        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.
-        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');
+              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) {
-      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]);
-      }
+      // Generate search text is a lowercase version of the input text, with any

[James Hawkins, 2010/12/08 23:30:05]

Something seems grammatically off with this comment sentence.

[csilv, 2010/12/08 23:48:29]

Whoops, indeed!  Done.

+      // problematic characters escaped for use in a regular expression.
+      var searchText =
+          text.toLowerCase().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 
-      // Hide all sections.  If the search string matches a title page, show
-      // all sections of that page.
+      // Generate a regular expression and transform string for searching the
+      // navigation sidebar.
+      var navRegEx = new RegExp('(\\b' + searchText + ')', 'ig');
+      var navTransform = '<span class="search-highlighted">$1</span>';
+
+      // Generate a regular expression and transofmr string for searching the

[James Hawkins, 2010/12/08 23:30:05]

transform

[csilv, 2010/12/08 23:48:29]

Done.

+      // pages.
+      var sectionRegEx =
+          new RegExp('>([^<]*)?(\\b' + searchText + ')([^>]*)?<', 'ig');
+      var sectionTransform = '>$1<span class="search-highlighted">$2</span>$3<';
+
+      // Initialize all sections.  If the search string matches a title page,
+      // show sections for that page.
+      var pagesToSearch = this.getSearchablePages_();
       for (var key in pagesToSearch) {
         var page = pagesToSearch[key];
-        var pageTitle = page.title.toLowerCase();
-        // Hide non-sections in each page.
+        this.unhighlightMatches_(page.tab);
+        this.unhighlightMatches_(page.pageDiv);
+        var pageMatch = false;
+        if (searchText.length) {
+          pageMatch = this.performReplace_(navRegEx, navTransform, page.tab);
+        }
+        if (pageMatch)
+          foundMatches = true;
         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) {
+            if (pageMatch) {
               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');
+      // 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];
             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;
-              }
+                childDiv.nodeName.toLowerCase() == 'section' &&
+                this.performReplace_(sectionRegEx, sectionTransform,
+                    childDiv)) {
+              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');
       }
+    },
+
+    /**
+     * Performs a string replacement based on a regex and transform.
+     * @param {RegEx} regex A regular expression for finding search matches.
+     * @param {String} transform A string to apply the replace operation.
+     * @param {Element} element An HTML container element.
+     * @returns {Boolean} true if the element was changed.
+     * @private
+     */
+    performReplace_: function(regex, transform, element) {
+      var originalHTML = element.innerHTML;
+      var newHTML = originalHTML.replace(regex, transform);
+      if (originalHTML != newHTML) {
+        element.innerHTML = newHTML;
+        return true;
+      } else {
+        return false;
+      }
+    },
+
+    /**
+     * Removes all search highlight tags from a container element.
+     * @param {Element} element An HTML container element.
+     * @private
+     */
+    unhighlightMatches_: function(element) {
+      var regex =
+          new RegExp('<span class="search-highlighted">(.*?)</span>', 'g');
+      element.innerHTML = element.innerHTML.replace(regex, '$1');
+    },
+
+    /**
+     * Build a list of pages to search.  Omit the search page.
+     * @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]);
+      }
+      return pages;
     }
   };
 
   // Export
   return {
     SearchPage: SearchPage
   };
 
 });