Convert a11y page to Polymer 0.8

BUG=485381

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

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

chrome/browser/resources/settings/a11y_page/a11y_page_style.html → chrome/browser/resources/settings/a11y_page/a11y_page.css

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
+/* 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-style id="a11yPageStyle">
 .autoclick-delay-label {
   -webkit-margin-end: 0;
   -webkit-margin-start: 40px;
+  align-items: center;
+  display: flex;
   margin-bottom: 10px;
   margin-top: 0;
 }
 
-.autoclick-dropdown {
+#autoclickDropdown {
   -webkit-margin-start: 10px;
 }
 
-.autoclick-dropdown::shadow paper-dropdown-menu {
-  margin: 0;
-  padding: 0 0 0.25em;
-}
-
 .more-a11y-link {
   margin-bottom: 10px;
 }
-</core-style>

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

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.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">
-<link rel="import" href="chrome://resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.html">
-<link rel="import" href="chrome://md-settings/settings_page/settings_page_header.html">
+<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://md-settings/checkbox/checkbox.html">
-<link rel="import" href="a11y_page_style.html">
 
-<polymer-element name="cr-settings-a11y-page">
+<dom-module id="cr-settings-a11y-page">
+  <link rel="import" type="css"
+      href="chrome://md-settings/settings_page/settings_page.css">
+  <link rel="import" type="css" href="a11y_page.css">
   <template>
-    <link rel="stylesheet" href="chrome://md-settings/settings_page/settings_page.css">
-    <core-style ref="a11yPageStyle"></core-style>
-    <paper-shadow layout vertical cross-fade>
+    <paper-material>
       <div class="more-a11y-link">
         <a href="https://chrome.google.com/webstore/category/collection/accessibility"
             target="_blank" i18n-content="accessibilityMoreFeaturesLink"></a>
@@ -51,30 +47,27 @@
           i18n-values="label:accessibilityClickOnStopLabel">
       </cr-settings-checkbox>
 
-      <core-label horizontal layout center class="autoclick-delay-label"
-          hidden?="{{!prefs.settings.settings.a11y.autoclick}}">
+      <div class="autoclick-delay-label"
+          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.settings.a11y.autoclick_delay_ms}}">
-            <paper-item value="200"
-                i18n-content="accessibilityDelayBeforeClickExtremelyShort">
-            </paper-item>
-            <paper-item value="400"
-                i18n-content="accessibilityDelayBeforeClickVeryShort">
-            </paper-item>
-            <paper-item value="600"
-                i18n-content="accessibilityDelayBeforeClickShort">
-            </paper-item>
-            <paper-item value="800"
-                i18n-content="accessibilityDelayBeforeClickLong">
-            </paper-item>
-            <paper-item value="1000"
-                i18n-content="accessibilityDelayBeforeClickVeryLong">
-            </paper-item>
-          </core-menu>
-        </cr-dropdown-menu>
-      </core-label>
+        <select id="autoclickDropdown" on-change="autoclickSelectChanged_">
+          <option value="200"
+              i18n-content="accessibilityDelayBeforeClickExtremelyShort">
+          </option>
+          <option value="400"
+              i18n-content="accessibilityDelayBeforeClickVeryShort">
+          </option>
+          <option value="600"
+              i18n-content="accessibilityDelayBeforeClickShort">
+          </option>
+          <option value="800"
+              i18n-content="accessibilityDelayBeforeClickLong">
+          </option>
+          <option value="1000"
+              i18n-content="accessibilityDelayBeforeClickVeryLong">
+          </option>
+        </select>
+      </div>
 
       <cr-settings-checkbox
           pref="{{prefs.settings.settings.a11y.virtual_keyboard}}"
@@ -82,7 +75,7 @@
       </cr-settings-checkbox>
 </if>
 
-    </paper-shadow>
+    </paper-material>
   </template>
   <script src="a11y_page.js"></script>
-</polymer-element>
+</dom-module>

chrome/browser/resources/settings/a11y_page/a11y_page.js

@@ -9,67 +9,77 @@
  *
  * Example:
  *
- *    <core-animated-pages>
+ *    <iron-animated-pages>
  *      <cr-settings-a11y-page prefs="{{prefs}}"></cr-settings-a11y-page>
  *      ... other pages ...
- *    </core-animated-pages>
+ *    </iron-animated-pages>
  *
  * @group Chrome Settings Elements
  * @element cr-settings-a11y-page
  */
-Polymer('cr-settings-a11y-page', {
-  publish: {
+Polymer({
+  is: 'cr-settings-a11y-page',
+
+  properties: {
     /**
      * Preferences state.
      *
-     * @attribute prefs
-     * @type CrSettingsPrefsElement
+     * @type {?CrSettingsPrefsElement}
      * @default null
      */
-    prefs: null,
+    prefs: {
+      type: Object,
+      notify: true,
+    },
 
     /**
      * Route for the page.
-     *
-     * @attribute route
-     * @type string
-     * @default ''
      */
-    route: '',
+    route: String,
 
     /**
      * Whether the page is a subpage.
-     *
-     * @attribute subpage
-     * @type boolean
-     * @default false
      */
-    subpage: false,
+    subpage: {
+      type: Boolean,
+      value: false,
+      readOnly: true,
+    },
 
     /**
      * ID of the page.
-     *
-     * @attribute PAGE_ID
-     * @const string
-     * @default 'a11y'
      */
-    PAGE_ID: 'a11y',
+    PAGE_ID: {
+      type: String,
+      value: 'a11y',
+      readOnly: true,
+    },
 
     /**
      * Title for the page header and navigation menu.
-     *
-     * @attribute pageTitle
-     * @type string
      */
-    pageTitle: loadTimeData.getString('a11yPageTitle'),
+    pageTitle: {
+      type: String,
+      value: function() { return loadTimeData.getString('a11yPageTitle'); },
+    },
 
     /**
-     * Name of the 'core-icon' to show.
-     *
-     * @attribute icon
-     * @type string
-     * @default 'accessibility'
+     * Name of the 'iron-icon' to show.
      */
-    icon: 'accessibility',
+    icon: {
+      type: String,
+      value: 'accessibility',
+      readOnly: true,
+    },
+  },
+
+  /**
+   * Called when the selected value of the autoclick dropdown changes.
+   * TODO(jlklein): Replace with binding when paper-dropdown lands.
+   * @private
+   */
+  autoclickSelectChanged_: function() {
+    this.prefs.settings.settings.a11y.autoclick_delay_ms =
+        this.$.autoclickDropdown.value;
   },
 });

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

-<!doctype html>
-<html>
-<head>
-  <link href="a11y_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-a11y-page></cr-settings-a11y-page>
-</body>
-</html>

chrome/browser/resources/settings/a11y_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 a11y page.
- */
-window.onload = function() {
-  var page = document.querySelector('cr-settings-a11y-page');
-  page.prefs = document.querySelector('cr-settings-prefs');
-};

chrome/browser/resources/settings/settings_page/settings_page.css

@@ -9,6 +9,8 @@
 :host > paper-material {
   -webkit-padding-start: 80px;
   background-color: white;
+  display: flex;
+  flex-direction: column;
   padding-bottom: 40px;
   padding-top: 40px;
 }

chrome/browser/resources/settings/settings_resources.grd

@@ -20,8 +20,8 @@
                  type="chrome_html"
                  flattenhtml="true"
                  allowexternalscript="true" />
-      <structure name="IDR_SETTINGS_A11Y_PAGE_STYLE_HTML"
-                 file="a11y_page/a11y_page_style.html"
+      <structure name="IDR_SETTINGS_A11Y_PAGE_CSS"
+                 file="a11y_page/a11y_page.css"
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_CHECKBOX_HTML"
                  file="checkbox/checkbox.html"