Fixed button focusing in OOBE screens.

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';
@@ skipping 110 matching lines @@
       } else if (name == ACCELERATOR_RESET) {
         var currentStepId = this.screens_[this.currentStep_];
         if (currentStepId == SCREEN_GAIA_SIGNIN ||
             currentStepId == SCREEN_ACCOUNT_PICKER) {
           chrome.send('toggleResetScreen');
         }
       }
     },
 
     /**
+     * Sets focus on a button with the autofocus attribute in the current
+     * screen.
+     */
+    restoreFocus: function() {
+      this.updateFocus_($(this.screens_[this.currentStep_]));
+    },
+
+    /**
      * Appends buttons to the button strip.
      * @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
@@ skipping 12 matching lines @@
      */
     disableButtons_: function(screen, disabled) {
       var buttons = document.querySelectorAll(
           '#' + screen.id + '-controls button');
       for (var i = 0; i < buttons.length; ++i) {
         buttons[i].disabled = disabled;
       }
     },
 
     /**
+     * Sets focus on a button with the autofocus attribute.
+     * @param {HTMLElement} screen Screen which controls should be affected.
+     */
+    updateFocus_: function(screen) {
+      var buttons = document.querySelectorAll(

[Nikita (slow), 2012/11/28 18:26:26]

I think this should be implemented differently.

You know screen so you should screen.buttons property and check which of those
have autofocus set.

[mtomasz, 2012/11/28 21:57:42]

Isn't screen.buttons getter producing new buttons every time it is called? If
so, then I can't use it.

This method is just a copy paste of disableButtons_().

[Nikita (slow), 2012/11/29 16:08:11]

You're right, screen.buttons always creates new elements so could not be used
here.

+          '#' + screen.id + '-controls button');
+      for (var i = 0; i < buttons.length; ++i) {
+        if (buttons[i].autofocus)
+          buttons[i].focus();

[Nikita (slow), 2012/11/28 18:26:26]

break;

[mtomasz, 2012/11/28 21:57:42]

Done.

+      }
+    },
+
+    /**
      * 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 58 matching lines @@
           !oldStep.classList.contains('hidden')) {
         if (oldStep.classList.contains('animated') || !this.isNewOobe()) {
           innerContainer.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')) {
               innerContainer.classList.remove('animation');
               oldStep.classList.add('hidden');
+              this.updateFocus_(newStep);
             }
-          });
+          }.bind(this));

[Nikita (slow), 2012/11/28 18:26:26]

Have you tested how OOBE works with this change?

[mtomasz, 2012/11/28 21:57:42]

Yes, tested locally.

         } else {
           oldStep.classList.add('hidden');
+          this.updateFocus_(newStep);
         }
       } else {
         // First screen on OOBE launch.
         if (innerContainer.classList.contains('down')) {
           innerContainer.classList.remove('down');
           innerContainer.addEventListener(
               'webkitTransitionEnd', function f(e) {
                 innerContainer.removeEventListener('webkitTransitionEnd', f);
                 $('progress-dots').classList.remove('down');
                 chrome.send('loginVisible', ['oobe']);
-              });
+                this.updateFocus_(newStep);
+              }.bind(this));
+        } else {
+          this.updateFocus_(newStep);
         }
         newHeader.classList.remove('right');  // Old OOBE.
       }
       this.currentStep_ = nextStepIndex;
       $('oobe').className = nextStepId;
 
       $('step-logo').hidden = newStep.classList.contains('no-logo');
 
       chrome.send('updateCurrentScreen', [this.currentScreen.id]);
     },
@@ skipping 336 matching lines @@
     $('add-user-button').classList.add('button-restricted');
     $('add-user-button').title = disable ?
         localStrings.getString('disabledAddUserTooltip') : '';
   }
 
   // Export
   return {
     DisplayManager: DisplayManager
   };
 });