[cros] OOBE slide animation.

chrome/browser/resources/chromeos/login/display_manager.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.
 
 /**
  * @fileoverview Display manager for WebUI OOBE and login.
  */
 
 // TODO(xiyuan): Find a better to share those constants.
 /** @const */ var SCREEN_OOBE_NETWORK = 'connect';
 /** @const */ var SCREEN_OOBE_EULA = 'eula';
+/** @const */ var SCREEN_OOBE_UPDATE = 'update';
 /** @const */ var SCREEN_OOBE_ENROLLMENT = 'oauth-enrollment';
 /** @const */ var SCREEN_GAIA_SIGNIN = 'gaia-signin';
 /** @const */ var SCREEN_ACCOUNT_PICKER = 'account-picker';
 
 /* Accelerator identifiers. Must be kept in sync with webui_login_view.cc. */
 /** @const */ var ACCELERATOR_CANCEL = 'cancel';
 /** @const */ var ACCELERATOR_ENROLLMENT = 'enrollment';
 /** @const */ var ACCELERATOR_VERSION = 'version';
 
 /* Help topic identifiers. */
 /** @const */ var HELP_TOPIC_ENTERPRISE_REPORTING = 2535613;
 
 cr.define('cr.ui.login', function() {
   var Bubble = cr.ui.Bubble;
 
   /**
+   * Groups of screens (screen IDs) that should have the same dimensions.
+   * @type Array.<Array.<string>>
+   * @const
+   */
+  var SCREEN_GROUPS = [[SCREEN_OOBE_NETWORK,
+                        SCREEN_OOBE_EULA,
+                        SCREEN_OOBE_UPDATE]
+                      ];
+
+  /**
    * Constructor a display manager that manages initialization of screens,
    * transitions, error messages display.
    *
    * @constructor
    */
   function DisplayManager() {
   }
 
   DisplayManager.prototype = {
     /**
@@ skipping 64 matching lines @@
             this.currentScreen.cancelAutoEnrollment();
         }
       } else if (name == ACCELERATOR_VERSION) {
         if (this.allowToggleVersion_)
           $('version-labels').hidden = !$('version-labels').hidden;
       }
     },
 
     /**
      * Appends buttons to the button strip.
-     * @param {Array} buttons Array with the buttons to append.
+     * @param {Array.<HTMLElement>} buttons Array with the buttons to append.
      * @param {string} screenId Id of the screen that buttons belong to.
      */
     appendButtons_: function(buttons, screenId) {
       if (buttons) {
         var buttonStrip = null;
         if (this.isNewOobe())
           buttonStrip = $(screenId + '-controls');
         else
           buttonStrip = $('button-strip');
         if (buttonStrip) {
           for (var i = 0; i < buttons.length; ++i)
             buttonStrip.appendChild(buttons[i]);
         }
       }
     },
 
     /**
+     * Disables or enables control buttons on the specified screen.
+     * @param {HTMLElement} screen Screen which controls should be affected.
+     * @param {boolean} disabled Whether to disable controls.
+     */
+    disableButtons_: function(screen, disabled) {
+      var buttons = document.querySelectorAll(
+          '#' + screen.id + '-controls button');
+      for (var i = 0; i < buttons.length; ++i) {
+        buttons[i].disabled = disabled;
+      }
+    },
+
+    /**
      * Updates a step's css classes to reflect left, current, or right position.
      * @param {number} stepIndex step index.
      * @param {string} state one of 'left', 'current', 'right'.
      */
     updateStep_: function(stepIndex, state) {
       var stepId = this.screens_[stepIndex];
       var step = $(stepId);
       var header = $('header-' + stepId);
       var states = ['left', 'right', 'current'];
       for (var i = 0; i < states.length; ++i) {
@@ skipping 10 matching lines @@
      * Switches to the next OOBE step.
      * @param {number} nextStepIndex Index of the next step.
      */
     toggleStep_: function(nextStepIndex, screenData) {
       var currentStepId = this.screens_[this.currentStep_];
       var nextStepId = this.screens_[nextStepIndex];
       var oldStep = $(currentStepId);
       var newStep = $(nextStepId);
       var newHeader = $('header-' + nextStepId);
 
+      // Disable controls before starting animation.
+      this.disableButtons_(oldStep, true);
+
       if (oldStep.onBeforeHide)
         oldStep.onBeforeHide();
 
       if (newStep.onBeforeShow)
         newStep.onBeforeShow(screenData);
 
       newStep.classList.remove('hidden');
 
       if (newStep.onAfterShow)
         newStep.onAfterShow(screenData);
 
+      this.disableButtons_(newStep, false);
+
       if (this.isOobeUI()) {
         // Start gliding animation for OOBE steps.
         if (nextStepIndex > this.currentStep_) {
           for (var i = this.currentStep_; i < nextStepIndex; ++i)
             this.updateStep_(i, 'left');
           this.updateStep_(nextStepIndex, 'current');
         } else if (nextStepIndex < this.currentStep_) {
           for (var i = this.currentStep_; i > nextStepIndex; --i)
             this.updateStep_(i, 'right');
           this.updateStep_(nextStepIndex, 'current');
         }
       } else {
         // Start fading animation for login display.
         oldStep.classList.add('faded');
         newStep.classList.remove('faded');
       }
 
       // Adjust inner container height based on new step's height.
       this.updateInnerContainerSize_(newStep);
 
       if (this.currentStep_ != nextStepIndex &&
           !oldStep.classList.contains('hidden')) {
-        // TODO(nkostylev): Remove when new transitions are added back.
-        if (this.isNewOobe()) {
-          if (oldStep.classList.contains('faded') ||
-              oldStep.classList.contains('left') ||
-              oldStep.classList.contains('right')) {
-            oldStep.classList.add('hidden');
-          }
-        } else {
+        if (oldStep.classList.contains('animated') || !this.isNewOobe()) {
+          oldStep.classList.add('animation');
           oldStep.addEventListener('webkitTransitionEnd', function f(e) {
             oldStep.removeEventListener('webkitTransitionEnd', f);
             if (oldStep.classList.contains('faded') ||
                 oldStep.classList.contains('left') ||
                 oldStep.classList.contains('right')) {
+              oldStep.classList.remove('animation');
               oldStep.classList.add('hidden');
             }
           });
+        } else {
+          oldStep.classList.add('hidden');
         }
       } else {
         // First screen on OOBE launch.
+        // $('outer-container').hidden = false;

[Nikita (slow), 2012/08/10 10:21:35]

Is this commented code needed?

[Ivan Korotkov, 2012/08/10 13:25:16]

Removed.

+        $('inner-container').classList.remove('down');

[Nikita (slow), 2012/08/10 10:21:35]

This won't affect boot into user pods or boot into GAIA, right?

[Ivan Korotkov, 2012/08/10 13:25:16]

Right, because login.html doesn't have 'down' already.

+        console.error('Down');

[Nikita (slow), 2012/08/10 10:21:35]

Cleanup.

[Ivan Korotkov, 2012/08/10 13:25:16]

Done.

         newHeader.classList.remove('right');
         // Report back first OOBE screen being painted.
         window.webkitRequestAnimationFrame(function() {
           chrome.send('loginVisible');
         });
       }
       this.currentStep_ = nextStepIndex;
       $('oobe').className = nextStepId;
+
+      $('step-logo').hidden = newStep.classList.contains('no-logo');
     },
 
     /**
      * Show screen of given screen id.
      * @param {Object} screen Screen params dict,
      *     e.g. {id: screenId, data: data}.
      */
     showScreen: function(screen) {
       var screenId = screen.id;
 
@@ skipping 46 matching lines @@
 
       if (this.isNewOobe())
         $('progress-dots').appendChild(dot);
       else
         $('progress').appendChild(dot);
 
       this.appendButtons_(el.buttons, screenId);
     },
 
     /**
-     * Updates inner container size based on the size of the current screen.
+     * Updates inner container size based on the size of the current screen and
+     * other screens in the same group.
      * Should be executed on screen change / screen size change.
      * @param {!HTMLElement} screen Screen that is being shown.
      */
     updateInnerContainerSize_: function(screen) {
-      $('inner-container').style.height = screen.offsetHeight + 'px';
-      if (this.isNewOobe())
-        $('inner-container').style.width = screen.offsetWidth + 'px';
+      var height = screen.offsetHeight;
+      var width = screen.offsetWidth;
+      for (var i = 0, screenGroup; screenGroup = SCREEN_GROUPS[i]; i++) {
+        if (screenGroup.indexOf(screen.id) != -1) {
+          // Set screen dimensions to maximum dimensions within this group.
+          for (var j = 0, screen2; screen2 = $(screenGroup[j]); j++) {
+            height = Math.max(height, screen2.offsetHeight);
+            width = Math.max(width, screen2.offsetWidth);
+          }
+          break;
+        }
+      }
+      $('inner-container').style.height = height + 'px';
+      if (this.isNewOobe()) {
+        $('inner-container').style.width = width + 'px';
+        // This requires |screen| to have |box-sizing: border-box|.
+        screen.style.width = width + 'px';
+        screen.style.height = height + 'px';
+      }
     },
 
     /**
      * Updates localized content of the screens like headers, buttons and links.
      * Should be executed on language change.
      */
     updateLocalizedContent_: function() {
       if (!this.isNewOobe())
         $('button-strip').innerHTML = '';
       for (var i = 0, screenId; screenId = this.screens_[i]; ++i) {
         var screen = $(screenId);
         if (this.isNewOobe()) {
-          buttonStrip = $(screenId + '-controls');
+          var buttonStrip = $(screenId + '-controls');
           if (buttonStrip)
             buttonStrip.innerHTML = '';
           // TODO(nkostylev): Update screen headers for new OOBE design.
         } else {
           $('header-' + screenId).textContent = screen.header;
         }
         this.appendButtons_(screen.buttons, screenId);
         if (screen.updateLocalizedContent)
           screen.updateLocalizedContent();
       }
@@ skipping 181 matching lines @@
         });
       }
     }
   };
 
   // Export
   return {
     DisplayManager: DisplayManager
   };
 });