CrOS OOBE: Fix OOBE step CSS class updating when jumping.

chrome/browser/resources/chromeos/login/oobe.js

 // Copyright (c) 2011 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 Out of the box experience flow (OOBE).
  * This is the main code for the OOBE WebUI implementation.
  */
 
 var localStrings = new LocalStrings();
@@ skipping 63 matching lines @@
       if (buttons) {
         var buttonStrip = $('button-strip');
         for (var i = 0; i < buttons.length; ++i) {
           var button = buttons[i];
           buttonStrip.appendChild(button);
         }
       }
     },
 
     /**
+     * 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.
      */
     toggleStep_: function(nextStepIndex, screenData) {
       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);
 
       if (newStep.onBeforeShow)
         newStep.onBeforeShow(screenData);
 
       newStep.classList.remove('hidden');
 
       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.
         oldStep.classList.add('faded');
         newStep.classList.remove('faded');
       }
 
       // Adjust inner container height based on new step's height.
       $('inner-container').style.height = newStep.offsetHeight + 'px';
 
@@ skipping 404 matching lines @@
 document.onselectstart = function(e) {
   e.preventDefault();
 }
 
 // Disable dragging.
 document.ondragstart = function(e) {
   e.preventDefault();
 }
 
 document.addEventListener('DOMContentLoaded', cr.ui.Oobe.initialize);