Implemented new channel switcher UI.

chrome/browser/resources/help/help.js

Index: chrome/browser/resources/help/help.js
diff --git a/chrome/browser/resources/help/help.js b/chrome/browser/resources/help/help.js
index 7aa3e52131186f5e84116c6db4521a141e63e397..6ceefe89894272431e9c49b0922172fb3d15b85c 100644
--- a/chrome/browser/resources/help/help.js
+++ b/chrome/browser/resources/help/help.js
@@ -16,9 +16,29 @@ cr.define('help', function() {
     __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,
+
+    /**
      * Perform initial setup.
      */
     initialize: function() {
+      var self = this;
+
       uber.onContentFrameLoaded();
 
       // Set the title.
@@ -51,25 +71,98 @@ cr.define('help', function() {
       this.maybeSetOnClick_($('relaunch'), function() {
         chrome.send('relaunchNow');
       });
+      this.maybeSetOnClick_($('relaunch-and-powerwash'), function() {
+        chrome.send('performFactoryResetRestart');
+      });
+
+      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')
-        };
-        var self = this;
         channelChanger.onchange = function(event) {
-          self.setReleaseChannel_(event.target.value);
-        }
+          self.setChannnel_(event.target.value, false);
+        };
       }
 
+      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'));
+      };
+
+      // Create the DOM tree

[Nikita (slow), 2013/06/21 12:58:04]

nit: drop comment

[ygorshenin1, 2013/06/21 17:24:58]

Done.

+      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) {
+      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 (this.bubble_)
+        this.bubble_.hide();
+    },
+
+    /**
      * Toggles the visible state of the 'More Info' section.
      * @private
      */
@@ -98,7 +191,25 @@ cr.define('help', function() {
      * @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');

[Nikita (slow), 2013/06/21 12:58:04]

Where is this flag defined, passed?

[ygorshenin1, 2013/06/21 17:24:58]

The flag isn't defined. This code is needed because if we'll decide to switch
back to the old switcher, corresponding CL will be as short and as simple as
possible.

On 2013/06/21 12:58:04, Nikita Kostylev wrote:

     },
 
     /**
@@ -130,6 +241,8 @@ cr.define('help', function() {
       if (container) {
         container.hidden = status == 'disabled';
         $('relaunch').hidden = status != 'nearly_updated';
+        $('relaunch-and-powerwash').hidden =

[Nikita (slow), 2013/06/21 12:58:04]

nit: Please add comment to clarify login when we allow doing reboot+powerwash.

[ygorshenin1, 2013/06/21 17:24:58]

Done.

+            !this.powerwashAfterUpdate_ || status != 'updated';
 
         if (!cr.isMac)
           $('update-percentage').hidden = status != 'updating';
@@ -201,44 +314,50 @@ cr.define('help', function() {
      *     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;
     },
 
     /**
-     * |enabled| is true if the release channel can be enabled.
+     * 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
      */
-    updateEnableReleaseChannel_: function(enabled) {
-      $('channel-changer-container').hidden = !enabled;
+    updateCurrentChannel_: function(channel) {
+      if (this.channelList_.indexOf(channel) < 0)
+        return;
+      $('current-channel').textContent = loadTimeData.getStringF(
+          'currentChannel', this.channelTable_[channel].label);
+      help.ChannelChangePage.updateCurrentChannel(channel);
     },
 
     /**
+     * |enabled| is true if the release channel can be enabled.
      * @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;
-      }
+    updateEnableReleaseChannel_: function(enabled) {
+      this.updateChannelChangePageContainerVisibility_(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
      */
-    setReleaseChannel_: function(channel) {
-      chrome.send('setReleaseTrack', [channel]);
+    setChannel_: function(channel, isPowerwashAllowed) {
+      this.powerwashAfterUpdate_ = isPowerwashAllowed;
+      chrome.send('setChannel', [channel, isPowerwashAllowed]);
       $('channel-change-confirmation').hidden = false;
       $('channel-change-confirmation').textContent = loadTimeData.getStringF(
-          'channel-changed', this.channelName_[channel]);
+          'channel-changed', this.channelTable_[channel].name);
     },
 
     /**
@@ -250,6 +369,35 @@ cr.define('help', function() {
       $('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;

[Nikita (slow), 2013/06/21 12:58:04]

Not clear what exactly is left for old UI.

[ygorshenin1, 2013/06/21 17:24:58]

channel-changer div contains old channel switcher UI.

On 2013/06/21 12:58:04, Nikita Kostylev wrote:

+        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) {
@@ -289,21 +437,37 @@ cr.define('help', function() {
     HelpPage.getInstance().showOverlay_(node);
   };
 
-  HelpPage.updateSelectedChannel = function(channel) {
-    HelpPage.getInstance().updateSelectedChannel_(channel);
+  HelpPage.cancelOverlay = function() {
+    HelpPage.getInstance().showOverlay_(null);
+  };
+
+  HelpPage.updateIsEnterpriseManaged = function(isEnterpriseManaged) {
+    help.ChannelChangePage.updateIsEnterpriseManaged(isEnterpriseManaged);
+  };
+
+  HelpPage.updateCurrentChannel = function(channel) {
+    HelpPage.getInstance().updateCurrentChannel_(channel);
+  };
+
+  HelpPage.updateTargetChannel = function(channel) {
+    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 {
@@ -316,4 +480,5 @@ cr.define('help', function() {
  */
 window.onload = function() {
   help.HelpPage.getInstance().initialize();
+  help.ChannelChangePage.getInstance().initialize();
 };