First try at a user management screen for the desktop

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 136 matching lines @@
           this.handleActionAreaButtonClick_.bind(this));
       this.actionBoxAreaElement.addEventListener('keydown',
           this.handleActionAreaButtonKeyDown_.bind(this));
 
       this.actionBoxMenuRemoveElement.addEventListener('click',
           this.handleRemoveCommandClick_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('keydown',
           this.handleRemoveCommandKeyDown_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('blur',
           this.handleRemoveCommandBlur_.bind(this));
-      this.actionBoxRemoveManagedUserWarningButtonElement.addEventListener(
-          'click',
-          this.handleRemoveUserConfirmationClick_.bind(this));
 
+      if (this.actionBoxRemoveManagedUserWarningButtonElement) {
+        this.actionBoxRemoveManagedUserWarningButtonElement.addEventListener(
+            'click',
+            this.handleRemoveUserConfirmationClick_.bind(this));
+      }
     },
 
     /**
      * Initializes the pod after its properties set and added to a pod row.
      */
     initialize: function() {
       this.passwordElement.addEventListener('keydown',
           this.parentNode.handleKeyDown.bind(this.parentNode));
       this.passwordElement.addEventListener('keypress',
           this.handlePasswordKeyPress_.bind(this));
@@ skipping 154 matching lines @@
     },
 
     /**
      * Updates the user pod element.
      */
     update: function() {
       this.imageElement.src = 'chrome://userimage/' + this.user.username +
           '?id=' + UserPod.userImageSalt_[this.user.username];
 
       this.nameElement.textContent = this.user_.displayName;
-      this.actionBoxAreaElement.hidden = this.user_.publicAccount;
-      this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;
       this.signedInIndicatorElement.hidden = !this.user_.signedIn;
 
       var needSignin = this.needGaiaSignin;
       this.passwordElement.hidden = needSignin;
+      this.signinButtonElement.hidden = !needSignin;
+
+      this.updateActionBoxArea();
+    },
+
+    updateActionBoxArea: function() {
+      this.actionBoxAreaElement.hidden = this.user_.publicAccount;
+      this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;
+
       this.actionBoxAreaElement.setAttribute(
           'aria-label', loadTimeData.getStringF(
               'podMenuButtonAccessibleName', this.user_.emailAddress));
       this.actionBoxMenuRemoveElement.setAttribute(
           'aria-label', loadTimeData.getString(
                'podMenuRemoveItemAccessibleName'));
       this.actionBoxMenuTitleNameElement.textContent = this.user_.isOwner ?
           loadTimeData.getStringF('ownerUserPattern', this.user_.displayName) :
           this.user_.displayName;
       this.actionBoxMenuTitleEmailElement.textContent = this.user_.emailAddress;
       this.actionBoxMenuTitleEmailElement.hidden =
           this.user_.locallyManagedUser;
 
       this.actionBoxMenuCommandElement.textContent =
           loadTimeData.getString('removeUser');
       this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF(
           'passwordFieldAccessibleName', this.user_.emailAddress));
-      this.signinButtonElement.hidden = !needSignin;
       this.userTypeIconAreaElement.hidden = !this.user_.locallyManagedUser;
     },
 
     /**
      * The user that this pod represents.
      * @type {!Object}
      */
     user_: undefined,
     get user() {
       return this.user_;
@@ skipping 32 matching lines @@
      */
     get isActionBoxMenuActive() {
       return this.actionBoxAreaElement.classList.contains('active');
     },
     set isActionBoxMenuActive(active) {
       if (active == this.isActionBoxMenuActive)
         return;
 
       if (active) {
         this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;
-        this.actionBoxRemoveManagedUserWarningElement.hidden = true;
+        if (this.actionBoxRemoveManagedUserWarningElement)
+          this.actionBoxRemoveManagedUserWarningElement.hidden = true;
 
         // Clear focus first if another pod is focused.
         if (!this.parentNode.isFocused(this)) {
           this.parentNode.focusPod(undefined, true);
           this.actionBoxAreaElement.focus();
         }
         this.actionBoxAreaElement.classList.add('active');
       } else {
         this.actionBoxAreaElement.classList.remove('active');
       }
@@ skipping 190 matching lines @@
       this.actionBoxMenuRemoveElement.tabIndex = -1;
     },
 
     /**
      * Handles mousedown event on a user pod.
      * @param {Event} e Mousedown event.
      */
     handleMouseDown_: function(e) {
       if (this.parentNode.disabled)
         return;
+
       if (!this.signinButtonElement.hidden && !this.isActionBoxMenuActive) {
         this.showSigninUI();
         // Prevent default so that we don't trigger 'focus' event.
         e.preventDefault();
       }
     }
   };
 
   /**
    * Creates a public account user pod.
@@ skipping 170 matching lines @@
               return;
           }
           break;
       }
       chrome.send('launchHelpApp', [HELP_TOPIC_PUBLIC_SESSION]);
       stopEventPropagation(event);
     },
   };
 
   /**
+   * Creates a user pod to be used only in desktop chrome.
+   * @constructor
+   * @extends {UserPod}
+   */
+  var DesktopUserPod = cr.ui.define(function() {
+    // Don't just instantiate a UserPod(), as this will call decorate() on the
+    // parent object, and add duplicate event listeners.
+    var node = $('user-pod-template').cloneNode(true);
+    node.removeAttribute('id');
+    return node;
+  });
+
+  DesktopUserPod.prototype = {
+    __proto__: UserPod.prototype,
+
+    /** @override */
+    decorate: function() {
+      UserPod.prototype.decorate.call(this);
+    },
+
+    /** @override */
+    focusInput: function() {
+      var isLockedUser = this.user.needsSignin;
+      this.signinButtonElement.hidden = isLockedUser;
+      this.passwordElement.hidden = !isLockedUser;
+
+      // Move tabIndex from the whole pod to the main input.
+      this.tabIndex = -1;
+      this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;
+      this.mainInput.focus();
+    },
+
+    /** @override */
+    update: function() {
+      // TODO(noms): Use the actual profile avatar for local profiles once the
+      // new, non-pixellated avatars are available.
+      this.imageElement.src = this.user.emailAddress == '' ?
+          'chrome://theme/IDR_USER_MANAGER_DEFAULT_AVATAR' :
+          this.user.userImage;
+      this.nameElement.textContent = this.user_.displayName;
+      var isLockedUser = this.user.needsSignin;
+      this.passwordElement.hidden = !isLockedUser;
+      this.signinButtonElement.hidden = isLockedUser;
+
+      UserPod.prototype.updateActionBoxArea.call(this);
+    },
+
+    /** @override */
+    activate: function() {
+      Oobe.launchUser(this.user.emailAddress, this.user.displayName);
+      return true;
+    },
+
+    /** @override */
+    handleMouseDown_: function(e) {
+      if (this.parentNode.disabled)
+        return;
+
+      // Don't sign in until the user presses the button. Just activate the pod.
+      Oobe.clearErrors();
+      this.parentNode.lastFocusedPod_ =
+          this.parentNode.getPodWithUsername_(this.user.emailAddress);
+    },
+
+    /** @override */
+    handleRemoveCommandClick_: function(e) {
+      //TODO(noms): Add deletion confirmation overlay before attempting
+      // to delete the user.
+      UserPod.prototype.handleRemoveCommandClick_.call(this, e);
+    },
+  };
+
+  /**
    * Creates a new pod row element.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var PodRow = cr.ui.define('podrow');
 
   PodRow.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     // Whether this user pod row is shown for the first time.
@@ skipping 85 matching lines @@
         control.disabled = value;
       }
     },
 
     /**
      * Creates a user pod from given email.
      * @param {string} email User's email.
      */
     createUserPod: function(user) {
       var userPod;
-      if (user.publicAccount)
+      if (user.isDesktopUser)
+        userPod = new DesktopUserPod({user: user});
+      else 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.
@@ skipping 528 matching lines @@
         this.classList.remove('images-loading');
         chrome.send('userImagesLoaded');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });