Convert cr-settings-drawer to Polymer 0.8

chrome/browser/resources/settings/settings_drawer/settings_drawer.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-drawer' holds the user card and navigation menu for settings
  * pages.
  *
  * 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.
      *

[Kyle Horimoto, 2015/05/12 18:14:55]

nit/question: I've seen some files include a blank line (well, a "*" line)
between the description and the @type, and some that don't. Which way are we
going with?

[michaelpg, 2015/05/12 18:37:12]

Good point. I generally don't include the blank line, and
https://developers.google.com/closure/compiler/docs/js-for-compiler doesn't
either, so I'll remove it here.

-     * @attribute pages
-     * @type Array<!Object>
-     * @default null
+     * @type {Array<!Object>}

[Jeremy Klein, 2015/05/12 18:06:41]

nit: ?Array or initialize to [] and make non-null.

[Kyle Horimoto, 2015/05/12 18:14:55]

IMO, let's always initialize to [] and make non-null unless there's a strong
reason not to.

[michaelpg, 2015/05/12 18:37:12]

hmm, why bother? This element expects |pages| to be set by its host so the []
would get overwritten anyway.

[Kyle Horimoto, 2015/05/12 18:39:16]

You're right - looks like this is a case where there's a strong reason not to :P

[James Hawkins, 2015/05/12 18:39:46]

So you can make it non-null, which is safer than allowing it to be null when you
don't ever expect it to be null.

[michaelpg, 2015/05/12 19:37:52]

Done.

      */
-    pages: null,
+    pages: Array,
 
     /**
      * ID of the currently selected page.
      *
-     * @attribute selectedId
-     * @type string
-     * default ''
+     * @type {string}
      */
-    selectedId: '',
+    selectedId: {
+      type: String,
+      notify: true,
+    },
   },
 
-  /** @override */
-  created: function() {
-    this.pages = [];
-  },
-
-  /**
-   * @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',
+  ready: function() {
+    /**
+     * @type {Object}
+     * TODO(michaelpg): Create custom element and data source for user card.
+     */
+    this.user_ = {

[michaelpg, 2015/05/12 15:05:17]

How do I set user_ as a property on the object, without exposing it in the
"official" properties block?

Adding it to the Polymer call argument ("prototype") causes all sorts of
weirdness.

[Jeremy Klein, 2015/05/12 18:06:41]

Advice from the Polymer team is just to put it in properties block to get all
the secret binding sauce. We can still label it private. This case really seems
like it should work without doing this, though... <unicode-shrug>

[michaelpg, 2015/05/12 18:37:12]

Done.

+      name: 'Chrome User',
+      email: 'user@example.com',
+      iconUrl: 'chrome://theme/IDR_PROFILE_AVATAR_23@1x',
+    };
   },
 });