Adding support for sub pages and adding the sync page.

BUG=none
TEST=none
Review URL: http://codereview.chromium.org/2812043

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

8 files changed, 211 insertions, 10 deletions

diff --git a/chrome/browser/chromeos/dom_ui/sync_options_handler.cc b/chrome/browser/chromeos/dom_ui/sync_options_handler.cc
new file mode 100644
index 0000000..073b8d4f
--- /dev/null
+++ b/chrome/browser/chromeos/dom_ui/sync_options_handler.cc
@@ -0,0 +1,49 @@
+// 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/sync_options_handler.h"
+
+#include "app/l10n_util.h"
+#include "app/resource_bundle.h"
+#include "base/basictypes.h"
+#include "base/callback.h"
+#include "base/i18n/time_formatting.h"
+#include "base/stl_util-inl.h"
+#include "base/time.h"
+#include "base/utf_string_conversions.h"
+#include "base/values.h"
+#include "chrome/common/notification_service.h"
+#include "grit/browser_resources.h"
+#include "grit/chromium_strings.h"
+#include "grit/generated_resources.h"
+#include "grit/locale_settings.h"
+#include "grit/theme_resources.h"
+
+SyncOptionsHandler::SyncOptionsHandler() {}
+
+SyncOptionsHandler::~SyncOptionsHandler() {}
+
+void SyncOptionsHandler::GetLocalizedValues(
+    DictionaryValue* localized_strings) {
+  DCHECK(localized_strings);
+  // Sync page - ChromeOS
+  localized_strings->SetString(L"syncPage",
+      l10n_util::GetString(IDS_SYNC_NTP_SYNC_SECTION_TITLE));
+  localized_strings->SetString(L"sync_title",
+      l10n_util::GetString(IDS_CUSTOMIZE_SYNC_DESCRIPTION));
+  localized_strings->SetString(L"syncsettings",
+      l10n_util::GetString(IDS_SYNC_DATATYPE_PREFERENCES));
+  localized_strings->SetString(L"syncbookmarks",
+      l10n_util::GetString(IDS_SYNC_DATATYPE_BOOKMARKS));
+  localized_strings->SetString(L"synctypedurls",
+      l10n_util::GetString(IDS_SYNC_DATATYPE_TYPED_URLS));
+  localized_strings->SetString(L"syncpasswords",
+      l10n_util::GetString(IDS_SYNC_DATATYPE_PASSWORDS));
+  localized_strings->SetString(L"syncextensions",
+      l10n_util::GetString(IDS_SYNC_DATATYPE_EXTENSIONS));
+  localized_strings->SetString(L"syncautofill",
+      l10n_util::GetString(IDS_SYNC_DATATYPE_AUTOFILL));
+  localized_strings->SetString(L"syncthemes",
+      l10n_util::GetString(IDS_SYNC_DATATYPE_THEMES));
+}
diff --git a/chrome/browser/chromeos/dom_ui/sync_options_handler.h b/chrome/browser/chromeos/dom_ui/sync_options_handler.h
new file mode 100644
index 0000000..a58c583
--- /dev/null
+++ b/chrome/browser/chromeos/dom_ui/sync_options_handler.h
@@ -0,0 +1,23 @@
+// 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_SYNC_OPTIONS_HANDLER_H_
+#define CHROME_BROWSER_CHROMEOS_DOM_UI_SYNC_OPTIONS_HANDLER_H_
+
+#include "chrome/browser/dom_ui/options_ui.h"
+
+// ChromeOS system options page UI handler.
+class SyncOptionsHandler : public OptionsPageUIHandler {
+ public:
+  SyncOptionsHandler();
+  virtual ~SyncOptionsHandler();
+
+  // OptionsUIHandler implementation.
+  virtual void GetLocalizedValues(DictionaryValue* localized_strings);
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(SyncOptionsHandler);
+};
+
+#endif  // CHROME_BROWSER_CHROMEOS_DOM_UI_SYNC_OPTIONS_HANDLER_H_
diff --git a/chrome/browser/dom_ui/options_ui.cc b/chrome/browser/dom_ui/options_ui.cc
index 3336be1..4b77ea5 100644
--- a/chrome/browser/dom_ui/options_ui.cc
+++ b/chrome/browser/dom_ui/options_ui.cc
@@ -39,6 +39,7 @@
 #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/labs_handler.h"
 #include "chrome/browser/chromeos/dom_ui/system_options_handler.h"
 #endif
