Multiple user pods implementation for new login screen

ui/login/account_picker/md_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 31 matching lines @@
    * @type {number}
    * @const
    */
   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 CROS_POD_WIDTH = 306;
+  var CROS_SMALL_POD_WIDTH = 304;
+  var CROS_EXTRA_SMALL_POD_WIDTH = 282;
   var DESKTOP_POD_WIDTH = 180;
   var MD_DESKTOP_POD_WIDTH = 160;
   var PUBLIC_EXPANDED_BASIC_WIDTH = 500;
   var PUBLIC_EXPANDED_ADVANCED_WIDTH = 610;
   var CROS_POD_HEIGHT = 346;
+  var CROS_SMALL_POD_HEIGHT = 74;
+  var CROS_EXTRA_SMALL_POD_HEIGHT = 60;
   var DESKTOP_POD_HEIGHT = 226;
   var MD_DESKTOP_POD_HEIGHT = 200;
   var POD_ROW_PADDING = 10;
   var DESKTOP_ROW_PADDING = 32;
   var CUSTOM_ICON_CONTAINER_SIZE = 40;
   var CROS_PIN_POD_HEIGHT = 417;
+  var SCROLL_MASK_HEIGHT = 112;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
    * @type {number}
    * @const
    */
   var USER_POD_KEYBOARD_MIN_PADDING = 20;
 
   /**
    * Maximum time for which the pod row remains hidden until all user images
    * have been loaded.
    * @type {number}
    * @const
    */
   var POD_ROW_IMAGES_LOAD_TIMEOUT_MS = 3000;
 
   /**
    * Public session help topic identifier.
    * @type {number}
    * @const
    */
   var HELP_TOPIC_PUBLIC_SESSION = 3041033;
 
   /**
    * Tab order for user pods. Update these when adding new controls.
    * @enum {number}
    * @const
    */
   var UserPodTabOrder = {
-    POD_INPUT: 1,        // Password input field, Action box menu button and
-                         // the pod itself.
-    PIN_KEYBOARD: 2,     // Pin keyboard below the password input field.
-    POD_CUSTOM_ICON: 3,  // Pod custom icon next to password input field.
-    HEADER_BAR: 4,       // Buttons on the header bar (Shutdown, Add User).
-    POD_MENU_ITEM: 5     // User pad menu items (User info, Remove user).
+    POD_INPUT: 1,          // Password input field and the pod itself.
+    PIN_KEYBOARD: 2,       // Pin keyboard below the password input field.
+    POD_CUSTOM_ICON: 3,    // Pod custom icon next to password input field.
+    HEADER_BAR: 4,         // Buttons on the header bar (Shutdown, Add User).
+    ACTION_BOX_BUTTON: 5,  // Action box menu button.
+    POD_MENU_ITEM: 6       // User pod menu items (User info, Remove user).
   };
 
   /**
    * Supported authentication types. Keep in sync with the enum in
    * chrome/browser/signin/screenlock_bridge.h
    * @enum {number}
    * @const
    */
   var AUTH_TYPE = {
     OFFLINE_PASSWORD: 0,
@@ skipping 40 matching lines @@
     {state: FINGERPRINT_STATES.DEFAULT, class: 'default'},
     {state: FINGERPRINT_STATES.SIGNIN, class: 'signin'},
     {state: FINGERPRINT_STATES.FAILED, class: 'failed'}
   ];
 
   // Focus and tab order are organized as follows:
   //
   // (1) all user pods have tab index 1 so they are traversed first;
   // (2) when a user pod is activated, its tab index is set to -1 and its
   // main input field gets focus and tab index 1;
-  // (3) if user pod custom icon is interactive, it has tab index 2 so it
-  // follows the input.
-  // (4) buttons on the header bar have tab index 3 so they follow the custom
-  // icon, or user pod if custom icon is not interactive;
-  // (5) Action box buttons have tab index 4 and follow header bar buttons;
-  // (6) lastly, focus jumps to the Status Area and back to user pods.
+  // (3) if pin keyboard is present, it has tab index 2 so it follows the input;
+  // (4) if user pod custom icon is interactive, it has tab index 3;
+  // (5) buttons on the header bar have tab index 4;
+  // (6) Action box buttons have tab index 5 and follow the buttons on the
+  // header bar;
+  // (7) User pod menu items (if present) have tab index 6;
+  // (8) lastly, focus jumps to the Status Area and back to user pods.
   //
   // 'Focus' event is handled by a capture handler for the whole document
   // and in some cases 'mousedown' event handlers are used instead of 'click'
   // handlers where it's necessary to prevent 'focus' event from being fired.
 
   /**
    * Helper function to remove a class from given element.
    * @param {!HTMLElement} el Element whose class list to change.
    * @param {string} cl Class to remove.
    */
