Lock screen pin keyboard ui upgrades.

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;
+  var CROS_PIN_POD_WIDTH = 180;

[jdufault, 2016/08/05 21:58:52]

Can we eliminate this variable entirely, or set it to another constant value?

[sammiequon, 2016/08/05 23:34:50]

Done.

+  var CROS_PIN_POD_HEIGHT = 417;
 
   /**
    * 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 2313 matching lines @@
 
   PodRow.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     // Whether this user pod row is shown for the first time.
     firstShown_: true,
 
     // True if inside focusPod().
     insideFocusPod_: false,
 
+    // Whether the pin keyboard has been loaded.
+    pinKeyboardLoaded_: false,
+
     // 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,
 
     // Pods whose initial images haven't been loaded yet.
@@ skipping 135 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) {
+      this.pinKeyboardLoaded_ = true;

[jdufault, 2016/08/05 21:58:52]

Can we just query the DOM and see if there is content inside of the PIN
keyboard?

Why did this break, since it was working w/o this before?

[sammiequon, 2016/08/05 23:34:50]

Done. For multiple pods we want the keyboard to expand on focus, so it was
expanding right away before loading the keyboard.

       if (this.focusedPod_ && this.focusedPod_.user.showPin)
         this.focusedPod_.setPinVisibility(visible);
     },
 
     /**
      * 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.
      */
@@ skipping 395 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 given |pod|.
-     * @param {UserPod} pod Pod we want the row and column of.
-     * @param {number} columns Columns in the podrow.
-     * @param {number} rows Rows in the podrow.
-     * @return {{columns: number, rows: number}}
-     * @private
-     */
-    findPodLocation_: function(pod, columns, rows) {
-      var column = -1;
-      var row = -1;
-      var index = this.pods.indexOf(pod);
-      if (index >= 0) {
-        row = Math.floor(index / columns);
-        column = index % columns;
-      }
-      else {
-        console.error('Pod not found in pod row.');
-      }
-      return {column: column, row: row};
-    },
-
-    /**
      * 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_();
@@ skipping 21 matching lines @@
           console.error('Pod offsetHeight (' + pod.offsetHeight +
               ') and POD_HEIGHT (' + height + ') are not equal.');
         }
         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) + offsetFromPin;
+        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().updateScreenSize(this.parentNode);
     },
 
     /**
      * Number of columns.
@@ skipping 68 matching lines @@
         }
       }
 
       // 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);
+        // Only show the keyboard if it is fully loaded.
+        if (this.pinKeyboardLoaded_)
+          podToFocus.setPinVisibility(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/08/05 21:58:52]

Why the removal?

[sammiequon, 2016/08/05 23:34:50]

This was added to support multiple pods and to re position their lefts and
widths after a pin keyboard is shown/hidden. This is no longer needed because
the widths are constant. 

 
     /**
      * 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
   };
 });