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..41f40970aea671a8a22721e998bcc3af76152a70
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_network_list/cr_network_list.js
@@ -0,0 +1,66 @@
+// 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

[Jeremy Klein, 2015/04/23 18:21:15]

nit: Wrap types in {}

[stevenjb, 2015/04/24 01:25:26]

Done.

+     * @default 1000

[Jeremy Klein, 2015/04/23 18:21:15]

Why not 200?

[stevenjb, 2015/04/24 01:25:26]

Here I don't want to impose any specific layout sizing in an element; that
should be a property of the page.

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

[michaelpg, 2015/04/23 02:16:29]

@default null?

[stevenjb, 2015/04/24 01:25:26]

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).
+   */
+  onResized: function() {
+    if (this.opened)
+      this.$.networkList.updateSize();
+  },
+
+  /**
+   * Event triggered when a list item is selected.
+   * @param {{detail: CrOncDataElement}} event
+   */
+  onSelected: function(event) {
+    this.fire('selected', event.detail.item.networkState);
+    event.stopPropagation();

[Jeremy Klein, 2015/04/23 18:21:15]

Why stopPropagation here?

[stevenjb, 2015/04/24 01:25:26]

Here it probably doesn't make sense to do this. Done.

+ }
+});