[MD settings][cros accounts] Updates the accounts page according to the specs

chrome/browser/resources/settings/people_page/user_list.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-user-list">
   <template>
     <style include="settings-shared">
-      .soft-border {
-        border: 1px solid #c4c4c4;
-        border-radius: 2px;
+      .user-list {
+        /* 4 users (the extra 1px is to account for the border-bottom) */
+        max-height: calc(4 * (var(--settings-row-two-line-min-height) + 1px));
+        overflow-y: auto;
       }
 
       .user {
-        -webkit-padding-end: 8px;
-        -webkit-padding-start: 20px;
-        font-size: 0.75em;
-        height: 34px;
+        border-bottom: var(--settings-separator-line);
       }
 
-      .user-list {
-        border: 1px solid gray;
-        height: 160px;
-        overflow-y: auto;
-        padding: 10px 0;
+      .user-icon {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border-radius: 20px;
+        flex-shrink: 0;
+        height: 40px;
+        width: 40px;
+      }
+
+      .user-info {
+        -webkit-padding-start: 16px;
       }
     </style>
-    <div class="user-list soft-border">
-      <template is="dom-repeat" items="[[users]]">
-        <div class="user layout horizontal justified">
-          <div class="layout vertical center-justified">[[item.name]]</div>
-          <div class="close-button"
-              hidden$="[[shouldHideCloseButton_(disabled, item.isOwner)]]">
-            <paper-icon-button icon="cr:clear" class="clear-icon"
-                on-tap="removeUser_">
-            </paper-icon-button>
+    <div class="user-list">
+      <template is="dom-repeat" items="[[users_]]">
+        <div class="user layout horizontal center two-line">
+          <img class="user-icon" src="[[getProfilePictureUrl_(item.name)]]">
+          <div class="flex user-info">
+            <div>
+              [[item.name]]

[tommycli, 2016/11/14 20:11:57]

Odd that you say the display name isn't shown correctly. I think I specifically
addressed that with this patch for supervised users:
https://codereview.chromium.org/2259943003

Does the behavior differ from Old Options?

[Moe, 2016/11/15 16:46:48]

Your patch clearly returns the display email (the original email with dots) as
the "name" and not the display name. The behavior in the old settings page was
the same. The difference was that only display email and profile picture were
being displayed whereas in the MD settings both name and email must be
displayed. There even seems to be a TODO regarding fetching the name:
https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/options/chromeos...

[tommycli, 2016/11/15 17:50:35]

Okay cool. So long as the behavior is consistent with Old Options I'm fine with
it.

+              <span hidden="[[!item.isOwner]]">$i18n{deviceOwnerLabel}</span>
+            </div>
+            <div class="secondary">[[item.email]]</div>
           </div>
+          <paper-icon-button icon="cr:clear" class="clear-icon"
+              on-tap="removeUser_"
+              hidden="[[shouldHideCloseButton_(disabled, item.isOwner)]]">
+          </paper-icon-button>
         </div>
       </template>
     </div>
   </template>
   <script src="user_list.js"></script>
 </dom-module>