MD Settings: First half of Device > Keyboard sub-page.

chrome/browser/resources/settings/device_page/device_page.html

+<link rel="import" href="chrome://resources/html/polymer_config.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

[dschuyler, 2016/03/02 01:08:06]

Should we include /polymer/ before /html/ or vice versa?
Can we go either way rather than alternate?

[michaelpg, 2016/03/02 02:42:06]

polymer_config.html needs to be included before polymer.html. But including a
Polymer behavior before polymer.html seems weird. (Turns out it would work,
because we don't actually *call* Polymer when defining a behavior, but ehhhhh)

I think the right solution is to actually move the *polymer* import into
polymer_config.html. I'll send out a CL with my rationalization.

Meantime I moved the i18n_behavior down so at least all the Polymer ones are
together.

 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/hardware-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
+<link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html">
+<link rel="import" href="chrome://md-settings/device_page/keyboard.html">
 <link rel="import" href="chrome://md-settings/device_page/touchpad.html">
+<link rel="import" href="chrome://md-settings/i18n_setup.html">
+<link rel="import" href="chrome://md-settings/prefs/prefs.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_subheader.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-device-page">
   <template>
     <style include="settings-shared"></style>
     <settings-animated-pages id="pages" section="device"
         current-route="{{currentRoute}}">
       <neon-animatable id="main">
-        <div class="settings-box first" on-tap="onTouchpadTap_">
-          <iron-icon icon="hardware:keyboard"></iron-icon>
+        <div id="touchpadRow" class="settings-box first"
+            on-tap="onTouchpadTap_">
+          <iron-icon icon="image:brightness-1"></iron-icon>

[dschuyler, 2016/03/02 01:08:06]

optional: I've learned that the brightness-1 icon
implies a TODO to get the 'real' icon later.  Maybe
we could/should start adding TODO's when adding
brightness-1.  Up to you, just a thought.

[michaelpg, 2016/03/02 02:42:06]

Done.

           <div class="middle">[[i18n('touchpadTitle')]]</div>
         </div>
-        <div class="settings-box">
-          <iron-icon icon="image:brightness-1"></iron-icon>
+        <div id="keyboardRow" class="settings-box" on-tap="onKeyboardTap_">
+          <iron-icon icon="hardware:keyboard"></iron-icon>
           <div class="middle">[[i18n('keyboardTitle')]]</div>
         </div>
       </neon-animatable>
       <neon-animatable id="touchpad">
         <settings-subheader page-title="[[i18n('touchpadTitle')]]">
         </settings-subheader>
         <settings-touchpad prefs="{{prefs}}"></settings-touchpad>
       </neon-animatable>
+      <neon-animatable id="keyboard">
+        <settings-subheader page-title="[[i18n('keyboardTitle')]]">
+        </settings-subheader>
+        <settings-keyboard prefs="{{prefs}}"></settings-keyboard>
+      </neon-animatable>
     </settings-animated-pages>
   </template>
   <script src="device_page.js"></script>
 </dom-module>