[ChromeOS] Assorted WebUI login fixes.

chrome/browser/resources/chromeos/login/user_pod_row.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 User pod row implementation.
  */
 
 cr.define('login', function() {
   // Pod width. 170px Pod + 10px padding + 10px margin on both sides.
@@ skipping 20 matching lines @@
    */
   var UserPod = cr.ui.define(function() {
     return $('user-pod-template').cloneNode(true);
   });
 
   UserPod.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @inheritDoc */
     decorate: function() {
-      this.addEventListener('click', this.handleClick_.bind(this));
+      // Make this focusable
+      if (!this.hasAttribute('tabindex'))
+        this.tabIndex = 0;
+
+      this.addEventListener('mousedown', this.handleMouseDown_.bind(this));
+
       this.enterButtonElement.addEventListener('click',
           this.activate.bind(this));
-      this.removeUserButtonElement.addEventListener('click',
-          this.handleRemoveUserClick_.bind(this));
     },
 
     /**
      * Initializes the pod after its properties set and added to a pod row.
      */
     initialize: function() {
       if (!this.isGuest) {
         this.passwordElement.addEventListener('keydown',
             this.parentNode.handleKeyDown.bind(this.parentNode));
       }
@@ skipping 113 matching lines @@
      * @param {boolean} takeFocus True to take focus.
      */
     reset: function(takeFocus) {
       this.passwordElement.value = '';
 
       if (takeFocus)
         this.mainInput.focus();
     },
 
     /**
-     * Handles click event on remove user button.
-     * @private
+     * Handles mousedown event.
      */
-    handleRemoveUserClick_: function(e) {
-      chrome.send('removeUser', [this.email]);
-      this.parentNode.removeChild(this);
-    },
+    handleMouseDown_: function(e) {
+      if (e.target == this.removeUserButtonElement) {
+        chrome.send('removeUser', [this.user.emailAddress]);
 
-    /**
-     * Handles click event.
-     */
-    handleClick_: function(e) {
-      this.parentNode.focusPod(this);
-      e.stopPropagation();
+        // Prevent default so that we don't trigger 'focus' event.
+        e.preventDefault();
+      }
     }
   };
 
 
   /**
    * Creates a new pod row element.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var PodRow = cr.ui.define('podrow');
 
   PodRow.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     // Focused pod.
     focusedPod_ : undefined,
 
     // Acitvated pod, i.e. the pod of current login attempt.
     activatedPod_: undefined,
 
     /** @inheritDoc */
     decorate: function() {
-      // Make this focusable
-      if (!this.hasAttribute('tabindex'))
-        this.tabIndex = 0;
+      this.style.left = 0;
 
-      this.style.left = 0;
+      this.ownerDocument.addEventListener('focus',
+          this.handleFocus_.bind(this), true);
 
       this.ownerDocument.addEventListener('click',
           this.handleClick_.bind(this));
       this.ownerDocument.addEventListener('keydown',
           this.handleKeyDown.bind(this));
     },
 
     /**
      * Returns all the pods in this pod row.
      */
     get pods() {
       return this.children;
     },
 
     /**
      * Creates a user pod from given email.
      * @param {string} email User's email.
      */
     createUserPod: function(user) {
       var userPod = new UserPod({user: user});
       userPod.hidden = false;
       return userPod;
     },
 
     /**
      * Add an existing user pod to this pod row.
      * @param {!Object} user User info dictionary.
+     * @param {boolean} animated Whether to use init animation.
      */
-    addUserPod: function(user) {
+    addUserPod: function(user, animated) {
       var userPod = this.createUserPod(user);
+      if (animated) {
+        userPod.classList.add('init');
+        userPod.nameElement.classList.add('init');
+      }
+
       this.appendChild(userPod);
       userPod.initialize();
     },
 
     /**
      * Ensures the given pod is visible.
      * @param {UserPod} pod Pod to scroll into view.
      */
     scrollPodIntoView: function(pod) {
       var podIndex = this.findIndex_(pod);
@@ skipping 38 matching lines @@
             this.pods[i], 'init');
         window.setTimeout(removeClass, 700 + i * 70,
             this.pods[i].nameElement, 'init');
       }
     },
 
     /**
      * Populates pod row with given existing users and
      * kick start init animiation.
      * @param {array} users Array of existing user emails.
+     * @param {boolean} animated Whether to use init animation.
      */
-    loadPods: function(users) {
+    loadPods: function(users, animated) {
       // Clear existing pods.
       this.innerHTML = '';
       this.focusedPod_ = undefined;
+      this.activatedPod_ = undefined;
 
       // Popoulate the pod row.
       for (var i = 0; i < users.length; ++i) {
-        this.addUserPod(users[i]);
+        this.addUserPod(users[i], animated);
       }
     },
 
     /**
      * Focuses a given user pod or clear focus when given null.
      * @param {UserPod} pod User pod to focus or null to clear focus.
      */
     focusPod: function(pod) {
-      for (var i = 0; i < this.pods.length; ++i) {
-        this.pods[i].classList.remove('focused');
-        this.pods[i].classList.add('faded');
-      }
+      if (this.focusedPod_ == pod)
+        return;
 
       if (pod) {
         if (pod.isGuest ||
             localStrings.getString('authType') != 'ext' ||
             pod.user.oauthTokenStatus == OAUTH_TOKEN_STATUS_VALID) {
           // Focus current pod if it is guest pod, or
           // we are not using gaia ext for signin or
           // the user has a valid oauth token.
-          pod.classList.remove("faded");
-          pod.classList.add("focused");
+          for (var i = 0; i < this.pods.length; ++i) {
+            if (this.pods[i] == pod) {
+              pod.classList.remove("faded");
+              pod.classList.add("focused");
+            } else {
+              this.pods[i].classList.remove('focused');
+              this.pods[i].classList.add('faded');
+            }
+          }
           pod.focusInput();
 
           this.focusedPod_ = pod;
           this.scrollPodIntoView(pod);
         } else {
           // Otherwise, switch to Gaia signin.
           Oobe.showSigninUI(pod.user.emailAddress);
+          this.focusPod();  // Clears current focus.
         }
       } else {
         for (var i = 0; i < this.pods.length; ++i) {
+          this.pods[i].classList.remove('focused');
           this.pods[i].classList.remove('faded');
         }
         this.focusedPod_ = undefined;
       }
-
-      // TODO(xiyuan): Put this in a proper place.
-      $('bubble').hide();
     },
 
     /**
      * Returns the currently activated pod.
      */
     get activated() {
       return this.activatedPod_;
     },
 
     /**
@@ skipping 40 matching lines @@
 
       if (this.activatedPod_)
         this.activatedPod_.reset(takeFocus);
     },
 
     /**
      * Handler of click event.
      * @private
      */
     handleClick_: function(e) {
-      // Clears focus.
-      this.focusPod();
+      // Clears focus if not clicked on a pod.
+      if (e.target.parentNode != this &&
+          e.target.parentNode.parentNode != this)
+        this.focusPod();
     },
 
     /**
+     * Handles focus event.
+     */
+    handleFocus_: function(e) {
+      if (e.target.parentNode == this) {
+        // Focus on a pod
+        if (e.target.classList.contains('focused'))
+          e.target.focusInput();
+        else
+          this.focusPod(e.target);
+      } else if (e.target.parentNode.parentNode != this) {
+        // Clears pod focus when we reach here. It means new focus is neither
+        // on a pod nor on a button/input for a pod.
+        this.focusPod();
+      }
+    },
+
+    /**
      * Handler of keydown event.
      * @public
      */
     handleKeyDown: function(e) {
       var editing = false;
       if (e.target.tagName == 'INPUT' && e.target.value)
         editing = true;
 
-      // TODO(xiyuan): Put this in a proper place.
-      $('bubble').hide();
-
       switch (e.keyIdentifier) {
         case 'Left':
           if (!editing) {
             if (this.focusedPod_ && this.focusedPod_.previousElementSibling)
               this.focusPod(this.focusedPod_.previousElementSibling);
             else
               this.focusPod(this.lastElementChild);
 
             e.stopPropagation();
           }
           break;
         case 'Right':
           if (!editing) {
             if (this.focusedPod_ && this.focusedPod_.nextElementSibling)
               this.focusPod(this.focusedPod_.nextElementSibling);
             else
               this.focusPod(this.firstElementChild);
 
             e.stopPropagation();
           }
           break;
         case 'Enter':
-          this.activatePod(this.focusedPod_);
-          e.stopPropagation();
+          if (this.focusedPod_) {
+            this.activatePod(this.focusedPod_);
+            e.stopPropagation();
+          }
           break;
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });