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

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

14 files changed, 338 insertions, 152 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index d29b9ae..418cf89 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">
-          Accounts
+          Users
         </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 guest signin.
+        Allow anyone to sign in.
       </message>
-      <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 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>
-      <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 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>
-      <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 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>
-      <message name="IDS_OPTIONS_ACCOUNTS_EMAIL_LABEL" desc="In the Accounts add user overlay, the label text for email input edit.">
-        Email:
+      <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>
       <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 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 9fe4a7c..84d553d 100644
--- a/chrome/browser/dom_ui/options_ui.cc
+++ b/chrome/browser/dom_ui/options_ui.cc
@@ -28,6 +28,7 @@
 #include "chrome/browser/dom_ui/personal_options_handler.h"
 #include "chrome/browser/dom_ui/search_engine_manager_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"
@@ -161,6 +162,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.html b/chrome/browser/resources/options.html
index a1856b4..543a01b 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -28,7 +28,7 @@
   <script src="options/chromeos_system_options.js"></script>
   <script src="options/chromeos_accounts_options.js"></script>
   <script src="options/chromeos_accounts_user_list.js"></script>
-  <script src="options/chromeos_accounts_add_user_overlay.js"></script>
+  <script src="options/chromeos_accounts_user_name_edit.js"></script>
 </if>
 <script src="options/add_startup_page_overlay.js"></script>
 <script src="options/advanced_options.js"></script>
@@ -53,7 +53,6 @@ function load() {
   if (cr.isChromeOS) {
     OptionsPage.register(SystemOptions.getInstance());
     OptionsPage.register(InternetOptions.getInstance());
-    OptionsPage.register(AccountsOptions.getInstance());
     // TODO(mazda): uncomment this once the language options is ready
     // OptionsPage.register(new OptionsPage(
     //     'languageChewing',
@@ -83,6 +82,7 @@ function load() {
   OptionsPage.registerOverlay(FontSettingsOverlay.getInstance());
 
   if (cr.isChromeOS) {
+    OptionsPage.register(AccountsOptions.getInstance());
     var labsOptions = new OptionsPage('labs',
                                       localStrings.getString('labsPage'),
                                       'labsPage');
@@ -134,9 +134,6 @@ window.onpopstate = function(e) {
     <include src="options/add_startup_page_overlay.html">
     <include src="options/clear_browser_data_overlay.html">
     <include src="options/font_settings_overlay.html">
-    <if expr="pp_ifdef('chromeos')">
-       <include src="options/chromeos_accounts_add_user_overlay.html">
-    </if>
   </div>
 </div>
 <div id="main-content">
diff --git a/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.html b/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.html
deleted file mode 100644
index ca80d2c..0000000
--- a/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="page hidden" id="addUserOverlayPage">
-  <table>
-    <tr><td>
-      <label><span i18n-content="add_user_email"></span>
-      <input type=text id=userEmailEdit>
-      </label>
-    </td></tr>
-    <tr><td>
-      <button id="addUserOkButton"
-          i18n-content="ok_label"></button>
-      <button id="addUserCancelButton"
-          i18n-content="cancel_label"></button>
-    </td></tr>
-  </table>
-</div>
diff --git a/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.js b/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.js
deleted file mode 100644
index 056959b..0000000
--- a/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.js
+++ /dev/null
@@ -1,60 +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.
-
-///////////////////////////////////////////////////////////////////////////////
-// AddUserOverlay class:
-
-/**
- * Encapsulated handling of ChromeOS accounts add user overlay page.
- * @constructor
- */
-function AddUserOverlay(model) {
-  OptionsPage.call(this, 'addUserOverlay', localStrings.getString('add_user'),
-                   'addUserOverlayPage');
-}
-
-AddUserOverlay.getInstance = function() {
-  if (!AddUserOverlay.instance_) {
-    AddUserOverlay.instance_ = new AddUserOverlay(null);
-  }
-  return AddUserOverlay.instance_;
-};
-
-AddUserOverlay.prototype = {
-  // Inherit AddUserOverlay from OptionsPage.
-  __proto__: OptionsPage.prototype,
-
-  /**
-   * Initializes AddUserOverlay page.
-   * Calls base class implementation to starts preference initialization.
-   */
-  initializePage: function() {
-    // Call base class implementation to starts preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
-
-    // Set up the page.
-    $('addUserOkButton').onclick = function(e) {
-      var newUserEmail = $('userEmailEdit').value;
-      if (newUserEmail)
-        userList.addUser({'email': newUserEmail});
-
-      OptionsPage.clearOverlays();
-    };
-
-    $('addUserCancelButton').onclick = function(e) {
-      OptionsPage.clearOverlays();
-    };
-
-    this.addEventListener('visibleChange',
-                          cr.bind(this.handleVisibleChange_, this));
-  },
-
-  /**
-   * Handler for OptionsPage's visible property change event.
-   * @param {Event} e Property change event.
-   */
-  handleVisibleChange_: function() {
-    $('userEmailEdit').focus();
-  }
-};
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 8339669..b6a4c29 100644
--- a/chrome/browser/resources/options/chromeos_accounts_options.js
+++ b/chrome/browser/resources/options/chromeos_accounts_options.js
@@ -33,32 +33,35 @@ 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'));
 
-    this.addEventListener('visibleChange',
-                          cr.bind(this.handleVisibleChange_, this));
+    var userNameEdit = $('userNameEdit');
+    options.accounts.UserNameEdit.decorate(userNameEdit);
+    userNameEdit.addEventListener('add', this.handleAddUser_);
 
-    // Setup add user overlay page.
-    OptionsPage.registerOverlay(AddUserOverlay.getInstance());
+    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);
   }
 };
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);
+      }
     }
   };
 
diff --git a/chrome/browser/resources/options/chromeos_accounts_user_name_edit.js b/chrome/browser/resources/options/chromeos_accounts_user_name_edit.js
new file mode 100644
index 0000000..33b5308
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_accounts_user_name_edit.js
@@ -0,0 +1,121 @@
+// 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
+  };
+});
+