Implemented new channel switcher UI.

chrome/browser/resources/help/help.js

 // Copyright (c) 2012 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() {
   /**
    * Encapsulated handling of the help page.
    */
   function HelpPage() {}
 
   cr.addSingletonGetter(HelpPage);
 
   HelpPage.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /**
+     * True if after update powerwash button should be displayed.
+     * @private
+     */
+    powerwashAfterUpdate_: false,
+
+    /**
+     * List of the channels 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.
+     * @private
+     */
+    targetChannel_: null,
+
+    /**
      * Perform initial setup.
      */
     initialize: function() {
+      var self = this;
+
       uber.onContentFrameLoaded();
 
       // Set the title.
       var title = loadTimeData.getString('helpTitle');
       uber.invokeMethodOnParent('setTitle', {title: title});
 
       $('product-license').innerHTML = loadTimeData.getString('productLicense');
       if (cr.isChromeOS) {
         $('product-os-license').innerHTML =
             loadTimeData.getString('productOsLicense');
@@ skipping 12 matching lines @@
 
       this.maybeSetOnClick_($('more-info-expander'),
           this.toggleMoreInfo_.bind(this));
 
       this.maybeSetOnClick_($('promote'), function() {
         chrome.send('promoteUpdater');
       });
       this.maybeSetOnClick_($('relaunch'), function() {
         chrome.send('relaunchNow');
       });
+      this.maybeSetOnClick_($('relaunch-and-powerwash'), function() {
+        chrome.send('relaunchAndPowerwash');
+      });
+
+      this.channelTable_ = {
+          'stable-channel': {
+              'name': loadTimeData.getString('stable'),
+              'label': loadTimeData.getString('currentChannelStable'),
+          },
+          'beta-channel': {
+              'name': loadTimeData.getString('beta'),
+              'label': loadTimeData.getString('currentChannelBeta')
+          },
+          'dev-channel': {
+              'name': loadTimeData.getString('dev'),
+              'label': loadTimeData.getString('currentChannelDev')
+          }
+      };
 
       var channelChanger = $('channel-changer');
       if (channelChanger) {
-        this.channelName_ = {
-            'stable-channel': loadTimeData.getString('stable'),
-            'beta-channel': loadTimeData.getString('beta'),
-            'dev-channel': loadTimeData.getString('dev')
+        channelChanger.onchange = function(event) {
+          self.setChannel_(event.target.value, false);
         };
-        var self = this;
-        channelChanger.onchange = function(event) {
-          self.setReleaseChannel_(event.target.value);
-        }
       }
 
+      cr.ui.overlay.globalInitialization();
+      cr.ui.overlay.setupOverlay($('overlay-container'));
+      $('overlay-container').addEventListener('cancelOverlay', function() {
+        self.showOverlay_(null);
+      });
+
+      $('change-channel').onclick = function() {
+        self.showOverlay_($('channel-change-page'));
+      };
+
+      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);
+      };
+
       // 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;
+    },
+
+    /**
+     * 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.
      * @private
      */
     maybeSetOnClick_: function(el, method) {
       if (el)
         el.onclick = method;
     },
 
     /**
      * @private
      */
     setUpdateImage_: function(state) {
-      $('update-status-icon').className = 'update-icon ' + state;
+      $('update-status-icon').className = 'help-page-icon ' + state;
     },
 
     /**
+     * Returns current overlay.
+     * @return {HTMLElement} Current overlay
+     * @private
+     */
+    getCurrentOverlay_: function() {
+      return document.querySelector('#overlay .page.showing');
+    },
+
+    /**
+     * @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
+     * @private
+     */
+    channelsDiffer_: function() {
+      var current = this.currentChannel_;
+      var target = this.targetChannel_;
+      return (current != null && target != null && current != target);
+    },
+
+    /**
      * @private
      */
     setUpdateStatus_: function(status, message) {
       if (status == 'checking') {
         this.setUpdateImage_('working');
         $('update-status-message').innerHTML =
             loadTimeData.getString('updateCheckStarted');
       } else if (status == 'updating') {
         this.setUpdateImage_('working');
-        $('update-status-message').innerHTML =
-            loadTimeData.getString('updating');
+        if (this.channelsDiffer_()) {
+          $('update-status-message').innerHTML =
+              loadTimeData.getStringF('updatingChannelSwitch',
+                                      this.channelTable_[channel].label);
+        } else {
+          $('update-status-message').innerHTML =
+              loadTimeData.getStringF('updating');
+        }
       } else if (status == 'nearly_updated') {
         this.setUpdateImage_('up-to-date');
-        $('update-status-message').innerHTML =
-            loadTimeData.getString('updateAlmostDone');
+        if (this.channelsDiffer_()) {
+          $('update-status-message').innerHTML =
+              loadTimeData.getString('successfulChannelSwitch');
+        } else {
+          $('update-status-message').innerHTML =
+              loadTimeData.getString('updateAlmostDone');
+        }
       } else if (status == 'updated') {
         this.setUpdateImage_('up-to-date');
         $('update-status-message').innerHTML =
             loadTimeData.getString('upToDate');
       } else if (status == 'failed') {
         this.setUpdateImage_('failed');
         $('update-status-message').innerHTML = message;
       }
 
       var container = $('update-status-container');
       if (container) {
         container.hidden = status == 'disabled';
         $('relaunch').hidden = status != 'nearly_updated';
 
+        // It's allowed to do powerwash only for customer devices,
+        // when user explicitly decides to update to a more stable
+        // channel.
+        $('relaunch-and-powerwash').hidden =
+            !this.powerwashAfterUpdate_ || status != 'nearly_updated';
+
         if (!cr.isMac)
           $('update-percentage').hidden = status != 'updating';
       }
     },
 
     /**
      * @private
      */
     setProgress_: function(progress) {
       $('update-percentage').innerHTML = progress + '%';
@@ skipping 50 matching lines @@
       $('firmware').textContent = firmware;
     },
 
     /**
      * Sets the given overlay to show. This hides whatever overlay is currently
      * showing, if any.
      * @param {HTMLElement} node The overlay page to show. If null, all
      *     overlays are hidden.
      */
     showOverlay_: function(node) {
-      var currentlyShowingOverlay =
-        document.querySelector('#overlay .page.showing');
+      var currentlyShowingOverlay = this.getCurrentOverlay_();
       if (currentlyShowingOverlay)
         currentlyShowingOverlay.classList.remove('showing');
-
       if (node)
         node.classList.add('showing');
-      $('overlay').hidden = !node;
+      $('overlay-container').hidden = !node;
+    },
+
+    /**
+     * 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
+     * @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.
      * @private
      */
     updateEnableReleaseChannel_: function(enabled) {
-      $('channel-changer-container').hidden = !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
      * @private
      */
-    updateSelectedChannel_: function(value) {
-      var options = $('channel-changer').querySelectorAll('option');
-      for (var i = 0; i < options.length; i++) {
-        var option = options[i];
-        if (option.value == value)
-          option.selected = true;
-      }
+    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);
     },
 
     /**
-     * @private
-     */
-    setReleaseChannel_: function(channel) {
-      chrome.send('setReleaseTrack', [channel]);
-      $('channel-change-confirmation').hidden = false;
-      $('channel-change-confirmation').textContent = loadTimeData.getStringF(
-          'channel-changed', this.channelName_[channel]);
-    },
-
-    /**
      * Sets the value of the "Build Date" field of the "More Info" section.
      * @param {string} buildDate The date of the build.
      * @private
      */
     setBuildDate_: function(buildDate) {
       $('build-date-container').classList.remove('empty');
       $('build-date').textContent = buildDate;
     },
