Implemented new channel switcher UI.

chrome/browser/resources/help/channel_change_page.js

Index: chrome/browser/resources/help/channel_change_page.js
diff --git a/chrome/browser/resources/help/channel_change_page.js b/chrome/browser/resources/help/channel_change_page.js
new file mode 100644
index 0000000000000000000000000000000000000000..ccbe8fe0b5a1fadad50742e7550357e5c271c302
--- /dev/null
+++ b/chrome/browser/resources/help/channel_change_page.js
@@ -0,0 +1,244 @@
+// Copyright (c) 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() {
+  function ChannelChangePage() {}
+
+  cr.addSingletonGetter(ChannelChangePage);
+
+  ChannelChangePage.prototype = {

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

nit: Short comment describing usage is missing.

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

Done.

+    __proto__: HTMLDivElement.prototype,
+
+    /**
+     * 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,
+
+    /**
+     * True if the device is enterprise-managed, false otherwise.
+     * @private
+     */
+    isEnterpriseManaged_: undefined,
+
+    /**
+     * List of the channels names, from the least stable to the most stable.
+     * @private
+     */
+    stabilityTable_: ['dev-channel', 'beta-channel', 'stable-channel'],

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

nit: channelsList_ ?

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

Done.

+
+    /**
+     * 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() {
+      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);
+        };
+      }
+
+      var productName = loadTimeData.getStringF('aboutProductTitle');

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

You could do 64..70 in C++ and set these strings via i18 template system.

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

Done.

+      $('channel-change-page-delayed-change-message').innerText =
+          loadTimeData.getStringF('channelChangePageDelayedChangeMessage',
+                                  productName);
+      $('channel-change-page-unstable-message').innerText =
+          loadTimeData.getStringF('channelChangePageUnstableMessage',
+                                  productName);
+
+      $('channel-change-page-powerwash-button').onclick = function() {
+        self.setChannel_(self.getSelectedOption_(), true);
+        help.HelpPage.cancelOverlay();
+      };
+
+      $('channel-change-page-change-button').onclick = function() {
+        self.setChannel_(self.getSelectedOption_(), false);
+        help.HelpPage.cancelOverlay();
+      };
+    },
+
+    /**
+     * 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"]');
+    },
+
+    /**
+     * 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_();
+      for (var i = 0; i < options.length; i++) {
+        var option = options[i];
+        if (option.checked)
+          return option.value;
+      }
+      return null;
+    },
+
+    /**
+     * Updates UI according to selected channel.
+     * @param {string} selectedChannel Selected channel
+     * @private
+     */
+    updateUI_: function(selectedChannel) {
+      var currentStability = this.stabilityTable_.indexOf(this.currentChannel_);
+      var newStability = this.stabilityTable_.indexOf(selectedChannel);
+
+      var newClass = null;

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

nit: rename to newOverlayClass

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

Done.

+
+      if (selectedChannel == this.currentChannel_) {
+        if (this.currentChannel_ != this.targetChannel_) {
+          // Allow user to switch back to the current channel.
+          newClass = 'selected-channel-good';
+        }
+      } else if (selectedChannel == this.targetChannel_) {
+        // Do nothing in this case.
+      } else {
+        // Selected channel isn't equal to the current and target channel.
+        if (newStability > currentStability) {
+          // More stable channel is selected. For customer devices
+          // notify user about powerwash.
+          if (this.isEnterpriseManaged_)
+            newClass = 'selected-channel-requires-delayed-update';
+          else
+            newClass = 'selected-channel-requires-powerwash';
+        } else if (selectedChannel == 'dev-channel') {
+          // Warn user about unstable channel.
+          newClass = 'selected-channel-unstable';
+        } else {
+          // Switching to the less stable channel.
+          newClass = 'selected-channel-good';

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

Should we also notify user when switching from stable to beta?

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

As I understood from mocks, no.

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

+        }
+      }
+
+      for (var i = 0; i < this.uiClassTable_.length; i++) {

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

nit: Add comment.

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

Done.

+        if (this.uiClassTable_[i] != newClass)
+          $('channel-change-page').classList.remove(this.uiClassTable_[i]);
+      }
+      if (newClass)
+        $('channel-change-page').classList.add(newClass);
+    },
+
+    /**
+     * 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;
+      this.updateUI_(channel);
+      help.HelpPage.setChannel(channel, isPowerwashAllowed);
+    },
+
+    /**
+     * Updates page UI according to device owhership policy.
+     * @param {boolean} isEnterpriseManaged True if the device is
+     *     enterprise managed
+     * @private
+     */
+    updateIsEnterpriseManaged_: function(isEnterpriseManaged) {
+      this.isEnterpriseManaged_ = isEnterpriseManaged;
+      help.HelpPage.updateChannelChangePageContainerVisibility();
+    },
+
+    /**
+     * 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.stabilityTable_.indexOf(channel) < 0)
+        return;
+      this.currentChannel_ = channel;
+
+      var options = this.getAllChannelOptions_();
+      for (var i = 0; i < options.length; i++) {
+        var option = options[i];
+        if (option.value == channel)
+          option.checked = true;
+      }
+      help.HelpPage.updateChannelChangePageContainerVisibility();
+    },
+
+    /**
+     * Updates name of the target channel, i.e. the name of the
+     * channel the device is supposed to be in case of a pending
+     * channel change.
+     * @param {string} channel The name of the target channel
+     * @private
+     */
+    updateTargetChannel_: function(channel) {
+      if (this.stabilityTable_.indexOf(channel) < 0)
+        return;
+      this.targetChannel_ = channel;
+      help.HelpPage.updateChannelChangePageContainerVisibility();
+    },
+
+    /**
+     * @return {boolean} True if the page is ready and can be
+     *     displayed, false otherwise
+     * @private
+     */
+    isPageReady_: function() {
+      if (typeof this.isEnterpriseManaged_ == 'undefined')
+        return false;
+      if (!this.currentChannel_ || !this.targetChannel_)
+        return false;
+      return true;
+    },
+  };
+
+  ChannelChangePage.updateIsEnterpriseManaged = function(isEnterpriseManaged) {
+    ChannelChangePage.getInstance().updateIsEnterpriseManaged_(
+        isEnterpriseManaged);
+  };
+
+  ChannelChangePage.updateCurrentChannel = function(channel) {
+    ChannelChangePage.getInstance().updateCurrentChannel_(channel);
+  };
+
+  ChannelChangePage.updateTargetChannel = function(channel) {
+    ChannelChangePage.getInstance().updateTargetChannel_(channel);
+  };
+
+  ChannelChangePage.isPageReady = function(channel) {
+    ChannelChangePage.getInstance().isPageReady_();
+  };
+
+  // Export
+  return {
+    ChannelChangePage: ChannelChangePage
+  };
+});