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..64018f185acfd2184c4db064efee6a8d28092e15
--- /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.
+ *
+ * Example:
+ *
+ *     <cr-settings-main pages="{{pages}}" selectedPageId="{{selectedId}}">
+ *     </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>
+     * @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));
+    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.
+   */

[Kyle Horimoto, 2015/03/12 18:57:35]

nit: @private

[michaelpg, 2015/03/13 00:47:01]

Done.

+  ensureSelection_: function() {
+    if (!this.pages.length)

[Oren Blasberg, 2015/03/12 18:58:17]

optional nit:  from years of JS now I prefer using curly braces even when the
body is 1 line because I frequently forget to add them later and add bugs on
accident. Up to you though

[michaelpg, 2015/03/13 00:47:01]

Thanks, but I'm going to respectfully ignore this. Optional curly braces is one
of the few explicit Chromium JS rules, and most of the JS I read and write omits
the braces.

+      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;

[Kyle Horimoto, 2015/03/12 18:57:35]

This assignment is bound outward all the way up to settings-ui, right? Just want
to make sure I'm understanding this correctly.

[michaelpg, 2015/03/13 00:47:01]

Yep, and then back down to settings-drawer -> settings-menu. Kind of crazy I
guess, something to consider when we work on a navigation model.

+    this.ensureSelection_();
+  },
+});