Add skeleton UI for sync page.

chrome/browser/resources/settings/sync_page/sync_page.html

Index: chrome/browser/resources/settings/sync_page/sync_page.html
diff --git a/chrome/browser/resources/settings/sync_page/sync_page.html b/chrome/browser/resources/settings/sync_page/sync_page.html
new file mode 100644
index 0000000000000000000000000000000000000000..8018243d3f8104713aa63367600573eb70396464
--- /dev/null
+++ b/chrome/browser/resources/settings/sync_page/sync_page.html
@@ -0,0 +1,97 @@
+<link rel="import" href="chrome://resources/polymer/v0_8/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/paper-material/paper-material.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/paper-radio-button/paper-radio-button.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/paper-radio-group/paper-radio-group.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_checkbox/cr_checkbox.html">
+<link rel="import" href="chrome://md-settings/checkbox/checkbox.html">
+
+<dom-module id="cr-settings-sync-page">
+  <link rel="import" type="css"
+      href="chrome://md-settings/settings_page/settings_page.css">
+  <link rel="import" type="css" href="sync_page.css">
+  <template>
+    <paper-material>
+      <div i18n-content="syncPageTitle"></div>
+      <select id="autoclickDropdown">

[James Hawkins, 2015/06/04 19:38:37]

Remind me again: does this have to be javaScriptCase for a reason?

[Kyle Horimoto, 2015/06/04 21:18:18]

Using javaScriptCase allows us to reference the element in JS using $.theIdName
(using $.the-id-name wouldn't work since "-" is an operator in SJ and it
wouldn't be able to parse it properly).

But, since I'm not actually using it in JS yet, I took the ID out for now, and
I'll add it back in when I actually hook things together.

+        <option value="sync-everything"
+            i18n-content="syncEverythingMenuOption">
+        </option>
+        <option value="choose-what-to-sync"
+            i18n-content="chooseWhatToSyncMenuOption">
+        </option>
+      </select>
+      <table>

[James Hawkins, 2015/06/04 19:38:37]

This isn't tabular data, so don't use a table.

[Kyle Horimoto, 2015/06/04 21:18:18]

Done.

+        <tr>
+          <td>
+            <cr-checkbox>
+              <span i18n-content="appCheckboxLabel"></span>
+            </cr-checkbox>
+          </td>
+          <td>
+            <cr-checkbox>
+              <span i18n-content="extensionsCheckboxLabel"></span>
+            </cr-checkbox>
+          </td>
+          <td>
+            <cr-checkbox>
+              <span i18n-content="settingsCheckboxLabel"></span>
+            </cr-checkbox>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <cr-checkbox>
+              <span i18n-content="autofillCheckboxLabel"></span>
+            </cr-checkbox>
+          </td>
+          <td>
+            <cr-checkbox>
+              <span i18n-content="historyCheckboxLabel"></span>
+            </cr-checkbox>
+          </td>
+          <td>
+            <cr-checkbox>
+              <span i18n-content="themesAndWallpapersCheckboxLabel"></span>
+            </cr-checkbox>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <cr-checkbox>
+              <span i18n-content="bookmarksCheckboxLabel"></span>
+            </cr-checkbox>
+          </td>
+          <td>
+            <cr-checkbox>
+              <span i18n-content="passwordsCheckboxLabel"></span>
+            </cr-checkbox>
+          </td>
+          <td>
+            <cr-checkbox>
+              <span i18n-content="openTabsCheckboxLabel"></span>
+            </cr-checkbox>
+          </td>
+        </tr>
+      </table>
+    </paper-material>
+    <paper-material>
+      <div i18n-content="encryptionOptionsTitle"></div>
+      <div i18n-content="syncDataEncryptedText"></div>
+      <paper-radio-group selected="encrypt-with-google">
+        <paper-radio-button name="encrypt-with-google"
+            i18n-content="encryptWithGoogleCredentialsLabel">
+        </paper-radio-button>
+        <paper-radio-button name="encrypt-with-passphrase"
+            i18n-content="encryptWithSyncPassphraseLabel">
+        </paper-radio-button>
+      </paper-radio-group>
+      <div>
+        <cr-button i18n-content="useDefaultSettingsButton"></cr-button>
+        <cr-button i18n-content="cancelButton"></cr-button>
+        <cr-button i18n-content="okButton"></cr-button>
+      </div>
+    </paper-material>
+  </template>
+  <script src="sync_page.js"></script>
+</dom-module>