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

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

Index: chrome/browser/resources/settings/people_page/user_list.js
diff --git a/chrome/browser/resources/settings/people_page/user_list.js b/chrome/browser/resources/settings/people_page/user_list.js
index 3fd8ce1c7a956374fc7b3d27ef12c90f277dcef0..21f3b5305965fbfd4ebe921901e0250d9c16f999 100644
--- a/chrome/browser/resources/settings/people_page/user_list.js
+++ b/chrome/browser/resources/settings/people_page/user_list.js
@@ -15,12 +15,16 @@
 Polymer({
   is: 'settings-user-list',
 
+  behaviors: [
+    settings.RouteObserverBehavior,
+  ],
+
   properties: {
     /**
      * Current list of whitelisted users.
-     * @type {!Array<!chrome.usersPrivate.User>}
+     * @private {!Array<!chrome.usersPrivate.User>}
      */
-    users: {
+    users_: {
       type: Array,
       value: function() { return []; },
       notify: true
@@ -43,15 +47,34 @@ Polymer({
       prefs.forEach(function(pref) {
         if (pref.key == 'cros.accounts.users') {
           chrome.usersPrivate.getWhitelistedUsers(function(users) {
-            this.users = users;
+            this.setUsers_(users);
           }.bind(this));
         }
       }, this);
     }.bind(this));
+  },
 
-    chrome.usersPrivate.getWhitelistedUsers(function(users) {
-      this.users = users;
-    }.bind(this));
+  /** @protected */
+  currentRouteChanged: function() {
+    if (settings.getCurrentRoute() == settings.Route.ACCOUNTS) {
+      chrome.usersPrivate.getWhitelistedUsers(function(users) {
+        this.setUsers_(users);
+      }.bind(this));
+    }
+  },
+
+  /**
+   * Helper function that sorts and sets the given list of whitelisted users.
+   * @param {!Array<!chrome.usersPrivate.User>} users List of whitelisted users.
+   */
+  setUsers_: function(users) {
+    this.users_ = users;
+    this.users_.sort(function(a, b) {
+      if (a.isOwner != b.isOwner)
+        return b.isOwner ? 1 : -1;
+      else
+        return -1;
+    });
   },
 
   /**
@@ -66,5 +89,10 @@ Polymer({
   /** @private */
   shouldHideCloseButton_: function(disabled, isUserOwner) {
     return disabled || isUserOwner;
+  },
+
+  /** @private */
+  getProfilePictureUrl_: function(username) {
+    return 'chrome://userimage/' + username + '?id=' + Date.now();
   }
 });