Implement new design for expanded public session pod design

chrome/browser/resources/login/user_pod_row.js

 // Copyright 2014 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 33 matching lines @@
    */
   var MAX_NUMBER_OF_ROWS_UNDER_SIGNIN_BANNER = 2;
 
   /**
    * Variables used for pod placement processing. Width and height should be
    * synced with computed CSS sizes of pods.
    */
   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;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
    * @type {number}
    * @const
    */
   var USER_POD_KEYBOARD_MIN_PADDING = 20;
 
@@ skipping 124 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));
-
-      if (this.actionBoxRemoveUserWarningButtonElement) {
-        this.actionBoxRemoveUserWarningButtonElement.addEventListener(
-            'click',
-            this.handleRemoveUserConfirmationClick_.bind(this));
-      }
+      this.actionBoxRemoveUserWarningButtonElement.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 60 matching lines @@
     },
 
     /**
      * Height number of pixels.
      */
     get height() {
       return this.offsetHeight;
     },
 
     /**
-     * Gets signed in indicator element.
-     * @type {!HTMLDivElement}
-     */
-    get signedInIndicatorElement() {
-      return this.querySelector('.signed-in-indicator');
-    },
-
-    /**
      * Gets image element.
      * @type {!HTMLImageElement}
      */
     get imageElement() {
       return this.querySelector('.user-image');
     },
 
     /**
      * Gets name element.
      * @type {!HTMLDivElement}
      */
     get nameElement() {
       return this.querySelector('.name');
     },
 
     /**
+     * Gets the container holding the password field.
+     * @type {!HTMLInputElement}
+     */
+    get passwordEntryContainerElement() {
+      return this.querySelector('.password-entry-container');
+    },
+
+    /**
      * Gets password field.
      * @type {!HTMLInputElement}
      */
     get passwordElement() {
       return this.querySelector('.password');
     },
 
     /**
      * Gets the password label, which is used to show a message where the
      * password field is normally.
      * @type {!HTMLInputElement}
      */
     get passwordLabelElement() {
       return this.querySelector('.password-label');
     },
 
     /**
-     * Gets Caps Lock hint image.
-     * @type {!HTMLImageElement}
-     */
-    get capslockHintElement() {
-      return this.querySelector('.capslock-hint');
-    },
-
-    /**
      * Gets user sign in button.
      * @type {!HTMLButtonElement}
      */
     get signinButtonElement() {
       return this.querySelector('.signin-button');
     },
 
     /**
+     * Gets the container holding the launch app button.
+     * @type {!HTMLButtonElement}
+     */
+    get launchAppButtonContainerElement() {
+      return this.querySelector('.launch-app-button-container');
+    },
+
+    /**
      * Gets launch app button.
      * @type {!HTMLButtonElement}
      */
     get launchAppButtonElement() {
       return this.querySelector('.launch-app-button');
     },
 
     /**
      * Gets action box area.
      * @type {!HTMLInputElement}
@@ skipping 12 matching lines @@
 
     /**
      * Gets user type bubble like multi-profiles policy restriction message.
      * @type {!HTMLDivElement}
      */
     get userTypeBubbleElement() {
       return this.querySelector('.user-type-bubble');
     },
 
     /**
-     * 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}
      */
     get actionBoxMenuTitleNameElement() {
       return this.querySelector('.action-box-menu-title-name');
     },
 
     /**
      * Gets action box menu title, user email item.
      * @type {!HTMLInputElement}
@@ skipping 45 matching lines @@
 
     /**
      * Gets action box menu, remove user command item div.
      * @type {!HTMLInputElement}
      */
     get actionBoxRemoveUserWarningButtonElement() {
       return this.querySelector('.remove-warning-button');
     },
 
     /**
-     * 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}
      */
     get customIconElement() {
       return this.querySelector('.custom-icon');
     },
 
     /**
      * 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.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;
 
       this.updateActionBoxArea();
 
       this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF(
         'passwordFieldAccessibleName', this.user_.emailAddress));
 
       this.customizeUserPodPerUserType();
     },
 
     updateActionBoxArea: function() {
       if (this.user_.publicAccount || this.user_.isApp) {
         this.actionBoxAreaElement.hidden = true;
         return;
       }
 
-      this.actionBoxAreaElement.hidden = false;
       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');
     },
 
     customizeUserPodPerUserType: function() {
       if (this.user_.locallyManagedUser && !this.user_.isDesktopUser) {
         this.setUserPodIconType('supervised');
       } else if (this.multiProfilesPolicyApplied) {
         // Mark user pod as not focusable which in addition to the grayed out
         // filter makes it look in disabled state.
         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')
           this.querySelector('.mp-owner-primary-only-msg').hidden = false;
         else
           this.querySelector('.mp-policy-not-allowed-msg').hidden = false;
       } else if (this.user_.isApp) {
         this.setUserPodIconType('app');
       }
     },
@@ skipping 47 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;
-        if (this.actionBoxRemoveUserWarningElement)
-          this.actionBoxRemoveUserWarningElement.hidden = true;
+        this.actionBoxRemoveUserWarningElement.hidden = true;
 
         // Clear focus first if another pod is focused.
         if (!this.parentNode.isFocused(this)) {
           this.parentNode.focusPod(undefined, true);
           this.actionBoxAreaElement.focus();
         }
 
         // Hide user-type-bubble.
         this.userTypeBubbleElement.classList.remove('bubble-shown');
 
@@ skipping 437 matching lines @@
       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.setActivatedPod(this, e);
           // 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();
@@ skipping 99 matching lines @@
     var node = $('user-pod-template').cloneNode(true);
     node.removeAttribute('id');
     return node;
   });
 
   DesktopUserPod.prototype = {
     __proto__: UserPod.prototype,
 
     /** @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;
 
       this.actionBoxRemoveUserWarningTextElement.hidden = isSupervisedUser;
       this.actionBoxRemoveSupervisedUserWarningTextElement.hidden =
           !isSupervisedUser;
 
       UserPod.prototype.updateActionBoxArea.call(this);
     },
 
     /** @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;
       this.mainInput.focus();
     },
 
     /** @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;
       } else {
         chrome.send('authenticatedLaunchUser',
                     [this.user.emailAddress,
                      this.user.displayName,
                      this.passwordElement.value]);
       }
       this.passwordElement.value = '';
@@ skipping 45 matching lines @@
 
     /** @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);
       UserPod.prototype.customizeUserPodPerUserType.call(this);
     },
 
     /** @override */
     get mainInput() {
       return this.launchAppButtonElement;
     },
 
     /** @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;
       this.mainInput.focus();
     },
 
     /** @override */
     get forceOnlineSignin() {
       return false;
     },
