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 if they will be hidden.
+    for (var name in this.registeredPages) {
+      var page = this.registeredPages[name];
+      if (name != pageName && 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;
     }
-    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 if they were shown.
+    for (var name in this.registeredPages) {
+      var page = this.registeredPages[name];
+      if (name == pageName && page.didShowPage)
+        page.didShowPage();
+    }
   };
 
   /**
    * 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.onKeyDown_ = function(e) {
     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.onKeyDown_);
         } 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.onKeyDown_);
         } 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
   };
 
 });