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 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 623 matching lines @@
     __proto__: HTMLDivElement.prototype,
 
     /**
      * Whether click on the pod can issue a user click auth attempt. The
      * attempt can be issued iff the pod was focused when the click
      * started (i.e. on mouse down event).
      * @type {boolean}
      * @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() {
       this.tabIndex = UserPodTabOrder.POD_INPUT;
       this.actionBoxAreaElement.tabIndex = UserPodTabOrder.POD_INPUT;
 
       this.addEventListener('keydown', this.handlePodKeyDown_.bind(this));
       this.addEventListener('click', this.handleClickOnPod_.bind(this));
       this.addEventListener('mousedown', this.handlePodMouseDown_.bind(this));
 
@@ skipping 137 matching lines @@
 
     /**
      * Gets name element.
      * @type {!HTMLDivElement}
      */
     get nameElement() {
       return this.querySelector('.name');
     },
 
     /**
+     * Gets name element.
+     * @type {!HTMLDivElement}
+     */
+    get nameContainerElement() {
+      return this.querySelector('.name-container');
+    },
+
+    /**
      * 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 250 matching lines @@
       } else if (this.user_.isApp) {
         this.setUserPodIconType('app');
       }
     },
 
     toggleTransitions: function(enable) {
       this.classList.toggle('flying-pin-pod', enable);
     },
 
     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) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
       this.userTypeIconAreaElement.hidden = false;
     },
 
     /**
      * The user that this pod represents.
      * @type {!Object}
@@ skipping 1404 matching lines @@
       this.appendChild(userPod);
       userPod.initialize();
     },
 
     togglePinTransitions: function(enable) {
       for (var i = 0; i < this.pods.length; ++i)
         this.pods[i].toggleTransitions(enable);
     },
 
     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;
     },
 
     /**
      * Runs app with a given id from the list of loaded apps.
      * @param {!string} app_id of an app to run.
      * @param {boolean=} opt_diagnosticMode Whether to run the app in
      *     diagnostic mode. Default is false.
      */
     findAndRunAppForTesting: function(app_id, opt_diagnosticMode) {
       var app = this.getPodWithAppId_(app_id);
@@ skipping 344 matching lines @@
      * 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] :
                                           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;
     },
 
     /**
      * Returns height of podrow having |rows| number of rows.
      * @private
      */
     rowsToHeight_: function(rows) {
       var isDesktopUserManager = Oobe.getInstance().displayType ==
@@ skipping 48 matching lines @@
       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 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) {
           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 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) :
                                          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_();

[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.

     },
 
     /**
      * 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 361 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });