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

chrome/browser/resources/options/options_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() {
   /////////////////////////////////////////////////////////////////////////////
   // OptionsPage class:
 
   /**
    * Base class for options page.
    * @constructor
    * @param {string} name Options page name, also defines id of the div element
    *     containing the options view and the name of options page navigation bar
    *     item as name+'PageNav'.
    * @param {string} title Options page title, used for navigation bar
    * @extends {EventTarget}
    */
   function OptionsPage(name, title, pageDivName) {
     this.name = name;
     this.title = title;
     this.pageDivName = pageDivName;
     this.pageDiv = $(this.pageDivName);
     this.tab = null;
     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;
 
   /**
    * Shows a registered page. This handles both top-level pages and sub-pages.
    * @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();
+      }
+    }
   };
 
   /**
    * Called on load. Dispatch the URL hash to the given page's handleHash
    * function.
    * @param {string} pageName The string name of the (registered) options page.
    * @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);
   };
 
   /**
    * Shows a registered Overlay page.
    * @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;
     }
   };
 
   /**
    * 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();
     }
   };
 
   /**
    * 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
         // parent is not changing visibility, update the banner explicitly.
         pageInfo.parentPage.updateManagedBannerVisibility();
       }
     }
   };
 
   /**
@@ skipping 19 matching lines @@
     tab.classList.add('active-tab');
     $(tab.getAttribute('tab-contents')).classList.add('active-tab-contents');
     this.activeNavTab = tab;
   };
 
   /**
    * Registers new options page.
    * @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';
     pageNav.className = 'navbar-item';
     pageNav.setAttribute('pageName', page.name);
     pageNav.textContent = page.title;
     pageNav.tabIndex = 0;
     pageNav.onclick = function(event) {
       OptionsPage.showPageByName(this.getAttribute('pageName'));
     };
     pageNav.onkeypress = function(event) {
       // Enter or space
       if (event.keyCode == 13 || event.keyCode == 32) {
         OptionsPage.showPageByName(this.getAttribute('pageName'));
       }
     };
     var navbar = $('navbar');
     navbar.appendChild(pageNav);
     page.tab = pageNav;
     page.initializePage();
   };
 
   /**
    * Registers a new Sub tab page.
    * @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;
     subPage.initializePage();
   };
 
   /**
    * Registers a new Overlay page.
    * @param {OptionsPage} page Page to register, must be a class derived from
    * OptionsPage.
    */
   OptionsPage.registerOverlay = function(page) {
-    OptionsPage.registeredOverlayPages_[page.name] = page;
+    this.registeredOverlayPages[page.name] = page;
     page.tab = undefined;
     page.isOverlay = true;
     page.initializePage();
   };
 
   /**
    * Callback for window.onpopstate.
    * @param {Object} data State data pushed into history.
    */
   OptionsPage.setState = function(data) {
     if (data && data.pageName) {
-      OptionsPage.showPageByName(data.pageName);
+      this.showPageByName(data.pageName);
     }
   };
 
   /**
    * Initializes the complete options page.  This will cause
    * all C++ handlers to be invoked to do final setup.
    */
   OptionsPage.initialize = function() {
     chrome.send('coreOptionsInitialize');
     this.initialized_ = true;
 
     // Set up the overlay sheet. Clicks on the visible part of the parent page
     // 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();
     }
   };
 
   /**
    * Re-initializes the C++ handlers if necessary. This is called if the
    * handlers are torn down and recreated but the DOM may not have been (in
    * which case |initialize| won't be called again). If |initialize| hasn't been
    * called, this does nothing (since it will be later, once the DOM has
    * finished loading).
@@ skipping 45 matching lines @@
      * Sets page visibility.
      */
     set visible(visible) {
       if ((this.visible && visible) || (!this.visible && !visible))
         return;
 
       if (visible) {
         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');
 
           this.updateManagedBannerVisibility();
 
           // Recent webkit change no longer allows url change from "chrome://".
           window.history.pushState({pageName: this.name}, this.title);
         }
         if (this.tab) {
           this.tab.classList.add('navbar-item-selected');
         }
       } else {
         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');
         }
         if (this.tab) {
           this.tab.classList.remove('navbar-item-selected');
         }
       }
 
       cr.dispatchPropertyChange(this, 'visible', visible, !visible);
     },
 
     /**
      * Handles a hash value in the URL (such as bar in
      * chrome://options/foo#bar). Called on page load. By default, this shows
      * an overlay that matches the hash name, but can be overriden by individual
      * OptionsPage subclasses to get other behavior.
      * @param {string} hash The hash value.
      */
     handleHash: function(hash) {
       OptionsPage.showOverlay(hash);
     },
   };
 
   // Export
   return {
     OptionsPage: OptionsPage
   };
 
 });