Implement new design for expanded public session pod design

chrome/browser/resources/login/user_pod_row.js

Index: chrome/browser/resources/login/user_pod_row.js
diff --git a/chrome/browser/resources/login/user_pod_row.js b/chrome/browser/resources/login/user_pod_row.js
index a4b8a85bc9d6d7bc910c671766d0ee4f2dfea833..c12cf6c45bcc697b8ffcaffe900fac411ffc50e4 100644
--- a/chrome/browser/resources/login/user_pod_row.js
+++ b/chrome/browser/resources/login/user_pod_row.js
@@ -51,7 +51,7 @@ cr.define('login', function() {
   var POD_WIDTH = 180;
   var PUBLIC_EXPANDED_WIDTH = 420;
   var CROS_POD_HEIGHT = 213;
-  var DESKTOP_POD_HEIGHT = 216;
+  var DESKTOP_POD_HEIGHT = 226;
   var POD_ROW_PADDING = 10;
   var DESKTOP_ROW_PADDING = 15;
 
@@ -196,12 +196,9 @@ cr.define('login', function() {
           this.handleRemoveCommandKeyDown_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('blur',
           this.handleRemoveCommandBlur_.bind(this));
-
-      if (this.actionBoxRemoveUserWarningButtonElement) {
-        this.actionBoxRemoveUserWarningButtonElement.addEventListener(
-            'click',
-            this.handleRemoveUserConfirmationClick_.bind(this));
-      }
+      this.actionBoxRemoveUserWarningButtonElement.addEventListener(
+          'click',
+          this.handleRemoveUserConfirmationClick_.bind(this));
     },
 
     /**
@@ -282,14 +279,6 @@ cr.define('login', function() {
     },
 
     /**
-     * Gets signed in indicator element.
-     * @type {!HTMLDivElement}
-     */
-    get signedInIndicatorElement() {
-      return this.querySelector('.signed-in-indicator');
-    },
-
-    /**
      * Gets image element.
      * @type {!HTMLImageElement}
      */
@@ -306,6 +295,14 @@ cr.define('login', function() {
     },
 
     /**
+     * Gets the container holding the password field.
+     * @type {!HTMLInputElement}
+     */
+    get passwordEntryContainerElement() {
+      return this.querySelector('.password-entry-container');
+    },
+
+    /**
      * Gets password field.
      * @type {!HTMLInputElement}
      */
@@ -323,19 +320,19 @@ cr.define('login', function() {
     },
 
     /**
-     * Gets Caps Lock hint image.
-     * @type {!HTMLImageElement}
+     * Gets user sign in button.
+     * @type {!HTMLButtonElement}
      */
-    get capslockHintElement() {
-      return this.querySelector('.capslock-hint');
+    get signinButtonElement() {
+      return this.querySelector('.signin-button');
     },
 
     /**
-     * Gets user sign in button.
+     * Gets the container holding the launch app button.
      * @type {!HTMLButtonElement}
      */
-    get signinButtonElement() {
-      return this.querySelector('.signin-button');
+    get launchAppButtonContainerElement() {
+      return this.querySelector('.launch-app-button-container');
     },
 
     /**
@@ -371,30 +368,6 @@ cr.define('login', function() {
     },
 
     /**
-     * Gets user type icon.
-     * @type {!HTMLDivElement}
-     */
-    get userTypeIconElement() {
-      return this.querySelector('.user-type-icon-image');
-    },
-
-    /**
-     * Gets action box menu.
-     * @type {!HTMLInputElement}
-     */
-    get actionBoxMenuElement() {
-      return this.querySelector('.action-box-menu');
-    },
-
-    /**
-     * Gets action box menu title.
-     * @type {!HTMLInputElement}
-     */
-    get actionBoxMenuTitleElement() {
-      return this.querySelector('.action-box-menu-title');
-    },
-
-    /**
      * Gets action box menu title, user name item.
      * @type {!HTMLInputElement}
      */
@@ -460,22 +433,6 @@ cr.define('login', function() {
     },
 
     /**
-     * Gets the locked user indicator box.
-     * @type {!HTMLInputElement}
-     */
-    get lockedIndicatorElement() {
-      return this.querySelector('.locked-indicator');
-    },
-
-    /**
-     * Gets the supervised user indicator box.
-     * @type {!HTMLInputElement}
-     */
-    get supervisedUserIndicatorElement() {
-      return this.querySelector('.supervised-indicator');
-    },
-
-    /**
      * Gets the custom icon. This icon is normally hidden, but can be shown
      * using the chrome.screenlockPrivate API.
      * @type {!HTMLDivElement}
@@ -492,9 +449,8 @@ cr.define('login', function() {
           '?id=' + UserPod.userImageSalt_[this.user.username];
 
       this.nameElement.textContent = this.user_.displayName;
-      this.signedInIndicatorElement.hidden = !this.user_.signedIn;
+      this.classList.toggle('signed-in', this.user_.signedIn);
 
-      this.signinButtonElement.hidden = !this.isAuthTypeOnlineSignIn;
       if (this.isAuthTypeUserClick)
         this.passwordLabelElement.textContent = this.authValue;
 
@@ -512,7 +468,6 @@ cr.define('login', function() {
         return;
       }
 
-      this.actionBoxAreaElement.hidden = false;
       this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;
 
       this.actionBoxAreaElement.setAttribute(
@@ -541,7 +496,6 @@ cr.define('login', function() {
         this.classList.add('multiprofiles-policy-applied');
         this.setUserPodIconType('policy');
 
-        this.querySelector('.mp-policy-title').hidden = false;
         if (this.user.multiProfilesPolicy == 'primary-only')
           this.querySelector('.mp-policy-primary-only-msg').hidden = false;
         else if (this.user.multiProfilesPolicy == 'owner-primary-only')
@@ -609,8 +563,7 @@ cr.define('login', function() {
 
       if (active) {
         this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;
-        if (this.actionBoxRemoveUserWarningElement)
-          this.actionBoxRemoveUserWarningElement.hidden = true;
+        this.actionBoxRemoveUserWarningElement.hidden = true;
 
         // Clear focus first if another pod is focused.
         if (!this.parentNode.isFocused(this)) {
@@ -1068,7 +1021,6 @@ cr.define('login', function() {
     decorate: function() {
       UserPod.prototype.decorate.call(this);
 
-      this.classList.remove('need-password');
       this.classList.add('public-account');
 
       this.nameElement.addEventListener('keydown', (function(e) {
@@ -1188,29 +1140,21 @@ cr.define('login', function() {
 
     /** @override */
     get mainInput() {
-      if (!this.passwordElement.hidden)
+      if (this.user.needsSignin)
         return this.passwordElement;
       else
         return this.nameElement;
     },
 
     /** @override */
-    decorate: function() {
-      UserPod.prototype.decorate.call(this);
-    },
-
-    /** @override */
     update: function() {
       this.imageElement.src = this.user.userImage;
       this.nameElement.textContent = this.user.displayName;
 
       var isLockedUser = this.user.needsSignin;
       var isSupervisedUser = this.user.locallyManagedUser;
-      this.signinButtonElement.hidden = true;
-      this.lockedIndicatorElement.hidden = !isLockedUser;
-      this.supervisedUserIndicatorElement.hidden = !isSupervisedUser;
-      this.passwordElement.hidden = !isLockedUser;
-      this.nameElement.hidden = isLockedUser;
+      this.classList.toggle('locked', isLockedUser);
+      this.classList.toggle('supervised-user', isSupervisedUser);
 
       if (this.isAuthTypeUserClick)
         this.passwordLabelElement.textContent = this.authValue;
@@ -1224,15 +1168,6 @@ cr.define('login', function() {
 
     /** @override */
     focusInput: function() {
-      // For focused pods, display the name unless the pod is locked.
-      var isLockedUser = this.user.needsSignin;
-      var isSupervisedUser = this.user.locallyManagedUser;
-      this.signinButtonElement.hidden = true;
-      this.lockedIndicatorElement.hidden = !isLockedUser;
-      this.supervisedUserIndicatorElement.hidden = !isSupervisedUser;
-      this.passwordElement.hidden = !isLockedUser;
-      this.nameElement.hidden = isLockedUser;
-
       // Move tabIndex from the whole pod to the main input.
       this.tabIndex = -1;
       this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;
@@ -1240,16 +1175,8 @@ cr.define('login', function() {
     },
 
     /** @override */
-    reset: function(takeFocus) {
-      // Always display the user's name for unfocused pods.
-      if (!takeFocus)
-        this.nameElement.hidden = false;
-      UserPod.prototype.reset.call(this, takeFocus);
-    },
-
-    /** @override */
     activate: function(e) {
-      if (this.passwordElement.hidden) {
+      if (!this.user.needsSignin) {
         Oobe.launchUser(this.user.emailAddress, this.user.displayName);
       } else if (!this.passwordElement.value) {
         return false;
@@ -1315,10 +1242,8 @@ cr.define('login', function() {
       }
       this.imageElement.alt = this.user.label;
       this.imageElement.title = this.user.label;
-      this.passwordElement.hidden = true;
-      this.signinButtonElement.hidden = true;
-      this.launchAppButtonElement.hidden = false;
-      this.signedInIndicatorElement.hidden = true;
+      this.passwordEntryContainerElement.hidden = true;
+      this.launchAppButtonContainerElement.hidden = false;
       this.nameElement.textContent = this.user.label;
 
       UserPod.prototype.updateActionBoxArea.call(this);
@@ -1332,10 +1257,6 @@ cr.define('login', function() {
 
     /** @override */
     focusInput: function() {
-      this.signinButtonElement.hidden = true;
-      this.launchAppButtonElement.hidden = false;
-      this.passwordElement.hidden = true;
-
       // Move tabIndex from the whole pod to the main input.
       this.tabIndex = -1;
       this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;
@@ -1423,9 +1344,6 @@ cr.define('login', function() {
     // Pods whose initial images haven't been loaded yet.
     podsWithPendingImages_: [],
 
-    // Whether pod creation is animated.
-    userAddIsAnimated_: false,
-
     // Whether pod placement has been postponed.
     podPlacementPostponed_: false,
 
@@ -1547,15 +1465,9 @@ cr.define('login', function() {
     /**
      * 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) {
+    addUserPod: function(user) {
       var userPod = this.createUserPod(user);
-      if (animated) {
-        userPod.classList.add('init');
-        userPod.nameElement.classList.add('init');
-      }
-
       this.appendChild(userPod);
       userPod.initialize();
     },
@@ -1607,42 +1519,11 @@ cr.define('login', function() {
     },
 
     /**
-     * Start first time show animation.
-     */
-    startInitAnimation: function() {
-      // Schedule init animation.
-      for (var i = 0, pod; pod = this.pods[i]; ++i) {
-        window.setTimeout(removeClass, 500 + i * 70, pod, 'init');
-        window.setTimeout(removeClass, 700 + i * 70, pod.nameElement, 'init');
-      }
-    },
-
-    /**
-     * Start login success animation.
-     */
-    startAuthenticatedAnimation: function() {
-      var activated = this.indexOf_(this.activatedPod_);
-      if (activated == -1)
-        return;
-
-      for (var i = 0, pod; pod = this.pods[i]; ++i) {
-        if (i < activated)
-          pod.classList.add('left');
-        else if (i > activated)
-          pod.classList.add('right');
-        else
-          pod.classList.add('zoom');
-      }
-    },
-
-    /**
      * Populates pod row with given existing users and start init animation.
      * @param {array} users Array of existing user emails.
-     * @param {boolean} animated Whether to use init animation.
      */
-    loadPods: function(users, animated) {
+    loadPods: function(users) {
       this.users_ = users;
-      this.userAddIsAnimated_ = animated;
 
       this.rebuildPods();
     },
@@ -1688,7 +1569,7 @@ cr.define('login', function() {
 
       // Populate the pod row.
       for (var i = 0; i < this.users_.length; ++i)
-        this.addUserPod(this.users_[i], this.userAddIsAnimated_);
+        this.addUserPod(this.users_[i]);
 
       for (var i = 0, pod; pod = this.pods[i]; ++i)
         this.podsWithPendingImages_.push(pod);
@@ -1696,7 +1577,7 @@ cr.define('login', function() {
       // TODO(nkostylev): Edge case handling when kiosk apps are not fitting.
       if (this.shouldShowApps_) {
         for (var i = 0; i < this.apps_.length; ++i)
-          this.addUserPod(this.apps_[i], this.userAddIsAnimated_);
+          this.addUserPod(this.apps_[i]);
       }
 
       // Make sure we eventually show the pod row, even if some image is stuck.