+
+    /**
+     * Updates channel-change-page-container visibility according to
+     * internal state.
+     * @private
+     */
+    updateChannelChangePageContainerVisibility_: function() {
+      if (!this.isNewChannelSwitcherUI_()) {
+        $('channel-change-page-container').hidden = true;
+        return;
+      }
+      $('channel-change-page-container').hidden =
+          !help.ChannelChangePage.isPageReady();
+    },
+
+    /**
+     * Updates channel-changer dropdown visibility if |visible| is
+     * true and new channel switcher UI is disallowed.
+     * @param {boolean} visible True if channel-changer should be
+     *     displayed, false otherwise.
+     * @private
+     */
+    updateChannelChangerContainerVisibility_: function(visible) {
+      if (this.isNewChannelSwitcherUI_()) {
+        $('channel-changer').hidden = true;
+        return;
+      }
+      $('channel-changer').hidden = !visible;
+    },
   };
 
   HelpPage.setUpdateStatus = function(status, message) {
     HelpPage.getInstance().setUpdateStatus_(status, message);
   };
 
   HelpPage.setProgress = function(progress) {
     HelpPage.getInstance().setProgress_(progress);
   };
 
@@ skipping 19 matching lines @@
   };
 
   HelpPage.setOSFirmware = function(firmware) {
     HelpPage.getInstance().setOSFirmware_(firmware);
   };
 
   HelpPage.showOverlay = function(node) {
     HelpPage.getInstance().showOverlay_(node);
   };
 
-  HelpPage.updateSelectedChannel = function(channel) {
-    HelpPage.getInstance().updateSelectedChannel_(channel);
+  HelpPage.cancelOverlay = function() {
+    HelpPage.getInstance().showOverlay_(null);
+  };
+
+  HelpPage.updateIsEnterpriseManaged = function(isEnterpriseManaged) {
+    if (!cr.isChromeOS)
+      return;
+    help.ChannelChangePage.updateIsEnterpriseManaged(isEnterpriseManaged);
+  };
+
+  HelpPage.updateCurrentChannel = function(channel) {
+    if (!cr.isChromeOS)
+      return;
+    HelpPage.getInstance().updateCurrentChannel_(channel);
+  };
+
+  HelpPage.updateTargetChannel = function(channel) {
+    if (!cr.isChromeOS)
+      return;
+    help.ChannelChangePage.updateTargetChannel(channel);
   };
 
   HelpPage.updateEnableReleaseChannel = function(enabled) {
     HelpPage.getInstance().updateEnableReleaseChannel_(enabled);
   };
 
-  HelpPage.setReleaseChannel = function(channel) {
-    HelpPage.getInstance().setReleaseChannel_(channel);
+  HelpPage.setChannel = function(channel, isPowerwashAllowed) {
+    HelpPage.getInstance().setChannel_(channel, isPowerwashAllowed);
   };
 
   HelpPage.setBuildDate = function(buildDate) {
     HelpPage.getInstance().setBuildDate_(buildDate);
-  }
+  };
+
+  HelpPage.updateChannelChangePageContainerVisibility = function() {
+    HelpPage.getInstance().updateChannelChangePageContainerVisibility_();
+  };
 
   // Export
   return {
     HelpPage: HelpPage
   };
 });
 
 /**
  * onload listener to initialize the HelpPage.
  */
 window.onload = function() {
   help.HelpPage.getInstance().initialize();
+  help.ChannelChangePage.getInstance().initialize();
 };