Initial accounts options page.

- Add a "Accounts" subpage for ChromeOS;
- Two checkboxes for allowing BWSI and allowing guest signin;
- Make measureItem in list.js returns 0 instead of -1. The itemHeight is -1
  when the list is not visible. And 0 will let redraw to call measureItem
  again;
- Add an onVisibilityChanged callback that is called when "visible" property
  is changed; And use that to trigger user list's redraw;
- Use a mock settings object so that the UI flow could be tested;

- Update options_page.css to add a few css missed from dhg's overlay cl;

BUG=chromium-os:4734
TEST=None. This is a draft version and will be changed after UX feedbacks.

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

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

27 files changed, 856 insertions, 55 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 2de6bcc..06d1d58 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -5459,7 +5459,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
         <message name="IDS_OPTIONS_LABS_TAB_LABEL" desc="The title of the LABS tab">
           Labs
         </message>
-
+        <message name="IDS_OPTIONS_ACCOUNTS_TAB_LABEL" desc="The title of the Accounts tab">
+          Accounts
+        </message>
       </if>
       <message name="IDS_OPTIONS_GENERAL_TAB_LABEL" desc="The title of the Basics tab">
         Basics
@@ -7704,7 +7706,7 @@ Keep your key file in a safe place. You will need it to create new versions of y
       </message>
       <message name="IDS_LOGIN_PASSWORD_CHANGED_DESC" desc="Detailed description of the password changed dialog">
         Your Google Account password has changed since the last time you signed in on this computer.
-      </message>      
+      </message>
       <message name="IDS_LOGIN_PASSWORD_CHANGED_RESET" desc="Reset option of the password changed dialog">
         Synchronize all settings and data\n(may take some time)
       </message>
@@ -7819,6 +7821,24 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_OPTIONS_SETTINGS_OTHER_NETWORKS" desc="In the settings tab, the text on the button to display other networks.">
         Other...
       </message>
+      <message name="IDS_OPTIONS_ACCOUNTS_ALLOW_BWSI_DESCRIPTION" desc="In the Accounts settings tab, the text on the checkbox to allow browse without signing in.">
+        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.
+      </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>
+      <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_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_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:
       </message>
