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 1011 matching lines @@
 
     /**
      * Gets action box menu title, user email item.
      * @type {!HTMLSpanElement}
      */
     get actionBoxMenuTitleEmailElement() {
       return this.querySelector('.action-box-menu-title-email');
     },
 
     /**
-     * Gets action box menu, remove user command item.
-     * @type {!HTMLInputElement}
-     */
-    get actionBoxMenuCommandElement() {
-      return this.querySelector('.action-box-menu-remove-command');
-    },
-
-    /**
      * Gets action box menu, remove user command item div.
      * @type {!HTMLInputElement}
      */
     get actionBoxMenuRemoveElement() {
       return this.querySelector('.action-box-menu-remove');
     },
 
     /**
      * Gets action box menu, remove user command item div.
      * @type {!HTMLInputElement}
@@ skipping 80 matching lines @@
       this.actionBoxMenuRemoveElement.setAttribute(
           'aria-label', loadTimeData.getString(
                'podMenuRemoveItemAccessibleName'));
       this.actionBoxMenuTitleNameElement.textContent = this.user_.isOwner ?
           loadTimeData.getStringF('ownerUserPattern', this.user_.displayName) :
           this.user_.displayName;
       this.actionBoxMenuTitleEmailElement.textContent = this.user_.emailAddress;
 
       this.actionBoxMenuTitleEmailElement.hidden =
           this.user_.legacySupervisedUser;
-
-      this.actionBoxMenuCommandElement.textContent =
-          loadTimeData.getString('removeUser');
     },
 
     customizeUserPodPerUserType: function() {
       if (this.user_.childUser && !this.user_.isDesktopUser) {
         this.setUserPodIconType('child');
       } else if (this.user_.legacySupervisedUser && !this.user_.isDesktopUser) {
         this.setUserPodIconType('legacySupervised');
         this.classList.add('legacy-supervised');
       } else if (this.multiProfilesPolicyApplied) {
         // Mark user pod as not focusable which in addition to the grayed out
@@ skipping 790 matching lines @@
      */
     handlePodMouseDown_: function(e) {
       this.userClickAuthAllowed_ = this.parentNode.isFocused(this);
     },
 
     /**
      * Called when the input of the password element changes. Updates the submit
      * button color and state and hides the error popup bubble.
      */
     updateInput_: function() {
+      var isEmpty = this.passwordElement.value.length == 0;
       if (this.submitButton) {
-        this.submitButton.disabled = this.passwordElement.value.length == 0;
+        this.submitButton.disabled = isEmpty;
         if (this.isFingerprintIconShown()) {
-          this.submitButton.hidden = this.passwordElement.value.length == 0;
+          this.submitButton.hidden = isEmpty;
         } else {
           this.submitButton.hidden = false;
         }
       }
       this.showError = false;
       $('bubble').hide();
+      var inputLine = this.querySelector('#input-line');
+      if (inputLine) {
+        if (!isEmpty)
+          inputLine.setAttribute('active', 'true');
+        else
+          inputLine.removeAttribute('active');
+      }
     },
 
     /**
      * Handles input event on the password element.
      * @param {Event} e Input event.
      */
     handleInputChanged_: function(e) {
       this.updateInput_();
     },
 
@@ skipping 1899 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.querySelector('.name');
+        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
   };
 });