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

This reverts commit r54128.

TBR=dhg@chromium.org
BUG=chromium-os:5028
TEST=erify the user options page matches mock per chromium-os:5028. Note the underlying libcros is still missing and UI shows up mock data only.

Review URL: http://codereview.chromium.org/3071013

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@54566 0039d316-1c4b-4281-b951-d872f2087c98

9 files changed, 206 insertions, 61 deletions

diff --git a/chrome/browser/chromeos/cros_settings_names.cc b/chrome/browser/chromeos/cros_settings_names.cc
index 84fbf7e..6cbd59a 100644
--- a/chrome/browser/chromeos/cros_settings_names.cc
+++ b/chrome/browser/chromeos/cros_settings_names.cc
@@ -10,6 +10,8 @@ const wchar_t kCrosSettingsPrefix[]     = L"cros.";
 
 const wchar_t kAccountsPrefAllowBWSI[]  = L"cros.accounts.allowBWSI";
 const wchar_t kAccountsPrefAllowGuest[] = L"cros.accounts.allowGuest";
+const wchar_t kAccountsPrefShowUserNamesOnSignIn[]
+    = L"cros.accounts.showUserNamesOnSignIn";
 const wchar_t kAccountsPrefUsers[]      = L"cros.accounts.users";
 
 }  // namespace chromeos
diff --git a/chrome/browser/chromeos/cros_settings_names.h b/chrome/browser/chromeos/cros_settings_names.h
index e80235e..7532fa4 100644
--- a/chrome/browser/chromeos/cros_settings_names.h
+++ b/chrome/browser/chromeos/cros_settings_names.h
@@ -12,6 +12,7 @@ extern const wchar_t kCrosSettingsPrefix[];
 
 extern const wchar_t kAccountsPrefAllowBWSI[];
 extern const wchar_t kAccountsPrefAllowGuest[];
+extern const wchar_t kAccountsPrefShowUserNamesOnSignIn[];
 extern const wchar_t kAccountsPrefUsers[];
 
 }  // namespace chromeos
diff --git a/chrome/browser/chromeos/dom_ui/accounts_options_handler.cc b/chrome/browser/chromeos/dom_ui/accounts_options_handler.cc
index 9ca1730..8b594c4 100644
--- a/chrome/browser/chromeos/dom_ui/accounts_options_handler.cc
+++ b/chrome/browser/chromeos/dom_ui/accounts_options_handler.cc
@@ -28,19 +28,14 @@ void AccountsOptionsHandler::GetLocalizedValues(
       IDS_OPTIONS_ACCOUNTS_ALLOW_BWSI_DESCRIPTION));
   localized_strings->SetString(L"allow_guest",l10n_util::GetString(
       IDS_OPTIONS_ACCOUNTS_ALLOW_GUEST_DESCRIPTION));
-  localized_strings->SetString(L"user_list_title",l10n_util::GetString(
-      IDS_OPTIONS_ACCOUNTS_USER_LIST_TITLE));
-  localized_strings->SetString(L"add_user",l10n_util::GetString(
-      IDS_OPTIONS_ACCOUNTS_ADD_USER));
-  localized_strings->SetString(L"remove_user",l10n_util::GetString(
-      IDS_OPTIONS_ACCOUNTS_REMOVE_USER));
-  localized_strings->SetString(L"add_user_email",l10n_util::GetString(
-      IDS_OPTIONS_ACCOUNTS_EMAIL_LABEL));
-
-  localized_strings->SetString(L"ok_label",l10n_util::GetString(
-      IDS_OK));
-  localized_strings->SetString(L"cancel_label",l10n_util::GetString(
-      IDS_CANCEL));
+  localized_strings->SetString(L"show_user_on_signin",l10n_util::GetString(
+      IDS_OPTIONS_ACCOUNTS_SHOW_USER_NAMES_ON_SINGIN_DESCRIPTION));
+  localized_strings->SetString(L"username_edit_hint",l10n_util::GetString(
+      IDS_OPTIONS_ACCOUNTS_USERNAME_EDIT_HINT));
+  localized_strings->SetString(L"username_format",l10n_util::GetString(
+      IDS_OPTIONS_ACCOUNTS_USERNAME_FORMAT));
+  localized_strings->SetString(L"add_users",l10n_util::GetString(
+      IDS_OPTIONS_ACCOUNTS_ADD_USERS));
 }
 
 }  // namespace chromeos
