Add initial implementation of date-time-settings MD settings page.

Also, I fixed two issues in a11y page:
1. settings. -> settings.settings. (b/c the names were already prefixed with "settings.")
2. Correctly concat the list of prefs to request via chrome.send()  (this will go away later anyway when we switch to settingsPrivate API.)

BUG=464898

Review URL: https://codereview.chromium.org/990473002

Cr-Commit-Position: refs/heads/master@{#324163}

chrome/browser/resources/settings/a11y_page/a11y_page.html

@@ -19,40 +19,45 @@
       </div>
 
 <if expr="chromeos">
-      <cr-settings-checkbox pref="{{prefs.settings.a11y.enable_menu}}"
+      <cr-settings-checkbox
+          pref="{{prefs.settings.settings.a11y.enable_menu}}"
           i18n-values="label:accessibilityOptionsInMenuLabel">
       </cr-settings-checkbox>
-      <cr-settings-checkbox pref="{{prefs.settings.a11y.large_cursor_enabled}}"
+      <cr-settings-checkbox
+          pref="{{prefs.settings.settings.a11y.large_cursor_enabled}}"
           i18n-values="label:accessibilityLargeMouseCursorLabel">
       </cr-settings-checkbox>
-      <cr-settings-checkbox pref="{{prefs.settings.a11y.high_contrast_enabled}}"
+      <cr-settings-checkbox
+          pref="{{prefs.settings.settings.a11y.high_contrast_enabled}}"
           i18n-values="label:accessibilityHighContrastLabel">
       </cr-settings-checkbox>
-      <cr-settings-checkbox pref="{{prefs.settings.a11y.sticky_keys_enabled}}"
+      <cr-settings-checkbox
+          pref="{{prefs.settings.settings.a11y.sticky_keys_enabled}}"
           i18n-values="label:accessibilityStickyKeysLabel;
                        subLabel:accessibilityStickyKeysSublabel">
       </cr-settings-checkbox>
-      <cr-settings-checkbox pref="{{prefs.settings.accessibility}}"
+      <cr-settings-checkbox pref="{{prefs.settings.settings.accessibility}}"
           i18n-values="label:accessibilityChromeVoxLabel;
                        subLabel:accessibilityChromeVoxSublabel">
       </cr-settings-checkbox>
-      <cr-settings-checkbox pref="{{prefs.settings.a11y.screen_magnifier}}"
+      <cr-settings-checkbox
+          pref="{{prefs.settings.settings.a11y.screen_magnifier}}"
           i18n-values="label:accessibilityScreenMagnifierLabel">
       </cr-settings-checkbox>
       <cr-settings-checkbox
-          pref="{{prefs.settings.touchpad.enable_tap_dragging}}"
+          pref="{{prefs.settings.settings.touchpad.enable_tap_dragging}}"
           i18n-values="label:accessibilityTapDraggingLabel">
       </cr-settings-checkbox>
-      <cr-settings-checkbox pref="{{prefs.settings.a11y.autoclick}}"
+      <cr-settings-checkbox pref="{{prefs.settings.settings.a11y.autoclick}}"
           i18n-values="label:accessibilityClickOnStopLabel">
       </cr-settings-checkbox>
 
       <core-label horizontal layout center class="autoclick-delay-label"
-          hidden?="{{!prefs.settings.a11y.autoclick}}">
+          hidden?="{{!prefs.settings.settings.a11y.autoclick}}">
         <span i18n-content="accessibilityDelayBeforeClickLabel"></span>
         <cr-dropdown-menu class="autoclick-dropdown">
           <core-menu class="menu" valueAttr="value" selectedAttribute=""
-              selected="{{prefs.settings.a11y.autoclick_delay_ms}}">
+              selected="{{prefs.settings.settings.a11y.autoclick_delay_ms}}">
             <paper-item value="200"
                 i18n-content="accessibilityDelayBeforeClickExtremelyShort">
             </paper-item>
@@ -72,7 +77,8 @@
         </cr-dropdown-menu>
       </core-label>
 
-      <cr-settings-checkbox pref="{{prefs.settings.a11y.virtual_keyboard}}"
+      <cr-settings-checkbox
+          pref="{{prefs.settings.settings.a11y.virtual_keyboard}}"
           i18n-values="label:accessibilityOnScreenKeyboardLabel">
       </cr-settings-checkbox>
 </if>

chrome/browser/resources/settings/date_time_page/date_time_page.css

+/* Copyright 2015 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. */
+
+core-label {
+  margin: 10px;
+}
+
+.time-zone-label {
+  -webkit-margin-end: 10px;
+}
+
+#setAutomatically {
+  margin: 10px;
+}

