Use PageManager in About page

chrome/browser/resources/help/help_page.js

-// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Copyright 2014 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.
 
-<include src="../uber/uber_utils.js">
+cr.define('help', function() {
+  var Page = cr.ui.pageManager.Page;
+  var PageManager = cr.ui.pageManager.PageManager;
 
-cr.define('help', function() {
   /**
-   * Encapsulated handling of the help page.
+   * Encapsulated handling of the About page. Called 'help' internally to avoid
+   * confusion with generic AboutUI (about:memory, about:sandbox, etc.).
    */
-  function HelpPage() {}
+  function HelpPage() {
+    Page.call(this, 'help', loadTimeData.getString('aboutTitle'),
+              'help-page');
+  }
 
   cr.addSingletonGetter(HelpPage);
 
   HelpPage.prototype = {
-    __proto__: help.HelpBasePage.prototype,
+    __proto__: Page.prototype,
 
     /**
      * True if after update powerwash button should be displayed.
      * @private
      */
     powerwashAfterUpdate_: false,
 
     /**
-     * List of the channels names.
+     * List of the channel names.
      * @private
      */
     channelList_: ['dev-channel', 'beta-channel', 'stable-channel'],
 
     /**
-     * Bubble for error messages and notifications.
-     * @private
-     */
-    bubble_: null,
-
-    /**
      * Name of the channel the device is currently on.
      * @private
      */
     currentChannel_: null,
 
     /**
      * Name of the channel the device is supposed to be on.
      * @private
      */
     targetChannel_: null,
 
-    /**
-     * Perform initial setup.
-     */
-    initialize: function() {
-      help.HelpBasePage.prototype.initialize.call(this, 'help-page');
-
-      var self = this;
-
-      uber.onContentFrameLoaded();
-
-      // Set the title.
-      uber.setTitle(loadTimeData.getString('aboutTitle'));
+    /** @override */
+    initializePage: function() {
+      Page.prototype.initializePage.call(this);
 
       $('product-license').innerHTML = loadTimeData.getString('productLicense');
       if (cr.isChromeOS) {
         $('product-os-license').innerHTML =
             loadTimeData.getString('productOsLicense');
       }
 
       var productTOS = $('product-tos');
       if (productTOS)
         productTOS.innerHTML = loadTimeData.getString('productTOS');
@@ skipping 16 matching lines @@
       this.maybeSetOnClick_($('relaunch'), function() {
         chrome.send('relaunchNow');
       });
       if (cr.isChromeOS) {
         this.maybeSetOnClick_($('relaunch-and-powerwash'), function() {
           chrome.send('relaunchAndPowerwash');
         });
 
         this.channelTable_ = {
           'stable-channel': {
-              'name': loadTimeData.getString('stable'),
-              'label': loadTimeData.getString('currentChannelStable'),
+            'name': loadTimeData.getString('stable'),
+            'label': loadTimeData.getString('currentChannelStable'),
           },
           'beta-channel': {
-              'name': loadTimeData.getString('beta'),
-              'label': loadTimeData.getString('currentChannelBeta')
+            'name': loadTimeData.getString('beta'),
+            'label': loadTimeData.getString('currentChannelBeta')
           },
           'dev-channel': {
-              'name': loadTimeData.getString('dev'),
-              'label': loadTimeData.getString('currentChannelDev')
+            'name': loadTimeData.getString('dev'),
+            'label': loadTimeData.getString('currentChannelDev')
           }
         };
       }
 
+      var self = this;
       var channelChanger = $('channel-changer');
       if (channelChanger) {
         channelChanger.onchange = function(event) {
           self.setChannel_(event.target.value, false);
         };
       }
 
       if (cr.isChromeOS) {
-        help.ChannelChangePage.getInstance().initialize();
-        this.registerOverlay(help.ChannelChangePage.getInstance());
+        // Add event listener for the close button when shown as an overlay.
+        if ($('about-done')) {
+          $('about-done').addEventListener('click', function() {
+            PageManager.closeOverlay();
+          });
+        }
 
-        cr.ui.overlay.setupOverlay($('overlay-container'));
-        cr.ui.overlay.globalInitialization();
-        $('overlay-container').addEventListener('cancelOverlay', function() {
-          self.closeOverlay();
-        });
         $('change-channel').onclick = function() {
-          self.showOverlay('channel-change-page');
+          PageManager.showPageByName('channel-change-page', false);
         };
 
         var channelChangeDisallowedError = document.createElement('div');
         channelChangeDisallowedError.className = 'channel-change-error-bubble';
 
         var channelChangeDisallowedIcon = document.createElement('div');
         channelChangeDisallowedIcon.classList.add('help-page-icon-large');
         channelChangeDisallowedIcon.classList.add('channel-change-error-icon');
         channelChangeDisallowedError.appendChild(channelChangeDisallowedIcon);
 
         var channelChangeDisallowedText = document.createElement('div');
         channelChangeDisallowedText.className = 'channel-change-error-text';
         channelChangeDisallowedText.textContent =
             loadTimeData.getString('channelChangeDisallowedMessage');
         channelChangeDisallowedError.appendChild(channelChangeDisallowedText);
 
         $('channel-change-disallowed-icon').onclick = function() {
-            self.showBubble_(channelChangeDisallowedError,
-                             $('help-container'),
-                             $('channel-change-disallowed-icon'),
-                             cr.ui.ArrowLocation.TOP_END);
+          PageManager.showBubble(channelChangeDisallowedError,
+                                 $('channel-change-disallowed-icon'),
+                                 $('help-container'),
+                                 cr.ui.ArrowLocation.TOP_END);
         };
       }
 
-      cr.ui.FocusManager.disableMouseFocusOnButtons();
-      help.HelpFocusManager.getInstance().initialize();
-
       // Attempt to update.
       chrome.send('onPageLoaded');
     },
 
-    /**
-     * Shows the bubble.
-     * @param {HTMLDivElement} content The content of the bubble.
-     * @param {HTMLElement} target The element at which the bubble points.
-     * @param {HTMLElement} domSibling The element after which the bubble is
-     *     added to the DOM.
-     * @param {cr.ui.ArrowLocation} location The arrow location.
-     * @private
-     */
-    showBubble_: function(content, domSibling, target, location) {
-      if (!cr.isChromeOS)
-        return;
-      this.hideBubble_();
-      var bubble = new cr.ui.AutoCloseBubble;
-      bubble.anchorNode = target;
-      bubble.domSibling = domSibling;
-      bubble.arrowLocation = location;
-      bubble.content = content;
-      bubble.show();
-      this.bubble_ = bubble;
+    /** @override */
+    didHidePage: function() {
+      if ($('more-info-container').className == 'visible')

[Dan Beam, 2014/08/06 18:30:54]

nit: $('more-info-container').classList.contains('visible') if possible

[michaelpg, 2014/08/06 21:58:18]

Done.

+        this.toggleMoreInfo_();
     },
 
     /**
-     * Hides the bubble.
-     * @private
-     */
-    hideBubble_: function() {
-      if (!cr.isChromeOS)
-        return;
-      if (this.bubble_)
-        this.bubble_.hide();
-    },
-
-    /**
      * Toggles the visible state of the 'More Info' section.
      * @private
      */
     toggleMoreInfo_: function() {
       var moreInfo = $('more-info-container');
       var visible = moreInfo.className == 'visible';
       moreInfo.className = visible ? '' : 'visible';
       moreInfo.style.height = visible ? '' : moreInfo.scrollHeight + 'px';
       moreInfo.addEventListener('webkitTransitionEnd', function(event) {
         $('more-info-expander').textContent = visible ?
             loadTimeData.getString('showMoreInfo') :
             loadTimeData.getString('hideMoreInfo');
       });
     },
 
     /**
      * Assigns |method| to the onclick property of |el| if |el| exists.
+     * @param {HTMLElement} el The element on which to set the click handler.
+     * @param {function} method The click handler.
      * @private
      */
     maybeSetOnClick_: function(el, method) {
       if (el)
         el.onclick = method;
     },
 
     /**
-     * @private
+     * @param {string} state The state of the update.
+     * private
      */
     setUpdateImage_: function(state) {
       $('update-status-icon').className = 'help-page-icon ' + state;
     },
 
     /**
      * @return {boolean} True, if new channel switcher UI is used,
      *    false otherwise.
      * @private
      */
     isNewChannelSwitcherUI_: function() {
       return !loadTimeData.valueExists('disableNewChannelSwitcherUI');
     },
 
     /**
-     * @return {boolean} True if target and current channels are not
-     *     null and not equals
+     * @return {boolean} True if target and current channels are not null and
+     *     not equal.
      * @private
      */
     channelsDiffer_: function() {
       var current = this.currentChannel_;
       var target = this.targetChannel_;
       return (current != null && target != null && current != target);
     },
 
     /**
+     * @param {string} status The status of the update.
+     * @param {string} message Failure message to display.
      * @private
      */
     setUpdateStatus_: function(status, message) {
       if (cr.isMac &&
           $('update-status-message') &&
           $('update-status-message').hidden) {
         // Chrome has reached the end of the line on this system. The
         // update-obsolete-system message is displayed. No other auto-update
         // status should be displayed.
         return;
@@ skipping 49 matching lines @@
         container.hidden = status == 'disabled';
         $('relaunch').hidden =
             (status != 'nearly_updated') || !relaunchAndPowerwashHidden;
 
         if (!cr.isMac)
           $('update-percentage').hidden = status != 'updating';
       }
     },
 
     /**
+     * @param {number} progress The percent completion.
      * @private
      */
     setProgress_: function(progress) {
       $('update-percentage').innerHTML = progress + '%';
     },
 
     /**
+     * @param {string} message The allowed connection types message.
      * @private
      */
     setAllowedConnectionTypesMsg_: function(message) {
       $('allowed-connection-types-message').innerText = message;
     },
 
     /**
+     * @param {boolean} visible Whether to show the message.
      * @private
      */
     showAllowedConnectionTypesMsg_: function(visible) {
       $('allowed-connection-types-message').hidden = !visible;
     },
 
     /**
+     * @param {string} state The promote state to set.
      * @private
      */
     setPromotionState_: function(state) {
       if (state == 'hidden') {
         $('promote').hidden = true;
       } else if (state == 'enabled') {
         $('promote').disabled = false;
         $('promote').hidden = false;
       } else if (state == 'disabled') {
         $('promote').disabled = true;
         $('promote').hidden = false;
       }
     },
 
     /**
+     * @param {boolean} obsolete Whether the system is obsolete.
      * @private
      */
     setObsoleteSystem_: function(obsolete) {
       if (cr.isMac && $('update-obsolete-system-container')) {
         $('update-obsolete-system-container').hidden = !obsolete;
       }
     },
 
     /**
+     * @param {boolean} endOfTheLine Train has rolled into the station.

[Dan Beam, 2014/08/06 18:30:54]

Whether the train has rolled into the station.

[michaelpg, 2014/08/06 21:58:18]

Done.

      * @private
      */
     setObsoleteSystemEndOfTheLine_: function(endOfTheLine) {
       if (cr.isMac &&
           $('update-obsolete-system-container') &&
           !$('update-obsolete-system-container').hidden &&
           $('update-status-message')) {
         $('update-status-message').hidden = endOfTheLine;
         if (endOfTheLine) {
           this.setUpdateImage_('failed');
         }
       }
     },
 
     /**
+     * @param {string} version Version of Chrome OS.
      * @private
      */
     setOSVersion_: function(version) {
       if (!cr.isChromeOS)
         console.error('OS version unsupported on non-CrOS');
 
       $('os-version').parentNode.hidden = (version == '');
       $('os-version').textContent = version;
     },
 
     /**
+     * @param {string} firmware Firmware on Chrome OS.
      * @private
      */
     setOSFirmware_: function(firmware) {
       if (!cr.isChromeOS)
         console.error('OS firmware unsupported on non-CrOS');
 
       $('firmware').parentNode.hidden = (firmware == '');
       $('firmware').textContent = firmware;
     },
 
     /**
      * Updates name of the current channel, i.e. the name of the
      * channel the device is currently on.
-     * @param {string} channel The name of the current channel
+     * @param {string} channel The name of the current channel.
      * @private
      */
     updateCurrentChannel_: function(channel) {
       if (this.channelList_.indexOf(channel) < 0)
         return;
       $('current-channel').textContent = loadTimeData.getStringF(
           'currentChannel', this.channelTable_[channel].label);
       this.currentChannel_ = channel;
       help.ChannelChangePage.updateCurrentChannel(channel);
     },
 
     /**
-     * |enabled| is true if the release channel can be enabled.
+     * @param {boolean} enabled True if the release channel can be enabled.
      * @private
      */
     updateEnableReleaseChannel_: function(enabled) {
       this.updateChannelChangerContainerVisibility_(enabled);
       $('change-channel').disabled = !enabled;
       $('channel-change-disallowed-icon').hidden = enabled;
     },
 
     /**
      * Sets the device target channel.
-     * @param {string} channel The name of the target channel
-     * @param {boolean} isPowerwashAllowed True iff powerwash is allowed
+     * @param {string} channel The name of the target channel.
+     * @param {boolean} isPowerwashAllowed True iff powerwash is allowed.
      * @private
      */
     setChannel_: function(channel, isPowerwashAllowed) {
       this.powerwashAfterUpdate_ = isPowerwashAllowed;
       this.targetChannel_ = channel;
       chrome.send('setChannel', [channel, isPowerwashAllowed]);
       $('channel-change-confirmation').hidden = false;
       $('channel-change-confirmation').textContent = loadTimeData.getStringF(
           'channel-changed', this.channelTable_[channel].name);
     },
@@ skipping 68 matching lines @@
   };
 
   HelpPage.setOSVersion = function(version) {
     HelpPage.getInstance().setOSVersion_(version);
   };
 
   HelpPage.setOSFirmware = function(firmware) {
     HelpPage.getInstance().setOSFirmware_(firmware);
   };
 
-  HelpPage.showOverlay = function(name) {
-    HelpPage.getInstance().showOverlay(name);
-  };
-
-  HelpPage.cancelOverlay = function() {
-    HelpPage.getInstance().closeOverlay();
-  };
-
-  HelpPage.getTopmostVisiblePage = function() {
-    return HelpPage.getInstance().getTopmostVisiblePage();
-  };
-
   HelpPage.updateIsEnterpriseManaged = function(isEnterpriseManaged) {
     if (!cr.isChromeOS)
       return;
     help.ChannelChangePage.updateIsEnterpriseManaged(isEnterpriseManaged);
   };
 
   HelpPage.updateCurrentChannel = function(channel) {
     if (!cr.isChromeOS)
       return;
     HelpPage.getInstance().updateCurrentChannel_(channel);
@@ skipping 19 matching lines @@
 
   HelpPage.updateChannelChangePageContainerVisibility = function() {
     HelpPage.getInstance().updateChannelChangePageContainerVisibility_();
   };
 
   // Export
   return {
     HelpPage: HelpPage
   };
 });
-
-/**
- * onload listener to initialize the HelpPage.
- */
-window.onload = function() {
-  help.HelpPage.getInstance().initialize();
-};