Scaffold for MD-Settings, inside chrome://md-settings.

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}}" currentPageIndex="{{index}}">
  *     </cr-settings-main>
  *
  * See cr-settings-drawer for example of use in 'core-drawer-panel'.
  *
  * @group Chrome Settings Elements
  * @element cr-settings-main
  */
 Polymer('cr-settings-main', {
   publish: {
     /**
      * Preferences state.
      *
      * @attribute prefs
      * @type CrSettingsPrefsElement
      * @default null
      */
     prefs: null,
 
     /**
      * Pages that may be shown.
      *
      * @attribute pages
-     * @type Array<!Object>
+     * @type Array<!CrSettingsPage>
      * @default null
      */
     pages: null,
 
     /**
      * ID of the currently selected page.
      *
      * @attribute selectedPageId
      * @type string
      * default ''
      */
     selectedPageId: '',
+
+    /**
+    /**
+     * Index of the currently selected page.
+     *
+     * @attribute selectedPageIndex
+     * @type number
+     * default 0
+     */
+    selectedPageIndex: 0,
   },
 
   /** @override */
   created: function() {
     this.pages = [];
   },
 
   /** @override */
   ready: function() {
     var observer = new MutationObserver(this.pagesUpdated_.bind(this));
     observer.observe(this.$.pages,
                      /** @type {MutationObserverInit} */ {
                        childList: true,
                      });
     this.pages = this.$.pages.items;
     this.ensureSelection_();
   },
 
   /**
-   * If no page is selected, selects the first page. This happens on load and
+   * If no page is selected, select the first page. This happens on load and
    * when a selected page is removed.
    */
   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 found in core-animated-pages.
    *
    * @private
    */
   pagesUpdated_: function() {
     this.pages = this.$.pages.items;
     this.ensureSelection_();
   },
+
+  /** Helper to rall PlatformInfo.isChromeOs from a template expression. */
+  isChromeOs: function() {
+    return PlatformInfo.isChromeOs();
+  },
 });