Convert the downloads page to Polymer 0.8

chrome/browser/resources/settings/downloads_page/downloads_page.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/paper-input/paper-input.html">
-<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/paper-input/paper-input.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/paper-material/paper-material.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_input/cr_input.html">
 <link rel="import" href="chrome://md-settings/checkbox/checkbox.html">
-<link rel="import" href="downloads_page_style.html">
 
-<polymer-element name="cr-settings-downloads-page">
+<dom-module id="cr-settings-downloads-page">
+  <link rel="import" type="css" href="chrome://md-settings/settings_page/settings_page.css">
+  <link rel="import" type="css" href="downloads_page.css">
   <template>
-    <link rel="stylesheet" href="chrome://md-settings/settings_page/settings_page.css">
-    <core-style ref="downloadsPageStyle"></core-style>
-    <paper-shadow layout vertical cross-fade>
-      <div horizontal layout center>
-        <core-label horizontal layout center>
-          <span class="location-label" i18n-content="downloadsLocationLabel"></span>
-          <cr-input id="downloadsPath" floatingLabel="false"
-              value="{{prefs.settings.download.default_directory.value}}" readonly for>
-          </cr-input>
-        </core-label>
-        <cr-button id="changeDownloadsPath" on-click="{{selectDownloadLocation}}"
+    <paper-material>
+      <div class="horizontal layout center">
+        <div class="layout horizontal center">
+          <label class="location-label" i18n-content="downloadsLocationLabel">

[michaelpg, 2015/05/12 06:50:19]

I think i18n-content will result in the HTML content of this element being
replaced. In which case I would move the i18n-content to a <span> inside the
label, or set for="downloadsPath" on the label and keep the <cr-input> adjacent
to the label.

[Jeremy Klein, 2015/05/12 07:01:15]

Grr, good point... Can't use for because it's a presubmit error. Using
aria-labelledby I guess.

[michaelpg, 2015/05/12 07:27:47]

Weird, you're right. I wonder why it matters.

In this case because the input is readonly it doesn't matter, but in general
it's worth noting that aria-labelledby doesn't do everything a label would do.
For example:

<span id="label">Label</span> <input type="text" aria-labelledby="label">

If we used <label for> or placed the <input> inside the span, then clicking on
the label would automatically focus the input. If we use aria-labelledby, that
doesn't happen.

In chrome://settings for example, we can change a checkbox by clicking on its
<label> because it's a label element.

+            <cr-input id="downloadsPath" floatingLabel="false"
+                value="{{prefs.settings.download.default_directory.value}}"
+                readonly>
+            </cr-input>
+          </label>
+        </div>
+        <cr-button id="changeDownloadsPath" on-click="selectDownloadLocation_"
             i18n-content="downloadsChangeLocationButton">
         </cr-button>
       </div>
       <cr-settings-checkbox
           pref="{{prefs.settings.download.prompt_for_download}}"
           i18n-values="label:downloadsPromptForDownloadLabel">
       </cr-settings-checkbox>
-    </paper-shadow>
+    </paper-material>
   </template>
   <script src="downloads_page.js"></script>
-</polymer-element>
+</dom-module>