diff --git a/chrome/browser/chromeos/cros_settings.cc b/chrome/browser/chromeos/cros_settings.cc
new file mode 100644
index 0000000..852ad9d
--- /dev/null
+++ b/chrome/browser/chromeos/cros_settings.cc
@@ -0,0 +1,75 @@
+// 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.
+
+#include "chrome/browser/chromeos/cros_settings.h"
+
+#include "base/singleton.h"
+#include "base/string_util.h"
+#include "chrome/browser/chromeos/mock_cros_settings.h"
+
+namespace chromeos {
+
+CrosSettings* CrosSettings::Get() {
+  // TODO(xiyaun): Use real stuff when underlying libcros is ready.
+  return Singleton<MockCrosSettings>::get();
+}
+
+bool CrosSettings::IsCrosSettings(const std::wstring& path) {
+  return StartsWith(path, kCrosSettingsPrefix, true);
+}
+
+void CrosSettings::SetBoolean(const std::wstring& path, bool in_value) {
+  Set(path, Value::CreateBooleanValue(in_value));
+}
+
+void CrosSettings::SetInteger(const std::wstring& path, int in_value) {
+  Set(path, Value::CreateIntegerValue(in_value));
+}
+
+void CrosSettings::SetReal(const std::wstring& path, double in_value) {
+  Set(path, Value::CreateRealValue(in_value));
+}
+
+void CrosSettings::SetString(const std::wstring& path,
+                             const std::string& in_value) {
+  Set(path, Value::CreateStringValue(in_value));
+}
+
+bool CrosSettings::GetBoolean(const std::wstring& path,
+                              bool* bool_value) const {
+  Value* value;
+  if (!Get(path, &value))
+    return false;
+
+  return value->GetAsBoolean(bool_value);
+}
+
+bool CrosSettings::GetInteger(const std::wstring& path,
+                              int* out_value) const {
+  Value* value;
+  if (!Get(path, &value))
+    return false;
+
+  return value->GetAsInteger(out_value);
+}
+
+bool CrosSettings::GetReal(const std::wstring& path,
+                           double* out_value) const {
+  Value* value;
+  if (!Get(path, &value))
+    return false;
+
+  return value->GetAsReal(out_value);
+}
+
+bool CrosSettings::GetString(const std::wstring& path,
+                             std::string* out_value) const {
+  Value* value;
+  if (!Get(path, &value))
+    return false;
+
+  return value->GetAsString(out_value);
+}
+
+}  // namespace chromeos
diff --git a/chrome/browser/chromeos/cros_settings.h b/chrome/browser/chromeos/cros_settings.h
new file mode 100644
index 0000000..cfe4ec8
--- /dev/null
+++ b/chrome/browser/chromeos/cros_settings.h
@@ -0,0 +1,50 @@
+// 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.
+
+#ifndef CHROME_BROWSER_CHROMEOS_CROS_SETTINGS_H_
+#define CHROME_BROWSER_CHROMEOS_CROS_SETTINGS_H_
+
+#include <string>
+#include "base/values.h"
+
+#include "chrome/browser/chromeos/cros_settings_names.h"
+
+namespace chromeos {
+
+// A class manages per-device/global settings.
+class CrosSettings {
+ public:
+  // Class factory.
+  static CrosSettings* Get();
+
+  // Helper function to test if given path is a value cros settings name.
+  static bool IsCrosSettings(const std::wstring& path);
+
+  // Sets |in_value| to given |path| in cros settings.
+  // Note that this takes ownership of |in_value|.
+  virtual void Set(const std::wstring& path, Value* in_value) = 0;
+
+  // Gets settings value of given |path| to |out_value|.
+  // Note that |out_value| is still owned by this class.
+  virtual bool Get(const std::wstring& path, Value** out_value) const = 0;
+
+  // Convenience forms of Set().  These methods will replace any existing
+  // value at that path, even if it has a different type.
+  void SetBoolean(const std::wstring& path, bool in_value);
+  void SetInteger(const std::wstring& path, int in_value);
+  void SetReal(const std::wstring& path, double in_value);
+  void SetString(const std::wstring& path, const std::string& in_value);
+
+  // These are convenience forms of Get().  The value will be retrieved
+  // and the return value will be true if the path is valid and the value at
+  // the end of the path can be returned in the form specified.
+  bool GetBoolean(const std::wstring& path, bool* out_value) const;
+  bool GetInteger(const std::wstring& path, int* out_value) const;
+  bool GetReal(const std::wstring& path, double* out_value) const;
+  bool GetString(const std::wstring& path, std::string* out_value) const;
+};
+
+}  // namespace chromeos
+
+#endif  // CHROME_BROWSER_CHROMEOS_CROS_SETTINGS_H_
diff --git a/chrome/browser/chromeos/cros_settings_names.cc b/chrome/browser/chromeos/cros_settings_names.cc
new file mode 100644
index 0000000..84fbf7e
--- /dev/null
+++ b/chrome/browser/chromeos/cros_settings_names.cc
@@ -0,0 +1,15 @@
+// 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.
+
+#include "chrome/browser/chromeos/cros_settings_names.h"
+
+namespace chromeos {
+
+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 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
new file mode 100644
index 0000000..ce992581
--- /dev/null
+++ b/chrome/browser/chromeos/cros_settings_names.h
@@ -0,0 +1,18 @@
+// 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.
+
+#ifndef CHROME_BROWSER_CHROMEOS_CROS_SETTINGS_NAMES_H_
+#define CHROME_BROWSER_CHROMEOS_CROS_SETTINGS_NAMES_H_
+
+namespace chromeos {
+
+extern const wchar_t kCrosSettingsPrefix[];
+
+extern const wchar_t kAccountsPrefAllowBWSI[];
+extern const wchar_t kAccountsPrefAllowGuest[];
+extern const wchar_t kAccountsPrefUsers[];
+
+}  // namespace chromeos
+
+#endif  // CHROME_BROWSER_CHROMEOS_CROS_SETTINGS_NAMES_H_
diff --git a/chrome/browser/chromeos/dom_ui/accounts_options_handler.cc b/chrome/browser/chromeos/dom_ui/accounts_options_handler.cc
new file mode 100644
index 0000000..9ca1730
--- /dev/null
+++ b/chrome/browser/chromeos/dom_ui/accounts_options_handler.cc
@@ -0,0 +1,46 @@
+// 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.
+
+#include "chrome/browser/chromeos/dom_ui/accounts_options_handler.h"
+
+#include "app/l10n_util.h"
+#include "base/json/json_reader.h"
+#include "base/scoped_ptr.h"
+#include "base/values.h"
+#include "grit/generated_resources.h"
+
+namespace chromeos {
+
+AccountsOptionsHandler::AccountsOptionsHandler() {
+}
+
+AccountsOptionsHandler::~AccountsOptionsHandler() {
+}
+
+void AccountsOptionsHandler::GetLocalizedValues(
+    DictionaryValue* localized_strings) {
+  DCHECK(localized_strings);
+  localized_strings->SetString(L"accountsPage", l10n_util::GetString(
+      IDS_OPTIONS_ACCOUNTS_TAB_LABEL));
+
+  localized_strings->SetString(L"allow_BWSI", l10n_util::GetString(
+      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));
+}
+
+}  // namespace chromeos
diff --git a/chrome/browser/chromeos/dom_ui/accounts_options_handler.h b/chrome/browser/chromeos/dom_ui/accounts_options_handler.h
new file mode 100644
index 0000000..0de80002
--- /dev/null
+++ b/chrome/browser/chromeos/dom_ui/accounts_options_handler.h
@@ -0,0 +1,28 @@
+// 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.
+
+#ifndef CHROME_BROWSER_CHROMEOS_DOM_UI_ACCOUNTS_OPTIONS_HANDLER_H_
+#define CHROME_BROWSER_CHROMEOS_DOM_UI_ACCOUNTS_OPTIONS_HANDLER_H_
+
+#include "chrome/browser/dom_ui/options_ui.h"
+
+namespace chromeos {
+
+// ChromeOS accounts options page handler.
+class AccountsOptionsHandler : public OptionsPageUIHandler {
+ public:
+  AccountsOptionsHandler();
+  virtual ~AccountsOptionsHandler();
+
+  // OptionsUIHandler implementation:
+  virtual void GetLocalizedValues(DictionaryValue* localized_strings);
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(AccountsOptionsHandler);
+};
+
+}  // namespace chromeos
+
+#endif  // CHROME_BROWSER_CHROMEOS_DOM_UI_ACCOUNTS_OPTIONS_HANDLER_H_
+
diff --git a/chrome/browser/chromeos/dom_ui/core_chromeos_options_handler.cc b/chrome/browser/chromeos/dom_ui/core_chromeos_options_handler.cc
new file mode 100644
index 0000000..889a85d
--- /dev/null
+++ b/chrome/browser/chromeos/dom_ui/core_chromeos_options_handler.cc
@@ -0,0 +1,60 @@
+// 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.
+
+#include "chrome/browser/chromeos/dom_ui/core_chromeos_options_handler.h"
+
+#include "base/json/json_reader.h"
+#include "base/string_util.h"
+#include "chrome/browser/chromeos/cros_settings.h"
+
+namespace chromeos {
+
+Value* CoreChromeOSOptionsHandler::FetchPref(const std::wstring& pref_name) {
+  if (!CrosSettings::IsCrosSettings(pref_name))
+    return ::CoreOptionsHandler::FetchPref(pref_name);
+
+  Value* pref_value = NULL;
+  CrosSettings::Get()->Get(pref_name, &pref_value);
+  return pref_value ? pref_value->DeepCopy() : Value::CreateNullValue();
+}
+
+void CoreChromeOSOptionsHandler::ObservePref(const std::wstring& pref_name) {
+  if (!CrosSettings::IsCrosSettings(pref_name))
+    return ::CoreOptionsHandler::ObservePref(pref_name);
+
+  // TODO(xiyuan): Change this when CrosSettings supports observers.
+}
+
+void CoreChromeOSOptionsHandler::SetPref(const std::wstring& pref_name,
+                                         Value::ValueType pref_type,
+                                         const std::string& value_string) {
+  if (!CrosSettings::IsCrosSettings(pref_name))
+    return ::CoreOptionsHandler::SetPref(pref_name, pref_type, value_string);
+
+  CrosSettings* cros_settings = CrosSettings::Get();
+  switch (pref_type) {
+    case Value::TYPE_BOOLEAN:
+      cros_settings->SetBoolean(pref_name, value_string == "true");
+      break;
+    case Value::TYPE_INTEGER:
+      int int_value;
+      if (StringToInt(value_string, &int_value))
+        cros_settings->SetInteger(pref_name, int_value);
+      break;
+    case Value::TYPE_STRING:
+      cros_settings->SetString(pref_name, value_string);
+      break;
+    default: {
+      Value* pref_value = base::JSONReader().JsonToValue(
+          value_string,  // JSON
+          false,         // no check_root
+          false);        // no trailing comma
+      if (pref_value)
+        cros_settings->Set(pref_name, pref_value);
+      break;
+    }
+  }
+}
+
+}  // namespace chromeos
diff --git a/chrome/browser/chromeos/dom_ui/core_chromeos_options_handler.h b/chrome/browser/chromeos/dom_ui/core_chromeos_options_handler.h
new file mode 100644
index 0000000..0c4dc5c
--- /dev/null
+++ b/chrome/browser/chromeos/dom_ui/core_chromeos_options_handler.h
@@ -0,0 +1,28 @@
+// 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.
+
+#ifndef CHROME_BROWSER_CHROMEOS_DOM_UI_CORE_CHROMEOS_OPTIONS_HANDLER_H_
+#define CHROME_BROWSER_CHROMEOS_DOM_UI_CORE_CHROMEOS_OPTIONS_HANDLER_H_
+
+#include "chrome/browser/dom_ui/core_options_handler.h"
+
+namespace chromeos {
+
+// CoreChromeOSOptionsHandler handles ChromeOS settings.
+class CoreChromeOSOptionsHandler : public ::CoreOptionsHandler {
+ public:
+
+ protected:
+  // ::CoreOptionsHandler Implementation
+  virtual Value* FetchPref(const std::wstring& pref_name);
+  virtual void ObservePref(const std::wstring& pref_name);
+  virtual void SetPref(const std::wstring& pref_name,
+                       Value::ValueType pref_type,
+                       const std::string& value_string);
+
+};
+
+}  // namespace chromeos
+
+#endif  // CHROME_BROWSER_CHROMEOS_DOM_UI_CORE_CHROMEOS_OPTIONS_HANDLER_H_
diff --git a/chrome/browser/chromeos/mock_cros_settings.cc b/chrome/browser/chromeos/mock_cros_settings.cc
new file mode 100644
index 0000000..5cec066
--- /dev/null
+++ b/chrome/browser/chromeos/mock_cros_settings.cc
@@ -0,0 +1,36 @@
+// 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.
+
+#include "chrome/browser/chromeos/mock_cros_settings.h"
+
+namespace chromeos {
+
+MockCrosSettings::MockCrosSettings()
+    : dict_(new DictionaryValue) {
+  // Some mock settings
+  SetBoolean(kAccountsPrefAllowBWSI, true);
+  SetBoolean(kAccountsPrefAllowGuest, true);
+
+  ListValue* user_list = new ListValue;
+
+  DictionaryValue* mock_user = new DictionaryValue;
+  mock_user->SetString(L"email", L"mock_user_1@gmail.com");
+  user_list->Append(mock_user);
+
+  mock_user = new DictionaryValue;
+  mock_user->SetString(L"email", L"mock_user_2@gmail.com");
+  user_list->Append(mock_user);
+
+  Set(kAccountsPrefUsers, user_list);
+}
+
+void MockCrosSettings::Set(const std::wstring& path, Value* in_value) {
+  dict_->Set(path, in_value);
+}
+
+bool MockCrosSettings::Get(const std::wstring& path, Value** out_value) const {
+  return dict_->Get(path, out_value);
+}
+
+}  // namespace chromeos
diff --git a/chrome/browser/chromeos/mock_cros_settings.h b/chrome/browser/chromeos/mock_cros_settings.h
new file mode 100644
index 0000000..606dbdf
--- /dev/null
+++ b/chrome/browser/chromeos/mock_cros_settings.h
@@ -0,0 +1,30 @@
+// 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.
+
+#ifndef CHROME_BROWSER_CHROMEOS_MOCK_CROS_SETTINGS_H_
+#define CHROME_BROWSER_CHROMEOS_MOCK_CROS_SETTINGS_H_
+
+#include "base/singleton.h"
+#include "base/scoped_ptr.h"
+#include "chrome/browser/chromeos/cros_settings.h"
+
+namespace chromeos {
+
+class MockCrosSettings : public CrosSettings {
+ public:
+  virtual void Set(const std::wstring& path, Value* in_value);
+  virtual bool Get(const std::wstring& path, Value** out_value) const;
+
+ private:
+  scoped_ptr<DictionaryValue> dict_;
+
+  MockCrosSettings();
+  friend struct DefaultSingletonTraits<MockCrosSettings>;
+
+  DISALLOW_COPY_AND_ASSIGN(MockCrosSettings);
+};
+
+}  // namespace chromeos
+
+#endif  // CHROME_BROWSER_CHROMEOS_MOCK_CROS_SETTINGS_H_
diff --git a/chrome/browser/dom_ui/core_options_handler.cc b/chrome/browser/dom_ui/core_options_handler.cc
index 45e9a81..c162335 100644
--- a/chrome/browser/dom_ui/core_options_handler.cc
+++ b/chrome/browser/dom_ui/core_options_handler.cc
@@ -72,19 +72,61 @@ void CoreOptionsHandler::RegisterMessages() {
   dom_ui_->RegisterMessageCallback("fetchPrefs",
       NewCallback(this, &CoreOptionsHandler::HandleFetchPrefs));
   dom_ui_->RegisterMessageCallback("observePrefs",
-      NewCallback(this, &CoreOptionsHandler::HandleObservePefs));
+      NewCallback(this, &CoreOptionsHandler::HandleObservePrefs));
   dom_ui_->RegisterMessageCallback("setBooleanPref",
       NewCallback(this, &CoreOptionsHandler::HandleSetBooleanPref));
   dom_ui_->RegisterMessageCallback("setIntegerPref",
       NewCallback(this, &CoreOptionsHandler::HandleSetIntegerPref));
   dom_ui_->RegisterMessageCallback("setStringPref",
       NewCallback(this, &CoreOptionsHandler::HandleSetStringPref));
+  dom_ui_->RegisterMessageCallback("setObjectPref",
+      NewCallback(this, &CoreOptionsHandler::HandleSetObjectPref));
 }
 
 void CoreOptionsHandler::HandleInitialize(const Value* value) {
   (static_cast<OptionsUI*>(dom_ui_))->InitializeHandlers();
 }
 
+Value* CoreOptionsHandler::FetchPref(const std::wstring& pref_name) {
+  DCHECK(dom_ui_);
+  PrefService* pref_service = dom_ui_->GetProfile()->GetPrefs();
+
+  const PrefService::Preference* pref =
+      pref_service->FindPreference(pref_name.c_str());
+
+  return pref ? pref->GetValue()->DeepCopy() : Value::CreateNullValue();
+}
+
+void CoreOptionsHandler::ObservePref(const std::wstring& pref_name) {
+  DCHECK(dom_ui_);
+  PrefService* pref_service = dom_ui_->GetProfile()->GetPrefs();
+
+  pref_service->AddPrefObserver(pref_name.c_str(), this);
+}
+
+void CoreOptionsHandler::SetPref(const std::wstring& pref_name,
+                                 Value::ValueType pref_type,
+                                 const std::string& value_string) {
+  DCHECK(dom_ui_);
+  PrefService* pref_service = dom_ui_->GetProfile()->GetPrefs();
+
+  switch (pref_type) {
+    case Value::TYPE_BOOLEAN:
+      pref_service->SetBoolean(pref_name.c_str(), value_string == "true");
+      break;
+    case Value::TYPE_INTEGER:
+      int int_value;
+      if (StringToInt(value_string, &int_value))
+        pref_service->SetInteger(pref_name.c_str(), int_value);
+      break;
+    case Value::TYPE_STRING:
+      pref_service->SetString(pref_name.c_str(), value_string);
+      break;
+    default:
+      NOTREACHED();
+  }
+}
+
 void CoreOptionsHandler::HandleFetchPrefs(const Value* value) {
   if (!value || !value->IsType(Value::TYPE_LIST))
     return;
@@ -111,8 +153,6 @@ void CoreOptionsHandler::HandleFetchPrefs(const Value* value) {
   // Get the list of name for prefs to build the response dictionary.
   DictionaryValue result_value;
   Value* list_member;
-  DCHECK(dom_ui_);
-  PrefService* pref_service = dom_ui_->GetProfile()->GetPrefs();
 
   for (size_t i = 1; i < param_values->GetSize(); i++) {
     if (!param_values->Get(i, &list_member))
@@ -125,20 +165,15 @@ void CoreOptionsHandler::HandleFetchPrefs(const Value* value) {
     if (!list_member->GetAsString(&pref_name))
       continue;
 
-    const PrefService::Preference* pref =
-        pref_service->FindPreference(pref_name.c_str());
-    result_value.Set(pref_name.c_str(),
-        pref ? pref->GetValue()->DeepCopy() : Value::CreateNullValue());
+    result_value.Set(pref_name.c_str(), FetchPref(pref_name));
   }
   dom_ui_->CallJavascriptFunction(callback_function.c_str(), result_value);
 }
 
-void CoreOptionsHandler::HandleObservePefs(const Value* value) {
+void CoreOptionsHandler::HandleObservePrefs(const Value* value) {
   if (!value || !value->IsType(Value::TYPE_LIST))
     return;
 
-  DCHECK(dom_ui_);
-  PrefService* pref_service = dom_ui_->GetProfile()->GetPrefs();
   DictionaryValue result_value;
   const ListValue* list_value = static_cast<const ListValue*>(value);
 
@@ -150,14 +185,12 @@ void CoreOptionsHandler::HandleObservePefs(const Value* value) {
 
   // Get preference change callback function name.
   std::wstring callback_func_name;
-  Value* list_member = 0;
-  if (!list_value->Get(0, &list_member) ||
-      !list_member->IsType(Value::TYPE_STRING) ||
-      !list_member->GetAsString(&callback_func_name))
+  if (!list_value->GetString(0, &callback_func_name))
     return;
 
   // Get all other parameters - pref identifiers.
   for (size_t i = 1; i < list_value->GetSize(); i++) {
+    Value* list_member;
     if (!list_value->Get(i, &list_member))
       break;
 
@@ -168,7 +201,7 @@ void CoreOptionsHandler::HandleObservePefs(const Value* value) {
       continue;
 
     if (pref_callback_map_.find(pref_name) == pref_callback_map_.end())
-      pref_service->AddPrefObserver(pref_name.c_str(), this);
+      ObservePref(pref_name);
 
     pref_callback_map_.insert(
         PreferenceCallbackMap::value_type(pref_name, callback_func_name));
@@ -187,6 +220,10 @@ void CoreOptionsHandler::HandleSetStringPref(const Value* value) {
   HandleSetPref(value, Value::TYPE_STRING);
 }
 
+void CoreOptionsHandler::HandleSetObjectPref(const Value* value) {
+  HandleSetPref(value, Value::TYPE_NULL);
+}
+
 void CoreOptionsHandler::HandleSetPref(const Value* value,
                                        Value::ValueType type) {
   if (!value || !value->IsType(Value::TYPE_LIST))
@@ -197,38 +234,15 @@ void CoreOptionsHandler::HandleSetPref(const Value* value,
   if (param_values->GetSize() != 2)
     return;
 
-  DCHECK(dom_ui_);
-  PrefService* pref_service = dom_ui_->GetProfile()->GetPrefs();
-
-  Value* name_element;
   std::wstring pref_name;
-  if (!param_values->Get(0, &name_element) ||
-      !name_element->IsType(Value::TYPE_STRING) ||
-      !name_element->GetAsString(&pref_name))
+  if (!param_values->GetString(0, &pref_name))
     return;
 
-  Value* value_element;
   std::string value_string;
-  if (!param_values->Get(1, &value_element) ||
-      !value_element->IsType(Value::TYPE_STRING) ||
-      !value_element->GetAsString(&value_string))
+  if (!param_values->GetString(1, &value_string))
     return;
 
-  switch (type) {
-    case Value::TYPE_BOOLEAN:
-      pref_service->SetBoolean(pref_name.c_str(), value_string == "true");
-      break;
-    case Value::TYPE_INTEGER:
-      int int_value;
-      if (StringToInt(value_string, &int_value))
-        pref_service->SetInteger(pref_name.c_str(), int_value);
-      break;
-    case Value::TYPE_STRING:
-      pref_service->SetString(pref_name.c_str(), value_string);
-      break;
-    default:
-      NOTREACHED();
-  }
+  SetPref(pref_name, type, value_string);
 }
 
 void CoreOptionsHandler::NotifyPrefChanged(const std::wstring* pref_name) {
diff --git a/chrome/browser/dom_ui/core_options_handler.h b/chrome/browser/dom_ui/core_options_handler.h
index 12d35a7..ed6d2f1 100644
--- a/chrome/browser/dom_ui/core_options_handler.h
+++ b/chrome/browser/dom_ui/core_options_handler.h
@@ -29,6 +29,19 @@ class CoreOptionsHandler : public OptionsPageUIHandler {
   // DOMMessageHandler implementation.
   virtual void RegisterMessages();
 
+ protected:
+  // Fetches a pref value of given |pref_name|.
+  // Note that caller owns the returned Value.
+  virtual Value* FetchPref(const std::wstring& pref_name);
+
+  // Observes a pref of given |pref_name|.
+  virtual void ObservePref(const std::wstring& pref_name);
+
+  // Sets a pref value |value_string| of |pref_type| to given |pref_name|.
+  virtual void SetPref(const std::wstring& pref_name,
+                       Value::ValueType pref_type,
+                       const std::string& value_string);
+
  private:
   typedef std::multimap<std::wstring, std::wstring> PreferenceCallbackMap;
   // Callback for the "coreOptionsInitialize" message.  This message will
@@ -44,7 +57,7 @@ class CoreOptionsHandler : public OptionsPageUIHandler {
 
   // Callback for the "observePrefs" message. This message initiates
   // notification observing for given array of preference names.
-  void HandleObservePefs(const Value* value);
+  void HandleObservePrefs(const Value* value);
 
   // Callbacks for the "set<type>Pref" message. This message saves the new
   // preference value. The input value is an array of strings representing
@@ -52,6 +65,7 @@ class CoreOptionsHandler : public OptionsPageUIHandler {
   void HandleSetBooleanPref(const Value* value);
   void HandleSetIntegerPref(const Value* value);
   void HandleSetStringPref(const Value* value);
+  void HandleSetObjectPref(const Value* value);
 
   void HandleSetPref(const Value* value, Value::ValueType type);
 
diff --git a/chrome/browser/dom_ui/options_ui.cc b/chrome/browser/dom_ui/options_ui.cc
index d10868b..7a6f3a4 100644
--- a/chrome/browser/dom_ui/options_ui.cc
+++ b/chrome/browser/dom_ui/options_ui.cc
@@ -40,10 +40,12 @@
 #include "grit/theme_resources.h"
 
 #if defined(OS_CHROMEOS)
-#include "chrome/browser/chromeos/dom_ui/sync_options_handler.h"
+#include "chrome/browser/chromeos/dom_ui/accounts_options_handler.h"
+#include "chrome/browser/chromeos/dom_ui/core_chromeos_options_handler.h"
 #include "chrome/browser/chromeos/dom_ui/labs_handler.h"
 #include "chrome/browser/chromeos/dom_ui/language_hangul_options_handler.h"
 #include "chrome/browser/chromeos/dom_ui/language_options_handler.h"
+#include "chrome/browser/chromeos/dom_ui/sync_options_handler.h"
 #include "chrome/browser/chromeos/dom_ui/system_options_handler.h"
 #endif
 
@@ -105,8 +107,14 @@ void OptionsPageUIHandler::UserMetricsRecordAction(
 OptionsUI::OptionsUI(TabContents* contents) : DOMUI(contents) {
   DictionaryValue* localized_strings = new DictionaryValue();
 
-  // TODO(zelidrag): Add all other page handlers here as we implement them.
+#if defined(OS_CHROMEOS)
+  AddOptionsPageUIHandler(localized_strings,
+                          new chromeos::CoreChromeOSOptionsHandler());
+#else
   AddOptionsPageUIHandler(localized_strings, new CoreOptionsHandler());
+#endif
+
+  // TODO(zelidrag): Add all other page handlers here as we implement them.
   AddOptionsPageUIHandler(localized_strings, new BrowserOptionsHandler());
   AddOptionsPageUIHandler(localized_strings, new PersonalOptionsHandler());
   AddOptionsPageUIHandler(localized_strings, new AdvancedOptionsHandler());
@@ -117,6 +125,8 @@ OptionsUI::OptionsUI(TabContents* contents) : DOMUI(contents) {
   AddOptionsPageUIHandler(localized_strings,
                           new LanguageHangulOptionsHandler());
   AddOptionsPageUIHandler(localized_strings, new LanguageOptionsHandler());
+  AddOptionsPageUIHandler(localized_strings,
+                          new chromeos::AccountsOptionsHandler());
 #endif
   AddOptionsPageUIHandler(localized_strings, new ContentSettingsHandler());
 
diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index 811a57a..fcf3b5f 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -11,6 +11,10 @@
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/event_target.js"></script>
 <script src="chrome://resources/js/cr/ui.js"></script>
+<script src="chrome://resources/js/cr/ui/array_data_model.js"></script>
+<script src="chrome://resources/js/cr/ui/list_selection_model.js"></script>
+<script src="chrome://resources/js/cr/ui/list_item.js"></script>
+<script src="chrome://resources/js/cr/ui/list.js"></script>
 <script src="chrome://resources/js/local_strings.js"></script>
 <script src="chrome://resources/js/util.js"></script>
 <script src="options/preferences.js"></script>
@@ -19,6 +23,9 @@
 <if expr="pp_ifdef('chromeos')">
   <script src="options/chromeos_language_hangul_options.js"></script>
   <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>
 </if>
 <script src="options/advanced_options.js"></script>
 <script src="options/browser_options.js"></script>
@@ -36,6 +43,7 @@ function load() {
   localStrings = new LocalStrings();
   if (cr.isChromeOS) {
     OptionsPage.register(SystemOptions.getInstance());
+    OptionsPage.register(AccountsOptions.getInstance());
     // TODO(mazda): uncomment this once the language options is ready
     // OptionsPage.register(LanguageHangulOptions.getInstance());
   }
@@ -82,21 +90,29 @@ window.onpopstate = function(e) {
 };
 
 </script>
+<link rel="stylesheet" href="chrome://resources/css/list.css">
+
 <link rel="stylesheet" href="dom_ui.css">
 <link rel="stylesheet" href="options/options_page.css">
 <link rel="stylesheet" href="options/browser_options_page.css">
 <link rel="stylesheet" href="options/content_settings_page.css">
+<if expr="pp_ifdef('chromeos')">
+  <link rel="stylesheet" href="options/chromeos_accounts_options_page.css">
+</if>
 </head>
 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 <div class="header">
 </div>
-<div id="overlay" class="hidden">
+<div id="overlay" class="overlay hidden">
   <div id="overlayview">
     <button id="close-overlay" onclick="OptionsPage.clearOverlays();"></button>
     <div class="page hidden" id="dummyPage">
         <!-- TODO(dhg): remove this one once we get another page here -->
         Dummy Overlay Page
-     </div>
+    </div>
+    <if expr="pp_ifdef('chromeos')">
+       <include src="options/chromeos_accounts_add_user_overlay.html">
+    </if>
   </div>
 </div>
 <div id="main-content">
@@ -113,6 +129,7 @@ window.onpopstate = function(e) {
         <include src="options/chromeos_system_options.html">
         <include src="options/chromeos_language_options.html">
         <include src="options/chromeos_labs.html">
+        <include src="options/chromeos_accounts_options.html">
         <!-- TODO(mazda): include options/chromeos_language_hangul_options.html
              once the language options dialog is ready. -->
      </if>
diff --git a/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.html b/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.html
new file mode 100644
index 0000000..ca80d2c
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.html
@@ -0,0 +1,15 @@
+<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
new file mode 100644
index 0000000..056959b
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_accounts_add_user_overlay.js
@@ -0,0 +1,60 @@
+// 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
new file mode 100644
index 0000000..1369cd5
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_accounts_options.html
@@ -0,0 +1,29 @@
+<div class="page hidden" id="accountsPage">
+  <h1 i18n-content="accountsPage"></h1>
+  <div class="option">
+    <table class="option-control-table">
+    <tr>
+      <td class="option-name"><label><input id="allowBwsiCheck"
+           pref="cros.accounts.allowBWSI" type="checkbox"><span
+           i18n-content="allow_BWSI"></span></label></td>
+    </tr>
+    <tr>
+      <td class="option-name"><label><input id="allowGuestCheck"
+           pref="cros.accounts.allowGuest" type="checkbox"><span
+           i18n-content="allow_guest"></span></label></td>
+    </tr>
+    <tr>
+      <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
new file mode 100644
index 0000000..8339669
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_accounts_options.js
@@ -0,0 +1,64 @@
+// 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.
+
+///////////////////////////////////////////////////////////////////////////////
+// AccountsOptions class:
+
+/**
+ * Encapsulated handling of ChromeOS accounts options page.
+ * @constructor
+ */
+function AccountsOptions(model) {
+  OptionsPage.call(this, 'accounts', localStrings.getString('accountsPage'),
+                   'accountsPage');
+}
+
+AccountsOptions.getInstance = function() {
+  if (!AccountsOptions.instance_) {
+    AccountsOptions.instance_ = new AccountsOptions(null);
+  }
+  return AccountsOptions.instance_;
+};
+
+AccountsOptions.prototype = {
+  // Inherit AccountsOptions from OptionsPage.
+  __proto__: OptionsPage.prototype,
+
+  /**
+   * Initializes AccountsOptions page.
+   */
+  initializePage: function() {
+    // Call base class implementation to starts preference initialization.
+    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));
+
+    // Setup add user overlay page.
+    OptionsPage.registerOverlay(AddUserOverlay.getInstance());
+  },
+
+  userListInitalized_: false,
+
+  /**
+   * Handler for OptionsPage's visible property change event.
+   * @param {Event} e Property change event.
+   */
+  handleVisibleChange_ : function(e) {
+    if (!this.userListInitalized_ && this.visible) {
+      this.userListInitalized_ = true;
+      userList.redraw();
+    }
+  }
+};
diff --git a/chrome/browser/resources/options/chromeos_accounts_options_page.css b/chrome/browser/resources/options/chromeos_accounts_options_page.css
new file mode 100644
index 0000000..739e254
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_accounts_options_page.css
@@ -0,0 +1,6 @@
+#userList {
+  border: 1px solid lightgrey;
+  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
new file mode 100644
index 0000000..2f654cc
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_accounts_user_list.js
@@ -0,0 +1,105 @@
+// 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 List = cr.ui.List;
+  const ListItem = cr.ui.ListItem;
+  const ArrayDataModel = cr.ui.ArrayDataModel;
+
+  /**
+   * Creates a new user list.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {cr.ui.List}
+   */
+  var UserList = cr.ui.define('list');
+
+  UserList.prototype = {
+    __proto__: List.prototype,
+
+    pref: 'cros.accounts.users',
+
+    /** @inheritDoc */
+    decorate: function() {
+      List.prototype.decorate.call(this);
+
+      // HACK(arv): http://crbug.com/40902
+      window.addEventListener('resize', cr.bind(this.redraw, this));
+
+      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});
+    },
+
+    /**
+     * Adds given user to model and update backend.
+     * @param {Object} user A user to be added to user list.
+     */
+    addUser: function(user) {
+      var dataModel = this.dataModel;
+      dataModel.splice(dataModel.length, 0, user);
+
+      this.updateBackend_();
+    },
+
+    /**
+     * Removes currently selected user from model and update backend.
+     */
+    removeSelectedUser: function() {
+      var sm = this.selectionModel;
+      var dataModel = this.dataModel;
+
+      var newUsers = [];
+      for (var i = 0; i < dataModel.length; ++i) {
+        if (!sm.getIndexSelected(i)) {
+          newUsers.push(dataModel.item(i));
+        }
+      }
+      this.load_(newUsers);
+
+      this.updateBackend_();
+    },
+
+    /**
+     * Loads given user list.
+     * @param {Array} users An array of user object.
+     */
+    load_: function(users) {
+      this.dataModel = new ArrayDataModel(users);
+    },
+
+    /**
+     * Updates backend.
+     */
+    updateBackend_: function() {
+      Preferences.setObjectPref(this.pref, this.dataModel.slice());
+    },
+
+    /**
+     * Handles selection change.
+     */
+    handleChange_: function(e) {
+      $('removeUserButton').disabled = this.selectionModel.selectedIndex == -1;
+    }
+  };
+
+  return {
+    UserList: UserList
+  };
+});
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index debe548..c54adf7 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -16,6 +16,32 @@
   bottom: 0;
 }
 
+.overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, .5);
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+  padding: 20px;
+}
+
+#close-overlay {
+  float: right;
+  position: relative;
+  right: -20px;
+  top: -20px;
+  width: 20px;
+  height: 20px;
+}
+
+#overlayview {
+  background: white;
+  border-radius: 5px;
+  padding: 30px;
+}
+
 #navbar-container {
   background: -webkit-gradient(linear,
                                left top,
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index 50cff73..9550031 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -12,6 +12,7 @@
  *     containing the options view and the name of options page navigation bar
  *     item as name+'PageNav'.
  * @param {string} title Options page title, used for navigation bar
+ * @extends {EventTarget}
  */
 function OptionsPage(name, title, pageDivName) {
   this.name = name;
@@ -121,6 +122,8 @@ OptionsPage.initialize = function() {
 };
 
 OptionsPage.prototype = {
+  __proto__: cr.EventTarget.prototype,
+
   /**
    * Initializes page content.
    */
@@ -150,7 +153,6 @@ OptionsPage.prototype = {
       if (this.isOverlay) {
         var overlay = $('overlay');
         overlay.classList.remove('hidden');
-        overlay.classList.add('overlay-visible');
       }
       if (this.tab) {
         this.tab.classList.add('navbar-item-selected');
@@ -161,7 +163,6 @@ OptionsPage.prototype = {
       if (this.isOverlay) {
         var overlay = $('overlay');
         overlay.classList.add('hidden');
-        overlay.classList.remove('overlay-visible');
       }
       this.pageDiv.style.display = 'none';
       if (this.tab) {
@@ -170,5 +171,7 @@ OptionsPage.prototype = {
           this.tab.classList.add('hidden');
       }
     }
+
+    cr.dispatchPropertyChange(this, 'visible', visible, !visible);
   }
 };
diff --git a/chrome/browser/resources/options/preferences.js b/chrome/browser/resources/options/preferences.js
index db86ea4..cb226bcb 100644
--- a/chrome/browser/resources/options/preferences.js
+++ b/chrome/browser/resources/options/preferences.js
@@ -63,6 +63,16 @@ Preferences.setStringPref = function(name, value) {
   chrome.send('setStringPref', [name, value]);
 };
 
+/**
+ * Sets value of a JSON preference.
+ * and signals its changed value.
+ * @param {string} name Preference name.
+ * @param {string} value New preference value.
+ */
+Preferences.setObjectPref = function(name, value) {
+  chrome.send('setObjectPref', [name, JSON.stringify(value)]);
+};
+
 Preferences.prototype = {
   __proto__: cr.EventTarget.prototype,
 
@@ -102,7 +112,8 @@ Preferences.prototype = {
    */
   flattenMapAndDispatchEvent_: function(prefix, dict) {
     for (var prefName in dict) {
-      if (typeof dict[prefName] == 'object') {
+      if (typeof dict[prefName] == 'object' &&
+          !this.registeredPreferences_[prefix + prefName]) {
         this.flattenMapAndDispatchEvent_(prefix + prefName + '.',
             dict[prefName]);
       } else {
diff --git a/chrome/browser/resources/shared/js/cr/ui/array_data_model.js b/chrome/browser/resources/shared/js/cr/ui/array_data_model.js
index 54837b4..b70f36c 100644
--- a/chrome/browser/resources/shared/js/cr/ui/array_data_model.js
+++ b/chrome/browser/resources/shared/js/cr/ui/array_data_model.js
@@ -33,7 +33,7 @@ cr.define('cr.ui', function() {
 
     /**
      * Returns the item at the given index.
-     * @param {number} index The index of the element go get.
+     * @param {number} index The index of the element to get.
      * @return {*} The element at the given index.
      */
     item: function(index) {
@@ -52,6 +52,16 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * Returns an array of elements in a selected range.
+     * @param {number=} opt_from The starting index of the selected range.
+     * @param {number=} opt_to The ending index of selected range.
+     * @return {Array} An array of elements in the selected range.
+     */
+    slice: function(opt_from, opt_to) {
+      return this.array_.slice.apply(this.array_, arguments);
+    },
+
+    /**
      * This removes and adds items to the model.
      *
      * This dispatches a splice event.
diff --git a/chrome/browser/resources/shared/js/cr/ui/list.js b/chrome/browser/resources/shared/js/cr/ui/list.js
index 5817412..032d280 100644
--- a/chrome/browser/resources/shared/js/cr/ui/list.js
+++ b/chrome/browser/resources/shared/js/cr/ui/list.js
@@ -55,7 +55,7 @@ cr.define('cr.ui', function() {
     }
 
     list.removeChild(item);
-    return h;
+    return Math.max(0, h);
   }
 
   function getComputedStyle(el) {
diff --git a/chrome/chrome_browser.gypi b/chrome/chrome_browser.gypi
index 4c6d5e9..a2439a3 100644
--- a/chrome/chrome_browser.gypi
+++ b/chrome/chrome_browser.gypi
@@ -363,6 +363,10 @@
         'browser/chromeos/compact_location_bar_view.h',
         'browser/chromeos/compact_navigation_bar.cc',
         'browser/chromeos/compact_navigation_bar.h',
+        'browser/chromeos/cros_settings.cc',
+        'browser/chromeos/cros_settings.h',
+        'browser/chromeos/cros_settings_names.cc',
+        'browser/chromeos/cros_settings_names.h',
         'browser/chromeos/cros/cros_library.cc',
         'browser/chromeos/cros/cros_library.h',
         'browser/chromeos/cros/cros_library_loader.cc',
@@ -395,14 +399,18 @@
         'broswer/chromeos/cors/update_library.h',
         'browser/chromeos/customization_document.cc',
         'browser/chromeos/customization_document.h',
-        'browser/chromeos/dom_ui/sync_options_handler.cc',
-        'browser/chromeos/dom_ui/sync_options_handler.h',
+        'browser/chromeos/dom_ui/accounts_options_handler.cc',
+        'browser/chromeos/dom_ui/accounts_options_handler.h',
+        'browser/chromeos/dom_ui/core_chromeos_options_handler.cc',
+        'browser/chromeos/dom_ui/core_chromeos_options_handler.h',
         'browser/chromeos/dom_ui/labs_handler.cc',
         'browser/chromeos/dom_ui/labs_handler.h',
         'browser/chromeos/dom_ui/language_hangul_options_handler.cc',
         'browser/chromeos/dom_ui/language_hangul_options_handler.h',
         'browser/chromeos/dom_ui/language_options_handler.cc',
         'browser/chromeos/dom_ui/language_options_handler.h',
+        'browser/chromeos/dom_ui/sync_options_handler.cc',
+        'browser/chromeos/dom_ui/sync_options_handler.h',
         'browser/chromeos/dom_ui/system_options_handler.cc',
         'browser/chromeos/dom_ui/system_options_handler.h',
         'browser/chromeos/drop_shadow_label.cc',
@@ -514,6 +522,9 @@
         'browser/chromeos/login/wizard_screen.h',
         'browser/chromeos/low_battery_observer.cc',
         'browser/chromeos/low_battery_observer.h',
+        # TODO(xiyuan): Remove mock_cros_settings once we have real stuff.
+        'browser/chromeos/mock_cros_settings.cc',
+        'browser/chromeos/mock_cros_settings.h',
         'browser/chromeos/native_dialog_window.cc',
         'browser/chromeos/native_dialog_window.h',
         'browser/chromeos/network_list.cc',