diff --git a/chrome/browser/chromeos/mock_cros_settings.cc b/chrome/browser/chromeos/mock_cros_settings.cc
index 5cec066..36aa9c1 100644
--- a/chrome/browser/chromeos/mock_cros_settings.cc
+++ b/chrome/browser/chromeos/mock_cros_settings.cc
@@ -11,15 +11,20 @@ MockCrosSettings::MockCrosSettings()
   // Some mock settings
   SetBoolean(kAccountsPrefAllowBWSI, true);
   SetBoolean(kAccountsPrefAllowGuest, true);
+  SetBoolean(kAccountsPrefShowUserNamesOnSignIn, true);
 
   ListValue* user_list = new ListValue;
 
   DictionaryValue* mock_user = new DictionaryValue;
   mock_user->SetString(L"email", L"mock_user_1@gmail.com");
+  mock_user->SetString(L"name", L"Mock User One");
+  mock_user->SetBoolean(L"owner", true);
   user_list->Append(mock_user);
 
   mock_user = new DictionaryValue;
   mock_user->SetString(L"email", L"mock_user_2@gmail.com");
+  mock_user->SetString(L"name", L"Mock User Two");
+  mock_user->SetBoolean(L"owner", false);
   user_list->Append(mock_user);
 
   Set(kAccountsPrefUsers, user_list);
diff --git a/chrome/browser/dom_ui/options_ui.cc b/chrome/browser/dom_ui/options_ui.cc
index 4d7d40d..c62473f 100644
--- a/chrome/browser/dom_ui/options_ui.cc
+++ b/chrome/browser/dom_ui/options_ui.cc
@@ -29,6 +29,7 @@
 #include "chrome/browser/dom_ui/search_engine_manager_handler.h"
 #include "chrome/browser/dom_ui/stop_syncing_handler.h"
 #include "chrome/browser/dom_ui/sync_options_handler.h"
+#include "chrome/browser/dom_ui/dom_ui_theme_source.h"
 #include "chrome/browser/metrics/user_metrics.h"
 #include "chrome/browser/pref_service.h"
 #include "chrome/browser/profile.h"
@@ -164,6 +165,15 @@ OptionsUI::OptionsUI(TabContents* contents) : DOMUI(contents) {
           Singleton<ChromeURLDataManager>::get(),
           &ChromeURLDataManager::AddDataSource,
           make_scoped_refptr(html_source)));
+
+  // Set up chrome://theme/ source.
+  DOMUIThemeSource* theme = new DOMUIThemeSource(GetProfile());
+  ChromeThread::PostTask(
+      ChromeThread::IO, FROM_HERE,
+      NewRunnableMethod(
+          Singleton<ChromeURLDataManager>::get(),
+          &ChromeURLDataManager::AddDataSource,
+          make_scoped_refptr(theme)));
 }
 
 // static
diff --git a/chrome/browser/resources/options/chromeos_accounts_options.html b/chrome/browser/resources/options/chromeos_accounts_options.html
index 1369cd5..1439259 100644
--- a/chrome/browser/resources/options/chromeos_accounts_options.html
+++ b/chrome/browser/resources/options/chromeos_accounts_options.html
@@ -2,6 +2,21 @@
   <h1 i18n-content="accountsPage"></h1>
   <div class="option">
     <table class="option-control-table">
+    <tr><td>
+      <table class="user-list-table">
+        <tr><td>
+          <list id="userList"></list>
+        </td></tr>
+        <tr><td class="user-name-edit-row">
+          <label><span i18n-content="add_users"></span><br>
+          <input id="userNameEdit" type="text"
+              i18n-values="placeholder:username_edit_hint">
+          </span>
+          </label>
+        </td></tr>
+      </table>
+    </td></tr>
+    <tr><td>&nbsp;</td></tr>
     <tr>
       <td class="option-name"><label><input id="allowBwsiCheck"
            pref="cros.accounts.allowBWSI" type="checkbox"><span
@@ -13,17 +28,10 @@
            i18n-content="allow_guest"></span></label></td>
     </tr>
     <tr>
-      <td class="option-name" i18n-content="user_list_title"></td>
+      <td class="option-name"><label><input id="showUserNamesCheck"
+           pref="cros.accounts.showUserNamesOnSignIn" type="checkbox"><span
+           i18n-content="show_user_on_signin"></span></label></td>
     </tr>
