5 files changed, 251 insertions, 3 deletions
diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index fcf3b5f..c478bde 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -99,6 +99,7 @@ window.onpopstate = function(e) {
 <if expr="pp_ifdef('chromeos')">
   <link rel="stylesheet" href="options/chromeos_accounts_options_page.css">
 </if>
+<link rel="stylesheet" href="options/personal_options.css">
 </head>
 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 <div class="header">
@@ -135,15 +136,16 @@ window.onpopstate = function(e) {
      </if>
      <include src="options/browser_options.html">
      <include src="options/personal_options.html">
+     <include src="options/sync_options.html">
      <include src="options/advanced_options.html">
      <include src="options/content_settings.html">
-     <include src="options/sync_options.html">
   </div>
 </div>
 
 <script>
 // Decorate the existing elements in the document.
 cr.ui.decorate('input[pref][type=checkbox]', PrefCheckbox);
+cr.ui.decorate('input[pref][type=radio]', PrefRadio);
 cr.ui.decorate('input[pref][type=range]', PrefRange);
 cr.ui.decorate('select[pref]', PrefSelect);
 cr.ui.decorate('#contentSettingsPage input[type=radio]', ContentSettingsRadio);
diff --git a/chrome/browser/resources/options/personal_options.css b/chrome/browser/resources/options/personal_options.css
new file mode 100644
index 0000000..414e0ed
--- /dev/null
+++ b/chrome/browser/resources/options/personal_options.css
@@ -0,0 +1,6 @@
+#text-when-synced, #button-when-synced {
+  display: none;
+}
+#text-when-not-synced, #button-when-not-synced {
+  display: none;
+}
diff --git a/chrome/browser/resources/options/personal_options.html b/chrome/browser/resources/options/personal_options.html
index ffdc855..b35ce94 100644
--- a/chrome/browser/resources/options/personal_options.html
+++ b/chrome/browser/resources/options/personal_options.html
@@ -1,3 +1,146 @@
 <div class="page hidden" id="personalPage">
   <h1 i18n-content="personalPage"></h1>
+
+  <section>
+    <h3 i18n-content="sync_section"></h3>
+    <table class="option-control-table">
+      <tr id="text-when-not-synced">
+        <td>
+          <div class="section-text" id="sync_not_setup_info"
+              i18n-content="sync_not_setup_info"/>
+        </td>
+      </tr>
+      <tr id="button-when-not-synced">
+        <td>
+          <button id="start-sync" i18n-content="start_sync"></button>
+        </td>
+      </tr>
+      </div>
+      <div>
+      <tr id="text-when-synced">
+        <td>
+          <div class="section-text" id="synced_to_user_with_time"
+              i18n-content="synced_to_user_with_time"/>
+        </td>
+      </tr>
+      <tr id="button-when-synced">
+        <td>
+          <button id="stop-sync" i18n-content="stop_sync"></button>
+          <button id="sync-customize" i18n-content="sync_customize"></button>
+        </td>
+      </tr>
+      </div>
+    </table>
+  </section>
+  <section>
+    <h3 i18n-content="passwords"></h3>
+    <table class="option-control-table">
+      <tr>
+        <td class="option-name">
+          <label>
+            <input id="passwords_asktosave"
+                name="passwords_radio"
+                pref="profile.password_manager_enabled"
+                type="radio" value="true">
+            <span i18n-content="passwords_asktosave"></span>
+          </label>
+      </tr>
+      <tr>
+        <td class="option-name">
+          <label>
+            <input id="passwords_neversave"
+                name="passwords_radio"
+                pref="profile.password_manager_enabled"
+                type="radio" value="false">
+            <span i18n-content="passwords_neversave"></span>
+          </label>
+      </tr>
+      <tr>
+          <button id="showpasswords" i18n-content="showpasswords"></button>
+      </tr>
+    </table>
+  </section>
+  <section>
+    <h3 i18n-content="autofill"></h3>
+    <table class="option-control-table">
+      <tr>
+        <td class="option-name">
+          <label>
+            <input id="autofill_enable"
+                name="autofill_radio"
+                pref="autofill.enabled"
+                type="radio" value="true">
+            <span i18n-content="autofill_enable"></span>
+          </label>
+      </tr>
+      <tr>
+        <td class="option-name">
+          <label>
+            <input id="autofill_disable"
+                name="autofill_radio"
+                pref="autofill.enabled"
+                type="radio" value="false">
+            <span i18n-content="autofill_disable"></span>
+          </label>
+      </tr>
+      <tr>
+        <button id="autofill_options" i18n-content="autofill_options">
+        </button>
+      </tr>
+    </table>
+  </section>
+  <section>
+    <h3 i18n-content="browsing_data"></h3>
+    <table class="option-control-table">
+      <tr>
+          <button id="import_data" i18n-content="import_data"></button>
+      </tr>
+    </table>
+  </section>
+
+  <if expr="os == 'linux2' or os.find('bsd') != -1">
+  <if expr="not pp_ifdef('chromeos')">
+    <section>
+      <h3 i18n-content="appearance"></h3>
+      <table class="option-control-table">
+        <tr>
+          <button id="themes_GTK_button" i18n-content="themes_GTK_button">
+          </button>
+          <button id="themes_set_classic" i18n-content="themes_set_classic">
+          </button>
+          <a id="linux_themes_gallery" i18n-content="themes_gallery"></a>
+        </tr>
+        <tr>
+          <td class="option-name">
+            <label>
+              <input name="decorations_radio"
+                  pref="browser.custom_chrome_frame"
+                  type="radio" value="false">
+              <span i18n-content="showWindow_decorations_radio"></span>
+            </label>
+        </tr>
+        <tr>
+          <td class="option-name">
+            <label>
+              <input name="decorations_radio"
+                  pref="browser.custom_chrome_frame"
+                  type="radio" value="true">
+              <span i18n-content="hideWindow_decorations_radio"></span>
+            </label>
+        </tr>
+      </table>
+    </section>
+  </if></if>
+  <if expr="pp_ifdef('chromeos') or os == 'win32' or os == 'darwin'">
+    <section>
+      <h3 i18n-content="themes"></h3>
+      <table class="option-control-table">
+        <tr>
+          <button id="themes_reset" i18n-content="themes_reset"></button>
+          <a id="nonlinux_themes_gallery" i18n-content="themes_gallery"></a>
+        </tr>
+      </table>
+    </section>
+  </if>
+
 </div>
diff --git a/chrome/browser/resources/options/personal_options.js b/chrome/browser/resources/options/personal_options.js
index b7b48c9..d22c4da 100644
--- a/chrome/browser/resources/options/personal_options.js
+++ b/chrome/browser/resources/options/personal_options.js
@@ -21,6 +21,51 @@ PersonalOptions.prototype = {
     // Call base class implementation to starts preference initialization.
     OptionsPage.prototype.initializePage.call(this);
 
-    // TODO(csilv): add any needed initialization here or delete this method.
-  }
+
+    // Listen to pref changes.
+    Preferences.getInstance().addEventListener('sync.has_setup_completed',
+        function(event) {
+          if(event.value){
+            $('text-when-synced').style.display = 'block';
+            $('button-when-synced').style.display = 'block';
+          }
+          else{
+            $('text-when-not-synced').style.display = 'block';
+            $('button-when-not-synced').style.display = 'block';
+          }
+        });
+
+    $('sync-customize').onclick = function(event){
+      OptionsPage.showPageByName('sync');
+    };
+
+    $('showpasswords').onclick = function(event){
+      //TODO(sargrass): Show passwords dialog here.
+    };
+
+    $('autofill_options').onclick = function(event){
+      //TODO(sargrass): Show autofill dialog here.
+    };
+
+    $('import_data').onclick = function(event){
+      //TODO(sargrass): Show import_data dialog here.
+    };
+
+    if(navigator.platform.match(/linux|BSD/i)){
+      $('themes_GTK_button').onclick = function(event){
+        //TODO(sargrass): Show themes GTK dialog here.
+      };
+
+      $('themes_set_classic').onclick = function(event){
+        //TODO(sargrass): Show themes set classic dialog here.
+      };
+    }
+
+    if(navigator.platform.match(/Mac|Win|CrOS/i)){
+      $('themes_reset').onclick = function(event){
+        //TODO(sargrass): Show themes reset dialog here.
+      };
+    }
+
+  },
 };
diff --git a/chrome/browser/resources/options/pref_ui.js b/chrome/browser/resources/options/pref_ui.js
index 3cf6f49..4522ab5 100644
--- a/chrome/browser/resources/options/pref_ui.js
+++ b/chrome/browser/resources/options/pref_ui.js
@@ -41,6 +41,58 @@ PrefCheckbox.prototype = {
 cr.defineProperty(PrefCheckbox, 'pref', cr.PropertyKind.ATTR);
 
 ///////////////////////////////////////////////////////////////////////////////
+// PrefRadio class:
+
+// Define a constructor that uses an input element as its underlying element.
+var PrefRadio = cr.ui.define('input');
+
+PrefRadio.prototype = {
+  // Set up the prototype chain
+  __proto__: HTMLInputElement.prototype,
+
+  /**
+   * Initialization function for the cr.ui framework.
+   */
+  decorate: function() {
+    this.type = 'radio';
+    var self = this;
+
+    // Listen to pref changes.
+    Preferences.getInstance().addEventListener(this.pref,
+        function(event) {
+          self.checked = String(event.value) == self.value;
+        });
+
+    // Listen to user events.
+    this.addEventListener('change',
+        function(e) {
+          if(self.value == 'true' || self.value == 'false') {
+            Preferences.setBooleanPref(self.pref,
+                self.value == 'true');
+          }else {
+            Preferences.setIntegerPref(self.pref,
+                parseInt(self.value, 10));
+          }
+        });
+  },
+
+  /**
+   * Getter for preference name attribute.
+   */
+  get pref() {
+    return this.getAttribute('pref');
+  },
+
+  /**
+   * Setter for preference name attribute.
+   */
+  set pref(name) {
+    this.setAttribute('pref', name);
+  }
+};
+
+
+///////////////////////////////////////////////////////////////////////////////
 // PrefRange class:
 
 // Define a constructor that uses an input element as its underlying element.