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

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 64018f185acfd2184c4db064efee6a8d28092e15..dadfa8b6a472364beace9aa96ecc1456284e17e3 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -8,7 +8,7 @@
  *
  * 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'.
@@ -31,7 +31,7 @@ Polymer('cr-settings-main', {
      * Pages that may be shown.
      *
      * @attribute pages
-     * @type Array<!Object>
+     * @type Array<!CrSettingsPage>
      * @default null
      */
     pages: null,
@@ -44,6 +44,16 @@ Polymer('cr-settings-main', {
      * default ''
      */
     selectedPageId: '',
+
+    /**
+    /**
+     * Index of the currently selected page.
+     *
+     * @attribute selectedPageIndex
+     * @type number
+     * default 0
+     */
+    selectedPageIndex: 0,
   },
 
   /** @override */
@@ -63,7 +73,7 @@ Polymer('cr-settings-main', {
   },
 
   /**
-   * 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() {
@@ -74,7 +84,7 @@ Polymer('cr-settings-main', {
   },
 
   /**
-   * Updates the list of pages using the pages in core-animated-pages.
+   * Updates the list of pages found in core-animated-pages.
    *
    * @private
    */
@@ -82,4 +92,9 @@ Polymer('cr-settings-main', {
     this.pages = this.$.pages.items;
     this.ensureSelection_();
   },
+
+  /** Helper to rall PlatformInfo.isChromeOs from a template expression. */
+  isChromeOs: function() {
+    return PlatformInfo.isChromeOs();
+  },
 });