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
new file mode 100644
index 0000000000000000000000000000000000000000..85ecb0584f7dc3b0c35de15fde49127d5d42a42e
--- /dev/null
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -0,0 +1,122 @@
+// 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}}" currentPageIndex="{{index}}">
+ *     </cr-settings-main>
+ *
+ * See cr-settings-drawer for example of use in 'core-panel'.
+ *
+ * @group Chrome Settings Elements
+ * @element cr-settings-main
+ */
+Polymer('cr-settings-main', {
+  publish: {
+    /**
+     * Pages that may be shown.
+     *
+     * @attribute pages
+     * @type Array<!CrSettingsPage>
+     * @default []
+     */
+    pages: [],

[Jeremy Klein, 2015/03/07 23:55:14]

Same comment about initialization.

+
+    /**
+     * Index of the currently selected page.
+     *
+     * @attribute selectedIndex
+     * @type number
+     * default 0
+     */
+    currentPageIndex: 0,
+  },
+
+  /**
+   * Polymer pages changed method. Ensures the pages container contains the
+   * pages in the right order.
+   *
+   * @param {*} value The old value if the property value has changed, or the

[Jeremy Klein, 2015/03/07 23:55:13]

Please use a more specific type.

+   *     array of splices if the existing array has been changed.
+   */
+  pagesChanged: function(value) {
+    // If value is an array of plain objects, it represents splices from an
+    // ArrayObserver.
+    if (value instanceof Array && value.length &&
+        Object.prototype.isPrototypeOf(value[0])) {
+      this.applyPageSplices_(value);
+    } else {
+      this.updatePages_(this.pages);
+    }
+  },
+
+  /**
+   * Sets the list of pages shown in the 'core-animated-pages'. Rebuilds the DOM
+   * for 'core-animated-pages', so this should be called sparingly.
+   *
+   * @private
+   */
+  updatePages_: function() {

[Jeremy Klein, 2015/03/07 23:55:13]

A lot of the logic in this file could be simplified/removed if we insert the
pages declaratively.

+    this.$.pages.innerHTML = '';
+    if (!this.pages.length)
+      return;
+
+    if (this.currentPageIndex >= this.pages.length)
+      this.currentPageIndex = 0;
+
+    for (var i = 0; i < this.pages.length; i++)
+      this.$.pages.appendChild(this.createSection_(this.pages[i]));
+  },
+
+  /**
+   * Applies the splices for the list of pages to the sections in the DOM.
+   *
+   * TODO(michaelpg): core-animated-pages throws when all pages are removed.
+   *
+   * @param {!Array<!Object>} splices The changes made to 'pages'.
+   * @private
+   */
+  applyPageSplices_: function(splices) {
+    var numRemoved = 0;
+    splices.forEach(function(splice) {
+      // Remove the sections to be removed before inserting new children.
+      for (var i = 0; i < splice.removed.length; i++)
+        this.$.pages.removeChild(splice.removed[i].parentNode);
+      numRemoved += splice.removed.length;
+
+      if (!splice.addedCount)
+        return;
+
+      // Find the node to insert before, unless splice.index indicates the end
+      // of the array.
+      var sectionAfter = null;
+      if (splice.index < this.$.pages.children.length)
+        sectionAfter = this.$.pages.children[splice.index];
+
+      for (var i = 0; i < splice.addedCount; i++) {
+        var section = this.createSection_(this.pages[splice.index + i]);
+        this.$.pages.insertBefore(section, sectionAfter);
+      }
+    }.bind(this));
+
+    if (this.currentPageIndex >= this.pages.length)
+      this.currentPageIndex = 0;
+  },
+
+  /** Creates a section for 'core-animated-pages' for the given element.
+   *
+   * @param {HTMLElement} element Element to add to 'core-animated-pages'.
+   * @private
+   */
+  createSection_: function(element) {
+    element.setAttribute('cross-fade', '');
+    var section = document.createElement('section');
+    section.appendChild(element);
+    return section;
+  },
+});