chrome/browser/resources/settings/date_time_page/date_time_page.html

+<link rel="import" href="chrome://md-settings/checkbox/checkbox.html">
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/core-label/core-label.html">
+<link rel="import" href="chrome://resources/polymer/core-menu/core-menu.html">
+<link rel="import" href="chrome://resources/polymer/paper-item/paper-item.html">
+<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
+
+<polymer-element name="cr-settings-date-time-page">
+  <template>
+    <link rel="stylesheet" href="chrome://md-settings/settings_page/settings_page.css">
+    <link rel="stylesheet" href="date_time_page.css">
+    <paper-shadow layout vertical cross-fade>
+      <cr-settings-page-header page="{{}}"></cr-settings-page-header>
+      <div horizontal layout center>
+        <core-label horizontal layout center>
+          <span class="time-zone-label">Time zone:</span>
+        </core-label>
+      </div>
+      <cr-settings-checkbox
+          pref="{{prefs.settings.settings.clock.use_24hour_clock}}"
+          label="Use 24-hour clock">
+      </cr-settings-checkbox>
+      <span id="setAutomatically">Date and time are set automatically.</span>
+    </paper-shadow>
+  </template>
+  <script src="date_time_page.js"></script>
+</polymer-element>

chrome/browser/resources/settings/date_time_page/date_time_page.js

+// Copyright 2015 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.
+
+/**
+ * @fileoverview
+ * 'cr-settings-date-time-page' is the settings page containing date-time
+ * settings.
+ *
+ * Example:
+ *
+ *    <core-animated-pages>
+ *      <cr-settings-date-time-page prefs="{{prefs}}">
+ *      </cr-settings-date-time-page>
+ *      ... other pages ...
+ *    </core-animated-pages>
+ *
+ * @group Chrome Settings Elements
+ * @element cr-settings-date-time-page
+ */
+Polymer('cr-settings-date-time-page', {
+  publish: {
+    /**
+     * Preferences state.
+     *
+     * @attribute prefs
+     * @type CrSettingsPrefsElement
+     * @default null
+     */
+    prefs: null,
+
+    /**
+     * ID of the page.
+     *
+     * @attribute PAGE_ID
+     * @const string
+     * @default 'date-time'
+     */
+    PAGE_ID: 'date-time',
+
+    /**
+     * Title for the page header and navigation menu.
+     *
+     * @attribute pageTitle
+     * @type string
+     * @default 'Date & Time'
+     */
+    pageTitle: 'Date & Time',
+
+    /**
+     * Name of the 'core-icon' to show.
+     *
+     * @attribute icon
+     * @type string
+     * @default 'device:access-time'
+     */
+    icon: 'device:access-time',
+  },
+});

chrome/browser/resources/settings/date_time_page/demo.html

+<!doctype html>
+<html>
+<head>
+  <link href="date_time_page.html" rel="import">
+  <link href="../prefs/prefs.html" rel="import">
+  <script src="demo.js"></script>
+</head>
+<body unresolved>
+  <cr-settings-prefs></cr-settings-prefs>
+  <cr-settings-date-time-page></cr-settings-date-time-page>
+</body>
+</html>

chrome/browser/resources/settings/date_time_page/demo.js

+// Copyright 2015 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.
+
+// Wire up the prefs to the date/time page.
+window.addEventListener('polymer-ready', function() {
+  var page = document.querySelector('cr-settings-date-time-page');
+  page.prefs = document.querySelector('cr-settings-prefs');
+});

chrome/browser/resources/settings/pref_tracker/pref_tracker.js

@@ -74,7 +74,7 @@
           var parentPrefString = this.parentNode && this.parentNode.host &&
               this.parentNode.host.getAttribute('pref');
           if (parentPrefString) {
-            keyHint = parentPrefString.match(/{{([a-z._]+)}}/)[1];
+            keyHint = parentPrefString.match(/{{([a-z0-9._]+)}}/)[1];
           }
 
           throw new Error('Pref not found. Key Hint: ' + keyHint);