@@ skipping 572 matching lines @@
     /**
      * True iff the pod can display the pin keyboard. The pin keyboard may not
      * always be displayed even if this is true, ie, if the virtual keyboard is
      * also being displayed.
      */
     pinEnabled: false,
 
     /** @override */
     decorate: function() {
       this.tabIndex = UserPodTabOrder.POD_INPUT;
-      this.actionBoxAreaElement.tabIndex = UserPodTabOrder.POD_INPUT;
+      this.actionBoxAreaElement.tabIndex = UserPodTabOrder.ACTION_BOX_BUTTON;
 
       this.addEventListener('keydown', this.handlePodKeyDown_.bind(this));
       this.addEventListener('click', this.handleClickOnPod_.bind(this));
       this.addEventListener('mousedown', this.handlePodMouseDown_.bind(this));
 
       if (this.pinKeyboard) {
         this.pinKeyboard.passwordElement = this.passwordElement;
         this.pinKeyboard.addEventListener('pin-change',
             this.handleInputChanged_.bind(this));
         this.pinKeyboard.tabIndex = UserPodTabOrder.PIN_KEYBOARD;
@@ skipping 49 matching lines @@
           this.handleInputMouseUp_.bind(this));
 
       if (this.submitButton) {
         this.submitButton.addEventListener('click',
             this.handleSubmitButtonClick_.bind(this));
       }
 
       this.imageElement.addEventListener('load',
           this.parentNode.handlePodImageLoad.bind(this.parentNode, this));
 
+      this.smallPodImageElement.addEventListener(
+          'load',
+          this.parentNode.handlePodImageLoad.bind(this.parentNode, this));
+
       var initialAuthType = this.user.initialAuthType ||
           AUTH_TYPE.OFFLINE_PASSWORD;
       this.setAuthType(initialAuthType, null);
 
       if (this.user.isActiveDirectory)
         this.setAttribute('is-active-directory', '');
 
       this.userClickAuthAllowed_ = false;
 
       // Lazy load the assets needed for the polymer submit button.
@@ skipping 109 matching lines @@
 
     /**
      * Gets name element.
      * @type {!HTMLDivElement}
      */
     get nameElement() {
       return this.querySelector('.name');
     },
 
     /**
+     * Gets image element of the small pod.
+     * @type {!HTMLImageElement}
+     */
+    get smallPodImageElement() {
+      return this.querySelector('.small-pod-image');
+    },
+
+    /**
+     * Gets name element of the small pod.
+     * @type {!HTMLDivElement}
+     */
+    get smallPodNameElement() {
+      return this.querySelector('.small-pod-name');
+    },
+
+    /**
      * Gets reauth name hint element.
      * @type {!HTMLDivElement}
      */
     get reauthNameHintElement() {
       return this.querySelector('.reauth-name-hint');
     },
 
     /**
      * Gets the container holding the password field.
      * @type {!HTMLInputElement}
@@ skipping 151 matching lines @@
     get customIconElement() {
       return this.querySelector('.custom-icon-container');
     },
 
     /**
      * Gets the elements used for statistics display.
      * @type {Object.<string, !HTMLDivElement>}
      */
     get statsMapElements() {
       return {
-          'BrowsingHistory':
-              this.querySelector('.action-box-remove-user-warning-history'),
-          'Passwords':
-              this.querySelector('.action-box-remove-user-warning-passwords'),
-          'Bookmarks':
-              this.querySelector('.action-box-remove-user-warning-bookmarks'),
-          'Settings':
-              this.querySelector('.action-box-remove-user-warning-settings')
+        'BrowsingHistory':
+            this.querySelector('.action-box-remove-user-warning-history'),

[jdufault, 2017/05/23 20:34:32]

revert?

[Wenzhao (Colin) Zang, 2017/05/24 00:29:21]

Reverted. It's changed by style checker. 

+            'Passwords':
+                this.querySelector('.action-box-remove-user-warning-passwords'),
+            'Bookmarks':
+                this.querySelector('.action-box-remove-user-warning-bookmarks'),
+            'Settings':
+                this.querySelector('.action-box-remove-user-warning-settings')
       }
     },
 
     /**
      * Gets the fingerprint icon area.
      * @type {!HTMLDivElement}
      */
     get fingerprintIconElement() {
       return this.querySelector('.fingerprint-icon-container');
     },
 
+    changeToLargePod: function() {
+      this.querySelector('.large-pod').hidden = false;
+      this.querySelector('.small-pod').hidden = true;
+    },
+
+    changeToSmallPod: function() {
+      this.querySelector('.large-pod').hidden = true;
+      this.querySelector('.small-pod').hidden = false;
+      this.querySelector('.small-pod').classList.remove('extra-small');
+    },
+
+    changeToExtraSmallPod: function() {
+      this.querySelector('.large-pod').hidden = true;
+      this.querySelector('.small-pod').hidden = false;
+      this.querySelector('.small-pod').classList.add('extra-small');
+    },
+
+    isInLargeForm: function() {
+      return this.querySelector('.small-pod').hidden;
+    },
+
+    isInExtraSmallForm: function() {
+      return this.querySelector('.small-pod').classList.contains('extra-small');
+    },
+
     /**
      * Updates the user pod element.
      */
     update: function() {
       this.imageElement.src = 'chrome://userimage/' + this.user.username +
           '?id=' + UserPod.userImageSalt_[this.user.username];
+      this.smallPodImageElement.src = 'chrome://userimage/' +

[jdufault, 2017/05/23 20:34:32]

Try to avoid redefining (non-trivial) strings multiple times.

var imageSrc = ...
this.imageElement.src = imageSrc
this.smallPodImageElement.src = imageSrc

[Wenzhao (Colin) Zang, 2017/05/24 00:29:21]

Done.

+          this.user.username +
+          '?id=' + UserPod.userImageSalt_[this.user.username];
 
       this.nameElement.textContent = this.user_.displayName;
+      this.smallPodNameElement.textContent = this.user_.displayName;
       this.reauthNameHintElement.textContent = this.user_.displayName;
       this.classList.toggle('signed-in', this.user_.signedIn);
 
       if (this.isAuthTypeUserClick)
         this.passwordLabelElement.textContent = this.authValue;
 
       this.updateActionBoxArea();
 
       this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF(
         'passwordFieldAccessibleName', this.user_.emailAddress));
@@ skipping 632 matching lines @@
       }
     },
 
     /**
      * Refresh the message in the remove user warning dialog.
      * @param {string} profilePath The filepath of the URL (must be verified).
      * @param {string} message The message to be written.
      * @param {number|string=} count The number or string to replace $1 in
      * |message|. Can be omitted if $1 is not present in |message|.
      */
