Multi-pod support for lock screen.

ui/login/account_picker/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 41 matching lines @@
   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 = 213;
   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_WIDTH = 270;
+  var CROS_PIN_POD_HEIGHT = 594;
+  var PIN_EXTRA_WIDTH = 90;
 
   /**
    * 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
@@ skipping 741 matching lines @@
     },
 
     /**
      * Height number of pixels.
      */
     get height() {
       return this.offsetHeight;
     },
 
     /**
-     * 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}
      */
     get imageElement() {
       return this.querySelector('.user-image');
     },
 
     /**
      * Gets name element.
      * @type {!HTMLDivElement}
@@ skipping 29 matching lines @@
     /**
      * 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 the pin-container of the pod.
-     * @type {!HTMLDivElement}
-     */
-    get pinContainer() {
-      return this.querySelector('.pin-container');
-    },
-
-    /**
      * Gets the pin-keyboard of the pod.
      * @type {!HTMLElement}
      */
     get pinKeyboard() {
       return this.querySelector('pin-keyboard');
     },
 
     /**
      * Gets user online sign in hint element.
      * @type {!HTMLDivElement}
      */
     get reauthWarningElement() {
       return this.querySelector('.reauth-hint-container');
     },
 
     /**
-     * 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}
      */
     get launchAppButtonContainerElement() {
       return this.querySelector('.launch-app-button-container');
     },
 
     /**
      * Gets launch app button.
      * @type {!HTMLButtonElement}
@@ skipping 184 matching lines @@
           this.querySelector('.mp-policy-not-allowed-msg').hidden = false;
       } else if (this.user_.isApp) {
         this.setUserPodIconType('app');
       }
     },
 
     toggleTransitions: function(enable) {
       this.classList.toggle('flying-pin-pod', enable);
     },
 
+    setPinClass_: function(element, enable) {
+      element.classList.toggle('pin-enabled', enable);
+      element.classList.toggle('pin-disabled', !enable);
+    },
+
     setPinVisibility: function(visible) {
-      var elements = [this, this.authElement, this.imagePaneElement,
-                      this.imageElement, this.pinContainer];
-
-      for (var idx = 0; idx < elements.length; idx++) {
-        var currentElement = elements[idx];
-        currentElement.classList.toggle('pin-enabled', visible);
-        currentElement.classList.toggle('pin-disabled', !visible);
-      }
+      [].forEach.call(

[jdufault, 2016/07/19 18:22:19]

I don't think the forEach improves readability here since it requires a call,
this binding, and the formatting is so wonky. I'd go with a regular for loop.

  var elements = this.getElementsByClassName('pin-tag');
  for (var i = 0; i < elements.length; ++i)
    this.setPinClass_(elements[i], visible);

  this.setPinClass_(this, visible);

Also, what do you think of updatePinClass_ instead of setPinClass_ for naming?

[sammiequon, 2016/07/20 17:11:06]

Done.

+          this.getElementsByClassName('pin-tag'), function(el) {
+        this.setPinClass_(el, visible);
+      }, this);
+      this.setPinClass_(this, visible);
 
       // Set the focus to the input element after showing/hiding pin keyboard.
       if (visible)
         this.pinKeyboard.focus();
       else
         this.mainInput.focus();
     },
 
+    isPinShown: function() {
+      return this.classList.contains('pin-enabled');
+    },
+
     setUserPodIconType: function(userTypeClass) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
       this.userTypeIconAreaElement.hidden = false;
     },
 
     /**
      * The user that this pod represents.
      * @type {!Object}
      */
     user_: undefined,
