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

chrome/browser/resources/options/options_page.js

Index: chrome/browser/resources/options/options_page.js
===================================================================
--- chrome/browser/resources/options/options_page.js	(revision 67802)
+++ chrome/browser/resources/options/options_page.js	(working copy)
@@ -24,20 +24,27 @@
     this.managed = false;
   }
 
-  OptionsPage.registeredPages_ = {};
+  /**
+   * Main level option pages.
+   * @protected
+   */
+  OptionsPage.registeredPages = {};
 
   /**
-   * Pages which are nested under a main page.
+   * Pages which are nested under a main level page.
+   * @protected
    */
-  OptionsPage.registeredSubPages_ = {};
+  OptionsPage.registeredSubPages = {};
 
   /**
    * Pages which are meant to behave like modal dialogs.
+   * @protected
    */
-  OptionsPage.registeredOverlayPages_ = {};
+  OptionsPage.registeredOverlayPages = {};
 
   /**
    * Whether or not |initialize| has been called.
+   * @private
    */
   OptionsPage.initialized_ = false;
 
@@ -46,17 +53,44 @@
    * @param {string} pageName Page name.
    */
   OptionsPage.showPageByName = function(pageName) {
-    for (var name in OptionsPage.registeredPages_) {
-      var page = OptionsPage.registeredPages_[name];
+    // Notify main pages that they will be shown or hidden.
+    for (var name in this.registeredPages) {
+      var page = this.registeredPages[name];
+      if (name == pageName) {
+        if (page.willShowPage)
+          page.willShowPage();
+      } else {
+        if (page.willHidePage)
+          page.willHidePage();
+      }
+    }
+
+    // Update the visibility attribute for main pages.
+    for (var name in this.registeredPages) {
+      var page = this.registeredPages[name];
       page.visible = name == pageName;

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

Can you just move this to the above for loop that has the same loop condition?

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

No.  The reason is that the 'willShowPage' and 'willHidePage' events need to be
sent before changes are made to the DOM.  If we combine the loops, the messages
will be sent in the middle of changes and in the case of SearchPage, this would
be a problem.

[James Hawkins, 2010/12/03 00:02:09]

Can you elucidate the problem?  I'm not understanding the need yet.

     }
-    for (var name in OptionsPage.registeredSubPages_) {
-      var pageInfo = OptionsPage.registeredSubPages_[name];
+
+    // Update the visibility attribute for sub-pages.
+    for (var name in this.registeredSubPages) {
+      var pageInfo = this.registeredSubPages[name];
       var match = name == pageName;
       if (match)
         pageInfo.parentPage.visible = true;
       pageInfo.page.visible = match;
     }
+
+    // Notify main pages that they were shown or hidden.
+    for (var name in this.registeredPages) {
+      var page = this.registeredPages[name];
+      if (name == pageName) {
+        if (page.didShowPage)

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

Is there a way for a page to listen to class changes? This seems involved.  I'm
thinking of something like:

onClassChange = function(change) {
  if (change == remove hidden)
     I'm now visible.
  else if (change == add hidden)
     I'm now hidden.
}

I have no idea if there is a mechanism for this though.

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

Yes, there is a mechanism for this in cr, but that doesn't help me because I
really need to get event notifications before and after all pages have had their
DOM modified.

+          page.didShowPage();
+      } else {
+        if (page.didHidePage)
+          page.didHidePage();
+      }
+    }
   };
 
   /**
@@ -66,9 +100,9 @@
    * @param {string} hash The value of the hash component of the URL.
    */
   OptionsPage.handleHashForPage = function(pageName, hash) {
-    var page = OptionsPage.registeredPages_[pageName];
+    var page = this.registeredPages[pageName];
     if (!page) {
-      page = OptionsPage.registeredSubPages_[pageName].page;
+      page = this.registeredSubPages[pageName].page;
     }
     page.handleHash(hash);
   };
@@ -78,8 +112,8 @@
    * @param {string} overlayName Page name.
    */
   OptionsPage.showOverlay = function(overlayName) {
-    if (OptionsPage.registeredOverlayPages_[overlayName]) {
-      OptionsPage.registeredOverlayPages_[overlayName].visible = true;
+    if (this.registeredOverlayPages[overlayName]) {
+      this.registeredOverlayPages[overlayName].visible = true;
     }
   };
 
@@ -87,20 +121,20 @@
    * Clears overlays (i.e. hide all overlays).
    */
   OptionsPage.clearOverlays = function() {
-     for (var name in OptionsPage.registeredOverlayPages_) {
-       var page = OptionsPage.registeredOverlayPages_[name];
+     for (var name in this.registeredOverlayPages) {
+       var page = this.registeredOverlayPages[name];
        page.visible = false;
      }
   };
 
   /**
-   * Clears overlays if the key event is ESC.
+   * Handle 'keydown' events.
    * @param {Event} e Key event.
    * @private
    */
-  OptionsPage.clearOverlaysOnEsc_ = function(e) {
+  OptionsPage.handleKeyDown_ = function(e) {

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

s/handleKeyDown_/onKeyDown_/

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

Done.

     if (e.keyCode == 27) { // Esc
-      OptionsPage.clearOverlays();
+      this.clearOverlays();
     }
   };
 
@@ -108,8 +142,8 @@
    * Closes any currently-open subpage.
    */
   OptionsPage.closeSubPage = function() {
-    for (var name in OptionsPage.registeredSubPages_) {
-      var pageInfo = OptionsPage.registeredSubPages_[name];
+    for (var name in this.registeredSubPages) {
+      var pageInfo = this.registeredSubPages[name];
       if (pageInfo.page.visible) {
         pageInfo.page.visible = false;
         // Since the managed pref banner lives outside the overlay, and the
@@ -149,7 +183,7 @@
    * @param {OptionsPage} page Page to register.
    */
   OptionsPage.register = function(page) {
-    OptionsPage.registeredPages_[page.name] = page;
+    this.registeredPages[page.name] = page;
     // Create and add new page <li> element to navbar.
     var pageNav = document.createElement('li');
     pageNav.id = page.name + 'PageNav';
@@ -177,7 +211,7 @@
    * @param {OptionsPage} page Page to register.
    */
   OptionsPage.registerSubPage = function(subPage, parentPage) {
-    OptionsPage.registeredSubPages_[subPage.name] = {
+    this.registeredSubPages[subPage.name] = {
         page: subPage, parentPage: parentPage };
     subPage.tab = undefined;
     subPage.isSubPageSheet = true;
@@ -190,7 +224,7 @@
    * OptionsPage.
    */
   OptionsPage.registerOverlay = function(page) {
-    OptionsPage.registeredOverlayPages_[page.name] = page;
+    this.registeredOverlayPages[page.name] = page;
     page.tab = undefined;
     page.isOverlay = true;
     page.initializePage();
@@ -202,7 +236,7 @@
    */
   OptionsPage.setState = function(data) {
     if (data && data.pageName) {
-      OptionsPage.showPageByName(data.pageName);
+      this.showPageByName(data.pageName);
     }
   };
 
@@ -218,7 +252,7 @@
     // should close the overlay, not fall through to the parent page.
     $('subpage-sheet-container').onclick = function(event) {
       if (!$('subpage-sheet').contains(event.target))
-        OptionsPage.closeSubPage();
+        this.closeSubPage();
       event.stopPropagation();
     }
   };
@@ -284,8 +318,7 @@
         this.pageDiv.classList.remove('hidden');
         if (this.isOverlay) {
           $('overlay').classList.remove('hidden');
-          document.addEventListener('keydown',
-                                    OptionsPage.clearOverlaysOnEsc_);
+          document.addEventListener('keydown', OptionsPage.handleKeyDown_);
         } else {
           if (this.isSubPageSheet)
             $('subpage-sheet-container').classList.remove('hidden');
@@ -302,8 +335,7 @@
         this.pageDiv.classList.add('hidden');
         if (this.isOverlay) {
           $('overlay').classList.add('hidden');
-          document.removeEventListener('keydown',
-                                       OptionsPage.clearOverlaysOnEsc_);
+          document.removeEventListener('keydown', OptionsPage.handleKeyDown_);
         } else if (this.isSubPageSheet) {
           $('subpage-sheet-container').classList.add('hidden');
         }