-    updateRemoveWarningDialogSetMessage_: function(profilePath, message,
-                                                   count) {
+    updateRemoveWarningDialogSetMessage_: function(
+        profilePath, message, count) {
       if (profilePath !== this.user.profilePath)
         return;
       // Add localized messages where $1 will be replaced with
       // <span class="total-count"></span> and $2 will be replaced with
       // <span class="email"></span>.
       var element = this.querySelector('.action-box-remove-user-warning-text');
       element.textContent = '';
 
       messageParts = message.split(/(\$[12])/);
       var numParts = messageParts.length;
@@ skipping 163 matching lines @@
       this.actionBoxMenuRemoveElement.tabIndex = -1;
     },
 
     /**
      * Handles mouse down event. It sets whether the user click auth will be
      * allowed on the next mouse click event. The auth is allowed iff the pod
      * was focused on the mouse down event starting the click.
      * @param {Event} e The mouse down event.
      */
     handlePodMouseDown_: function(e) {
-      this.userClickAuthAllowed_ = this.parentNode.isFocused(this);
+      if (this.isInLargeForm())
+        this.userClickAuthAllowed_ = this.parentNode.isFocused(this);
     },
 
     /**
      * Called when the input of the password element changes. Updates the submit
      * button color and state and hides the error popup bubble.
      */
     updateInput_: function() {
       var isEmpty = this.passwordElement.value.length == 0;
       if (this.submitButton) {
         this.submitButton.disabled = isEmpty;
@@ skipping 36 matching lines @@
     },
 
     /**
      * Handles click event on a user pod.
      * @param {Event} e Click event.
      */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
+      if (!this.isInLargeForm()) {
+        // It should trigger the switch between the small pod and the main pod.
+        $('pod-row').changeMainPod_(this);
+        return;
+      }
+
       if (!this.isActionBoxMenuActive) {
         if (this.isAuthTypeOnlineSignIn) {
           this.showSigninUI();
         } else if (this.isAuthTypeUserClick && this.userClickAuthAllowed_) {
           // Note that this.userClickAuthAllowed_ is set in mouse down event
           // handler.
           this.parentNode.setActivatedPod(this);
         } else if (this.pinKeyboard &&
                    e.target == this.pinKeyboard.submitButton) {
           // Sets the pod as activated if the submit button is clicked so that
           // it simulates what the enter button does for the password/pin.
           this.parentNode.setActivatedPod(this);
         }
 
         if (this.multiProfilesPolicyApplied)
           this.userTypeBubbleElement.classList.add('bubble-shown');
 
         // Prevent default so that we don't trigger 'focus' event and
         // stop propagation so that the 'click' event does not bubble
         // up and accidentally closes the bubble tooltip.
         stopEventPropagation(e);
       }
     },
 
     /**
      * Handles keydown event for a user pod.
      * @param {Event} e Key event.
      */
     handlePodKeyDown_: function(e) {
+      if (!this.isInLargeForm()) {
+        this.handleSmallPodKeyDown_(e);
+        return;
+      }
       if (!this.isAuthTypeUserClick || this.disabled)
         return;
       switch (e.key) {
         case 'Enter':
         case ' ':
           if (this.parentNode.isFocused(this))
             this.parentNode.setActivatedPod(this);
           break;
       }
+    },
+
+    /**
+     * Handles keydown event for a small user pod.
+     * @param {Event} e Key event.
+     */
+    handleSmallPodKeyDown_: function(e) {
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+          if ($('pod-row').isFocused(this))
+            $('pod-row').changeMainPod_(this);
+          break;
+      }
     }
   };
 
   /**
    * Creates a public account user pod.
    * @constructor
    * @extends {UserPod}
    */
   var PublicAccountUserPod = cr.ui.define(function() {
     var node = UserPod();
@@ skipping 191 matching lines @@
         this.focusInput();
       }
       return true;
     },
 
     /** @override */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
+      if (!this.isInLargeForm()) {
+        // It should trigger the switch between the small pod and the main pod.
+        $('pod-row').changeMainPod_(this);

[jdufault, 2017/05/23 20:34:32]

changeMainPod_ seems like it should be a public (ie, no _) function

Maybe rename to setFocusedPod? Or are you trying to avoid using the name focus?

[Wenzhao (Colin) Zang, 2017/05/24 00:29:20]

The underscore is removed. I'm open to rename it but I want to avoid 'focus'
because the pod occupying the main position and the pod being focused can often
be different. 

+        return;
+      }
+
       this.parentNode.focusPod(this);
       this.parentNode.setActivatedPod(this, e);

[jdufault, 2017/05/23 20:34:32]

If you remove these two calls, does anything break?

[Wenzhao (Colin) Zang, 2017/05/24 00:29:20]

The two calls must be kept for 'large' pods. 
They can be removed for 'small' pods, because focusPod() is called by
changeMainPod() instead, and setActivatedPod() doesn't apply. 

       // Prevent default so that we don't trigger 'focus' event.
       e.preventDefault();
     },
 
     /**
      * Updates the display name shown on the pod.
      * @param {string} displayName The new display name
      */
     setDisplayName: function(displayName) {
       this.user_.displayName = displayName;
@@ skipping 211 matching lines @@
     get mainInput() {
       if (this.user.needsSignin)
         return this.passwordElement;
       else
         return this.nameElement;
     },
 
     /** @override */
     update: function() {
       this.imageElement.src = this.user.userImage;
+      this.smallPodImageElement.src = this.user.userImage;
       this.nameElement.textContent = this.user.displayName;
+      this.smallPodNameElement.textContent = this.user.displayName;
       this.reauthNameHintElement.textContent = this.user.displayName;
 
       var isLockedUser = this.user.needsSignin;
       var isLegacySupervisedUser = this.user.legacySupervisedUser;
       var isChildUser = this.user.childUser;
       var isSyncedUser = this.user.emailAddress !== "";
       var isProfileLoaded = this.user.isProfileLoaded;
       this.classList.toggle('locked', isLockedUser);
       this.classList.toggle('legacy-supervised', isLegacySupervisedUser);
       this.classList.toggle('child', isChildUser);
@@ skipping 24 matching lines @@
       }
       this.passwordElement.value = '';
       return true;
     },
 
     /** @override */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
+      if (!this.isInLargeForm()) {
+        // It should trigger the switch between the small pod and the main pod.
+        $('pod-row').changeMainPod_(this);
+        return;
+      }
+
       Oobe.clearErrors();
       this.parentNode.lastFocusedPod_ = this;
 
       // If this is a locked pod and there are local credentials, show the
       // password field.  Otherwise call activate() which will open up a browser
       // window or show the reauth dialog, as needed.
       if (!(this.user.needsSignin && this.user.hasLocalCreds) &&
           !this.isActionBoxMenuActive) {
         this.activate(e);
       }
