[uber page] restore settings search

BUG=109883
TEST=none

Review URL: https://chromiumcodereview.appspot.com/9221005

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

4 files changed, 65 insertions, 50 deletions

diff --git a/chrome/browser/resources/options2/browser_options.html b/chrome/browser/resources/options2/browser_options.html
index c196b25..1b90e19 100644
--- a/chrome/browser/resources/options2/browser_options.html
+++ b/chrome/browser/resources/options2/browser_options.html
@@ -1,4 +1,10 @@
 <div id="browserPage" class="page" hidden>
+  <span id="browser-options-search-field-container"
+      class="search-field-container">
+    <input id="search-field" type="search"
+        i18n-values="placeholder:searchPlaceholder;aria-label:searchPlaceholder"
+        incremental>
+  </span>
   <h1 i18n-content="browserPage"></h1>
   <section id="sync-section">
     <h3 i18n-content="syncSection"></h3>
diff --git a/chrome/browser/resources/options2/options_page.css b/chrome/browser/resources/options2/options_page.css
index ff237fc..9965415 100644
--- a/chrome/browser/resources/options2/options_page.css
+++ b/chrome/browser/resources/options2/options_page.css
@@ -81,9 +81,16 @@ input[type='text']:disabled {
   position: fixed;
 }
 
+.search-field-container {
+  position: absolute;
+  left: 400px;
+  right: 400px;
+}
+
 #search-field {
   font-size: inherit;
   margin: 0;
