Scaffold for 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
new file mode 100644
index 0000000000000000000000000000000000000000..3f2c98d511eb85016ef219149dd2f852ee203ce2
--- /dev/null
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -0,0 +1,85 @@
+// 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.

[Jeremy Klein, 2015/03/12 02:11:18]

Did we decide to go with back ticks here? I don't mind either way as long as
we're consistent.

[michaelpg, 2015/03/12 06:29:37]

I think we're mostly not using them now.

[Jeremy Klein, 2015/03/12 06:46:36]

Sounds good to me. Let's stick to that, then.

+ *
+ * Example:
+ *
+ *     <cr-settings-main pages="{{pages}}" selectedPageId="{{selectedId}}">
+ *     </cr-settings-main>
+ *
+ * See cr-settings-drawer for example of use in 'core-panel'.

[Jeremy Klein, 2015/03/12 02:11:18]

s/core-panel/core-drawer-panel.

[michaelpg, 2015/03/12 06:29:37]

Done.

+ *
+ * @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>
+     * @default null
+     */
+    pages: null,
+
+    /**
+     * ID of the currently selected page.
+     *
+     * @attribute selectedPageId
+     * @type string
+     * default ''
+     */
+    selectedPageId: '',
+  },
+
+  /** @override */
+  created: function() {
+    this.pages = [];
+  },
+
+  /** @override */
+  ready: function() {
+    var observer = new MutationObserver(this.pagesUpdated_.bind(this));

[Jeremy Klein, 2015/03/12 02:11:18]

This stuff is great and much more readable IMO. Thanks!

+    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
+   * 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.
+   *
+   * @private
+   */
+  pagesUpdated_: function() {
+    this.pages = this.$.pages.items;
+    this.ensureSelection_();
+  },
+});