Use PageManager in About page

chrome/browser/resources/help/channel_change_page.js

 // Copyright 2013 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('help', function() {
+  var Page = cr.ui.pageManager.Page;
+  var PageManager = cr.ui.pageManager.PageManager;
+
   /**
    * Encapsulated handling of the channel change overlay.
    */
-  function ChannelChangePage() {}
+  function ChannelChangePage() {
+    Page.call(this, 'channel-change-page', '', 'channel-change-page');
+  }
 
   cr.addSingletonGetter(ChannelChangePage);
 
   ChannelChangePage.prototype = {
-    __proto__: help.HelpBasePage.prototype,
+    __proto__: Page.prototype,
 
     /**
      * Name of the channel the device is currently on.
      * @private
      */
     currentChannel_: null,
 
     /**
      * Name of the channel the device is supposed to be on.
      * @private
@@ skipping 14 matching lines @@
 
     /**
      * List of the possible ui states.
      * @private
      */
     uiClassTable_: ['selected-channel-requires-powerwash',
                     'selected-channel-requires-delayed-update',
                     'selected-channel-good',
                     'selected-channel-unstable'],
 
-    /**
-     * Perform initial setup.
-     */
-    initialize: function() {
-      help.HelpBasePage.prototype.initialize.call(this, 'channel-change-page');
+    /** override */
+    initializePage: function() {
+      Page.prototype.initializePage.call(this);
+
+      $('channel-change-page-cancel-button').onclick =
+        PageManager.closeOverlay.bind(PageManager);
 
       var self = this;
-
-      $('channel-change-page-cancel-button').onclick = function() {
-        help.HelpPage.cancelOverlay();
-      };
-
       var options = this.getAllChannelOptions_();
       for (var i = 0; i < options.length; i++) {
         var option = options[i];
         option.onclick = function() {
           self.updateUI_(this.value);
         };
       }
 
       $('channel-change-page-powerwash-button').onclick = function() {
         self.setChannel_(self.getSelectedOption_(), true);
-        help.HelpPage.cancelOverlay();
+        PageManager.closeOverlay();
       };
 
       $('channel-change-page-change-button').onclick = function() {
         self.setChannel_(self.getSelectedOption_(), false);
-        help.HelpPage.cancelOverlay();
+        PageManager.closeOverlay();
       };
     },
 
-    onBeforeShow: function() {
-      help.HelpBasePage.prototype.onBeforeShow.call(this);
+    /** @override */
+    didShowPage: function() {
       if (this.targetChannel_ != null)
         this.selectOption_(this.targetChannel_);
       else if (this.currentChannel_ != null)
         this.selectOption_(this.currentChannel_);
       var options = this.getAllChannelOptions_();
       for (var i = 0; i < options.length; i++) {
         var option = options[i];
         if (option.checked)
           option.focus();
       }
     },
 
     /**
      * Returns the list of all radio buttons responsible for channel selection.
      * @return {Array.<HTMLInputElement>} Array of radio buttons
      * @private
      */
     getAllChannelOptions_: function() {
-      return $('channel-change-page').querySelectorAll('input[type="radio"]');
+      return this.pageDiv.querySelectorAll('input[type="radio"]');
     },
 
     /**
      * Returns value of the selected option.
      * @return {string} Selected channel name or null, if neither
      *     option is selected.
      * @private
      */
     getSelectedOption_: function() {
       var options = this.getAllChannelOptions_();
@@ skipping 50 matching lines @@
           // Warn user about unstable channel.
           newOverlayClass = 'selected-channel-unstable';
         } else {
           // Switching to the less stable channel.
           newOverlayClass = 'selected-channel-good';
         }
       }
 
       // Switch to the new UI state.
       for (var i = 0; i < this.uiClassTable_.length; i++)
-          $('channel-change-page').classList.remove(this.uiClassTable_[i]);
+        this.pageDiv.classList.remove(this.uiClassTable_[i]);
 
       if (newOverlayClass)
-        $('channel-change-page').classList.add(newOverlayClass);
+        this.pageDiv.classList.add(newOverlayClass);
     },
 
     /**
      * Sets the device target channel.
      * @param {string} channel The name of the target channel
      * @param {boolean} isPowerwashAllowed True iff powerwash is allowed
      * @private
      */
     setChannel_: function(channel, isPowerwashAllowed) {
       this.targetChannel_ = channel;
@@ skipping 69 matching lines @@
 
   ChannelChangePage.isPageReady = function() {
     return ChannelChangePage.getInstance().isPageReady_();
   };
 
   // Export
   return {
     ChannelChangePage: ChannelChangePage
   };
 });