@@ skipping 21 matching lines @@
       UserPod.prototype.decorate.call(this);
       this.launchAppButtonElement.addEventListener('click',
                                                    this.activate.bind(this));
     },
 
     /** @override */
     update: function() {
       this.imageElement.src = this.user.iconUrl;
       this.imageElement.alt = this.user.label;
       this.imageElement.title = this.user.label;
+      this.smallPodImageElement.src = this.user.iconUrl;
+      this.smallPodImageElement.alt = this.user.label;
+      this.smallPodImageElement.title = this.user.label;
       this.passwordEntryContainerElement.hidden = true;
       this.launchAppButtonContainerElement.hidden = false;
       this.nameElement.textContent = this.user.label;
+      this.smallPodNameElement.textContent = this.user.label;
       this.reauthNameHintElement.textContent = this.user.label;
 
       UserPod.prototype.updateActionBoxArea.call(this);
       UserPod.prototype.customizeUserPodPerUserType.call(this);
     },
 
     /** @override */
     get mainInput() {
       return this.launchAppButtonElement;
     },
@@ skipping 16 matching lines @@
       var diagnosticMode = e && e.ctrlKey;
       this.launchApp_(this.user, diagnosticMode);
       return true;
     },
 
     /** @override */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
+      if (!this.isInLargeForm()) {
+        // It should trigger the switch between the small pod and the main pod.
+        $('pod-row').changeMainPod_(this);
+        return;
+      }
+
       Oobe.clearErrors();
       this.parentNode.lastFocusedPod_ = this;
       this.activate(e);
     },
 
     /**
      * Launch the app. If |diagnosticMode| is true, ask user to confirm.
      * @param {Object} app App data.
      * @param {boolean} diagnosticMode Whether to run the app in diagnostic
      *     mode.
@@ skipping 41 matching lines @@
 
     // Focused pod.
     focusedPod_: undefined,
 
     // Activated pod, i.e. the pod of current login attempt.
     activatedPod_: undefined,
 
     // Pod that was most recently focused, if any.
     lastFocusedPod_: undefined,
 
+    // Pod that occupies the main spot.
+    mainPod_: undefined,
+
     // Pods whose initial images haven't been loaded yet.
     podsWithPendingImages_: [],
 
     // Whether pod placement has been postponed.
     podPlacementPostponed_: false,
 
     // Standard user pod height/width.
     userPodHeight_: 0,
     userPodWidth_: 0,
 
@@ skipping 27 matching lines @@
           isNewDesktopUserManager ? MD_DESKTOP_POD_HEIGHT :
                                     DESKTOP_POD_HEIGHT :
           CROS_POD_HEIGHT;
       this.userPodWidth_ = isDesktopUserManager ?
           isNewDesktopUserManager ? MD_DESKTOP_POD_WIDTH :
                                     DESKTOP_POD_WIDTH :
           CROS_POD_WIDTH;
     },
 
     /**
-     * Returns all the pods in this pod row.
+     * Returns all the pods in this pod row. Some pods may not be its direct
+     * children, but the caller doesn't have to know this.
      * @type {NodeList}
      */
     get pods() {
-      return Array.prototype.slice.call(this.children);
+      var powRowChildren = Array.prototype.slice.call(this.children);
+      var containerChildren =
+          Array.prototype.slice.call(this.smallPodsContainer.children);
+      return powRowChildren.concat(containerChildren);
     },
 
     /**
      * Return true if user pod row has only single user pod in it, which should
      * always be focused except desktop and touch view modes.
      * @type {boolean}
      */
     get alwaysFocusSinglePod() {
       var isDesktopUserManager = Oobe.getInstance().displayType ==
           DISPLAY_TYPE.DESKTOP_USER_MANAGER;
 
       return (isDesktopUserManager || this.touchViewEnabled_) ?
-          false : this.children.length == 1;
+          false :
+          this.pods.length == 1;
     },
 
     /**
      * Returns pod with the given app id.
      * @param {!string} app_id Application id to be matched.
      * @return {Object} Pod with the given app id. null if pod hasn't been
      *     found.
      */
     getPodWithAppId_: function(app_id) {
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
@@ skipping 156 matching lines @@
     /**
      * Removes user pod from pod row.
      * @param {!user} username
      */
     removeUserPod: function(username) {
       var podToRemove = this.getPodWithUsername_(username);
       if (podToRemove == null) {
         console.warn('Attempt to remove pod that does not exist');
         return;
       }
-      this.removeChild(podToRemove);
-      if (this.pods.length > 0)
+      podToRemove.parentNode.removeChild(podToRemove);
+      this.mainPod_ = null;
+      if (this.pods.length > 0) {
         this.placePods_();
+        this.maybePreselectPod();
+      }
     },
 
     /**
      * Returns index of given pod or -1 if not found.
      * @param {UserPod} pod Pod to look up.
      * @private
      */
     indexOf_: function(pod) {
       for (var i = 0; i < this.pods.length; ++i) {
         if (pod == this.pods[i])
@@ skipping 48 matching lines @@
 
       // Clear existing pods.
       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]);
 
       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]);