+  width: 160px;
 }
 
 /*
diff --git a/chrome/browser/resources/options2/search_page.html b/chrome/browser/resources/options2/search_page.html
index 5379ca5f..479a3f1 100644
--- a/chrome/browser/resources/options2/search_page.html
+++ b/chrome/browser/resources/options2/search_page.html
@@ -1,4 +1,9 @@
 <div id="searchPage" class="page" hidden>
+  <span id="search-page-search-field-container" class="search-field-container">
+    <!-- When the search page is activated, the search field is taken from the
+         Browser Options page, and moved here.
+    -->
+  </span>
   <h1 i18n-content="searchPage"></h1>
   <div id="searchPageNoMatches">
     <p i18n-content="searchPageNoMatches"></p>
diff --git a/chrome/browser/resources/options2/search_page.js b/chrome/browser/resources/options2/search_page.js
index f2b1c21..e408767 100644
--- a/chrome/browser/resources/options2/search_page.js
+++ b/chrome/browser/resources/options2/search_page.js
@@ -129,14 +129,7 @@ cr.define('options', function() {
 
       var self = this;
 
-      // Create a search field element.
-      // TODO(csilv): Move this into the HTML.
-      var searchField = document.createElement('input');
-      searchField.id = 'search-field';
-      searchField.type = 'search';
-      searchField.incremental = true;
-      searchField.placeholder = localStrings.getString('searchPlaceholder');
-      searchField.setAttribute('aria-label', searchField.placeholder);
+      var searchField = $('search-field');
       this.searchField = searchField;
 
       // Handle search events. (No need to throttle, WebKit's search field
@@ -238,21 +231,11 @@ cr.define('options', function() {
         // sections (ie titles, button strips).  We do this before changing
         // the page visibility to avoid excessive re-draw.
         for (var i = 0, childDiv; childDiv = page.pageDiv.children[i]; i++) {
-          if (childDiv.classList.contains('displaytable')) {
-            childDiv.setAttribute('searching', active ? 'true' : 'false');
-            for (var j = 0, subDiv; subDiv = childDiv.children[j]; j++) {
-              if (active) {
-                if (subDiv.tagName != 'SECTION')
-                  subDiv.classList.add('search-hidden');
-              } else {
-                subDiv.classList.remove('search-hidden');
-              }
-            }
-          } else {
-            if (active)
+          if (active) {
+            if (childDiv.tagName != 'SECTION')
               childDiv.classList.add('search-hidden');
-            else
-              childDiv.classList.remove('search-hidden');
+          } else {
+            childDiv.classList.remove('search-hidden');
           }
         }
 
@@ -265,7 +248,11 @@ cr.define('options', function() {
 
       if (active) {
         this.setSearchText_(this.searchField.value);
+        $('search-page-search-field-container').appendChild(this.searchField);
+        this.searchField.focus();
       } else {
+        $('browser-options-search-field-container').appendChild(
+            this.searchField);
         // After hiding all page content, remove any search results.
         this.unhighlightMatches_();
         this.removeSearchBubbles_();
@@ -304,7 +291,6 @@ cr.define('options', function() {
       }
 
       var foundMatches = false;
-      var bubbleControls = [];
 
       // Remove any prior search results.
       this.unhighlightMatches_();
@@ -320,33 +306,24 @@ cr.define('options', function() {
       var regEx = new RegExp('(' + 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, pageMatch, childDiv, length;
+      var page, length;
       var pagesToSearch = this.getSearchablePages_();
       for (var key in pagesToSearch) {
         page = pagesToSearch[key];
-        pageMatch = false;
-        if (searchText.length) {
-          pageMatch = this.performReplace_(regEx, replaceString, page.tab);
-        }
-        if (pageMatch)
-          foundMatches = true;
-        var elements = page.pageDiv.querySelectorAll('.displaytable > section');
+        var elements = page.pageDiv.querySelectorAll('section');
         for (var i = 0, node; node = elements[i]; i++) {
-          if (pageMatch)
-            node.classList.remove('search-hidden');
-          else
-            node.classList.add('search-hidden');
+          node.classList.add('search-hidden');
         }
       }
 
+      var bubbleControls = [];
+
       if (searchText.length) {
         // Search all top-level sections for anchored string matches.
         for (var key in pagesToSearch) {
           page = pagesToSearch[key];
           var elements =
-              page.pageDiv.querySelectorAll('.displaytable > section');
+              page.pageDiv.querySelectorAll('section');
           for (var i = 0, node; node = elements[i]; i++) {
             if (this.performReplace_(regEx, replaceString, node)) {
               node.classList.remove('search-hidden');
@@ -362,18 +339,10 @@ cr.define('options', function() {
         for (var key in subPagesToSearch) {
           page = subPagesToSearch[key];
           if (this.performReplace_(regEx, replaceString, page.pageDiv)) {
-            // Reveal the section for this search result.
-            section = page.associatedSection;
-            if (section)
-              section.classList.remove('search-hidden');
-
-            // Identify any controls that should have bubbles.
-            var controls = page.associatedControls;
-            if (controls) {
-              length = controls.length;
-              for (var i = 0; i < length; i++)
-                bubbleControls.push(controls[i]);
-            }
+            this.revealAssociatedSections_(page);
+
+            bubbleControls =
+                bubbleControls.concat(this.getAssociatedControls_(page));
 
             foundMatches = true;
           }
@@ -396,6 +365,34 @@ cr.define('options', function() {
     },
 
     /**
+     * Reveal the associated section for |subpage|, as well as the one for its
+     * |parentPage|, and its |parentPage|'s |parentPage|, etc.
+     * @private
+     */
+    revealAssociatedSections_: function(subpage) {
+      for (var page = subpage; page; page = page.parentPage) {
+        var section = page.associatedSection;
+        if (section)
+          section.classList.remove('search-hidden');
+      }
+    },
+
+    /**
+     * @return {!Array.<HTMLElement>} all the associated controls for |subpage|,
+     * including |subpage.associatedControls| as well as any controls on parent
+     * pages that are indirectly necessary to get to the subpage.
+     * @private
+     */
+    getAssociatedControls_: function(subpage) {
+      var controls = [];
+      for (var page = subpage; page; page = page.parentPage) {
+        if (page.associatedControls)
+          controls = controls.concat(page.associatedControls);
+      }
+      return controls;
+    },
+
+    /**
      * 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.