Fix next button status, error bubble positions, initial focus on user name screen.

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

 // Copyright (c) 2013 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 Locally managed user creation flow screen.
  */
 
 login.createScreen('LocallyManagedUserCreationScreen',
                    'managed-user-creation', function() {
@@ skipping 511 matching lines @@
       chrome.send('specifyLocallyManagedUserCreationFlowUserData',
           [userName, firstPassword]);
     },
 
     /**
      * Calls backend part to check if current user name is valid/not taken.
      * Results in call to either managedUserNameOk or managedUserNameError.
      * @private
      */
     checkUserName_: function() {
-      var userName = $('managed-user-creation-name').value;
+      var userName = this.getScreenElement('name').value;
 
       // Avoid flickering
       if (userName == this.lastIncorrectUserName_ ||
           userName == this.lastVerifiedName_) {
         return;
       }
       if (userName.length > 0) {
         chrome.send('checkLocallyManagedUserName', [userName]);
       } else {
         this.nameErrorVisible = false;
         this.lastVerifiedName_ = null;
         this.lastIncorrectUserName_ = null;
+        this.updateNextButtonForUser_();
       }
     },
 
     /**
      * Called by backend part in case of successful name validation.
      * @param {string} name - name that was validated.
      */
     managedUserNameOk: function(name) {
       this.lastVerifiedName_ = name;
       this.lastIncorrectUserName_ = null;
       if ($('managed-user-creation-name').value == name)
         this.clearUserNameError_();
-      this.updateNextButtonForManager_();
+      this.updateNextButtonForUser_();
     },
 
     /**
      * Called by backend part in case of name validation failure.
      * @param {string} name - name that was validated.
      * @param {string} errorText - reason why this name is invalid.
      */
     managedUserNameError: function(name, errorText) {
       this.lastIncorrectUserName_ = name;
       this.lastVerifiedName_ = null;
 
       var userNameField = $('managed-user-creation-name');
       if (userNameField.value == this.lastIncorrectUserName_) {
         this.nameErrorVisible = true;
         $('bubble').showTextForElement(
             $('managed-user-creation-name'),
             errorText,
             cr.ui.Bubble.Attachment.RIGHT,
-            24, 4);
+            12, 4);
         this.setButtonDisabledStatus('next', true);
       }
     },
 
     /**
      * Clears user name error, if name is no more guaranteed to be invalid.
      * @private
      */
     clearUserNameError_: function() {
       // Avoid flickering
       if ($('managed-user-creation-name').value ==
               this.lastIncorrectUserName_) {
         return;
       }
       this.nameErrorVisible = false;
     },
 
     /**
      * Called by backend part in case of password validation failure.
      * @param {string} errorText - reason why this password is invalid.
      */
     showPasswordError: function(errorText) {
       $('bubble').showTextForElement(
           $('managed-user-creation-password'),
           errorText,
           cr.ui.Bubble.Attachment.RIGHT,
-          24, 4);
+          12, 4);
       $('managed-user-creation-password').classList.add('password-error');
       $('managed-user-creation-password').focus();
       this.disabled = false;
       this.setButtonDisabledStatus('next', true);
     },
 
     /**
      * True if user name error should be displayed.
      * @type {boolean}
      */
@@ skipping 17 matching lines @@
       this.setButtonDisabledStatus('next', !canProceed);
       return canProceed;
     },
 
     /**
      * Updates state of Continue button after minimal checks.
      * @return {boolean} true, if form seems to be valid.
      * @private
      */
     updateNextButtonForUser_: function() {
-      var firstPassword = $('managed-user-creation-password').value;
-      var secondPassword =
-          $('managed-user-creation-password-confirm').value;
-      var userName = $('managed-user-creation-name').value;
+      var firstPassword = this.getScreenElement('password').value;
+      var secondPassword = this.getScreenElement('password-confirm').value;
+      var userName = this.getScreenElement('name').value;
 
       var canProceed =
+          (userName.length > 0) &&
           (firstPassword.length > 0) &&
           (firstPassword.length == secondPassword.length) &&
            this.lastVerifiedName_ &&
            (userName == this.lastVerifiedName_);
 
       this.setButtonDisabledStatus('next', !canProceed);
       return canProceed;
     },
 
     showSelectedManagerPasswordError_: function() {
@@ skipping 52 matching lines @@
 
       if (visiblePage == 'username') {
         var imageGrid = this.getScreenElement('image-grid');
         // select some image.
         var selected = this.imagesData_[
             Math.floor(Math.random() * this.imagesData_.length)];
         imageGrid.selectedItemUrl = selected.url;
         chrome.send('supervisedUserSelectImage',
                     [selected.url, 'default']);
         this.getScreenElement('image-grid').redraw();
+        this.updateNextButtonForUser_();
+        this.getScreenElement('name').focus();
       }
     },
 
     setButtonDisabledStatus: function(buttonName, status) {
       var button = $('managed-user-creation-' + buttonName + '-button');
       button.disabled = status;
     },
 
     gotItButtonPressed_: function() {
       chrome.send('finishLocalManagedUserCreation');
@@ skipping 269 matching lines @@
       var imageGrid = this.getScreenElement('image-grid');
       imageGrid.discardPhoto();
     },
 
     setCameraPresent: function(present) {
       this.getScreenElement('image-grid').cameraPresent = present;
     },
   };
 });