cros: Account picker UI for public account.

chrome/browser/resources/chromeos/login/user_pod_row.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 User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 75 matching lines @@
   function removeClass(el, cl) {
     el.classList.remove(cl);
   }
 
   /**
    * Creates a user pod.
    * @constructor
    * @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 = {
     __proto__: HTMLDivElement.prototype,
 
     /** @override */
     decorate: function() {
       this.tabIndex = UserPodTabOrder.POD_INPUT;
       this.removeUserButtonElement.tabIndex = UserPodTabOrder.REMOVE_USER;
 
@@ skipping 54 matching lines @@
         e.preventDefault();
         return;
       }
     },
 
     /**
      * Gets signed in indicator element.
      * @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.

     },
 
     /**
      * Gets image element.
      * @type {!HTMLImageElement}
      */
     get imageElement() {
-      return this.signedInIndicatorElement.nextElementSibling;
+      return this.querySelector('.user-image');
     },
 
     /**
      * Gets name element.
      * @type {!HTMLDivElement}
      */
     get nameElement() {
-      return this.imageElement.nextElementSibling;
+      return this.querySelector('.name');
     },
 
     /**
      * Gets password field.
      * @type {!HTMLInputElement}
      */
     get passwordElement() {
-      return this.nameElement.nextElementSibling;
+      return this.querySelector('.password');
     },
 
     /**
      * Gets Caps Lock hint image.
      * @type {!HTMLImageElement}
      */
     get capslockHintElement() {
-      return this.signinButtonElement.previousElementSibling;
+      return this.querySelector('.capslock-hint');
     },
 
     /**
      * Gets user signin button.
      * @type {!HTMLInputElement}
      */
     get signinButtonElement() {
-      return this.removeUserButtonElement.previousElementSibling;
+      return this.querySelector('.signin-button');
     },
 
     /**
      * Gets remove user button.
      * @type {!HTMLInputElement}
      */
     get removeUserButtonElement() {
-      return this.lastElementChild;
+      return this.querySelector('.remove-user-button');
     },
 
     /**
      * Updates the user pod element.
      */
     update: function() {
       this.updateUserImage();
 
       this.nameElement.textContent = this.user_.displayName;
       this.removeUserButtonElement.hidden = !this.user_.canRemove;
@@ skipping 158 matching lines @@
       if (this.parentNode.disabled)
         return;
       if (!this.signinButtonElement.hidden) {
         this.showSigninUI();
         // Prevent default so that we don't trigger 'focus' event.
         e.preventDefault();
       }
     }
   };
 
+  /**
+   * 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.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var PodRow = cr.ui.define('podrow');
 
   PodRow.prototype = {
     __proto__: HTMLDivElement.prototype,
@@ skipping 96 matching lines @@
       for (var i = 0, control; control = controls[i]; ++i) {
         control.disabled = value;
       }
     },
 
     /**
      * Creates a user pod from given email.
      * @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;
     },
 
     /**
      * 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, animated) {
@@ skipping 264 matching lines @@
 
     /**
      * Handler of click event.
      * @param {Event} e Click Event object.
      * @private
      */
     handleClick_: function(e) {
       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();
       }
 
       // Return focus back to single pod.
       if (this.isSinglePod) {
         this.focusPod(this.focusedPod_, true /* force */);
       }
     },
 
     /**
      * Handles focus event.
      * @param {Event} e Focus Event object.
      * @private
      */
     handleFocus_: function(e) {
       if (this.disabled)
         return;
       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) {
+        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();
     },
 
     /**
      * Handler of keydown event.
      * @param {Event} e KeyDown Event object.
      */
     handleKeyDown: function(e) {
       if (this.disabled)
         return;
       var editing = e.target.tagName == 'INPUT' && e.target.value;
@@ skipping 98 matching lines @@
         this.classList.remove('images-loading');
         chrome.send('userImagesLoaded');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });