dom-ui settings:

- enable searching for sub-pages and overlays.
- search-related performance improvements.

BUG=59267
TEST=Verify search find results in sub-pages.  Control(button) highlighting TBD.
Review URL: http://codereview.chromium.org/5992004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@70118 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 200 insertions, 55 deletions

diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
index c8aa731..4d77b26 100644
--- a/chrome/browser/resources/options/options.js
+++ b/chrome/browser/resources/options/options.js
@@ -54,20 +54,25 @@ function load() {
 
   OptionsPage.register(BrowserOptions.getInstance());
   OptionsPage.registerSubPage(SearchEngineManager.getInstance(),
-                              BrowserOptions.getInstance());
+                              BrowserOptions.getInstance(),
+                              [$('defaultSearchManageEnginesButton')]);
   OptionsPage.registerSubPage(StartupPageManager.getInstance(),
-                              BrowserOptions.getInstance());
+                              BrowserOptions.getInstance(),
+                              [$('startupPageManagerButton')]);
   OptionsPage.register(PersonalOptions.getInstance());
   OptionsPage.registerSubPage(AutoFillOptions.getInstance(),
-                              PersonalOptions.getInstance());
+                              PersonalOptions.getInstance(),
+                              [$('autofill-settings')]);
   OptionsPage.registerSubPage(PasswordManager.getInstance(),
-                              PersonalOptions.getInstance());
+                              PersonalOptions.getInstance(),
+                              [$('manage-passwords')]);
   if (cr.isChromeOS) {
     OptionsPage.register(SystemOptions.getInstance());
     OptionsPage.registerSubPage(AboutPage.getInstance(),
                                 SystemOptions.getInstance());
     OptionsPage.registerSubPage(LanguageOptions.getInstance(),
-                                SystemOptions.getInstance());
+                                SystemOptions.getInstance(),
+                                [$('language-button')]);
     OptionsPage.registerSubPage(
         new OptionsPage('languageChewing',
                         localStrings.getString('languageChewingPage'),
@@ -92,16 +97,21 @@ function load() {
   }
   OptionsPage.register(AdvancedOptions.getInstance());
   OptionsPage.registerSubPage(ContentSettings.getInstance(),
-                              AdvancedOptions.getInstance());
+                              AdvancedOptions.getInstance(),
+                              [$('privacyContentSettingsButton')]);
   OptionsPage.registerSubPage(ContentSettingsExceptionsArea.getInstance(),
                               ContentSettings.getInstance());
   OptionsPage.registerSubPage(CookiesView.getInstance(),
-                              ContentSettings.getInstance());
+                              ContentSettings.getInstance(),
+                              [$('privacyContentSettingsButton'),
+                               $('show-cookies-button')]);
   OptionsPage.registerSubPage(FontSettings.getInstance(),
-                              AdvancedOptions.getInstance());
+                              AdvancedOptions.getInstance(),
+                              [$('fontSettingsCustomizeFontsButton')]);
   if (!cr.isWindows && !cr.isMac) {
     OptionsPage.registerSubPage(CertificateManager.getInstance(),
-                                AdvancedOptions.getInstance());
+                                AdvancedOptions.getInstance(),
+                                [$('show-cookies-button')]);
     OptionsPage.registerOverlay(CertificateRestoreOverlay.getInstance());
     OptionsPage.registerOverlay(CertificateBackupOverlay.getInstance());
     OptionsPage.registerOverlay(CertificateEditCaTrustOverlay.getInstance());
