Convert cr-settings-main to Polymer 0.8

chrome/browser/resources/settings/settings_main/settings_main.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-main' displays the selected settings page.
  *
  * 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,
+
+    /**
+     * 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.

+     */
+    selectedPage: {
+      type: Object,
+      notify: true,
+    },
 
     /**
      * ID of the currently selected page.
-     *
-     * @attribute selectedPageId
-     * @type string
-     * default ''
      */
-    selectedPageId: '',
+    selectedPageId: {
+      type: String,
+      notify: true,
+      observe: 'selectedPageIdChanged',
+    },
   },
 
   /** @override */
-  created: function() {
-    this.pages = [];
-  },
-
-  /** @override */
   ready: function() {
     var observer = new MutationObserver(this.pageContainerUpdated_.bind(this));
     observer.observe(this.$.pageContainer,
                      /** @type {MutationObserverInit} */ {
                        childList: true,
                      });
     this.pageContainerUpdated_();
   },
 
   /**
-   * 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
    *    this.selectedPage to get set to the index of $.pageContainer instead of
    *    the valueattr identifier (PAGE_ID). TODO(stevenjb/jlklien): Investigate
    *    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;
     }
     this.selectedPageId = event.detail.item.PAGE_ID;
   },
 
   /**
    * If no page is selected, selects the first page. This happens on load and
    * when a selected page is removed.
    *
    * @private
    */
   ensureSelection_: function() {
     if (!this.pages.length)
       return;
     if (this.selectedPageId == '')
       this.selectedPageId = this.pages[0].PAGE_ID;
   },
 
   /**
-   * Updates the list of pages using the pages in core-animated-pages.
+   * Updates the list of pages using the pages in iron-pages.
    *
    * @private
    */
   pageContainerUpdated_: function() {
     this.pages = this.$.pageContainer.items.filter(function(item) {
       return !item.subpage;
     });
     this.ensureSelection_();
   },
 });