@@ skipping 15 matching lines @@
         (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING);
       return isMultiProfilesUI && !this.user_.isMultiProfilesAllowed;
     },
 
     /**
      * Gets main input element.
      * @type {(HTMLButtonElement|HTMLInputElement)}
      */
     get mainInput() {
       if (this.isAuthTypePassword) {
-        if (this.pinContainer.classList.contains('pin-enabled'))
+        if (this.isPinShown() && this.pinKeyboard.inputElement)
           return this.pinKeyboard.inputElement;
         return this.passwordElement;
       } else if (this.isAuthTypeOnlineSignIn) {
         return this;
       } else if (this.isAuthTypeUserClick) {
         return this.passwordLabelElement;
       }
     },
 
     /**
@@ skipping 1789 matching lines @@
       // 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;
       }
       return {columns: columns, rows: rows};
     },
 
     /**
+     * Calculates the row and column of the |pod| with the pin keyboard (if
+     * any), otherwise returns a column and row greater than |maxPods|.
+     * @return {{columns: number, rows: number}}

[jdufault, 2016/07/19 18:22:19]

Add type annotations for parameters.

Return type should be non-nullable?

[sammiequon, 2016/07/20 17:11:06]

Added type annotations. Return type can be nullable if this function is not used
with a valid pod.

[jdufault, 2016/07/20 17:41:26]

console.error doesn't abort JS execution, so { column: undefined, row: undefined
} is returned in that case.

[jdufault, 2016/07/20 18:20:04]

Please address this comment :)

[sammiequon, 2016/07/20 19:00:37]

As per offline conversation, {column: -1, row: -1} returning is expected
behavior.

+     */
+    findPinPodLocation_: function(pod, columns, rows, maxPods) {

[jdufault, 2016/07/19 18:22:19]

Rename to findPodLocation_

[sammiequon, 2016/07/20 17:11:06]

Done.

+      var column = maxPods + 1;
+      var row = maxPods + 1;
+      if (pod && pod.isPinShown()) {

[jdufault, 2016/07/19 18:22:19]

pod should always be valid.

This function doesn't need to be restricted to only PIN.

[sammiequon, 2016/07/20 17:11:06]

I moved this check outside as suggested, put focusPod_ is sometimes null,
because placePods is used when nothing is in focus as well.

+        this.pods.forEach(function(currentPod, index) {
+          var currentColumn = index % columns;
+          var currentRow = Math.floor(index / columns);
+          if (currentPod == pod) {
+            row = currentRow;
+            column = currentColumn;
+          } else if (currentPod.isPinShown()) {
+            // Only the focused pod should ever show the PIN keyboard.

[jdufault, 2016/07/19 18:22:19]

Remove error message, this function doesn't need to know about PIN.

It'd be pretty easy to add this validation back in somewhere else if we need it.

[sammiequon, 2016/07/20 17:11:06]

Done.

+            console.error('Non-focused pod is showing a PIN keyboard.');
+          }
+        });
+      }
+      return {column: column, row: row};

[jdufault, 2016/07/19 18:22:19]

Initialize column/row to undefined. If they're undefined at this point emit an
error message that the pod couldn't be found.

[sammiequon, 2016/07/20 17:11:06]

Done.

+    },
+
+    /**
      * Places pods onto their positions onto pod grid.
      * @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];
       this.parentNode.setPreferredSize(
           this.columnsToWidth_(columns), this.rowsToHeight_(rows));
       var height = this.userPodHeight_;
       var width = this.userPodWidth_;
+      var pinPodLocation = this.findPinPodLocation_(

[jdufault, 2016/07/19 18:22:19]

Initialize pinPodLocation by default to { column+1, row+1 }, if focusedPod_ is
showing a pin then initialize it to the pod location?

  var pinPodLocation = { column: columns + 1, row: rows + 1 }; // Or what you
had before for the default value.
  if (this.focusedPod_.isPinShown())
    pinPodLocation = this.findPodLocation_(this.focusedPod_);

[sammiequon, 2016/07/20 17:11:06]

Done.

+          this.focusedPod_, columns, rows, maxPodsNumber);
+
       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) {
           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 offsetFromPin = 0;
+        if (row == pinPodLocation.row) {
+          offsetFromPin = PIN_EXTRA_WIDTH / 2;
+          if (column <= pinPodLocation.column)
+            offsetFromPin *= -1;
+        }
+
         var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
                                                 POD_ROW_PADDING;
-        pod.left = rowPadding + column * (width + margin);
+        pod.left = rowPadding + column * (width + margin) + offsetFromPin;
 
         // On desktop, we want the rows to always be equally spaced.
         pod.top = isDesktopUserManager ? row * (height + rowPadding) :
                                          row * height + rowPadding;
       });
       Oobe.getInstance().updateScreenSize(this.parentNode);
     },
 
     /**
      * Number of columns.
@@ skipping 50 matching lines @@
       }
       this.insideFocusPod_ = true;
 
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         if (!this.alwaysFocusSinglePod) {
           pod.isActionBoxMenuActive = false;
         }
         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)
             pod.classList.add('faded');
           else
             pod.classList.remove('faded');
           pod.reset(false);
         }
       }
 
       // Clear any error messages for previous pod.
       if (!this.isFocused(podToFocus))
         Oobe.clearErrors();
 
       var hadFocus = !!this.focusedPod_;
       this.focusedPod_ = podToFocus;
       if (podToFocus) {
+        this.setFocusedPodPinVisibility(true);
         podToFocus.classList.remove('faded');
         podToFocus.classList.add('focused');
         if (!podToFocus.multiProfilesPolicyApplied) {
           podToFocus.classList.toggle('signing-in', false);
           if (!opt_skipInputFocus)
             podToFocus.focusInput();
         } else {
           podToFocus.userTypeBubbleElement.classList.add('bubble-shown');
           // Note it is not necessary to skip this focus request when
           // |opt_skipInputFocus| is true. When |multiProfilesPolicyApplied|
           // is false, it doesn't focus on the password input box by default.
           podToFocus.focus();
         }
 
         // focusPod() automatically loads wallpaper
         if (!podToFocus.user.isApp)
           chrome.send('focusPod', [podToFocus.user.username]);
         this.firstShown_ = false;
         this.lastFocusedPod_ = podToFocus;
         this.scrollFocusedPodIntoView();
       }
       this.insideFocusPod_ = false;
+      this.placePods_();
     },
 
     /**
      * Resets wallpaper to the last active user's wallpaper, if any.
      */
     loadLastWallpaper: function() {
       if (this.lastFocusedPod_ && !this.lastFocusedPod_.user.isApp)
         chrome.send('loadWallpaper', [this.lastFocusedPod_.user.username]);
     },
 
@@ skipping 362 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });