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

BUG=chromium-os:5028
TEST=Verify 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/2868067

TBR=xiyuan@chromium.org
Review URL: http://codereview.chromium.org/3074010

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

11 files changed, 72 insertions, 336 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 418cf89..d29b9ae 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -5483,7 +5483,7 @@ Keep your key file in a safe place. You will need it to create new versions of y
           Labs
         </message>
         <message name="IDS_OPTIONS_ACCOUNTS_TAB_LABEL" desc="The title of the Accounts tab">
-          Users
+          Accounts
         </message>
       </if>
       <message name="IDS_OPTIONS_GENERAL_TAB_LABEL" desc="The title of the Basics tab">
@@ -7891,19 +7891,19 @@ Keep your key file in a safe place. You will need it to create new versions of y
         Allow browse without signing in.
       </message>
       <message name="IDS_OPTIONS_ACCOUNTS_ALLOW_GUEST_DESCRIPTION" desc="In the Accounts settings tab, the text on the checkbox to allow guest to sign in.">
-        Allow anyone to sign in.
+        Allow guest signin.
       </message>
-      <message name="IDS_OPTIONS_ACCOUNTS_SHOW_USER_NAMES_ON_SINGIN_DESCRIPTION" desc="In the Accounts settings tab, the text on the checkbox to show user names and pictures on signin screen.">
-        Show user names and pictures on sign-in screen.
+      <message name="IDS_OPTIONS_ACCOUNTS_USER_LIST_TITLE" desc="In the Accounts settings tab, the title text on top of user list table.">
+        Users
       </message>
-      <message name="IDS_OPTIONS_ACCOUNTS_USERNAME_EDIT_HINT" desc="In the Accounts settings tab, the instruction text on an empty username edit.">
-        Enter names or addresses.
+      <message name="IDS_OPTIONS_ACCOUNTS_ADD_USER" desc="In the Accounts settings tab, the text on the button to add a user.">
+        Add user
       </message>
-      <message name="IDS_OPTIONS_ACCOUNTS_USERNAME_FORMAT" desc="In the Accounts settings tab, the text format to create user name and owner tag.">
-        <ph name="NAME">$1<ex>John Doe</ex></ph> - Owner
+      <message name="IDS_OPTIONS_ACCOUNTS_REMOVE_USER" desc="In the Accounts settings tab, the text on the button to remove a user.">
+        Remove user
       </message>
-      <message name="IDS_OPTIONS_ACCOUNTS_ADD_USERS" desc="In the Accounts settings tab, the label text above the user name edit box.">
-        Add users
+      <message name="IDS_OPTIONS_ACCOUNTS_EMAIL_LABEL" desc="In the Accounts add user overlay, the label text for email input edit.">
+        Email:
       </message>
       <message name="IDS_OPTIONS_SETTINGS_INTERNET_OPTIONS_NETWORK_ID" desc="In settings internet options, the label for the network id.">
         Network id:
diff --git a/chrome/browser/chromeos/cros_settings_names.cc b/chrome/browser/chromeos/cros_settings_names.cc
index 6cbd59a..84fbf7e 100644
--- a/chrome/browser/chromeos/cros_settings_names.cc
+++ b/chrome/browser/chromeos/cros_settings_names.cc
@@ -10,8 +10,6 @@ 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 7532fa4..e80235e 100644
--- a/chrome/browser/chromeos/cros_settings_names.h
+++ b/chrome/browser/chromeos/cros_settings_names.h
@@ -12,7 +12,6 @@ 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 8b594c4..9ca1730 100644
--- a/chrome/browser/chromeos/dom_ui/accounts_options_handler.cc
+++ b/chrome/browser/chromeos/dom_ui/accounts_options_handler.cc
@@ -28,14 +28,19 @@ 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"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));
+  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));
 }
 
 }  // namespace chromeos
diff --git a/chrome/browser/chromeos/mock_cros_settings.cc b/chrome/browser/chromeos/mock_cros_settings.cc
index 36aa9c1..5cec066 100644
--- a/chrome/browser/chromeos/mock_cros_settings.cc
+++ b/chrome/browser/chromeos/mock_cros_settings.cc
@@ -11,20 +11,15 @@ 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 c62473f..4d7d40d 100644
--- a/chrome/browser/dom_ui/options_ui.cc
+++ b/chrome/browser/dom_ui/options_ui.cc
@@ -29,7 +29,6 @@
 #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"
@@ -165,15 +164,6 @@ 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 1439259..1369cd5 100644
--- a/chrome/browser/resources/options/chromeos_accounts_options.html
+++ b/chrome/browser/resources/options/chromeos_accounts_options.html
@@ -2,21 +2,6 @@
   <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
@@ -28,10 +13,17 @@
            i18n-content="allow_guest"></span></label></td>
     </tr>
     <tr>
-      <td class="option-name"><label><input id="showUserNamesCheck"
-           pref="cros.accounts.showUserNamesOnSignIn" type="checkbox"><span
-           i18n-content="show_user_on_signin"></span></label></td>
+      <td class="option-name" i18n-content="user_list_title"></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 b6a4c29..8339669 100644
--- a/chrome/browser/resources/options/chromeos_accounts_options.js
+++ b/chrome/browser/resources/options/chromeos_accounts_options.js
@@ -33,35 +33,32 @@ AccountsOptions.prototype = {
     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'));
 
-    var userNameEdit = $('userNameEdit');
-    options.accounts.UserNameEdit.decorate(userNameEdit);
-    userNameEdit.addEventListener('add', this.handleAddUser_);
+    this.addEventListener('visibleChange',
+                          cr.bind(this.handleVisibleChange_, this));
 
-    this.addEventListener('visibleChange', this.handleVisibleChange_);
+    // Setup add user overlay page.
+    OptionsPage.registerOverlay(AddUserOverlay.getInstance());
   },
 
   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);
   }
 };
diff --git a/chrome/browser/resources/options/chromeos_accounts_options_page.css b/chrome/browser/resources/options/chromeos_accounts_options_page.css
index cca4da8..739e254 100644
--- a/chrome/browser/resources/options/chromeos_accounts_options_page.css
+++ b/chrome/browser/resources/options/chromeos_accounts_options_page.css
@@ -1,68 +1,6 @@
-.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;
-}
-
-.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;
+  padding: 2px;
+  width: 160px;
+  height: 120px;
 }
diff --git a/chrome/browser/resources/options/chromeos_accounts_user_list.js b/chrome/browser/resources/options/chromeos_accounts_user_list.js
index 2044a3c..f641a51 100644
--- a/chrome/browser/resources/options/chromeos_accounts_user_list.js
+++ b/chrome/browser/resources/options/chromeos_accounts_user_list.js
@@ -27,19 +27,24 @@ 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 UserListItem(user);
+      return new ListItem({label: user.email});
     },
 
     /**
@@ -52,32 +57,21 @@ cr.define('options.accounts', function() {
     },
 
     /**
-     * Removes given user from model and update backend.
+     * Removes currently selected user from model and update backend.
      */
-    removeUser: function(user) {
+    removeSelectedUser: function() {
+      var sm = this.selectionModel;
       var dataModel = this.dataModel;
 
-      var index = dataModel.indexOf(user);
-      if (index >= 0) {
-        dataModel.splice(index, 1);
-        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);
+      var newUsers = [];
+      for (var i = 0; i < dataModel.length; ++i) {
+        if (!sm.getIndexSelected(i)) {
+          newUsers.push(dataModel.item(i));
         }
       }
+      this.load_(newUsers);
+
+      this.updateBackend_();
     },
 
     /**
@@ -93,64 +87,13 @@ cr.define('options.accounts', function() {
      */
     updateBackend_: function() {
       Preferences.setObjectPref(this.pref, this.dataModel.slice());
-    }
-  };
-
-  /**
-   * 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);
-      }
+    /**
+     * Handles selection change.
+     */
+    handleChange_: function(e) {
+      $('removeUserButton').disabled = this.selectionModel.selectedIndex == -1;
     }
   };
 
