Better focus traversal during LMU creation

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-flow', function() {
@@ skipping 15 matching lines @@
     __proto__: HTMLDivElement.prototype,
 
     /** @override */
     decorate: function() {
       // Mousedown has to be used instead of click to be able to prevent 'focus'
       // event later.
       this.addEventListener('mousedown',
                             this.handleMouseDown_.bind(this));
       var screen = $('managed-user-creation-flow');
       var managerPod = this;
-      this.passwordElement.addEventListener('keydown', function(e) {
+      var hideManagerPasswordError = function(element) {
         managerPod.passwordErrorElement.hidden = true;
-      });
-      this.passwordElement.addEventListener('keyup', function(e) {
-        screen.updateNextButtonForManager_();
-      });
+      };
+
+      screen.configureTextInput(
+          this.passwordElement,
+          screen.updateNextButtonForManager_.bind(screen),
+          screen.validIfNotEmpty.bind(screen),
+          function(element) {
+            screen.getScreenButton('next').focus();
+          },
+          hideManagerPasswordError);
     },
 
     /**
      * Updates UI elements from user data.
      */
     update: function() {
       this.imageElement.src = 'chrome://userimage/' + this.user.username +
           '?id=' + ManagerPod.userImageSalt_[this.user.username];
 
       this.nameElement.textContent = this.user.displayName;
@@ skipping 169 matching lines @@
       this.managerList_ = new ManagerPodList();
       $('managed-user-creation-flow-managers-pane').
           appendChild(this.managerList_);
 
       var userNameField = $('managed-user-creation-flow-name');
       var passwordField = $('managed-user-creation-flow-password');
       var password2Field = $('managed-user-creation-flow-password-confirm');
 
       var creationScreen = this;
 
-      userNameField.addEventListener('keydown', function(e) {
-        if (e.keyIdentifier == 'Enter') {
-          if (userNameField.value.length > 0)
-            passwordField.focus();
-          e.stopPropagation();
-          return;
-        }
-        creationScreen.clearUserNameError_();
-      });
+      var hideUserPasswordError = function(element) {
+        creationScreen.passwordErrorVisible = false;
+      };
 
-      userNameField.addEventListener('keyup', function(e) {
-        creationScreen.checkUserName_();
-      });
+      this.configureTextInput(userNameField,
+                         this.checkUserName_.bind(this),

[Nikita (slow), 2013/06/03 15:55:43]

nit: Please fix parameter alignment for all calls to this.configureTextInput()

[Denis Kuznetsov (DE-MUC), 2013/06/03 16:33:04]

Done.

+                         this.validIfNotEmpty.bind(this),
+                         function(element) {
+                           passwordField.focus();
+                         },
+                         this.clearUserNameError_.bind(this));
 
-      passwordField.addEventListener('keydown', function(e) {
-        creationScreen.passwordErrorVisible = false;
-        if (e.keyIdentifier == 'Enter') {
-          if (passwordField.value.length > 0) {
-            password2Field.focus();
-            creationScreen.updateNextButtonForUser_();
-          }
-          e.stopPropagation();
-        }
-      });
-
-      password2Field.addEventListener('keydown', function(e) {
-        creationScreen.passwordErrorVisible = false;
-        if (e.keyIdentifier == 'Enter') {
-          if (passwordField.value.length > 0) {
-            if (creationScreen.managerList_.selectedPod_)
-              creationScreen.managerList_.selectedPod_.focusInput();
-            creationScreen.updateNextButtonForUser_();
-          }
-          e.stopPropagation();
-        }
-      });
-
-      password2Field.addEventListener('keyup', function(e) {
-        creationScreen.updateNextButtonForUser_();
-      });
-
-      passwordField.addEventListener('keyup', function(e) {
-        creationScreen.updateNextButtonForUser_();
-      });
+      this.configureTextInput(passwordField,
+                         this.updateNextButtonForUser_.bind(this),
+                         this.validIfNotEmpty.bind(this),
+                         function(element) {
+                           password2Field.focus();
+                         },
+                         hideUserPasswordError);
+      this.configureTextInput(password2Field,
+                         this.updateNextButtonForUser_.bind(this),
+                         this.validIfNotEmpty.bind(this),
+                         function(element) {
+                           creationScreen.getScreenButton('next').focus();
+                         },
+                         hideUserPasswordError);
     },
 
     buttonIds: [],
 
     /**
      * Creates button for adding to controls.
      * @param {string} buttonId -- id for button, have to be unique within
      *   screen. Actual id will be prefixed with screen name and appended with
      *   '-button'. Use getScreenButton(buttonId) to find it later.
      * @param {string} i18nPrefix -- screen prefix for i18n values.
@@ skipping 12 matching lines @@
           getString(i18nPrefix + capitalizedId + 'ButtonTitle');
       result.addEventListener('click', function(e) {
         callback(buttonId);
         e.stopPropagation();
       });
       result.pages = pages;
       return result;
     },
 
     /**
+     * Simple validator for |configureTextInput|.
+     * Element is considered valid if it has any text.
+     * @param {Element} element - element to be validated.
+     * @return {boolean} - true, if element has any text.
+     */
+    validIfNotEmpty: function(element) {

[Nikita (slow), 2013/06/03 15:55:43]

private, should end with _

[Denis Kuznetsov (DE-MUC), 2013/06/03 16:33:04]

Done.

+      return (element.value.length > 0);
+    },
+
+    /**
+     * Configure text-input |element|

[Nikita (slow), 2013/06/03 15:55:43]

nit: dot is missing.

[Denis Kuznetsov (DE-MUC), 2013/06/03 16:33:04]

Done.

+     * @param {Element} element - element to be configured.
+     * @param {function(element)} inputChangeListener - function that will be
+     *    called upon any button press/release.
+     * @param {function(element)} validator - function that will be called when
+     *    Enter is pressed. If it returns |true| then advance to next element.
+     * @param {function(element)} moveFocus - function that will determine next
+     *    element and move focus to it.
+     * @param {function(element)} errorHider - function that is called upon
+     *    every button press, so that any associated error can be hidden.
+     */
+
+    configureTextInput: function(element,

[Nikita (slow), 2013/06/03 15:55:43]

private, should end with _

[Denis Kuznetsov (DE-MUC), 2013/06/03 16:33:04]

At some point it will be moved to parent class.

+                            inputChangeListener,

[Nikita (slow), 2013/06/03 15:55:43]

nit: Please fix alignment.

[Denis Kuznetsov (DE-MUC), 2013/06/03 16:33:04]

Done.

+                            validator,
+                            moveFocus,
+                            errorHider) {
+      element.addEventListener('keydown', function(e) {
+        if (e.keyIdentifier == 'Enter') {
+          var dataValid = true;
+          if (validator)
+            dataValid = validator(element);
+          if (!dataValid) {
+            element.focus();
+          } else {
+            if (moveFocus)
+              moveFocus(element);
+          }
+          e.stopPropagation();
+          return;
+        }
+        if (errorHider)
+          errorHider(element);
+        if (inputChangeListener)
+          inputChangeListener(element);
+      });
+      element.addEventListener('keyup', function(e) {
+        if (inputChangeListener)
+          inputChangeListener(element);
+      });
+    },
+
+    /**
      * Makes element from template.
      * @param {string} templateId -- template will be looked up within screen
      * by class with name "template-<templateId>".
      * @param {string} elementId -- id for result, uinque within screen. Actual
      *   id will be prefixed with screen name. Uer getScreenElement(id) to find
      *   it later.
      */
     makeFromTemplate: function(templateId, elementId) {
       var templateClassName = 'template-' + templateId;
       var templateNode = this.querySelector('.' + templateClassName);
@@ skipping 257 matching lines @@
      * @private
      */
     setVisiblePage_: function(visiblePage) {
       this.disabled = false;
       this.updateText_();
       var pageNames = ['intro',
                        'manager',
                        'username',
                        'error',
                        'tutorial'];
+      var pageButtons = {'intro' : 'start',
+                         'error' : 'handleError',
+                         'tutorial' : 'finish'};
       this.hideStatus_();
       for (i in pageNames) {
         var pageName = pageNames[i];
         var page = $('managed-user-creation-flow-' + pageName);
         page.hidden = (pageName != visiblePage);
         if (pageName == visiblePage)
           $('step-logo').hidden = page.classList.contains('step-no-logo');
       }
 
       for (i in this.buttonIds) {
         var button = this.getScreenButton(this.buttonIds[i]);
         button.hidden = button.pages.indexOf(visiblePage) < 0;
         button.disabled = false;
       }
 
       var pagesWithCancel = ['intro', 'manager', 'username', 'error'];
       var cancelButton = $('cancel-add-user-button');
       cancelButton.hidden = pagesWithCancel.indexOf(visiblePage) < 0;
       cancelButton.disabled = false;
 
+      if (pageButtons[visiblePage])
+        this.getScreenButton(pageButtons[visiblePage]).focus();
+
       this.currentPage_ = visiblePage;
     },
 
     setButtonDisabledStatus: function(buttonName, status) {
       var button = $('managed-user-creation-flow-' + buttonName + '-button');
       button.disabled = status;
     },
 
     finishButtonPressed_: function() {
       chrome.send('finishLocalManagedUserCreation');
@@ skipping 166 matching lines @@
       this.setVisiblePage_('error');
     },
 
     showManagerPasswordError: function() {
       this.disabled = false;
       this.showSelectedManagerPasswordError_();
     }
   };
 });