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,
+
+    /**
      * 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('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')
+        channelChanger.onchange = function(event) {
+          self.setChannnel_(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'));
+      };
+
+      // 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
      */
     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');

[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:

+    },
+
+    /**
      * @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');
       } else if (status == 'nearly_updated') {
         this.setUpdateImage_('up-to-date');
         $('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';
+        $('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';
       }
     },
 
     /**
      * @private
      */
     setProgress_: function(progress) {
@@ skipping 51 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);
+      help.ChannelChangePage.updateCurrentChannel(channel);
     },
 
     /**
      * |enabled| is true if the release channel can be enabled.
      * @private
      */
     updateEnableReleaseChannel_: function(enabled) {
-      $('channel-changer-container').hidden = !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
      */
-    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;
+      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;

[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) {
     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) {
+    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 {
     HelpPage: HelpPage
   };
 });
 
 /**
  * onload listener to initialize the HelpPage.
  */
 window.onload = function() {
   help.HelpPage.getInstance().initialize();
+  help.ChannelChangePage.getInstance().initialize();
 };