@@ skipping 67 matching lines @@
 
     // Activated pod, i.e. the pod of current login attempt.
     activatedPod_: undefined,
 
     // Pod that was most recently focused, if any.
     lastFocusedPod_: undefined,
 
     // 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,
 
     // Standard user pod height/width.
     userPodHeight_: 0,
     userPodWidth_: 0,
 
     // Array of apps that are shown in addition to other user pods.
     apps_: [],
 
@@ skipping 101 matching lines @@
       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) {
+    addUserPod: function(user) {
       var userPod = this.createUserPod(user);
-      if (animated) {
-        userPod.classList.add('init');
-        userPod.nameElement.classList.add('init');
-      }
-
       this.appendChild(userPod);
       userPod.initialize();
     },
 
     /**
      * Runs app with a given id from the list of loaded apps.
      * @param {!string} app_id of an app to run.
      * @param {boolean=} opt_diagnostic_mode Whether to run the app in
      *     diagnostic mode. Default is false.
      */
@@ skipping 31 matching lines @@
      */
     indexOf_: function(pod) {
       for (var i = 0; i < this.pods.length; ++i) {
         if (pod == this.pods[i])
           return i;
       }
       return -1;
     },
 
     /**
-     * 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();
     },
 
     /**
      * Scrolls focused user pod into view.
      */
     scrollFocusedPodIntoView: function() {
       var pod = this.focusedPod_;
       if (!pod)
@@ skipping 25 matching lines @@
       this.innerHTML = '';
       this.focusedPod_ = undefined;
       this.activatedPod_ = undefined;
       this.lastFocusedPod_ = undefined;
 
       // Switch off animation
       Oobe.getInstance().toggleClass('flying-pods', false);
 
       // 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);
 
       // 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.
       setTimeout(function() {
         $('pod-row').classList.remove('images-loading');
       }, POD_ROW_IMAGES_LOAD_TIMEOUT_MS);
 
       var isCrosAccountPicker = $('login-header-bar').signinUIState ==
           SIGNIN_UI_STATE.ACCOUNT_PICKER;
       var isDesktopUserManager = Oobe.getInstance().displayType ==
@@ skipping 693 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });