cros: Account picker UI for public account.

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

Index: chrome/browser/resources/chromeos/login/user_pod_row.js
diff --git a/chrome/browser/resources/chromeos/login/user_pod_row.js b/chrome/browser/resources/chromeos/login/user_pod_row.js
index 111d7c2641f20b63d6636fdb13be4fe500a28918..ab19dcfae9ec8dd4bf2b6e3398cc11f4f32b3f05 100644
--- a/chrome/browser/resources/chromeos/login/user_pod_row.js
+++ b/chrome/browser/resources/chromeos/login/user_pod_row.js
@@ -93,7 +93,9 @@ cr.define('login', function() {
    * @extends {HTMLDivElement}
    */
   var UserPod = cr.ui.define(function() {
-    return $('user-pod-template').cloneNode(true);
+    var dom = $('user-pod-template').cloneNode(true);
+    dom.id = '';
+    return dom;
   });
 
   UserPod.prototype = {
@@ -168,7 +170,7 @@ cr.define('login', function() {
      * @type {!HTMLDivElement}
      */
     get signedInIndicatorElement() {
-      return this.firstElementChild;
+      return this.querySelector('.signed-in-indicator');

[bartfab (slow), 2012/12/05 18:49:51]

Nice drive-by clean-up in these methods.

     },
 
     /**
@@ -176,7 +178,7 @@ cr.define('login', function() {
      * @type {!HTMLImageElement}
      */
     get imageElement() {
-      return this.signedInIndicatorElement.nextElementSibling;
+      return this.querySelector('.user-image');
     },
 
     /**
@@ -184,7 +186,7 @@ cr.define('login', function() {
      * @type {!HTMLDivElement}
      */
     get nameElement() {
-      return this.imageElement.nextElementSibling;
+      return this.querySelector('.name');
     },
 
     /**
@@ -192,7 +194,7 @@ cr.define('login', function() {
      * @type {!HTMLInputElement}
      */
     get passwordElement() {
-      return this.nameElement.nextElementSibling;
+      return this.querySelector('.password');
     },
 
     /**
@@ -200,7 +202,7 @@ cr.define('login', function() {
      * @type {!HTMLImageElement}
      */
     get capslockHintElement() {
-      return this.signinButtonElement.previousElementSibling;
+      return this.querySelector('.capslock-hint');
     },
 
     /**
@@ -208,7 +210,7 @@ cr.define('login', function() {
      * @type {!HTMLInputElement}
      */
     get signinButtonElement() {
-      return this.removeUserButtonElement.previousElementSibling;
+      return this.querySelector('.signin-button');
     },
 
     /**
@@ -216,7 +218,7 @@ cr.define('login', function() {
      * @type {!HTMLInputElement}
      */
     get removeUserButtonElement() {
-      return this.lastElementChild;
+      return this.querySelector('.remove-user-button');
     },
 
     /**
@@ -395,6 +397,143 @@ cr.define('login', function() {
     }
   };
 
+  /**
+   * Creates a public account user pod.
+   * @constructor
+   * @extends {UserPod}
+   */
+  var PublicAccountUserPod = cr.ui.define(function() {
+    var dom = UserPod();
+
+    var extras = $('public-account-user-pod-extras-template').children;
+    for (var i = 0; i < extras.length; ++i) {
+      var el = extras[i].cloneNode(true);
+      dom.appendChild(el);
+    }
+
+    return dom;
+  });
+
+  PublicAccountUserPod.prototype = {
+    __proto__: UserPod.prototype,
+
+    /**
+     * "Enter" button in expanded side pane.
+     * @type {!HTMLButtonElement}
+     */
+    get enterButtonElement() {
+      return this.querySelector('.enter-button');
+    },
+
+    /**
+     * Boolean flag of whether the pod is showing the side pane. The flag
+     * controls whether 'expanded' class is added to the pod's class list and
+     * resets tab order because main input element changes when the 'expanded'
+     * state changes.
+     * @type {boolean}
+     */
+    get expanded() {
+      return this.classList.contains('expanded');
+    },
+    set expanded(expanded) {
+      if (this.expanded == expanded)
+        return;
+
+      this.resetTabOrder();
+      if (expanded) {

[bartfab (slow), 2012/12/05 18:49:51]

As I was just told in another code review, webkit now has:

classList.toggle(string, bool);

[xiyuan, 2012/12/05 19:38:49]

Good to know. Thanks for the tip. 

+        this.classList.add('expanded');
+      } else {
+        this.classList.remove('expanded');
+      }
+
+      this.classList.add('animating');
+      this.addEventListener('webkitTransitionEnd', function f(e) {
+        this.removeEventListener('webkitTransitionEnd', f);

[Ivan Korotkov, 2012/12/05 18:57:33]

I think it's not gonna work since you add f.bind(...), and remove just f. So
you'll have to use some kind of var self = this instead of bind(this).

[xiyuan, 2012/12/05 19:38:49]

You are right. I missed that.

+        this.classList.remove('animating');
+      }.bind(this));
+    },
+
+    /** @override */
+    get needGaiaSignin() {
+      return false;
+    },
+
+    /** @override */
+    get mainInput() {
+      if (this.expanded)
+        return this.enterButtonElement;
+      else
+        return this.nameElement;
+    },
+
+    /** @override */
+    decorate: function() {
+      UserPod.prototype.decorate.call(this);
+
+      this.classList.remove('need-password');
+      this.classList.add('public-account');
+
+      this.nameElement.addEventListener('keydown', (function(e) {
+        if (e.keyIdentifier == 'Enter') {
+          this.parentNode.activatedPod = this;
+          // Stop this keydown event from bubbling up to PodRow handler.
+          e.stopPropagation();
+          // Prevent default so that we don't trigger a 'click' event on the
+          // newly focused "Enter" button.
+          e.preventDefault();
+        }
+      }).bind(this));
+
+      this.enterButtonElement.addEventListener('click', (function(e) {
+        chrome.send('launchPublicAccount', [this.user.username]);
+      }).bind(this));
+    },
+
+    /**
+     * Updates the user pod element.
+     */
+    update: function() {
+      UserPod.prototype.update.call(this);
+      this.querySelector('.side-pane-name').textContent =
+          this.user_.displayName;
+      this.querySelector('.info').textContent =
+          localStrings.getStringF('publicAccountInfoFormat',
+                                  this.user_.enterpriseDomain);
+    },
+
+    /** @override */
+    focusInput: function() {
+      // Move tabIndex from the whole pod to the main input.
+      this.tabIndex = -1;
+      this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;
+      this.mainInput.focus();
+    },
+
+    /** @override */
+    reset: function(takeFocus) {
+      if (!takeFocus)
+        this.expanded = false;
+      UserPod.prototype.reset.call(this, takeFocus);
+    },
+
+    /** @override */
+    activate: function() {
+      this.expanded = true;
+      this.focusInput();
+      return true;
+    },
+
+    /** @override */
+    handleMouseDown_: function(e) {
+      if (this.parentNode.disabled)
+        return;
+
+      this.parentNode.focusPod(this);
+      this.parentNode.activatedPod = this;
+      // Prevent default so that we don't trigger 'focus' event.
+      e.preventDefault();
+    }
+  };
 
   /**
    * Creates a new pod row element.
@@ -511,7 +650,12 @@ cr.define('login', function() {
      * @param {string} email User's email.
      */
     createUserPod: function(user) {
-      var userPod = new UserPod({user: user});
+      var userPod;
+      if (user.publicAccount)
+        userPod = new PublicAccountUserPod({user: user});
+      else
+        userPod = new UserPod({user: user});
+
       userPod.hidden = false;
       return userPod;
     },
@@ -796,9 +940,8 @@ cr.define('login', function() {
       if (this.disabled)
         return;
       // Clears focus if not clicked on a pod and if there's more than one pod.
-      if (e.target.parentNode != this &&
-          e.target.parentNode.parentNode != this &&
-          !this.isSinglePod) {
+      var pod = findAncestorByClass(e.target, 'pod');
+      if ((!pod || pod.parentNode != this) && !this.isSinglePod) {
         this.focusPod();
       }
 
@@ -822,22 +965,27 @@ cr.define('login', function() {
           e.target.focusInput();
         else
           this.focusPod(e.target);
-      } else if (e.target.parentNode.parentNode == this) {
+        return;
+      }
+
+      var pod = findAncestorByClass(e.target, 'pod');
+      if (pod && pod.parentNode == this) {
         // Focus on a control of a pod but not on the Remove button.
-        if (!e.target.parentNode.classList.contains('focused') &&
+        if (!pod.classList.contains('focused') &&
             !e.target.classList.contains('remove-user-button')) {
-          this.focusPod(e.target.parentNode);
+          this.focusPod(pod);
           e.target.focus();
         }
-      } else {
-        // Clears pod focus when we reach here. It means new focus is neither
-        // on a pod nor on a button/input for a pod.
-        // Do not "defocus" user pod when it is a single pod.
-        // That means that 'focused' class will not be removed and
-        // input field/button will always be visible.
-        if (!this.isSinglePod)
-          this.focusPod();
+        return;
       }
+
+      // Clears pod focus when we reach here. It means new focus is neither
+      // on a pod nor on a button/input for a pod.
+      // Do not "defocus" user pod when it is a single pod.
+      // That means that 'focused' class will not be removed and
+      // input field/button will always be visible.
+      if (!this.isSinglePod)
+        this.focusPod();
     },
 
     /**