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

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

 // Copyright 2015 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
  * 'settings-user-list' shows a list of users whitelisted on this Chrome OS
  * device.
  *
  * Example:
  *
  *    <settings-user-list prefs="{{prefs}}">
  *    </settings-user-list>
  */
 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
     },
 
     /**
      * Whether the user list is disabled, i.e. that no modifications can be
      * made.
      * @type {boolean}
      */
     disabled: {
       type: Boolean,
       value: false
     }
   },
 
-  /** @override */
-  ready: function() {
-    chrome.settingsPrivate.onPrefsChanged.addListener(function(prefs) {

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

What happened so that we no longer need the pref change listener?

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

I was under the impression that, in order to add another user, we have to
navigate away from the page and since we fetch the user list on navigating to
the page, we don't need to listen to the pref change. Giving it more though, I
think we should keep this around.

-      prefs.forEach(function(pref) {
-        if (pref.key == 'cros.accounts.users') {
-          chrome.usersPrivate.getWhitelistedUsers(function(users) {
-            this.users = users;
-          }.bind(this));
-        }
-      }, this);
-    }.bind(this));
-
-    chrome.usersPrivate.getWhitelistedUsers(function(users) {
-      this.users = users;
-    }.bind(this));
+  /** @protected */
+  currentRouteChanged: function() {
+    if (this.isAttached &&

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

Can this ever fail? i.e., can this callback be called before the element is
attached?

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

From what I see in route.js no. But I saw this
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/people...
and thought you must've have run into this issue before and hence the check.

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

Honestly I'm not sure why it's in sync_page either. Maybe just remove it until
we can be sure we actually need it.

+        (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;
+    });
+  },
+
+  /**
    * @private
    * @param {!{model: !{item: !chrome.usersPrivate.User}}} e
    */
   removeUser_: function(e) {
     chrome.usersPrivate.removeWhitelistedUser(
         e.model.item.email, /* callback */ function() {});
   },
 
   /** @private */
   shouldHideCloseButton_: function(disabled, isUserOwner) {
     return disabled || isUserOwner;
+  },
+
+  /** @private */
+  getProfilePictureUrl_: function(username) {
+    return 'chrome://userimage/' + username + '?id=' + Date.now();
   }
 });