@@ -108,6 +109,7 @@ OptionsUI::OptionsUI(TabContents* contents) : DOMUI(contents) {
   AddOptionsPageUIHandler(localized_strings, new AdvancedOptionsHandler());
 #if defined(OS_CHROMEOS)
   AddOptionsPageUIHandler(localized_strings, new SystemOptionsHandler());
+  AddOptionsPageUIHandler(localized_strings, new SyncOptionsHandler());
   AddOptionsPageUIHandler(localized_strings, new LabsHandler());
 #endif
 
diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index 965dce0..9bf0a0a 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -39,11 +39,19 @@ function load() {
   OptionsPage.register(AdvancedOptions.getInstance());
   if (cr.isChromeOS) {
     var labsOptions = new OptionsPage('labs',
-                                      templateData.labsPage,
+                                      localStrings.getString('labsPage'),
                                       'labsPage');
     OptionsPage.register(labsOptions);
   }
 
+  var syncSettings = new OptionsPage('sync',
+                                     localStrings.getString('syncPage'),
+                                     'syncPage');
+  OptionsPage.registerSubPage(syncSettings);
+
+  var dummyPage = new OptionsPage('dummy', 'Overlay Test Page', 'dummyPage');
+  OptionsPage.registerOverlay(dummyPage);
+
   Preferences.getInstance().initialize();
   if (cr.isChromeOS) {
     OptionsPage.showPageByName(SystemOptions.getInstance().name);
@@ -60,25 +68,34 @@ window.onpopstate = function(e) {
 
 </script>
 <link rel="stylesheet" href="dom_ui.css">
-<!-- TODO(zelidrag) just a temp style placeholder until redesign -->
 <link rel="stylesheet" href="options/options_page.css">
 </head>
 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 <div class="header">
 </div>
+<div id="overlay" class="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>
+</div>
 <div id="main-content">
   <div id="navbar-container">
      <h1 id="settings-title" i18n-content="title"></h1>
      <ul id="navbar">
      </ul>
      <hr/>
-     <ul class="hidden">
+     <ul id="subpagesnav">
      </ul>
   </div>
   <div id="mainview">
      <if expr="pp_ifdef('chromeos')">
         <include src="options/chromeos_system_options.html">
         <include src="options/chromeos_labs.html">
+        <include src="options/sync_options.html" >
      </if>     
      <include src="options/browser_options.html">
      <include src="options/personal_options.html">
diff --git a/chrome/browser/resources/options/chromeos_system_options.js b/chrome/browser/resources/options/chromeos_system_options.js
index 48af6ae..6f1cb31 100644
--- a/chrome/browser/resources/options/chromeos_system_options.js
+++ b/chrome/browser/resources/options/chromeos_system_options.js
@@ -38,5 +38,11 @@ SystemOptions.prototype = {
     $('language-button').onclick = function(event) {
       // TODO: Open ChromeOS language settings page.
     };
+    $('sync-button').onclick = function(event) {
+      OptionsPage.showPageByName('sync');
+    }
+    $('dummy-button').onclick = function(event) {
+      OptionsPage.showOverlay('dummy');
+    }
   },
 };
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index 31eb3b9..c6add99 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -24,6 +24,17 @@ function OptionsPage(name, title, pageDivName) {
 OptionsPage.registeredPages_ = {};
 
 /**
+ * Pages which are meant to have an entry in the nav, but
+ * not have a permanent entry.
+ */
+OptionsPage.registeredSubPages_ = {};
+
+/**
+ * Pages which are meant to behave like model dialogs.
+ */
+OptionsPage.registeredOverlayPages_ = {};
+
+/**
  * Shows a registered page.
  * @param {string} pageName Page name.
  */
@@ -34,15 +45,26 @@ OptionsPage.showPageByName = function(pageName) {
   }
 };
 
-OptionsPage.setState = function(state) {
-  if (state.pageName)
-    OptionsPage.showPageByName(state.pageName);
+/**
+ * Shows a registered Overlay page.
+ * @param {string} overlayName Page name.
+ */
+OptionsPage.showOverlay = function(overlayName) {
+  if (OptionsPage.registeredOverlayPages_[overlayName]) {
+    OptionsPage.registeredOverlayPages_[overlayName].visible = true;
+  }
+};
+
+OptionsPage.clearOverlays = function() {
+   for (var name in OptionsPage.registeredOverlayPages_) {
+     var page = OptionsPage.registeredOverlayPages_[name];
+     page.visible = false;
+   }
 };
 
 /**
  * Registers new options page.
- * @param {OptionsPage} page Page to register, must be of a class derived from
- * OptionsPage.
+ * @param {OptionsPage} page Page to register.
  */
 OptionsPage.register = function(page) {
   OptionsPage.registeredPages_[page.name] = page;
@@ -61,6 +83,35 @@ OptionsPage.register = function(page) {
   page.initializePage();
 };
 
+/**
+ * Registers a new Sub tab page.
+ * @param {OptionsPage} page Page to register.
+ */
+OptionsPage.registerSubPage = function(page) {
+  OptionsPage.registeredPages_[page.name] = page;
+  var pageNav = document.createElement('li');
+  pageNav.id = page.name + 'PageNav';
+  pageNav.className = 'navbar-item subpage-nav';
+  pageNav.setAttribute('pageName', page.name);
+  pageNav.textContent = page.title;
+  var subpagesnav = $('subpagesnav');
+  subpagesnav.appendChild(pageNav);
+  page.tab = pageNav;
+  page.initializePage();
+};
+
+/**
+ * Registers a new Overlay page.
+ * @param {OptionsPage} page Page to register, must be a class derviced from
+ * OptionsPage.
+ */
+OptionsPage.registerOverlay = function(page) {
+  OptionsPage.registeredOverlayPages_[page.name] = page;
+  page.tab = undefined;
+  page.isOverlay = true;
+  page.initializePage();
+};
+
 OptionsPage.prototype = {
   /**
    * Initializes page content.
@@ -88,10 +139,24 @@ OptionsPage.prototype = {
                                this.title,
                                '/' + this.name);
       this.pageDiv.style.display = 'block';
-      this.tab.classList.add('navbar-item-selected');
+      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');
+      }
     } else {
+      if (this.isOverlay) {
+        var overlay = $('overlay');
+        overlay.classList.add('hidden');
+        overlay.classList.remove('overlay-visible');
+      }
       this.pageDiv.style.display = 'none';
-      this.tab.classList.remove('navbar-item-selected');
+      if (this.tab) {
+        this.tab.classList.remove('navbar-item-selected');
+      }
     }
   }
 };
diff --git a/chrome/browser/resources/options/sync_options.html b/chrome/browser/resources/options/sync_options.html
new file mode 100644
index 0000000..b6d85fa
--- /dev/null
+++ b/chrome/browser/resources/options/sync_options.html
@@ -0,0 +1,37 @@
+<div class="page hidden" id="syncPage">
+  <h1 i18n-content="syncPage"></h1>
+  <section>
+    <h3 i18n-content="sync_title"></h3>
+    <table class="option-control-table">
+      <tr>
+        <td class="option-name"><label><input id="settings-check"
+            pref="sync.preferences" type="checkbox"><span
+            i18n-content="syncsettings"></span></label></td>
+        <td class="option-name"><label><input id="bookmarks-check"
+            pref="sync.bookmarks" type="checkbox"><span
+            i18n-content="syncbookmarks"></span></label></td>
+      </tr>
+      <tr>
+        <td class="option-name"><label><input id="typedurls-check"
+            pref="sync.typed_urls" type="checkbox"><span
+            i18n-content="synctypedurls"></span></label></td>
+        <td class="option-name"><label><input id="passwords-check"
+            pref="sync.passwords" type="checkbox"><span
+            i18n-content="syncpasswords"></span></label></td>
+      </tr>
+      <tr>
+        <td class="option-name"><label><input id="extensions-check"
+            pref="sync.extensions" type="checkbox"><span
+            i18n-content="syncextensions"></span></label></td>
+        <td class="option-name"><label><input id="autofill-check"
+            pref="sync.autofill" type="checkbox"><span
+            i18n-content="syncautofill"></span></label></td>
+      </tr>
+      <tr>
+        <td class="option-name"><label><input id="themes-check"
+            pref="sync.themes" type="checkbox"><span
+            i18n-content="syncthemes"></span></label></td>
+      </tr>
+    </table>
+  </section>
+</div>
diff --git a/chrome/chrome_browser.gypi b/chrome/chrome_browser.gypi
index 8240641..d75ab5a 100644
--- a/chrome/chrome_browser.gypi
+++ b/chrome/chrome_browser.gypi
@@ -386,6 +386,8 @@
         'browser/chromeos/cros/system_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/labs_handler.cc',
         'browser/chromeos/dom_ui/labs_handler.h',
         'browser/chromeos/dom_ui/system_options_handler.cc',