chrome/browser/resources/settings/prefs/prefs.js

@@ -39,6 +39,7 @@
    * @const {!Array<string>}
    */
   var CROS_ONLY_PREFS = [
+    'cros.system.timezone',
     'settings.accessibility',
     'settings.a11y.autoclick',
     'settings.a11y.autoclick_delay_ms',
@@ -48,6 +49,7 @@
     'settings.a11y.screen_magnifier',
     'settings.a11y.sticky_keys_enabled',
     'settings.a11y.virtual_keyboard',
+    'settings.clock.use_24hour_clock',
     'settings.touchpad.enable_tap_dragging',
   ];
 
@@ -83,7 +85,7 @@
       window[callbackName] = this.onPrefsFetched_.bind(this);
       var prefsToFetch = PREFS_TO_FETCH;
       if (cr.isChromeOS)
-        prefsToFetch.concat(CROS_ONLY_PREFS);
+        prefsToFetch = prefsToFetch.concat(CROS_ONLY_PREFS);
 
       chrome.send('fetchPrefs', [callbackName].concat(prefsToFetch));
     },

chrome/browser/resources/settings/settings_main/settings_main.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/polymer/core-transition/core-transition.html">
 <link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
 <link rel="import" href="chrome://md-settings/a11y_page/a11y_page.html">
+<link rel="import" href="chrome://md-settings/date_time_page/date_time_page.html">
 <link rel="import" href="chrome://md-settings/downloads_page/downloads_page.html">
 
 <polymer-element name="cr-settings-main">
@@ -13,6 +14,10 @@
       <core-animated-pages id="pageContainer" selected="{{selectedPageId}}"
           valueattr="PAGE_ID" transitions="cross-fade">
         <cr-settings-a11y-page prefs="{{prefs}}"></cr-settings-a11y-page>
+<if expr="chromeos">
+        <cr-settings-date-time-page prefs="{{prefs}}">
+        </cr-settings-date-time-page>
+</if>
         <cr-settings-downloads-page prefs="{{prefs}}">
         </cr-settings-downloads-page>
       </core-animated-pages>

chrome/browser/resources/settings/settings_page/settings_page_header.html

 <link rel="import" href="chrome://resources/polymer/core-icon/core-icon.html">
+<link rel="import" href="chrome://resources/polymer/core-icons/device-icons.html">
 
 <polymer-element name="cr-settings-page-header" layout horizontal center>
   <template>

chrome/browser/resources/settings/settings_resources.grd

@@ -46,7 +46,9 @@
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_CR_SETTINGS_MAIN_HTML"
                  file="settings_main/settings_main.html"
-                 type="chrome_html" />
+                 type="chrome_html"
+                 flattenhtml="true"
+                 allowexternalscript="true" />
       <structure name="IDR_SETTINGS_CR_SETTINGS_MAIN_JS"
                  file="settings_main/settings_main.js"
                  type="chrome_html" />
@@ -80,6 +82,15 @@
       <structure name="IDR_SETTINGS_CR_SETTINGS_UI_JS"
                  file="settings_ui/settings_ui.js"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_DATE_TIME_PAGE_CSS"
+                 file="date_time_page/date_time_page.css"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_DATE_TIME_PAGE_JS"
+                 file="date_time_page/date_time_page.js"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_DATE_TIME_PAGE_HTML"
+                 file="date_time_page/date_time_page.html"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_DOWNLOADS_PAGE_CSS"
                  file="downloads_page/downloads_page.css"
                  type="chrome_html" />

ui/webui/resources/polymer_resources.grdp

@@ -108,6 +108,9 @@
   <structure name="IDR_POLYMER_CORE_ICONS_CORE_ICONS_HTML"
              file="../../../third_party/polymer/components-chromium/core-icons/core-icons.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_ICONS_DEVICE_ICONS_HTML"
+             file="../../../third_party/polymer/components-chromium/core-icons/device-icons.html"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_CORE_ICONS_IMAGE_ICONS_HTML"
              file="../../../third_party/polymer/components-chromium/core-icons/image-icons.html"
              type="chrome_html" />