Implement md-settings network lists.

ui/webui/resources/cr_elements/cr_network_list/cr_network_list.js

Index: ui/webui/resources/cr_elements/cr_network_list/cr_network_list.js
diff --git a/ui/webui/resources/cr_elements/cr_network_list/cr_network_list.js b/ui/webui/resources/cr_elements/cr_network_list/cr_network_list.js
new file mode 100644
index 0000000000000000000000000000000000000000..b773070c4d0a3a25115ac26356cd7f63ec47d173
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_network_list/cr_network_list.js
@@ -0,0 +1,67 @@
+// 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 Polymer element for displaying a collapsable list of networks.
+ */
+
+/**
+ * Polymer class definition for 'cr-network-list'.
+ * @element cr-network-list
+ */
+Polymer('cr-network-list', {
+  publish: {
+    /**
+     * The maximum height in pixels for the list.
+     *
+     * @attribute maxHeight
+     * @type {number}
+     * @default 1000
+     */
+    maxHeight: 1000,

[Jeremy Klein, 2015/04/27 22:29:03]

nit: Is this ever changed anywhere? If not, can we just get rid of it and do
this in the css for simplicity?

[stevenjb, 2015/04/28 01:05:02]

Yes, it can (and probably should) be changed by whatever owns it. In this case,
cr-network-summary-item, which sets it to 200 (for now, we'll tune that later).

Other UI (e.g. the OOBE UI) may also end up using this element, and may want to
size it differently, which is why we expose the attribute.

+
+    /**
+     * The list of network state properties for the items to display.
+     *
+     * @attribute networks
+     * @type {!Array<!CrOncDataElement>}
+     * @default []
+     */
+    networks: [],

[Jeremy Klein, 2015/04/27 22:29:03]

Array initialization should be in the created callback like for Objects.

[stevenjb, 2015/04/28 01:05:02]

Done.

+
+    /**
+     * True if the list is opened.
+     *
+     * @attribute opened
+     * @type {boolean}
+     * @default false
+     */
+    opened: false,
+  },
+
+  /**
+   * Polymer maxHeight changed method.
+   */
+  maxHeightChanged: function() {
+    this.$.container.style.maxHeight = this.maxHeight + "px";
+  },
+
+  /**
+   * Called when the cr-collapse element changes size (i.e. is opened).
+   * @private
+   */
+  onResized_: function() {
+    if (this.opened)
+      this.$.networkList.updateSize();
+  },
+
+  /**
+   * Event triggered when a list item is selected.
+   * @param {!{detail: CrOncDataElement}} event
+   * @private
+   */
+  onSelected_: function(event) {
+    this.fire('selected', event.detail.item.networkState);
+  }
+});