User Manager MD User Pods

ui/login/account_picker/user_pod_row.js

Index: ui/login/account_picker/user_pod_row.js
diff --git a/ui/login/account_picker/user_pod_row.js b/ui/login/account_picker/user_pod_row.js
index c36496d08a4a503ebf0f7d286d8951430160ce45..068555d44eb897ab8cc943c984ad9c3728604889 100644
--- a/ui/login/account_picker/user_pod_row.js
+++ b/ui/login/account_picker/user_pod_row.js
@@ -28,7 +28,7 @@ cr.define('login', function() {
    * @type {Array<number>}
    * @const
    */
-  var DESKTOP_MARGIN_BY_COLUMNS = [undefined, 15, 15, 15, 15, 15, 15];
+  var DESKTOP_MARGIN_BY_COLUMNS = [undefined, 32, 32, 32, 32, 32, 32];
 
   /**
    * Maximal number of columns currently supported by pod-row.
@@ -48,13 +48,14 @@ cr.define('login', function() {
    * Variables used for pod placement processing. Width and height should be
    * synced with computed CSS sizes of pods.
    */
-  var POD_WIDTH = 180;
+  var CROS_POD_WIDTH = 180;
+  var 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 DESKTOP_POD_HEIGHT = 200;
   var POD_ROW_PADDING = 10;
-  var DESKTOP_ROW_PADDING = 15;
+  var DESKTOP_ROW_PADDING = 32;
   var CUSTOM_ICON_CONTAINER_SIZE = 40;
 
   /**
@@ -1506,7 +1507,7 @@ cr.define('login', function() {
               is_synced_user ? 'removeUserWarningTextSyncNoStats' :
                                'removeUserWarningTextNonSyncNoStats');
           this.updateRemoveWarningDialogSetMessage_(this.user.profilePath,
-                                                    message);
+                                                    message, is_synced_user);
         } else {
           window.updateRemoveWarningDialogSetMessage =
               this.updateRemoveWarningDialogSetMessage_.bind(this);
@@ -1523,7 +1524,7 @@ cr.define('login', function() {
               is_synced_user ? 'removeUserWarningTextSyncNoStats' :
                                'removeUserWarningTextNonSyncNoStats');
           this.updateRemoveWarningDialogSetMessage_(this.user.profilePath,
-                                                    message);
+                                                    message, is_synced_user);
         } else {
           message = loadTimeData.getString(
               is_synced_user ? 'removeUserWarningTextSyncCalculating' :
@@ -1531,7 +1532,8 @@ cr.define('login', function() {
           substitute = loadTimeData.getString(
               'removeUserWarningTextCalculating');
           this.updateRemoveWarningDialogSetMessage_(this.user.profilePath,
-                                                    message, substitute);
+                                                    message, is_synced_user,
+                                                    substitute);
         }
       }
     },
@@ -1544,28 +1546,40 @@ cr.define('login', function() {
      * |message|. Can be omitted if $1 is not present in |message|.
      */
     updateRemoveWarningDialogSetMessage_: function(profilePath, message,
-                                                   count) {
+                                                   is_synced_user, count) {
       if (profilePath !== this.user.profilePath)
         return;
       // Add localized messages where $1 will be replaced with
       // <span class="total-count"></span>.
+      // and $2 will be replaced with <span class="email"></span>.
       var element = this.querySelector('.action-box-remove-user-warning-text');
       element.textContent = '';

[dzhioev (left Google), 2016/02/19 06:09:41]

Wow, I haven't seen this function before. I think it's weird.
Can we make it a little bit simpler? Something like:

  message = message.replace('$1', '<span class="total-count">' + count +
'</span>');
  message = message.replace('$2', '<span class="email">' +
this.user.emailAddress + '</span>');
  element.innerHTML = message;
          
Also I beleive |is_synced_user| param is excessive, because a) it equals to
|!!this.user.emailAddress| b) the |message| doesn't contain '$2' when
|is_synced_user| is false.

[Moe, 2016/02/19 15:07:41]

Agreed! Done.

 
-      messageParts = message.split('$1');

[Moe, 2016/04/08 13:44:38]

Here's how the logic will more or less look like without setting innerHTML.

+      messageParts = message.split(/(\$1|\$2)/);
       var numParts = messageParts.length;
       for (var j = 0; j < numParts; j++) {
-        element.appendChild(document.createTextNode(messageParts[j]));
-        if (j < numParts - 1) {
-          var elementToAdd = document.createElement('span');
+        var elementToAdd;
+        if (messageParts[j] === '$1') {
+          elementToAdd = document.createElement('span');
           elementToAdd.classList.add('total-count');
           elementToAdd.textContent = count;
           element.appendChild(elementToAdd);
+        } else if (messageParts[j] === '$2' && is_synced_user) {
+          elementToAdd = document.createElement('span');
+          elementToAdd.classList.add('email');
+          elementToAdd.textContent = this.user.emailAddress;
+          element.appendChild(elementToAdd);
+        } else {
+          element.appendChild(document.createTextNode(messageParts[j]));
         }
       }
       this.moveActionMenuUpIfNeeded_();
     },
 
+    substituteElement_: function(placeholder, elementToAdd) {

[dzhioev (left Google), 2016/02/19 06:09:41]

This seems unused.

[Moe, 2016/02/19 15:07:41]

Done.

+
+    },
+
     /**
      * Handles a click event on remove user confirmation button.
      * @param {Event} e Click event.
@@ -2314,8 +2328,8 @@ cr.define('login', function() {
           DISPLAY_TYPE.DESKTOP_USER_MANAGER;
       this.userPodHeight_ = isDesktopUserManager ? DESKTOP_POD_HEIGHT :
                                                    CROS_POD_HEIGHT;
-      // Same for Chrome OS and desktop.
-      this.userPodWidth_ = POD_WIDTH;
+      this.userPodWidth_ = isDesktopUserManager ? DESKTOP_POD_WIDTH :
+                                                   CROS_POD_WIDTH;
     },
 
     /**
@@ -2782,6 +2796,8 @@ cr.define('login', function() {
      * @return {{columns: number, rows: number}}
      */
     calculateLayout_: function() {
+      var isDesktopUserManager = Oobe.getInstance().displayType ==
+          DISPLAY_TYPE.DESKTOP_USER_MANAGER;
       var preferredColumns = this.pods.length < COLUMNS.length ?
           COLUMNS[this.pods.length] : COLUMNS[COLUMNS.length - 1];
       var maxWidth = Oobe.getInstance().clientAreaSize.width;
@@ -2793,9 +2809,11 @@ cr.define('login', function() {
           $('signin-banner'), null).getPropertyValue('display') != 'none') {
         rows = Math.min(rows, MAX_NUMBER_OF_ROWS_UNDER_SIGNIN_BANNER);
       }
-      var maxHeigth = Oobe.getInstance().clientAreaSize.height;
-      while (maxHeigth < this.rowsToHeight_(rows) && rows > 1)
-        --rows;
+      if (!isDesktopUserManager) {
+        var maxHeigth = Oobe.getInstance().clientAreaSize.height;
+        while (maxHeigth < this.rowsToHeight_(rows) && rows > 1)
+         --rows;
+      }
       // One more iteration if it's not enough cells to place all pods.
       while (maxWidth >= this.columnsToWidth_(columns + 1) &&
              columns * rows < this.pods.length &&