User Manager MD User Pods

chrome/browser/resources/md_user_manager/user_manager.js

 /* Copyright 2016 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.
  */
 
 <include src="../../../../ui/login/screen.js">
 <include src="../../../../ui/login/bubble.js">
 <include src="../../../../ui/login/login_ui_tools.js">
 <include src="../../../../ui/login/display_manager.js">
 <include src="../../../../ui/login/account_picker/screen_account_picker.js">
 <include src="../../../../ui/login/account_picker/user_pod_row.js">
 <include src="../../../../ui/login/resource_loader.js">
 
 
 cr.define('cr.ui', function() {
   var DisplayManager = cr.ui.login.DisplayManager;
 
   /**
    * Constructs an Out of box controller. It manages initialization of screens,
    * transitions, error messages display.
    * @constructor
    * @extends {DisplayManager}
   */
   function Oobe() {}
 
   cr.addSingletonGetter(Oobe);
 
   Oobe.prototype = {
     __proto__: DisplayManager.prototype,
+
+    /**
+     * Overrides clientAreaSize in DisplayManager. When a new profile is created
+     * the #outer-container page may not be visible yet, so user-pods cannot be
+     * placed correctly. In that case we use dimensions of the #animated-pages.
+     * @type {{width:string, height:string}}
+     */
+    get clientAreaSize() {
+      width = $('outer-container').offsetWidth ||
+          $('animated-pages').offsetWidth;
+      // Deduct the maximum possible height of the #login-header-bar (including
+      // the padding and the border) from the height of #animated-pages. Result
+      // is the remaining visible height.
+      height = $('outer-container').offsetHeight ||
+          $('animated-pages').offsetHeight - 57;
+      return {width: width, height: height};
+    }
   };
 
   /**
    * Shows the given screen.
    * @param {boolean} showGuest True if |Browse as Guest| button should be
    * displayed.
    * @param {boolean} showAddPerson True if |Add Person| button should be
    * displayed.
    */
   Oobe.showUserManagerScreen = function(showGuest, showAddPerson) {
@@ skipping 102 matching lines @@
 // Allow selection events on components with editable text (password field)
 // bug (http://code.google.com/p/chromium/issues/detail?id=125863)
 disableTextSelectAndDrag(function(e) {
   var src = e.target;
   return src instanceof HTMLTextAreaElement ||
          src instanceof HTMLInputElement &&
          /text|password|search/.test(src.type);
 });
 
 document.addEventListener('DOMContentLoaded', UserManager.initialize);