Revert "Revert 53989 - Implement new mock for user options page per chromium-os:5028"

chrome/browser/resources/options/chromeos_accounts_user_list.js

Index: chrome/browser/resources/options/chromeos_accounts_user_list.js
diff --git a/chrome/browser/resources/options/chromeos_accounts_user_list.js b/chrome/browser/resources/options/chromeos_accounts_user_list.js
index f641a51027f24c8582155a4324d8a2f75578599c..2044a3c0ba5c8bf143dea98fd3429d68367dbdbd 100644
--- a/chrome/browser/resources/options/chromeos_accounts_user_list.js
+++ b/chrome/browser/resources/options/chromeos_accounts_user_list.js
@@ -27,24 +27,19 @@ cr.define('options.accounts', function() {
       // HACK(arv): http://crbug.com/40902
       window.addEventListener('resize', cr.bind(this.redraw, this));
 
+      this.addEventListener('click', this.handleClick_);
+
       var self = this;
-      if (!this.boundHandleChange_) {
-        this.boundHandleChange_ =
-            cr.bind(this.handleChange_, this);
-      }
 
       // Listens to pref changes.
       Preferences.getInstance().addEventListener(this.pref,
           function(event) {
             self.load_(event.value);
           });
-
-      // Listens to list selection change.
-      this.addEventListener('change', this.boundHandleChange_);
     },
 
     createItem: function(user) {
-      return new ListItem({label: user.email});
+      return new UserListItem(user);
     },
 
     /**
@@ -57,21 +52,32 @@ cr.define('options.accounts', function() {
     },
 
     /**
-     * Removes currently selected user from model and update backend.
+     * Removes given user from model and update backend.
      */
-    removeSelectedUser: function() {
-      var sm = this.selectionModel;
+    removeUser: function(user) {
       var dataModel = this.dataModel;
 
-      var newUsers = [];
-      for (var i = 0; i < dataModel.length; ++i) {
-        if (!sm.getIndexSelected(i)) {
-          newUsers.push(dataModel.item(i));
-        }
+      var index = dataModel.indexOf(user);
+      if (index >= 0) {
+        dataModel.splice(index, 1);
+        this.updateBackend_();
       }
-      this.load_(newUsers);
+    },
 
-      this.updateBackend_();
+    /**
+     * Handles the clicks on the list and triggers user removal if the click
+     * is on the remove user button.
+     * @private
+     * @param {!Event} e The click event object.
+     */
+    handleClick_: function(e) {
+      // Handle left button click
+      if (e.button == 0) {
+        var el = e.target;
+        if (el.className == 'remove-user-button') {
+          this.removeUser(el.parentNode.user);
+        }
+      }
     },
 
     /**
@@ -87,13 +93,64 @@ cr.define('options.accounts', function() {
      */
     updateBackend_: function() {
       Preferences.setObjectPref(this.pref, this.dataModel.slice());
-    },
+    }
+  };
 
-    /**
-     * Handles selection change.
-     */
-    handleChange_: function(e) {
-      $('removeUserButton').disabled = this.selectionModel.selectedIndex == -1;
+  /**
+   * Creates a new user list item.
+   * @param user The user account this represents.
+   * @constructor
+   * @extends {cr.ui.ListItem}
+   */
+  function UserListItem(user) {
+    var el = cr.doc.createElement('div');
+    el.user = user;
+    UserListItem.decorate(el);
+    return el;
+  }
+
+  /**
+   * Decorates an element as a user account item.
+   * @param {!HTMLElement} el The element to decorate.
+   */
+  UserListItem.decorate = function(el) {
+    el.__proto__ = UserListItem.prototype;
+    el.decorate();
+  };
+
+  UserListItem.prototype = {
+    __proto__: ListItem.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      ListItem.prototype.decorate.call(this);
+
+      this.className = 'user-list-item';
+
+      var icon = this.ownerDocument.createElement('img');
+      icon.className = 'user-icon';
+      // TODO(xiyuan): Replace this with real user picture when ready.
+      icon.src = 'chrome://theme/IDR_LOGIN_DEFAULT_USER';
+
+      var labelEmail = this.ownerDocument.createElement('span');
+      labelEmail.className = 'user-email-label';
+      labelEmail.textContent = this.user.email;
+
+      var labelName = this.ownerDocument.createElement('span');
+      labelName.className = 'user-name-label';
+      labelName.textContent = this.user.owner ?
+          localStrings.getStringF('username_format', this.user.name) :
+          this.user.name;
+
+      this.appendChild(icon);
+      this.appendChild(labelEmail);
+      this.appendChild(labelName);
+
+      if (!this.user.owner) {
+        var removeButton = this.ownerDocument.createElement('button');
+        removeButton.className = 'remove-user-button';
+        this.appendChild(removeButton);
+      }
     }
   };