Multi-pod support for lock screen.

ui/login/account_picker/user_pod_row.js

Index: ui/login/account_picker/user_pod_row.js
diff --git a/ui/login/account_picker/user_pod_row.js b/ui/login/account_picker/user_pod_row.js
index c258be189f92761f2b8efd3a592195be78f04b0a..640ffaff7cdcd736e9328dde7ae84829701483c5 100644
--- a/ui/login/account_picker/user_pod_row.js
+++ b/ui/login/account_picker/user_pod_row.js
@@ -59,6 +59,7 @@ cr.define('login', function() {
   var POD_ROW_PADDING = 10;
   var DESKTOP_ROW_PADDING = 32;
   var CUSTOM_ICON_CONTAINER_SIZE = 40;
+  var PIN_EXTRA_WIDTH = 90;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
@@ -702,6 +703,7 @@ cr.define('login', function() {
      * @private
      */
     userClickAuthAllowed_: false,
+    pinKeyboardShown_: false,

[jdufault, 2016/07/12 00:22:25]

Make this a getter and do a DOM query based on if the pin-enabled or
pin-disabled class is active.

[sammiequon, 2016/07/12 19:35:56]

Done.

 
     /** @override */
     decorate: function() {
@@ -859,6 +861,14 @@ cr.define('login', function() {
     },
 
     /**
+     * Gets name element.
+     * @type {!HTMLDivElement}
+     */
+    get nameContainerElement() {
+      return this.querySelector('.name-container');
+    },
+
+    /**
      * Gets reauth name hint element.
      * @type {!HTMLDivElement}
      */
@@ -1130,13 +1140,15 @@ cr.define('login', function() {
 
     setPinVisibility: function(visible) {
       var elements = [this, this.authElement, this.imageElement,

[jdufault, 2016/07/12 00:22:25]

This list is getting pretty long now and a number of selectors have been added
specifically for it. What about adding a new class, pin-animatable, and building
this list by querying for all DOM elements that have it defined?

[sammiequon, 2016/07/12 19:35:56]

Done.

-                      this.signInElement, this.pinContainer];
+                      this.signInElement, this.pinContainer,
+                      this.nameContainerElement];
 
       for (var idx = 0; idx < elements.length; idx++) {
         var currentElement = elements[idx];
         currentElement.classList.toggle('pin-enabled', visible);
         currentElement.classList.toggle('pin-disabled', !visible);
       }
+      this.pinKeyboardShown_ = visible;
     },
 
     setUserPodIconType: function(userTypeClass) {
@@ -2561,8 +2573,17 @@ cr.define('login', function() {
     },
 
     setFocusedPodPinVisibility: function(visible) {
-      if (this.focusedPod_ && this.focusedPod_.user.showPin)
-        this.focusedPod_.setPinVisibility(visible);
+      if (this.focusedPod_ && this.focusedPod_.user.showPin &&
+          Oobe.getInstance().displayType == DISPLAY_TYPE.LOCK)

[jdufault, 2016/07/12 00:22:25]

Why the Oobe.getInstance().displayType check?

The showPin check should always be false if that's not true.

[sammiequon, 2016/07/12 19:35:56]

Done.

+          this.focusedPod_.setPinVisibility(visible);
+    },
+
+    isPinShown_: function() {
+      for (var i = 0; i < this.pods.length; ++i) {
+        if (this.pods[i].pinKeyboardShown_)
+          return true;
+      }
+      return false;
     },
 
     /**
@@ -2927,6 +2948,7 @@ cr.define('login', function() {
                                           MARGIN_BY_COLUMNS[columns];
       var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
                                               POD_ROW_PADDING;
+

[sammiequon, 2016/07/08 18:04:32]

Remove this line.

[sammiequon, 2016/07/12 19:35:56]

Done.

       return 2 * rowPadding + columns * this.userPodWidth_ +
           (columns - 1) * margin;
     },
@@ -2995,6 +3017,22 @@ cr.define('login', function() {
           this.columnsToWidth_(columns), this.rowsToHeight_(rows));
       var height = this.userPodHeight_;
       var width = this.userPodWidth_;
+
+      var pinShownRow = maxPodsNumber + 1;
+      var pinShownColumn = maxPodsNumber + 1;
+      var podWithPin = this.focusedPod_;
+
+      if (this.isPinShown_()) {
+        this.pods.forEach(function(pod, index) {
+          var column = index % columns;
+          var row = Math.floor(index / columns);
+          if(pod == podWithPin) {
+            pinShownRow = row;
+            pinShownColumn = column;
+          }
+        });
+      }
+
       this.pods.forEach(function(pod, index) {
         if (index >= maxPodsNumber) {
            pod.hidden = true;
@@ -3011,9 +3049,16 @@ cr.define('login', function() {
         }
         var column = index % columns;
         var row = Math.floor(index / columns);
+        var pinPadding = 0;
+        if (row == pinShownRow) {
+          pinPadding = PIN_EXTRA_WIDTH/2;

[jdufault, 2016/07/12 00:22:25]

space between / operands.

[sammiequon, 2016/07/12 19:35:56]

Done.

+          if (column <= pinShownColumn)
+            pinPadding *= -1;
+        }
+
         var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
                                                 POD_ROW_PADDING;
-        pod.left = rowPadding + column * (width + margin);
+        pod.left = rowPadding + column * (width + margin) + pinPadding;
 
         // On desktop, we want the rows to always be equally spaced.
         pod.top = isDesktopUserManager ? row * (height + rowPadding) :
@@ -3084,6 +3129,7 @@ cr.define('login', function() {
         if (pod != podToFocus) {
           pod.isActionBoxMenuHovered = false;
           pod.classList.remove('focused');
+          pod.setPinVisibility(false);
           // On Desktop, the faded style is not set correctly, so we should
           // manually fade out non-focused pods if there is a focused pod.
           if (pod.user.isDesktopUser && podToFocus)
@@ -3101,6 +3147,7 @@ cr.define('login', function() {
       var hadFocus = !!this.focusedPod_;
       this.focusedPod_ = podToFocus;
       if (podToFocus) {
+        this.setFocusedPodPinVisibility(true);
         podToFocus.classList.remove('faded');
         podToFocus.classList.add('focused');
         if (!podToFocus.multiProfilesPolicyApplied) {
@@ -3123,6 +3170,7 @@ cr.define('login', function() {
         this.scrollFocusedPodIntoView();
       }
       this.insideFocusPod_ = false;
+      this.placePods_();

[jdufault, 2016/07/12 00:22:25]

Was this missing before?

[sammiequon, 2016/07/12 19:35:56]

I added this because the pods shift when the pin keyboard is brought up now.

     },
 
     /**