diff --git a/chrome/browser/resources/options/chromeos_accounts_user_name_edit.js b/chrome/browser/resources/options/chromeos_accounts_user_name_edit.js
deleted file mode 100644
index 33b5308..0000000
--- a/chrome/browser/resources/options/chromeos_accounts_user_name_edit.js
+++ /dev/null
@@ -1,121 +0,0 @@
-// Copyright (c) 2010 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.
-
-cr.define('options.accounts', function() {
-  const Event = cr.Event;
-
-  // Email alias only, assuming it's a gmail address.
-  //   e.g. 'john'
-  //        {name: 'john', email: 'john@gmail.com'}
-  const format1String =
-      '^\\s*([\\w\\.!#\\$%&\'\\*\\+-\\/=\\?\\^`\\{\\|\\}~]+)\\s*$';
-  // Email address only.
-  //   e.g. 'john@chromium.org'
-  //        {name: 'john', email: 'john@chromium.org'}
-  const format2String =
-      '^\\s*([\\w\\.!#\\$%&\'\\*\\+-\\/=\\?\\^`\\{\\|\\}~]+)@(\\w+\\..+)\\s*$';
-  // Full format.
-  //   e.g. '"John Doe" <john@chromium.org>'
-  //        {name: 'John doe', email: 'john@chromium.org'}
-  const format3String =
-      '^\\s*"{0,1}([^"]+)"{0,1}\\s*<([^@]+@\\w+\\..+)>\\s*$';
-
-  /**
-   * Creates a new user name edit element.
-   * @param {Object=} opt_propertyBag Optional properties.
-   * @constructor
-   * @extends {HTMLInputElement}
-   */
-  var UserNameEdit = cr.ui.define('input');
-
-  UserNameEdit.prototype = {
-    __proto__: HTMLInputElement.prototype,
-
-    /**
-     * Called when an element is decorated as a user name edit.
-     */
-    decorate: function() {
-      this.pattern = format1String + '|' + format2String + '|' +
-                     format3String;
-
-      this.onkeypress = cr.bind(this.handleKeyPress_, this);
-    },
-
-
-    /**
-     * Parses given str for user info.
-     *
-     * Note that the email parsing is based on RFC 5322 and does not support
-     * IMA (Internationalized Email Address). We take only the following chars
-     * as valid for an email alias (aka local-part):
-     *   - Letters: a–z, A–Z
-     *   - Digits: 0-9
-     *   - Characters: ! # $ % & ' * + - / = ? ^ _ ` { | } ~
-     *   - Dot: . (Note that we did not cover the cases that dot should not
-     *       appear as first or last character and should not appear two or
-     *       more times in a row.)
-     *
-     * @param {string} str A string to parse.
-     * @return {Object} User info parsed from the string.
-     */
-    parse: function(str) {
-      const format1 = new RegExp(format1String);
-      const format2 = new RegExp(format2String);
-      const format3 = new RegExp(format3String);
-
-      var matches = format1.exec(str);
-      if (matches) {
-        return {
-          name: matches[1],
-          email: matches[1] + '@gmail.com',
-          owner:false
-        };
-      }
-
-      matches = format2.exec(str);
-      if (matches) {
-        return {
-          name: matches[1],
-          email: matches[1] + '@' + matches[2],
-          owner:false
-        };
-      }
-
-      matches = format3.exec(str);
-      if (matches) {
-        return {
-          name: matches[1],
-          email: matches[2],
-          owner:false
-        };
-      }
-
-      return null;
-    },
-
-    /**
-     * Handler for key press event.
-     * @private
-     * @param {!Event} e The keypress event object.
-     */
-    handleKeyPress_: function(e) {
-      // Enter
-      if (e.keyCode == 13) {
-        var user = this.parse(this.value);
-        if (user) {
-          var e = new Event('add');
-          e.user = user;
-          this.dispatchEvent(e);
-        }
-
-        this.select();
-      }
-    }
-  };
-
-  return {
-    UserNameEdit: UserNameEdit
-  };
-});
-