@@ skipping 25 matching lines @@
         if ($('login-header-bar').signinUIState ==
                 SIGNIN_UI_STATE.GAIA_SIGNIN &&
             emptyPodRow &&
             this.pods.length > 0) {
           login.GaiaSigninScreen.updateControlsState();
         }
       }
     },
 
     /**
+     * Gets the container of small pods.
+     * @type {!HTMLDivElement}
+     */
+    get smallPodsContainer() {
+      return document.querySelector('.small-pod-container');
+    },
+
+    /**
      * Adds given apps to the pod row.
      * @param {array} apps Array of apps.
      */
     setApps: function(apps) {
       this.apps_ = apps;
       this.rebuildPods();
       chrome.send('kioskAppsLoaded');
 
       // Check whether there's a pending kiosk app error.
       window.setTimeout(function() {
@@ skipping 232 matching lines @@
     },
 
     /**
      * Updates the list of locales available for a public session.
      * @param {string} userID The user ID of the public session
      * @param {!Object} locales The list of available locales
      * @param {string} defaultLocale The locale to select by default
      * @param {boolean} multipleRecommendedLocales Whether |locales| contains
      *     two or more recommended locales
      */
-    setPublicSessionLocales: function(userID,
-                                      locales,
-                                      defaultLocale,
-                                      multipleRecommendedLocales) {
+    setPublicSessionLocales: function(
+        userID, locales, defaultLocale, multipleRecommendedLocales) {
       var pod = this.getPodWithUsername_(userID);
       if (pod != null) {
         pod.populateLanguageSelect(locales,
                                    defaultLocale,
                                    multipleRecommendedLocales);
       }
     },
 
     /**
      * Updates the list of available keyboard layouts for a public session pod.
      * @param {string} userID The user ID of the public session
      * @param {string} locale The locale to which this list of keyboard layouts
      *     applies
      * @param {!Object} list List of available keyboard layouts
      */
     setPublicSessionKeyboardLayouts: function(userID, locale, list) {
       var pod = this.getPodWithUsername_(userID);
       if (pod != null)
         pod.populateKeyboardSelect(locale, list);
     },
 
     /**
      * Called when window was resized.
      */
     onWindowResize: function() {

[jdufault, 2017/05/23 20:34:32]

Did you test with virtual keyboard?

[Wenzhao (Colin) Zang, 2017/05/24 00:29:20]

I did. It works, but has bugs related to the background shield. I documented
them and will fix them later.

scrollFocusedPodIntoView() is removed because it's not applicable to the new
design as it shifts the focused pod (when it's at the bottom row) to make it
visible.

-      var layout = this.calculateLayout_();
-      if (layout.columns != this.columns || layout.rows != this.rows)
-        this.placePods_();
-
-      // Wrap this in a set timeout so the function is called after the pod is
-      // finished transitioning so that we work with the final pod dimensions.
-      // If there is no focused pod that may be transitioning when this function
-      // is called, we can call scrollFocusedPodIntoView() right away.
-      var timeOut = 0;
-      if (this.focusedPod_) {
-        var style = getComputedStyle(this.focusedPod_);
-        timeOut = parseFloat(style.transitionDuration) * 1000;
-      }
-
-      setTimeout(function() {
-        this.scrollFocusedPodIntoView();
-      }.bind(this), timeOut);
+      this.placePods_();
     },
 
     /**
      * Returns width of podrow having |columns| number of columns.
      * @private
      */
     columnsToWidth_: function(columns) {
       var isDesktopUserManager = Oobe.getInstance().displayType ==
           DISPLAY_TYPE.DESKTOP_USER_MANAGER;
       var margin = isDesktopUserManager ? DESKTOP_MARGIN_BY_COLUMNS[columns] :
@@ skipping 30 matching lines @@
       while (maxWidth < this.columnsToWidth_(columns) && columns > 1)
         --columns;
       var rows = Math.floor((this.pods.length - 1) / columns) + 1;
       if (getComputedStyle(
           $('signin-banner'), null).getPropertyValue('display') != 'none') {
         rows = Math.min(rows, MAX_NUMBER_OF_ROWS_UNDER_SIGNIN_BANNER);
       }
       if (!Oobe.getInstance().newDesktopUserManager) {
         var maxHeigth = Oobe.getInstance().clientAreaSize.height;
         while (maxHeigth < this.rowsToHeight_(rows) && rows > 1)
-         --rows;
+          --rows;
       }
       // One more iteration if it's not enough cells to place all pods.
       while (maxWidth >= this.columnsToWidth_(columns + 1) &&
              columns * rows < this.pods.length &&
              columns < MAX_NUMBER_OF_COLUMNS) {
-         ++columns;
+        ++columns;
       }
       return {columns: columns, rows: rows};
     },
 
     /**
-     * Places pods onto their positions onto pod grid.
+     * Places pods onto their positions in pod grid matching the new design.
      * @private
      */
     placePods_: function() {
-      var isDesktopUserManager = Oobe.getInstance().displayType ==
-          DISPLAY_TYPE.DESKTOP_USER_MANAGER;
-      if (isDesktopUserManager && !Oobe.getInstance().userPodsPageVisible)
-        return;
-
-      var layout = this.calculateLayout_();
-      var columns = this.columns = layout.columns;
-      var rows = this.rows = layout.rows;
-      var maxPodsNumber = columns * rows;
-      var margin = isDesktopUserManager ? DESKTOP_MARGIN_BY_COLUMNS[columns] :
-                                          MARGIN_BY_COLUMNS[columns];
+      var pods = this.pods;
+      if (pods.length == 0) {
+        console.error('Attempt to place pods for an empty pod list.');
+        return;
+      }
+      // Append all pods to their proper parents. Small pods have parent other
+      // than the pod row. The pods were all initialized with the pow row as a
+      // temporary parent, which is intended to ensure that all event listeners
+      // work properly. If the main pod already exists, it means we are in the
+      // process of resizing the window, then there is no need to change parents
+      // of any pod.
+      if (!this.mainPod_) {
+        this.mainPod_ = this.preselectedPod;
+        this.appendPodsToParents();
+      }
+      this.restoreInitialStates_();
+
+      if (pods.length == 1) {
+        this.placeSinglePod_();
+      } else if (pods.length == 2) {
+        this.placeDoublePods_();
+      } else {
+        this.placePodsOnContainer_();
+      }
+      Oobe.getInstance().updateScreenSize(this.parentNode);
+      this.updatePodNameArea();
+    },
+
+    /**
+     * Append pods to proper parents. Called each time before pod placement.
+     * @private
+     */
+    appendPodsToParents: function() {
+      var pods = this.pods;
+      // Pod count may have changed, remove all pods from their current parents
+      // first.
+      for (var i = 0, pod; pod = pods[i]; ++i) {

[jdufault, 2017/05/23 20:34:32]

for (var pod of pods)?

[Wenzhao (Colin) Zang, 2017/05/24 00:29:20]

Done.

+        pod.parentNode.removeChild(pod);
+      }
+
+      if (pods.length <= 2) {

[jdufault, 2017/05/23 20:34:32]

Add comment on the 2 / make it a constant

[Wenzhao (Colin) Zang, 2017/05/24 00:29:20]

Done.

+        for (var i = 0, pod; pod = pods[i]; ++i) {
+          this.appendChild(pod);
+        }
+      } else {
+        for (var i = 0, pod; pod = pods[i]; ++i) {
+          if (pod == this.mainPod_) {
+            this.appendChild(pod);
+          } else {
+            this.smallPodsContainer.appendChild(pod);
+          }
+        }
+      }
+    },
+
+    /**
+     * Called when there is one user.
+     * @private
+     */
+    placeSinglePod_: function() {
+      this.mainPod_.changeToLargePod();
+      this.parentNode.setPreferredSize(CROS_POD_WIDTH, CROS_POD_HEIGHT);
+      // The pod may have different positions before, so always set them
+      // explicitly.
+      this.mainPod_.left = 0;
+      this.mainPod_.top = 0;
+    },
+
+    /**
+     * Called when there are two users.
+     * @private
+     */
+    placeDoublePods_: function() {
+      var secondPod =
+          this.pods[0] == this.mainPod_ ? this.pods[1] : this.pods[0];
+      this.mainPod_.changeToLargePod();
+      secondPod.changeToLargePod();
+
+      var DOUBLE_PODS_PADDING = this.isPortraitMode() ? 32 : 118;
+      var parentWidth = CROS_POD_WIDTH * 2 + DOUBLE_PODS_PADDING;
+      this.parentNode.setPreferredSize(parentWidth, CROS_POD_HEIGHT);
+
+      this.mainPod_.left = 0;
+      this.mainPod_.top = 0;
+      secondPod.left = CROS_POD_WIDTH + DOUBLE_PODS_PADDING;
+      secondPod.top = 0;
+    },
+
+    /**
+     * Called when there are more than two users.
+     * @private
+     */
+    placePodsOnContainer_: function() {
+      this.smallPodsContainer.hidden = false;
+      var pods = this.pods;
+      if ((pods.length > 6 && !this.isPortraitMode()) ||

[jdufault, 2017/05/23 20:34:32]

constant for 6 and 10

[Wenzhao (Colin) Zang, 2017/05/24 00:29:21]

Done.

+          (pods.length > 10 && this.isPortraitMode())) {
+        this.placePodsOnScrollableContainer_();
+        return;
+      }
+
+      var MIDDLE_PADDING = this.isPortraitMode() ? 84 : 220;
+      var portraitWidth =
+          CROS_POD_WIDTH + MIDDLE_PADDING + CROS_SMALL_POD_WIDTH;
+      var LEFT_PADDING = this.isPortraitMode() ?
+          (Oobe.getInstance().clientAreaSize.width - portraitWidth) / 3 :
+          98;
+      var SMALL_POD_PADDING = 54;
+      var smallPodsTotalHeight = (pods.length - 1) * CROS_SMALL_POD_HEIGHT +
+          (pods.length - 2) * SMALL_POD_PADDING;
+      var parentHeight = Math.max(CROS_POD_HEIGHT, smallPodsTotalHeight);
+      if (parentHeight > Oobe.getInstance().clientAreaSize.height) {
+        // The current design spec assumes the screen height is large enough,
+        // but if it's not, fall to the scrollable container case. We do not
+        // have a backup solution yet if the screen width is exceeded.
+        this.placePodsOnScrollableContainer_();
+        return;
+      }
+      this.smallPodsContainer.style.height =
+          cr.ui.toCssPx(Oobe.getInstance().clientAreaSize.height);
+      this.smallPodsContainer.style.width = cr.ui.toCssPx(CROS_SMALL_POD_WIDTH);
+      var parentWidth =
+          LEFT_PADDING + CROS_POD_WIDTH + MIDDLE_PADDING + CROS_SMALL_POD_WIDTH;
+      this.parentNode.setPreferredSize(parentWidth, parentHeight);
+
+      this.mainPod_.changeToLargePod();
+      for (var i = 0, pod; pod = pods[i]; ++i) {
+        if (pod != this.mainPod_) {
+          pod.changeToSmallPod();
+        }
+      }
+      this.mainPod_.left = LEFT_PADDING;
+      this.mainPod_.top =
+          Math.max((smallPodsTotalHeight - CROS_POD_HEIGHT) / 2, 0);
+      this.smallPodsContainer.style.left =
+          cr.ui.toCssPx(LEFT_PADDING + CROS_POD_WIDTH + MIDDLE_PADDING);
+      this.smallPodsContainer.style.top = cr.ui.toCssPx(
+          Math.max((CROS_POD_HEIGHT - smallPodsTotalHeight) / 2, 0));
+      var topPadding = 0;
+      for (var i = 0, pod; pod = pods[i]; ++i) {
+        if (pod == this.mainPod_) {
+          continue;
+        }
+        pod.left = 0;
+        pod.top = topPadding;
+        topPadding += CROS_SMALL_POD_HEIGHT + SMALL_POD_PADDING;
+      }
+    },
+
+    /**
+     * Called when there are more than 6 users in landscape mode, or more than
+     * 10 users in portrait mode.
+     * @private
+     */
+    placePodsOnScrollableContainer_: function() {
+      this.smallPodsContainer.hidden = false;
+      this.smallPodsContainer.classList.add('scroll');
+      var pods = this.pods;
+      this.mainPod_.changeToLargePod();
+      for (var i = 0, pod; pod = pods[i]; ++i) {
+        if (pod != this.mainPod_) {
+          pod.changeToExtraSmallPod();
+        }
+      }
+
+      var SCROLL_LEFT_PADDING = this.isPortraitMode() ? 46 : 72;
+      var SCROLL_RIGHT_PADDING = this.isPortraitMode() ? 12 : 72;
+      var scrollAreaWidth = SCROLL_LEFT_PADDING + CROS_EXTRA_SMALL_POD_WIDTH +
+          SCROLL_RIGHT_PADDING;
+      var mainPodPadding = (Oobe.getInstance().clientAreaSize.width -
+                            scrollAreaWidth - CROS_POD_WIDTH) /
+          2;
+      var SCROLL_TOP_PADDING = this.isPortraitMode() ? 66 : 72;
+      var EXTRA_SMALL_POD_PADDING = 32;
+      this.smallPodsContainer.style.left =
+          cr.ui.toCssPx(mainPodPadding * 2 + CROS_POD_WIDTH);
+      this.smallPodsContainer.style.top = cr.ui.toCssPx(0);
+
+      var scrollHeight = 0;
+      for (var i = 0, pod; pod = pods[i]; ++i) {
+        if (pod == this.mainPod_) {
+          continue;
+        }
+        scrollHeight += CROS_EXTRA_SMALL_POD_HEIGHT + EXTRA_SMALL_POD_PADDING;
+      }
+      scrollHeight -= EXTRA_SMALL_POD_PADDING;
+      var screenHeight =
+          document.querySelector('#scroll-container').offsetHeight;
+      var actualTopPadding = SCROLL_TOP_PADDING;
+      this.smallPodsContainer.style.width = cr.ui.toCssPx(
+          SCROLL_LEFT_PADDING + CROS_EXTRA_SMALL_POD_WIDTH +
+          SCROLL_RIGHT_PADDING);
+      this.smallPodsContainer.style.height = cr.ui.toCssPx(screenHeight);
+      if ((screenHeight - scrollHeight) / 2 > actualTopPadding) {
+        // Edge case: the contents don't overflow because the pods were
+        // shrinked. In this case the top padding should be adjusted to have a
+        // symmetric layout.
+        actualTopPadding = (screenHeight - scrollHeight) / 2;
+      } else {
+        // The scrollable container should occupy the full screen (including the
+        // header bar) and a gradient mask is applied to avoid blocking the
+        // header bar.
+        actualTopPadding = SCROLL_MASK_HEIGHT;
+        this.showScrollMask();
+      }
       this.parentNode.setPreferredSize(
-          this.columnsToWidth_(columns), this.rowsToHeight_(rows));
-      var height = this.userPodHeight_;
-      var width = this.userPodWidth_;
-      var pinPodLocation = { column: columns + 1, row: rows + 1 };
-      if (this.focusedPod_ && this.focusedPod_.isPinShown())
-        pinPodLocation = this.findPodLocation_(this.focusedPod_, columns, rows);
-
-      this.pods.forEach(function(pod, index) {
-        if (index >= maxPodsNumber) {
-           pod.hidden = true;
-           return;
-        }
-        pod.hidden = false;
-        if (pod.offsetHeight != height &&
-            pod.offsetHeight != CROS_PIN_POD_HEIGHT) {
-          console.error('Pod offsetHeight (' + pod.offsetHeight +
-              ') and POD_HEIGHT (' + height + ') are not equal.');
-        }
-        if (pod.offsetWidth != width) {
-          console.error('Pod offsetWidth (' + pod.offsetWidth +
-              ') and POD_WIDTH (' + width + ') are not equal.');
-        }
-        var column = index % columns;
-        var row = Math.floor(index / columns);
-
-        var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
-                                                POD_ROW_PADDING;
-        pod.left = rowPadding + column * (width + margin);
-
-        // On desktop, we want the rows to always be equally spaced.
-        pod.top = isDesktopUserManager ? row * (height + rowPadding) :
-                                         row * height + rowPadding;
+          Oobe.getInstance().clientAreaSize.width,
+          Oobe.getInstance().clientAreaSize.height);
+      this.mainPod_.left = mainPodPadding;
+      this.mainPod_.top = (screenHeight - CROS_POD_HEIGHT) / 2;
+
+      var topPadding = actualTopPadding;
+      var lastPod = undefined;
+      for (var i = 0, pod; pod = pods[i]; ++i) {
+        if (pod == this.mainPod_) {
+          continue;
+        }
+        pod.left = SCROLL_LEFT_PADDING;
+        pod.top = topPadding;
+        topPadding += CROS_EXTRA_SMALL_POD_HEIGHT + EXTRA_SMALL_POD_PADDING;
+        lastPod = pod;
+      }
+      if (!document.querySelector('.small-pod-container-mask').hidden) {
+        // Make sure the last pod isn't blocked by the mask.
+        lastPod.style.paddingBottom = cr.ui.toCssPx(SCROLL_MASK_HEIGHT);
+      }
+    },
+
+    /**
+     * Called each time before pod placement to ensure we start with a clean
+     * state.
+     * @private
+     */
+    restoreInitialStates_: function() {
+      this.smallPodsContainer.hidden = true;
+      document.querySelector('.small-pod-container-mask').hidden = true;
+      document.querySelector('.small-pod-container-mask.rotate').hidden = true;
+      this.smallPodsContainer.classList.remove('scroll');
+      var pods = this.pods;
+      for (var i = 0, pod; pod = pods[i]; ++i) {
+        pod.style.paddingBottom = cr.ui.toCssPx(0);
+      }
+    },
+
+    /**
+     * Check if it's in portrait mode.
+     * @return {boolean} True if in portrait mode.
+     */
+    isPortraitMode: function() {
+      return Oobe.getInstance().clientAreaSize.width <
+          Oobe.getInstance().clientAreaSize.height;
+    },
+
+    /**
+     * Called when scroll bar is shown and we need a mask for the header bar.
+     * @private
+     */
+    showScrollMask: function() {
+      var topMask = document.querySelector('.small-pod-container-mask');
+      topMask.hidden = false;
+      topMask.style.left = this.smallPodsContainer.style.left;
+      topMask.style.width = this.smallPodsContainer.style.width;
+      var bottomMask =
+          document.querySelector('.small-pod-container-mask.rotate');
+      bottomMask.hidden = false;
+      bottomMask.style.left = this.smallPodsContainer.style.left;
+      bottomMask.style.width = this.smallPodsContainer.style.width;
+      // The bottom mask should overlap with the header bar.
+      bottomMask.style.top = cr.ui.toCssPx(
+          document.querySelector('#scroll-container').offsetHeight -
+          SCROLL_MASK_HEIGHT);
+    },
+
+    /**
+     * Makes sure that user name on each large pod is centered and extra long
+     * name does not exceed max width.
+     * @private
+     */
+    updatePodNameArea: function() {
+      this.querySelectorAll('.name-container').forEach(function(nameArea) {
+        var nameElement = nameArea.querySelector('.name');
+        var leftMargin = (CROS_POD_WIDTH - nameElement.offsetWidth) / 2;
+        if (leftMargin > 0)
+          nameArea.style.left = cr.ui.toCssPx(leftMargin);
+        else
+          nameElement.style.width = cr.ui.toCssPx(CROS_POD_WIDTH);
       });
-      Oobe.getInstance().updateScreenSize(this.parentNode);
-    },
-
-    /**
+    },
+
+    /**
+     * Called when a small pod is clicked to trigger the switch between the
+     * small pod and the main pod.
+     */
+    changeMainPod_: function(pod) {
+      if (this.disabled) {
+        console.error('Cannot change main pod while sign-in UI is disabled.');
+        return;
+      }
+      if (!this.mainPod_) {
+        console.error('Attempt to switch a non-existing main pod.');
+        return;
+      }
+      var insert = 0;
+      var children = pod.parentNode.children;
+      while (insert < children.length && children[insert] != pod)
+        insert++;
+      if (insert >= children.length) {
+        console.error('Attempt to switch a non-existing small pod.');
+        return;
+      }
+      if (pod.isInExtraSmallForm()) {

[jdufault, 2017/05/23 20:34:32]

Instead of having separate functions for isExtraSmall, isSmall, it may be easier
to have an enum, ie,

  this.mainPod_.setPodStyle(pod.getPodStyle())

[Wenzhao (Colin) Zang, 2017/05/24 00:29:20]

Done.

+        this.mainPod_.changeToExtraSmallPod();
+      } else {
+        this.mainPod_.changeToSmallPod();
+      }
+      pod.changeToLargePod();
+
+      var left = pod.left;
+      var top = pod.top;
+      var paddingBottom = pod.style.paddingBottom;
+      var parent = pod.parentNode;
+      parent.removeChild(pod);
+      this.appendChild(pod);
+      pod.left = this.mainPod_.left;
+      pod.top = this.mainPod_.top;
+      pod.style.paddingBottom = cr.ui.toCssPx(0);
+
+      this.removeChild(this.mainPod_);
+      parent.insertBefore(this.mainPod_, children[insert]);
+      this.mainPod_.left = left;
+      this.mainPod_.top = top;
+      this.mainPod_.style.paddingBottom = paddingBottom;
+      this.mainPod_ = pod;
+      this.focusPod(this.mainPod_);
+      this.updatePodNameArea();
+    },
+
+    /**
      * Number of columns.
      * @type {?number}
      */
     set columns(columns) {
       // Cannot use 'columns' here.
       this.setAttribute('ncolumns', columns);
     },
     get columns() {
       return parseInt(this.getAttribute('ncolumns'));
     },
@@ skipping 300 matching lines @@
         if (e.target.classList.contains('focused')) {
           if (!e.target.multiProfilesPolicyApplied)
             e.target.focusInput();
           else
             e.target.userTypeBubbleElement.classList.add('bubble-shown');
         } else
           this.focusPod(e.target);
         return;
       }
 
+      // Small pods do not have input box.
+      if (e.target.parentNode == this.smallPodsContainer) {
+        this.focusPod(e.target, false, true /* opt_skipInputFocus */);
+        return;
+      }
+
       var pod = findAncestorByClass(e.target, 'pod');
       if (pod && pod.parentNode == this) {
         // Focus on a control of a pod but not on the action area button.
         if (!pod.classList.contains('focused')) {
           if (e.target.classList.contains('action-box-area') ||
               e.target.classList.contains('remove-warning-button')) {
             // focusPod usually moves focus on the password input box which
             // triggers virtual keyboard to show up. But the focus may move to a
             // non text input element shortly by e.target.focus. Hence, a
             // virtual keyboard flicking might be observed. We need to manually
@@ skipping 140 matching lines @@
         return;
       }
 
       this.podsWithPendingImages_.splice(index, 1);
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     },
 
     /**
-     * Makes sure user name is centered in each pod and extra long name
-     * does not exceed max width.
-     */
-    updatePodNameArea: function() {
-      this.querySelectorAll('.name-container').forEach(function(nameArea) {
-        var nameElement = nameArea.querySelector('.name');
-        var leftMargin = (CROS_POD_WIDTH - nameElement.offsetWidth) / 2;
-        if (leftMargin > 0)
-          nameArea.style.left = leftMargin + 'px';
-        else
-          nameElement.style.width = CROS_POD_WIDTH + 'px';
-      });
-    },
-
-    /**
      * Preselects pod, if needed.
      */
-     maybePreselectPod: function() {
-       var pod = this.preselectedPod;
-       this.focusPod(pod);
+    maybePreselectPod: function() {
+      var pod = this.preselectedPod;
+      this.focusPod(pod);
 
-       // Hide user-type-bubble in case all user pods are disabled and we focus
-       // first pod.
-       if (pod && pod.multiProfilesPolicyApplied) {
-         pod.userTypeBubbleElement.classList.remove('bubble-shown');
-       }
-     }
+      // Hide user-type-bubble in case all user pods are disabled and we focus
+      // first pod.
+      if (pod && pod.multiProfilesPolicyApplied) {
+        pod.userTypeBubbleElement.classList.remove('bubble-shown');
+      }
+    }
   };
 
   return {
     PodRow: PodRow
   };
 });