-    <tr><td class="option-name">
-      <list id="userList"></list>
-    </td></tr>
-    <tr><td class="option-name">
-      <button id="addUserButton"
-          i18n-content="add_user"></button>
-      <button id="removeUserButton" disabled
-          i18n-content="remove_user"></button>
-    </td></tr>
     </table>
   </div>
 </div>
diff --git a/chrome/browser/resources/options/chromeos_accounts_options.js b/chrome/browser/resources/options/chromeos_accounts_options.js
index 9830bfa..fa3810b 100644
--- a/chrome/browser/resources/options/chromeos_accounts_options.js
+++ b/chrome/browser/resources/options/chromeos_accounts_options.js
@@ -37,30 +37,36 @@ cr.define('options', function() {
       OptionsPage.prototype.initializePage.call(this);
 
       // Set up accounts page.
-      $('addUserButton').onclick = function(e) {
-        OptionsPage.showOverlay('addUserOverlay');
-      };
-      $('removeUserButton').onclick = function(e) {
-        $('userList').removeSelectedUser();
-      };
-
       options.accounts.UserList.decorate($('userList'));
 
-      this.addEventListener('visibleChange',
-                            cr.bind(this.handleVisibleChange_, this));
+      var userNameEdit = $('userNameEdit');
+      options.accounts.UserNameEdit.decorate(userNameEdit);
+      userNameEdit.addEventListener('add', this.handleAddUser_);
+
+      this.addEventListener('visibleChange', this.handleVisibleChange_);
     },
 
     userListInitalized_: false,
 
     /**
      * Handler for OptionsPage's visible property change event.
+     * @private
      * @param {Event} e Property change event.
      */
-    handleVisibleChange_ : function(e) {
+    handleVisibleChange_: function(e) {
       if (!this.userListInitalized_ && this.visible) {
         this.userListInitalized_ = true;
         userList.redraw();
       }
+    },
+
+    /**
+     * Handler for "add" event fired from userNameEdit.
+     * @private
+     * @param {Event} e Add event fired from userNameEdit.
+     */
+    handleAddUser_: function(e) {
+      $('userList').addUser(e.user);
     }
   };
 
@@ -70,4 +76,3 @@ cr.define('options', function() {
   };
 
 });
-
diff --git a/chrome/browser/resources/options/chromeos_accounts_options_page.css b/chrome/browser/resources/options/chromeos_accounts_options_page.css
index 739e254..cca4da8 100644
--- a/chrome/browser/resources/options/chromeos_accounts_options_page.css
+++ b/chrome/browser/resources/options/chromeos_accounts_options_page.css
@@ -1,6 +1,68 @@
-#userList {
+.user-list-table {
+  border: 1px solid lightgrey;
+  border-collapse: collapse;
+  border-spacing: 0px;
+}
+
+.user-name-edit-row {
   border: 1px solid lightgrey;
+  background-color: #ebeffa;
+  padding: 5px;
+}
+
+.user-list-item {
+  line-height: 35px;
   padding: 2px;
-  width: 160px;
-  height: 120px;
+}
+
+.user-icon {
+  border: 1px solid black;
+  width: 26px;
+  height: 26px;
+  vertical-align: middle;
+}
+
+.user-email-label {
+  -webkit-margin-start: 10px;
+}
+
+.user-name-label {
+  color: darkgray;
+  -webkit-margin-start: 10px;
+}
+
+.remove-user-button {
+  background-image: url(chrome://theme/IDR_CLOSE_BAR);
+  background-color: transparent;
+  border: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 8px;
+}
+
+html[dir=ltr] .remove-user-button {
+  float: right;
+}
+
+html[dir=rtl] .remove-user-button {
+  float: left;
+}
+
+.remove-user-button:hover {
+  background-image: url(chrome://theme/IDR_CLOSE_BAR_H);
+}
+
+#userList {
+  padding: 5px;
+  width: 366px;
+  height: 166px;
+}
+
+#userNameEdit {
+  border: 1px solid lightgrey;
+  width: 366px;
+}
+
+input#userNameEdit:invalid {
+  background-color: #ff6666;
 }
diff --git a/chrome/browser/resources/options/chromeos_accounts_user_list.js b/chrome/browser/resources/options/chromeos_accounts_user_list.js
index f641a51..2044a3c 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);
+      }
     }
   };