Convert cr-settings-main to Polymer 0.8

chrome/browser/resources/settings/settings_main/settings_main.js

Index: chrome/browser/resources/settings/settings_main/settings_main.js
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.js b/chrome/browser/resources/settings/settings_main/settings_main.js
index cb35b8d411651eefa56126b4dd69cdbd841c97df..3c8b9eecb3974d5d35270a29ba7a6792da07f8cb 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -8,47 +8,51 @@
  *
  * Example:
  *
- *     <cr-settings-main pages="{{pages}}" selectedPageId="{{selectedId}}">
+ *     <cr-settings-main pages="[[pages]]" selectedPageId="{{selectedId}}">

[Jeremy Klein, 2015/05/12 18:18:39]

selected-page-id

https://www.polymer-project.org/0.8/docs/migration.html#property-name-to-attr...

  *     </cr-settings-main>
  *
- * See cr-settings-drawer for example of use in 'core-drawer-panel'.
+ * See cr-settings-drawer for example of use in 'paper-drawer-panel'.
  *
  * @group Chrome Settings Elements
  * @element cr-settings-main
  */
-Polymer('cr-settings-main', {
-  publish: {
+Polymer({
+  is: 'cr-settings-main',
+
+  properties: {
     /**
      * Preferences state.
      *
-     * @attribute prefs
-     * @type CrSettingsPrefsElement
-     * @default null
+     * @type {CrSettingsPrefsElement}

[Jeremy Klein, 2015/05/12 18:18:39]

?CrSettingsPrefsElement

[michaelpg, 2015/05/12 18:42:50]

Done.

      */
-    prefs: null,
+    prefs: {
+      type: Object,
+      notify: true,
+    },
 
     /**
      * Pages that may be shown.
      *
-     * @attribute pages
-     * @type Array<!Object>
-     * @default null
+     * @type {Array<!Object>}

[Jeremy Klein, 2015/05/12 18:18:39]

?Array or initialize to [].

      */
-    pages: null,
+    pages: Array,
 
     /**
-     * ID of the currently selected page.
-     *
-     * @attribute selectedPageId
-     * @type string
-     * default ''
+     * Currently selected page.

[Jeremy Klein, 2015/05/12 18:18:39]

"@type {?HTMLElement}"? We'll need to think a bit about having the pages maybe
implement a page interface that can be used here once we're compiling...

[michaelpg, 2015/05/12 18:42:50]

Done.

      */
-    selectedPageId: '',
-  },
+    selectedPage: {
+      type: Object,
+      notify: true,
+    },
 
-  /** @override */
-  created: function() {
-    this.pages = [];
+    /**
+     * ID of the currently selected page.
+     */
+    selectedPageId: {
+      type: String,
+      notify: true,
+      observe: 'selectedPageIdChanged',
+    },
   },
 
   /** @override */
@@ -62,14 +66,14 @@ Polymer('cr-settings-main', {
   },
 
   /**
-   * Polymer changed event for selectedPageId. See note for onCoreSelect_ below.
+   * Polymer changed event for selectedPageId. See note for onIronSelect_ below.
    */
   selectedPageIdChanged: function() {

[Jeremy Klein, 2015/05/12 18:18:39]

nit: Can this be private?

[michaelpg, 2015/05/12 18:42:49]

Done.

     this.$.pageContainer.selected = this.selectedPageId;
   },
 
   /**
-   * We observe $.pageContainer.on-core-select instead of using data binding
+   * We observe $.pageContainer.on-iron-select instead of using data binding
    * for two reasons:
    * 1) We need to exclude subpages
    * 2) There is a bug with data binding or our useage of it here causing
@@ -78,7 +82,7 @@ Polymer('cr-settings-main', {
    *    fixing this and using filters once we switch to Polymer 0.8.
    * @private
    */
-  onCoreSelect_: function(event) {
+  onIronSelect_: function(event) {
     if (event.target != this.$.pageContainer || !event.detail.isSelected ||
         event.detail.item.subpage) {
       return;
@@ -100,7 +104,7 @@ Polymer('cr-settings-main', {
   },
 
   /**
-   * Updates the list of pages using the pages in core-animated-pages.
+   * Updates the list of pages using the pages in iron-pages.
    *
    * @private
    */