Merge 95807 - CrOS OOBE: Fix OOBE step CSS class updating when jumping.

Previously, the code would only change the CSS classes for the current and the next step. This resulted in any steps between these two to incorrectly remain at their old state, which results in the next transition not working.

BUG=chromium-os:18736
TEST=Enterprise enrollment screen is actually visible when triggered through accelarator.

Review URL: http://codereview.chromium.org/7541047

TBR=mnissler@chromium.org
Review URL: http://codereview.chromium.org/7583035

git-svn-id: svn://svn.chromium.org/chrome/branches/835/src@95812 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 26 insertions, 9 deletions

diff --git a/chrome/browser/resources/chromeos/login/oobe.js b/chrome/browser/resources/chromeos/login/oobe.js
index 79d3900..87638d6 100644
--- a/chrome/browser/resources/chromeos/login/oobe.js
+++ b/chrome/browser/resources/chromeos/login/oobe.js
@@ -81,6 +81,26 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * 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) {
+        if (states[i] != state) {
+          step.classList.remove(states[i]);
+          header.classList.remove(states[i]);
+        }
+      }
+      step.classList.add(state);
+      header.classList.add(state);
+    },
+
+    /**
      * Switches to the next OOBE step.
      * @param {number} nextStepIndex Index of the next step.
      */
@@ -88,7 +108,6 @@ cr.define('cr.ui', function() {
       var currentStepId = this.screens_[this.currentStep_];
       var nextStepId = this.screens_[nextStepIndex];
       var oldStep = $(currentStepId);
-      var oldHeader = $('header-' + currentStepId);
       var newStep = $(nextStepId);
       var newHeader = $('header-' + nextStepId);
 
@@ -100,15 +119,13 @@ cr.define('cr.ui', function() {
       if (Oobe.isOobeUI()) {
         // Start gliding animation for OOBE steps.
         if (nextStepIndex > this.currentStep_) {
-          oldHeader.classList.add('left');
-          oldStep.classList.add('left');
-          newHeader.classList.remove('right');
-          newStep.classList.remove('right');
+          for (var i = this.currentStep_; i < nextStepIndex; ++i)
+            this.updateStep_(i, 'left');
+          this.updateStep_(nextStepIndex, 'current');
         } else if (nextStepIndex < this.currentStep_) {
-          oldHeader.classList.add('right');
-          oldStep.classList.add('right');
-          newHeader.classList.remove('left');
-          newStep.classList.remove('left');
+          for (var i = this.currentStep_; i > nextStepIndex; --i)
+            this.updateStep_(i, 'right');
+          this.updateStep_(nextStepIndex, 'current');
         }
       } else {
         // Start fading animation for login display.