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 34a4858aab6bc0d688e6441772f5e5a0364a85b2..24fdb39d2e63738e83c2acf56c945474b5d73298 100644
--- a/chrome/browser/resources/login/user_pod_row.js
+++ b/chrome/browser/resources/login/user_pod_row.js
@@ -49,9 +49,9 @@ cr.define('login', function() {
    * synced with computed CSS sizes of pods.
    */
   var POD_WIDTH = 180;
-  var PUBLIC_EXPANDED_WIDTH = 420;
+  var PUBLIC_EXPANDED_BASIC_WIDTH = 500;
   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;
 
@@ -98,7 +98,7 @@ cr.define('login', function() {
 
   /**
    * Supported authentication types. Keep in sync with the enum in
-   * chrome/browser/chromeos/login/login_display.h
+   * chrome/browser/signin/screenlock_bridge.h
    * @enum {number}
    * @const
    */
@@ -107,6 +107,7 @@ cr.define('login', function() {
     ONLINE_SIGN_IN: 1,
     NUMERIC_PIN: 2,
     USER_CLICK: 3,
+    EXPAND_THEN_USER_CLICK: 4,
   };
 
   /**
@@ -117,6 +118,7 @@ cr.define('login', function() {
     1: 'onlineSignIn',
     2: 'numericPin',
     3: 'userClick',
+    4: 'expandThenUserClick',
   };
 
   // Focus and tab order are organized as follows:
@@ -196,15 +198,12 @@ cr.define('login', function() {
           this.handleRemoveCommandKeyDown_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('blur',
           this.handleRemoveCommandBlur_.bind(this));
-
-      if (this.actionBoxRemoveUserWarningButtonElement) {

[Nikita (slow), 2014/07/10 15:56:22]

nit: this guard is not needed?

[bartfab (slow), 2014/07/10 15:59:24]

|actionBoxRemoveUserWarningButtonElement| is the div with class
|remove-warning-button|. This div is part of the main pod template, so every pod
will have it.

-        this.actionBoxRemoveUserWarningButtonElement.addEventListener(
-            'click',
-            this.handleRemoveUserConfirmationClick_.bind(this));
+      this.actionBoxRemoveUserWarningButtonElement.addEventListener(
+          'click',
+          this.handleRemoveUserConfirmationClick_.bind(this));
         this.actionBoxRemoveUserWarningButtonElement.addEventListener(
             'keydown',
             this.handleRemoveUserConfirmationKeyDown_.bind(this));
-      }
     },
 
     /**
@@ -285,14 +284,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}
      */
@@ -309,6 +300,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}
      */
@@ -326,19 +325,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');
     },
 
     /**
@@ -374,30 +373,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}
      */
@@ -463,22 +438,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}
@@ -495,9 +454,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;
 
@@ -515,7 +473,6 @@ cr.define('login', function() {
         return;
       }
 
-      this.actionBoxAreaElement.hidden = false;
       this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;
 
       this.actionBoxAreaElement.setAttribute(
@@ -544,7 +501,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')
@@ -612,8 +568,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)) {
@@ -1034,29 +989,6 @@ cr.define('login', function() {
       return this.classList.contains('expanded');
     },
 
-    /**
-     * During transition final height of pod is not available because of
-     * flexbox layout. That's why we have to calculate
-     * the final height manually.
-     */
-    get expandedHeight_() {
-      function getTopAndBottomPadding(domElement) {
-        return parseInt(window.getComputedStyle(
-            domElement).getPropertyValue('padding-top')) +
-            parseInt(window.getComputedStyle(
-                domElement).getPropertyValue('padding-bottom'));
-      };
-      var height =
-        this.getElementsByClassName('side-pane-contents')[0].offsetHeight +
-        this.getElementsByClassName('enter-button')[0].offsetHeight +
-        getTopAndBottomPadding(
-            this.getElementsByClassName('enter-button')[0]) +
-        getTopAndBottomPadding(
-            this.getElementsByClassName('side-pane-container')[0]) +
-        getTopAndBottomPadding(this);
-      return height;
-    },
-
     set expanded(expanded) {
       if (this.expanded == expanded)
         return;
@@ -1070,13 +1002,10 @@ cr.define('login', function() {
                                                 POD_ROW_PADDING;
         this.usualLeft = this.left;
         this.usualTop = this.top;
-        if (this.left + PUBLIC_EXPANDED_WIDTH >
+        if (this.left + PUBLIC_EXPANDED_BASIC_WIDTH >
             $('pod-row').offsetWidth - rowPadding)
           this.left = $('pod-row').offsetWidth - rowPadding -
-              PUBLIC_EXPANDED_WIDTH;
-        var expandedHeight = this.expandedHeight_;
-        if (this.top + expandedHeight > $('pod-row').offsetHeight)
-          this.top = $('pod-row').offsetHeight - expandedHeight;
+              PUBLIC_EXPANDED_BASIC_WIDTH;
       } else {
         if (typeof(this.usualLeft) != 'undefined')
           this.left = this.usualLeft;
@@ -1110,7 +1039,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) {
@@ -1129,7 +1057,7 @@ cr.define('login', function() {
       learnMore.addEventListener('click', this.handleLearnMoreEvent);
       learnMore.addEventListener('keydown', this.handleLearnMoreEvent);
 
-      learnMore = this.querySelector('.side-pane-learn-more');
+      learnMore = this.querySelector('.expanded-pane-learn-more');
       learnMore.addEventListener('click', this.handleLearnMoreEvent);
       learnMore.addEventListener('keydown', this.handleLearnMoreEvent);
 
@@ -1142,7 +1070,7 @@ cr.define('login', function() {
     /** @override **/
     update: function() {
       UserPod.prototype.update.call(this);
-      this.querySelector('.side-pane-name').textContent =
+      this.querySelector('.expanded-pane-name').textContent =
           this.user_.displayName;
       this.querySelector('.info').textContent =
           loadTimeData.getStringF('publicAccountInfoFormat',
@@ -1230,29 +1158,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;
@@ -1266,15 +1186,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;
@@ -1282,16 +1193,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;
@@ -1346,16 +1249,10 @@ cr.define('login', function() {
     /** @override */
     update: function() {
       this.imageElement.src = this.user.iconUrl;
-      if (this.user.iconHeight && this.user.iconWidth) {
-        this.imageElement.style.height = this.user.iconHeight;
-        this.imageElement.style.width = this.user.iconWidth;
-      }
       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);
@@ -1369,10 +1266,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;
@@ -1460,9 +1353,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,
 
@@ -1584,15 +1474,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();
     },
@@ -1644,42 +1528,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();
     },
@@ -1725,7 +1578,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);
@@ -1733,7 +1586,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.