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 48a7073ad110d478bd66bc14505e630c93751e20..d663d65745e7127e8708a223768968aeda123f21 100644
--- a/ui/login/account_picker/user_pod_row.js
+++ b/ui/login/account_picker/user_pod_row.js
@@ -59,6 +59,9 @@ cr.define('login', function() {
   var POD_ROW_PADDING = 10;
   var DESKTOP_ROW_PADDING = 32;
   var CUSTOM_ICON_CONTAINER_SIZE = 40;
+  var CROS_PIN_POD_WIDTH = 270;
+  var CROS_PIN_POD_HEIGHT = 594;
+  var PIN_EXTRA_WIDTH = 90;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
@@ -835,22 +838,6 @@ cr.define('login', function() {
     },
 
     /**
-     * Gets the authorization element of the pod.
-     * @type {!HTMLDivElement}
-     */
-    get authElement() {
-      return this.querySelector('.auth-container');
-    },
-
-    /**
-     * Gets image pane element.
-     * @type {!HTMLDivElement}
-     */
-    get imagePaneElement() {
-      return this.querySelector('.user-image-pane');
-    },
-
-    /**
      * Gets image element.
      * @type {!HTMLImageElement}
      */
@@ -900,14 +887,6 @@ cr.define('login', function() {
     },
 
     /**
-     * Gets the pin-container of the pod.
-     * @type {!HTMLDivElement}
-     */
-    get pinContainer() {
-      return this.querySelector('.pin-container');
-    },
-
-    /**
      * Gets the pin-keyboard of the pod.
      * @type {!HTMLElement}
      */
@@ -924,14 +903,6 @@ cr.define('login', function() {
     },
 
     /**
-     * Gets the signed in indicator of the pod.
-     * @type {!HTMLDivElement}
-     */
-    get signInElement() {
-      return this.querySelector('.signed-in-indicator');
-    },
-
-    /**
      * Gets the container holding the launch app button.
      * @type {!HTMLButtonElement}
      */
@@ -1137,11 +1108,12 @@ cr.define('login', function() {
     },
 
     setPinVisibility: function(visible) {
-      var elements = [this, this.authElement, this.imagePaneElement,
-                      this.imageElement, this.pinContainer];
+      var elements = this.querySelectorAll('.pin-modifiable');

[jdufault, 2016/07/12 19:51:26]

What about

  var elements = Array(this.querySelectorAll('.pin-modifiable'))

I think a DOMList also exposes a 'length' property and supports indexing, so you
could iterate the return value directly. The only issue is the
elements_array.push(this) bit.

Does getElementsByClassName work?

What about 'pin-status-tag' or 'pin-tag' instead of 'pin-modifiable'?

[sammiequon, 2016/07/12 23:20:18]

Array() seems to make an array of arrays where the first element is the array
and the rest are undefined.

Done.

Done.

[jdufault, 2016/07/12 23:37:46]

Okay - how about just making a helper function then that toggles the pin state?

  function setPinClass(element, enabled) {
    element.classList.toggle('pin-enabled', enabled);
    element.classList.toggle('pin-disabled', !enabled);
  }


  setPinClass(this, visible)
  for (...)
    setPinClass(element, visible)

[sammiequon, 2016/07/16 01:48:48]

Done.

+      var elements_array = Array.prototype.slice.call(elements);
+      elements_array.push(this);
 
-      for (var idx = 0; idx < elements.length; idx++) {
-        var currentElement = elements[idx];
+      for (var idx = 0; idx < elements_array.length; idx++) {
+        var currentElement = elements_array[idx];
         currentElement.classList.toggle('pin-enabled', visible);
         currentElement.classList.toggle('pin-disabled', !visible);
       }
@@ -2579,6 +2551,14 @@ cr.define('login', function() {
         this.focusedPod_.setPinVisibility(visible);
     },
 
+    isPinShown_: function() {
+      for (var i = 0; i < this.pods.length; ++i) {
+        if (this.pods[i].classList.contains('pin-enabled'))

[jdufault, 2016/07/12 19:51:26]

This class check is happening in a couple of places, right? I think it'd make
sense to add a helper method that does it.

[sammiequon, 2016/07/12 23:20:18]

Done. I think the other check is in another CL though.

[jdufault, 2016/07/12 23:37:46]

Okay - please make sure you update that CL as well. You can make that other
patch set depend on this one.

[sammiequon, 2016/07/16 01:48:48]

Done.

+          return true;
+      }
+      return false;
+    },
+
     /**
      * Runs app with a given id from the list of loaded apps.
      * @param {!string} app_id of an app to run.
@@ -3009,25 +2989,50 @@ 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;
            return;
         }
         pod.hidden = false;
-        if (pod.offsetHeight != height) {
+        if (pod.offsetHeight != height &&
+            pod.offsetHeight != CROS_PIN_POD_HEIGHT) {

[jdufault, 2016/07/12 19:51:26]

Can we just set height/width to the expected values instead of forking the
logic?

[sammiequon, 2016/07/12 23:20:18]

The height/width is being set in another function based on whether it is CrOS or
desktop and I guess this is too check that the pods are the right size. I didn't
know exactly what this is for so I just added a extra check because sometimes
the pod is expanded for the pin.

[jdufault, 2016/07/12 23:37:46]

It's probably worthwhile to investigate then to make sure we're doing the right
thing.

           console.error('Pod offsetHeight (' + pod.offsetHeight +
               ') and POD_HEIGHT (' + height + ') are not equal.');
         }
-        if (pod.offsetWidth != width) {
+        if (pod.offsetWidth != width &&
+            pod.offsetWidth != CROS_PIN_POD_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 pinPadding = 0;
+        if (row == pinShownRow) {
+          pinPadding = PIN_EXTRA_WIDTH / 2;
+          if (column <= pinShownColumn)
+            pinPadding *= -1;

[jdufault, 2016/07/12 19:51:26]

We want negative padding?

[sammiequon, 2016/07/12 23:20:18]

I renamed it offsetFromPin. The pods on the left of the pod showing the pin add
a negative offset.

+        }
+
         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) :
@@ -3098,6 +3103,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)
@@ -3115,6 +3121,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) {
@@ -3137,6 +3144,7 @@ cr.define('login', function() {
         this.scrollFocusedPodIntoView();
       }
       this.insideFocusPod_ = false;
+      this.placePods_();
     },
 
     /**