@@ -111,7 +121,8 @@ function load() {
   OptionsPage.registerOverlay(AlertOverlay.getInstance());
   OptionsPage.registerOverlay(AutoFillEditAddressOverlay.getInstance());
   OptionsPage.registerOverlay(AutoFillEditCreditCardOverlay.getInstance());
-  OptionsPage.registerOverlay(ClearBrowserDataOverlay.getInstance());
+  OptionsPage.registerOverlay(ClearBrowserDataOverlay.getInstance(),
+                              [$('privacyClearDataButton')]);
   OptionsPage.registerOverlay(EditSearchEngineOverlay.getInstance());
   OptionsPage.registerOverlay(ImportDataOverlay.getInstance());
   OptionsPage.registerOverlay(InstantConfirmOverlay.getInstance());
@@ -119,18 +130,19 @@ function load() {
   if (cr.isChromeOS) {
     OptionsPage.register(AccountsOptions.getInstance());
     OptionsPage.registerSubPage(ProxyOptions.getInstance(),
-                                AdvancedOptions.getInstance());
-    OptionsPage.registerOverlay(new OptionsPage(
-        'detailsInternetPage',
-        'detailsInternetPage',
-        'detailsInternetPage'));
-  }
+                                AdvancedOptions.getInstance(),
+                                [$('proxiesConfigureButton')]);
+    OptionsPage.registerOverlay(new OptionsPage('detailsInternetPage',
+                                                'detailsInternetPage',
+                                                'detailsInternetPage'));
 
-  var languageModifierKeysOverlay = new OptionsPage(
-      'languageCustomizeModifierKeysOverlay',
-      localStrings.getString('languageCustomizeModifierKeysOverlay'),
-      'languageCustomizeModifierKeysOverlay')
-  OptionsPage.registerOverlay(languageModifierKeysOverlay);
+    var languageModifierKeysOverlay = new OptionsPage(
+        'languageCustomizeModifierKeysOverlay',
+        localStrings.getString('languageCustomizeModifierKeysOverlay'),
+        'languageCustomizeModifierKeysOverlay')
+    OptionsPage.registerOverlay(languageModifierKeysOverlay,
+                                [$('modifier-keys-button')]);
+  }
 
   Preferences.getInstance().initialize();
   OptionsPage.initialize();
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index fcf83c1..057e86dd 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -48,9 +48,26 @@ cr.define('options', function() {
    */
   OptionsPage.showPageByName = function(pageName) {
     var targetPage = this.registeredPages[pageName];
+
+    // Determine if the root page is 'sticky', meaning that it
+    // shouldn't change when showing a sub-page.  This can happen for special
+    // pages like Search.
+    var rootPage = null;
+    for (var name in this.registeredPages) {
+      var page = this.registeredPages[name];
+      if (page.visible && !page.parentPage) {
+        rootPage = page;
+        break;
+      }
+    }
+    var isRootPageLocked =
+        rootPage && rootPage.sticky && targetPage.parentPage;
+
     // Notify pages if they will be hidden.
     for (var name in this.registeredPages) {
       var page = this.registeredPages[name];
+      if (!page.parentPage && isRootPageLocked)
+        continue;
       if (page.willHidePage && name != pageName &&
           !page.isAncestorOfPage(targetPage))
         page.willHidePage();
@@ -59,6 +76,8 @@ cr.define('options', function() {
     // Update visibilities to show only the hierarchy of the target page.
     for (var name in this.registeredPages) {
       var page = this.registeredPages[name];
+      if (!page.parentPage && isRootPageLocked)
+        continue;
       page.visible = name == pageName ||
           (document.documentElement.getAttribute('hide-menu') != 'true' &&
            page.isAncestorOfPage(targetPage));
@@ -67,7 +86,10 @@ cr.define('options', function() {
     // Notify pages if they were shown.
     for (var name in this.registeredPages) {
       var page = this.registeredPages[name];
-      if (name == pageName && page.didShowPage)
+      if (!page.parentPage && isRootPageLocked)
+        continue;
+      if (page.didShowPage && (name == pageName ||
+          page.isAncestorOfPage(targetPage)))
         page.didShowPage();
     }
   };
@@ -215,12 +237,39 @@ cr.define('options', function() {
   };
 
   /**
-   * Registers a new Sub tab page.
-   * @param {OptionsPage} page Page to register.
+   * Find an enclosing section for an element if it exists.
+   * @param {Element} element Element to search.
+   * @return {OptionPage} The section element, or null.
+   * @private
    */
-  OptionsPage.registerSubPage = function(subPage, parentPage) {
+  OptionsPage.findSectionForNode_ = function(node) {
+    while (node = node.parentNode) {
+      if (node.nodeName == 'SECTION')
+        return node;
+    }
+    return null;
+  };
+
+  /**
+   * Registers a new Sub-page.
+   * @param {OptionsPage} subPage Sub-page to register.
+   * @param {OptionsPage} parentPage Associated parent page for this page.
+   * @param {Array} associatedControls Array of control elements that lead to
+   *     this sub-page.  The first item is typically a button in a root-level
+   *     page.  There may be additional buttons for nested sub-pages.
+   */
+  OptionsPage.registerSubPage = function(subPage,
+                                         parentPage,
+                                         associatedControls) {
     this.registeredPages[subPage.name] = subPage;
     subPage.parentPage = parentPage;
+    if (associatedControls) {
+      subPage.associatedControls = associatedControls;
+      if (associatedControls.length) {
+        subPage.associatedSection =
+            this.findSectionForNode_(associatedControls[0]);
+      }
+    }
     subPage.tab = undefined;
     subPage.initializePage();
   };
@@ -228,10 +277,19 @@ cr.define('options', function() {
   /**
    * Registers a new Overlay page.
    * @param {OptionsPage} page Page to register, must be a class derived from
-   * OptionsPage.
+   * @param {Array} associatedControls Array of control elements associated with
+   *   this page.
    */
-  OptionsPage.registerOverlay = function(page) {
+  OptionsPage.registerOverlay = function(page,
+                                         associatedControls) {
     this.registeredOverlayPages[page.name] = page;
+    if (associatedControls) {
+      page.associatedControls = associatedControls;
+      if (associatedControls.length) {
+        page.associatedSection =
+            this.findSectionForNode_(associatedControls[0]);
+      }
+    }
     page.tab = undefined;
     page.isOverlay = true;
     page.initializePage();
@@ -321,6 +379,20 @@ cr.define('options', function() {
     parentPage: null,
 
     /**
+     * The section on the parent page that is associated with this page.
+     * Can be null.
+     * @type {Element}
+     */
+    associatedSection: null,
+
+    /**
+     * An array of controls that are associated with this page.  The first
+     * control should be located on a top-level page.
+     * @type {OptionsPage}
+     */
+    associatedControls: null,
+
+    /**
      * Initializes page content.
      */
     initializePage: function() {},
@@ -406,8 +478,8 @@ cr.define('options', function() {
     },
 
     /**
-     * Gets the nesting level of this page.
-     * @return {number} The nesting level of this page (0 for top-level page)
+     * The nesting level of this page.
+     * @type {number} The nesting level of this page (0 for top-level page)
      */
     get nestingLevel() {
       var level = 0;
@@ -420,6 +492,15 @@ cr.define('options', function() {
     },
 
     /**
+     * Whether the page is considered 'sticky', such that it will
+     * remain a top-level page even if sub-pages change.
+     * @type {boolean} True if this page is sticky.
+     */
+    get sticky() {
+      return false;
+    },
+
+    /**
      * Checks whether this page is an ancestor of the given page in terms of
      * subpage nesting.
      * @param {OptionsPage} page
diff --git a/chrome/browser/resources/options/search_page.js b/chrome/browser/resources/options/search_page.js
index 875ddff..965ee73 100644
--- a/chrome/browser/resources/options/search_page.js
+++ b/chrome/browser/resources/options/search_page.js
@@ -49,6 +49,13 @@ cr.define('options', function() {
     },
 
     /**
+     * @inheritDoc
+     */
+    get sticky() {
+      return true;
+    },
+
+    /**
      * Called after this page has shown.
      */
     didShowPage: function() {
@@ -91,21 +98,18 @@ cr.define('options', function() {
         }
       }
 
-      var page, length, childDiv;
       var pagesToSearch = this.getSearchablePages_();
       for (var key in pagesToSearch) {
         var 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;
+        var length = page.pageDiv.childNodes.length;
+        var childDiv;
         for (var i = 0; i < length; i++) {
           childDiv = page.pageDiv.childNodes[i];
           if (childDiv.nodeType == document.ELEMENT_NODE) {
@@ -118,13 +122,16 @@ cr.define('options', function() {
           }
         }
 
-        // 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_();
     },
 
     /**
@@ -135,6 +142,9 @@ cr.define('options', function() {
     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 =
@@ -147,21 +157,20 @@ cr.define('options', function() {
 
       // Initialize all sections.  If the search string matches a title page,
       // show sections for that page.
+      var page, pageMatch, childDiv;
       var pagesToSearch = this.getSearchablePages_();
       for (var key in pagesToSearch) {
-        var page = pagesToSearch[key];
-        this.unhighlightMatches_(page.tab);
-        this.unhighlightMatches_(page.pageDiv);
-        var pageMatch = false;
+        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];
+          childDiv = page.pageDiv.childNodes[i];
           if (childDiv.nodeType == document.ELEMENT_NODE &&
-              childDiv.nodeName.toLowerCase() == 'section') {
+              childDiv.nodeName == 'SECTION') {
             if (pageMatch) {
               childDiv.classList.remove('search-hidden');
             } else {
@@ -171,14 +180,33 @@ cr.define('options', function() {
         }
       }
 
-      // Search all sections for anchored string matches.
       if (searchText.length) {
+        // 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 (var 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 (var key in pagesToSearch) {
-          var page = pagesToSearch[key];
+          page = pagesToSearch[key];
           for (var i = 0; i < page.pageDiv.childNodes.length; i++) {
-            var childDiv = page.pageDiv.childNodes[i];
+            childDiv = page.pageDiv.childNodes[i];
             if (childDiv.nodeType == document.ELEMENT_NODE &&
-                childDiv.nodeName.toLowerCase() == 'section' &&
+                childDiv.nodeName == 'SECTION' &&
                 this.performReplace_(regEx, replaceString, childDiv)) {
               childDiv.classList.remove('search-hidden');
               foundMatches = true;
@@ -252,13 +280,12 @@ cr.define('options', function() {
     },
 
     /**
-     * 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;
@@ -275,15 +302,40 @@ cr.define('options', function() {
     },
 
     /**
-     * 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;
     }