Single user pod implementation for new login screen

ui/login/account_picker/md_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 30 matching lines @@
    * Maximal number of rows if sign-in banner is displayed alonside.
    * @type {number}
    * @const
    */
   var MAX_NUMBER_OF_ROWS_UNDER_SIGNIN_BANNER = 2;
 
   /**
    * Variables used for pod placement processing. Width and height should be
    * synced with computed CSS sizes of pods.
    */
-  var CROS_POD_WIDTH = 180;
+  var CROS_POD_WIDTH = 306;
   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 CROS_POD_HEIGHT = 346;
   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_HEIGHT = 417;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
    * @type {number}
@@ skipping 3861 matching lines @@
         this.ownerDocument.addEventListener(
             event, this.listeners_[event][0], this.listeners_[event][1]);
       }
       $('login-header-bar').buttonsTabIndex = UserPodTabOrder.HEADER_BAR;
 
       if (this.podPlacementPostponed_) {
         this.podPlacementPostponed_ = false;
         this.placePods_();
         this.maybePreselectPod();
       }
+
+      this.updatePodNameArea();
     },
 
     /**
      * Called when the element is hidden.
      */
     handleHide: function() {
       for (var event in this.listeners_) {
         this.ownerDocument.removeEventListener(
             event, this.listeners_[event][0], this.listeners_[event][1]);
       }
       $('login-header-bar').buttonsTabIndex = 0;
     },
 
     /**
      * Called when a pod's user image finishes loading.
      */
     handlePodImageLoad: function(pod) {
       var index = this.podsWithPendingImages_.indexOf(pod);
       if (index == -1) {
         return;
       }
 
       this.podsWithPendingImages_.splice(index, 1);
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     },
 
     /**
+     * Makes sure user name is centered in each pod and extra long name
+     * does not exceed max width.
+     */
+    updatePodNameArea: function() {
+      this.querySelectorAll('.name-container').forEach(function(nameArea) {
+        var nameElement = nameArea.children[1];

[jdufault, 2017/05/10 00:40:07]

Use a more specific selector?

[Wenzhao (Colin) Zang, 2017/05/11 18:13:36]

Done.

+        var leftMargin = (CROS_POD_WIDTH - nameElement.offsetWidth) / 2;
+        if (leftMargin > 0)
+          nameArea.style.left = leftMargin + 'px';
+        else
+          nameElement.style.width = CROS_POD_WIDTH + 'px';
+      });
+    },
+
+    /**
      * Preselects pod, if needed.
      */
      maybePreselectPod: function() {
        var pod = this.preselectedPod;
        this.focusPod(pod);
 
        // Hide user-type-bubble in case all user pods are disabled and we focus
        // first pod.
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });