Convert cr-settings-drawer to Polymer 0.8

BUG=485381

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

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

chrome/browser/resources/settings/settings_drawer/settings_drawer_style.html → chrome/browser/resources/settings/settings_drawer/settings_drawer.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="settingsDrawerStyle">
 :host {
   background-color: rgb(38, 50, 56);
   color: white;
-  display: block;
+  display: flex;
+  flex-direction: column;
   overflow: auto;
 }
 
@@ -29,4 +30,3 @@
 #user-card .email {
   font-size: 14px;
 }
-</core-style>

chrome/browser/resources/settings/settings_drawer/settings_drawer.html

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.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://md-settings/settings_menu/settings_menu.html">
-<link rel="import" href="settings_drawer_style.html">
 
-<polymer-element name="cr-settings-drawer" layout vertical>
+<dom-module id="cr-settings-drawer">
+  <link rel="import" type="css" href="settings_drawer.css">
   <template>
-    <core-style ref="settingsDrawerStyle"></core-style>
     <!-- TODO(michaelpg): Create a new user card component. -->
-    <div id="user-card" class="medium" layout horizontal center>
-      <img src="{{user.iconUrl}}">
-      <div flex>
-        <div class="name">{{user.name}}</div>
-        <div class="email">{{user.email}}</div>
+    <div id="user-card" class="layout horizontal center">
+      <img src$="[[user_.iconUrl]]">
+      <div class="flex">
+        <div class="name">[[user_.name]]</div>
+        <div class="email">[[user_.email]]</div>
       </div>
     </div>
-    <cr-settings-menu flex selectedId="{{selectedId}}" pages="{{pages}}">
+    <cr-settings-menu class="flex" selected-id="{{selectedId}}"
+        pages="[[pages]]">
     </cr-settings-menu>
   </template>
   <script src="settings_drawer.js"></script>

chrome/browser/resources/settings/settings_drawer/settings_drawer.js

@@ -9,50 +9,53 @@
  *
  * Example:
  *
- *     <core-drawer-panel>
- *       <cr-settings-drawer drawer selectedId="{{selectedId}}"
- *           pages="{{pages}}">
+ *     <paper-drawer-panel>
+ *       <cr-settings-drawer drawer selected-id="{{selectedId}}"
+ *           pages="[[pages]]">
  *       </cr-settings-drawer>
- *       <cr-settings-main main selectedId="{{selectedId}}" pages="{{pages}}">
+ *       <cr-settings-main main selected-id="{{selectedId}}" pages="[[pages]]">
  *       </cr-settings-main>
- *     </core-drawer-panel>
+ *     </paper-drawer-panel>
  *
  * @group Chrome Settings Elements
  * @element cr-settings-drawer
  */
-Polymer('cr-settings-drawer', {
-  publish: {
+Polymer({
+  is: 'cr-settings-drawer',
+
+  properties: {
     /**
      * Pages to include in the navigation.
-     *
-     * @attribute pages
-     * @type Array<!Object>
-     * @default null
+     * @type {!Array<!HTMLElement>}
      */
-    pages: null,
+    pages: {
+      type: Array,
+      value: function() { return []; },
+    },
 
     /**
      * ID of the currently selected page.
-     *
-     * @attribute selectedId
-     * @type string
-     * default ''
+     * @type {string}
      */
-    selectedId: '',
-  },
-
-  /** @override */
-  created: function() {
-    this.pages = [];
-  },
+    selectedId: {
+      type: String,
+      notify: true,
+    },
 
-  /**
-   * @type {Object}
-   * TODO(michaelpg): Create custom element and data source for user card.
-   */
-  user: {
-    name: 'Chrome User',
-    email: 'user@example.com',
-    iconUrl: 'chrome://theme/IDR_PROFILE_AVATAR_23@1x',
+    /**
+     * @private {!Object}
+     * TODO(michaelpg): Create custom element and data source for user card.
+     */
+    user_: {
+      type: Object,
+      value: function() {
+        return {
+          name: 'Chrome User',
+          email: 'user@example.com',
+          iconUrl: 'chrome://theme/IDR_PROFILE_AVATAR_23@1x',
+        };
+      },
+      readOnly: true,
+    },
   },
 });

chrome/browser/resources/settings/settings_resources.grd

@@ -32,8 +32,8 @@
       <structure name="IDR_SETTINGS_CHECKBOX_CSS"
                  file="checkbox/checkbox.css"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_CR_SETTINGS_DRAWER_STYLE_HTML"
-                 file="settings_drawer/settings_drawer_style.html"
+      <structure name="IDR_SETTINGS_CR_SETTINGS_DRAWER_CSS"
+                 file="settings_drawer/settings_drawer.css"
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_CR_SETTINGS_DRAWER_HTML"
                  file="settings_drawer/settings_drawer.html"