Add cr-network-select element for selecting a Chrome OS network

The purpose of this CL is to provide a network select UI for
pages other than Settings, specifically the OOBE Ui.

This CL:
* Moves cr_network_icon and cr_onc_types to cr_elements/network
* Moves cr_network_list and cr_network_list_item to cr_elements/network
* Introduces a cr_network_select wrapper to cr_elements/network
  The wrapper implements the networkingPrivate calls required to
  connect to a network or show the configure UI for a network.
* Adds cr_network_select to chrome://network to demonstrate it
  and provide convenient access within that page while testing.

BUG=515987

Review URL: https://codereview.chromium.org/1277223002

Cr-Commit-Position: refs/heads/master@{#342705}

35 files changed, 564 insertions, 30 deletions

diff --git a/ui/chromeos/ui_chromeos_strings.grd b/ui/chromeos/ui_chromeos_strings.grd
index 2599013..30e2353 100644
--- a/ui/chromeos/ui_chromeos_strings.grd
+++ b/ui/chromeos/ui_chromeos_strings.grd
@@ -199,13 +199,13 @@
       <message name="IDS_ASH_STATUS_TRAY_INITIALIZING_CELLULAR" desc="Message for the status area when initializing the cellular device.">
         Initializing cellular modem...
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_NETWORK_ACTIVATING" desc="Message for the network tray tooltip and default menu text when activating a network.">
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_ACTIVATING" desc="Message for the network tray tooltip and network list when activating a network.">
         Activating <ph name="NAME">$1<ex>YBH Cellular</ex></ph>
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_NETWORK_CONNECTED" desc="Message for the network tray tooltip and default menu text when connected to a network.">
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_CONNECTED" desc="Message for the network tray tooltip and network list when connected to a network.">
         Connected to <ph name="NAME">$1<ex>GoogleGuest</ex></ph>
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_NETWORK_CONNECTING" desc="Message for the network tray tooltip and default menu text when connecting to a network.">
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_CONNECTING" desc="Message for the network tray tooltip and network list when connecting to a network.">
         Connecting to <ph name="NAME">$1<ex>GoogleGuest</ex></ph>
       </message>
       <message name="IDS_ASH_STATUS_TRAY_NETWORK_LIST_ACTIVATE" desc="Message for the network list to activate the network.">
@@ -217,7 +217,7 @@
       <message name="IDS_ASH_STATUS_TRAY_NETWORK_LIST_CONNECTING" desc="Message for the network list when connecting to a network.">
         <ph name="NAME">$1<ex>GoogleGuest</ex></ph>: Connecting...
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_NETWORK_NOT_CONNECTED" desc="Description in status area or network dropdown when no network is connected.">
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_NOT_CONNECTED" desc="Description in status area or network list when no network is connected.">
         No network
       </message>
 
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_1x.png b/ui/webui/resources/cr_elements/network/badge_1x.png
index 2d11aee..2d11aee 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_1x.png
+++ b/ui/webui/resources/cr_elements/network/badge_1x.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_3g.png b/ui/webui/resources/cr_elements/network/badge_3g.png
index cfe578b..cfe578b 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_3g.png
+++ b/ui/webui/resources/cr_elements/network/badge_3g.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_4g.png b/ui/webui/resources/cr_elements/network/badge_4g.png
index 0729051..0729051 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_4g.png
+++ b/ui/webui/resources/cr_elements/network/badge_4g.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_edge.png b/ui/webui/resources/cr_elements/network/badge_edge.png
index 1620182..1620182 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_edge.png
+++ b/ui/webui/resources/cr_elements/network/badge_edge.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_evdo.png b/ui/webui/resources/cr_elements/network/badge_evdo.png
index 7742ace..7742ace 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_evdo.png
+++ b/ui/webui/resources/cr_elements/network/badge_evdo.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_gsm.png b/ui/webui/resources/cr_elements/network/badge_gsm.png
index b6690aa..b6690aa 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_gsm.png
+++ b/ui/webui/resources/cr_elements/network/badge_gsm.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_hspa.png b/ui/webui/resources/cr_elements/network/badge_hspa.png
index c1760fe..c1760fe 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_hspa.png
+++ b/ui/webui/resources/cr_elements/network/badge_hspa.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_hspa_plus.png b/ui/webui/resources/cr_elements/network/badge_hspa_plus.png
index ff2ac50..ff2ac50 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_hspa_plus.png
+++ b/ui/webui/resources/cr_elements/network/badge_hspa_plus.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_lte.png b/ui/webui/resources/cr_elements/network/badge_lte.png
index 16d3157..16d3157 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_lte.png
+++ b/ui/webui/resources/cr_elements/network/badge_lte.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_lte_advanced.png b/ui/webui/resources/cr_elements/network/badge_lte_advanced.png
index d97c035..d97c035 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_lte_advanced.png
+++ b/ui/webui/resources/cr_elements/network/badge_lte_advanced.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_roaming.png b/ui/webui/resources/cr_elements/network/badge_roaming.png
index 7036c55..7036c55 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_roaming.png
+++ b/ui/webui/resources/cr_elements/network/badge_roaming.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/badge_secure.png b/ui/webui/resources/cr_elements/network/badge_secure.png
index a1c76eeb..a1c76eeb 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/badge_secure.png
+++ b/ui/webui/resources/cr_elements/network/badge_secure.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/ethernet.png b/ui/webui/resources/cr_elements/network/ethernet.png
index 2db7fa0..2db7fa0 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/ethernet.png
+++ b/ui/webui/resources/cr_elements/network/ethernet.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/mobile.png b/ui/webui/resources/cr_elements/network/mobile.png
index 9c2d026..9c2d026 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/mobile.png
+++ b/ui/webui/resources/cr_elements/network/mobile.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/vpn.png b/ui/webui/resources/cr_elements/network/vpn.png
index 5503851..5503851 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/vpn.png
+++ b/ui/webui/resources/cr_elements/network/vpn.png
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/wifi.png b/ui/webui/resources/cr_elements/network/wifi.png
index f3c281f..f3c281f 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/wifi.png
+++ b/ui/webui/resources/cr_elements/network/wifi.png
diff --git a/ui/webui/resources/cr_elements/v1_0/demo_element.html b/ui/webui/resources/cr_elements/v1_0/demo_element.html
index 181bbb7..e3876c9 100644
--- a/ui/webui/resources/cr_elements/v1_0/demo_element.html
+++ b/ui/webui/resources/cr_elements/v1_0/demo_element.html
@@ -5,8 +5,8 @@
 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_collapse/cr_collapse.html">
 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_input/cr_input.html">
-<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/v1_0/cr_toggle_button/cr_toggle_button.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_network_icon.html">
 
 <dom-module id="cr-demo-element">
   <link rel="import" type="css" href="demo_element.css">
diff --git a/ui/webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.css b/ui/webui/resources/cr_elements/v1_0/network/cr_network_icon.css
index 8c8603e..8c8603e 100644
--- a/ui/webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.css
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_icon.css
diff --git a/ui/webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.html b/ui/webui/resources/cr_elements/v1_0/network/cr_network_icon.html
index bee4b3c..cd5dafa 100644
--- a/ui/webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.html
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_icon.html
@@ -1,5 +1,5 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
-<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_onc/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_onc_types.html">
 
 <dom-module id="cr-network-icon">
   <link rel="import" type="css" href="cr_network_icon.css">
@@ -8,10 +8,10 @@
     <img id="technology" alt="" src$="[[toBadgeImageSrc_(technology_)]]"
         hidden$="[[!technology_]]">
     <img id="roaming" alt=""
-        src="chrome://resources/cr_elements/cr_network_icon/badge_roaming.png"
+        src="chrome://resources/cr_elements/network/badge_roaming.png"
         hidden$="[[!roaming_]]">
     <img id="secure" alt=""
-        src="chrome://resources/cr_elements/cr_network_icon/badge_secure.png"
+        src="chrome://resources/cr_elements/network/badge_secure.png"
         hidden$="[[!secure_]]">
   </template>
   <script src="cr_network_icon.js"></script>
diff --git a/ui/webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.js b/ui/webui/resources/cr_elements/v1_0/network/cr_network_icon.js
index 579b650..abe5d1c 100644
--- a/ui/webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.js
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_icon.js
@@ -18,7 +18,7 @@
 var IconParams;
 
 /** @const {string} */ var RESOURCE_IMAGE_BASE =
-    'chrome://resources/cr_elements/cr_network_icon/';
+    'chrome://resources/cr_elements/network/';
 
 /** @const {string} */ var RESOURCE_IMAGE_EXT = '.png';
 
diff --git a/ui/webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon_externs.js b/ui/webui/resources/cr_elements/v1_0/network/cr_network_icon_externs.js
index 47bf294f..47bf294f 100644
--- a/ui/webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon_externs.js
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_icon_externs.js
diff --git a/ui/webui/resources/cr_elements/v1_0/network/cr_network_list.css b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list.css
new file mode 100644
index 0000000..b4d5de0
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list.css
@@ -0,0 +1,15 @@
+/* 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. */
+
+#container {
+  border: 1px solid;
+  max-height: 1000px;
+  min-height: 50px;
+  overflow-y: auto;
+}
+
+/* Note: the 'flex' attribute on core-list doesn't work as expected. */
+#networkList {
+  flex: 1;
+}
diff --git a/ui/webui/resources/cr_elements/v1_0/network/cr_network_list.html b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list.html
new file mode 100644
index 0000000..fe2c5bc
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list.html
@@ -0,0 +1,21 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_collapse/cr_collapse.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_network_list_item.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_onc_types.html">
+
+<dom-module id="cr-network-list">
+  <link rel="import" type="css" href="cr_network_list.css">
+  <template>
+    <cr-collapse on-core-resize="onResized_" opened="{{opened}}">
+      <div id="container" class="layout vertical flex">
+        <template is="dom-repeat" items="[[networks]]">
+          <cr-network-list-item network-state="[[item]]" is-list-item
+              on-click="onSelected_">
+          </cr-network-list-item>
+        </template>
+      </div>
+    </cr-collapse>
+  </template>
+  <script src="cr_network_list.js"></script>
+</dom-module>
diff --git a/ui/webui/resources/cr_elements/v1_0/network/cr_network_list.js b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list.js
new file mode 100644
index 0000000..018a211
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list.js
@@ -0,0 +1,73 @@
+// 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.
+ */
+
+(function() {
+
+/**
+ * Polymer class definition for 'cr-network-list'.
+ * TODO(stevenjb): Update with iron-list(?) once implemented in Polymer 1.0.
+ * @element cr-network-list
+ */
+Polymer({
+  is: 'cr-network-list',
+
+  properties: {
+    /**
+     * The maximum height in pixels for the list.
+     */
+    maxHeight: {
+      type: Number,
+      value: 1000,
+      observer: 'maxHeightChanged_'
+    },
+
+    /**
+     * The list of network state properties for the items to display.
+     *
+     * @type {!Array<!CrOnc.NetworkStateProperties>}
+     */
+    networks: {
+      type: Array,
+      value: function() { return []; }
+    },
+
+    /**
+     * True if the list is opened.
+     */
+    opened: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  /**
+   * 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 {!{target: !NetworkListItem}} event
+   * @private
+   */
+  onSelected_: function(event) {
+    this.fire('selected', event.model.item);
+  }
+});
+})();
diff --git a/ui/webui/resources/cr_elements/v1_0/network/cr_network_list_item.css b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list_item.css
new file mode 100644
index 0000000..6a48744
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list_item.css
@@ -0,0 +1,63 @@
+/* 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. */
+
+:host {
+  display: inline-block;
+}
+
+span {
+  cursor: pointer;
+}
+
+#divOuter {
+  border-style: none;
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+  padding: 4px;
+}
+
+#divOuter.list-item:hover {
+  background-color: lightgrey;
+}
+
+#divIcon {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#icon {
+  height: 32px;
+  width: 32px;
+}
+
+#divDetail {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: row;
+}
+
+#divText {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#networkName {
+  -webkit-margin-start: 8px;
+  font-size: 16px;
+}
+
+#networkStateText {
+  -webkit-margin-start: 8px;
+  color: grey;
+  font-size: 14px;
+}
+
+.connected {
+  font-weight: bold;
+}
diff --git a/ui/webui/resources/cr_elements/v1_0/network/cr_network_list_item.html b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list_item.html
new file mode 100644
index 0000000..b9110e5
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list_item.html
@@ -0,0 +1,21 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_onc_types.html">
+
+<dom-module id="cr-network-list-item">
+  <link rel="import" type="css" href="cr_network_list_item.css">
+  <template>
+    <div id="divOuter" class$="[[isListItemClass_(isListItem)]]">
+      <div id="divIcon">
+        <cr-network-icon id="icon" is-list-item="[[isListItem]]"
+            network-state="[[networkState]]">
+        </cr-network-icon>
+      </div>
+      <div id="divText">
+        <span id="networkName"></span>
+        <span id="networkStateText" hidden$="[[isListItem]]"></span>
+      </div>
+    </div>
+  </template>
+  <script src="cr_network_list_item.js"></script>
+</dom-module>
diff --git a/ui/webui/resources/cr_elements/v1_0/network/cr_network_list_item.js b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list_item.js
new file mode 100644
index 0000000..f2db8e0
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_list_item.js
@@ -0,0 +1,126 @@
+// 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 information about a network
+ * in a list or summary based on ONC state properties.
+ */
+(function() {
+
+/**
+ * TODO(stevenjb): Replace getText with a proper localization function that
+ * handles string substitution.
+ * Performs argument substitution, replacing $1, $2, etc in 'text' with
+ * corresponding entries in |args|.
+ * @param {string} text The string to perform the substitution on.
+ * @param {?Array<string>} args The arguments to replace $1, $2, etc with.
+ */
+function getText(text, args) {
+  var res;
+  if (loadTimeData && loadTimeData.data_)
+    res = loadTimeData.getString(text) || text;
+  else
+    res = text;
+  if (!args)
+    return res;
+  for (var i = 0; i < args.length; ++i) {
+    var key = '$' + (i + 1);
+    res = res.replace(key, args[i]);
+  }
+  return res;
+}
+
+/**
+ * Returns the appropriate connection state text.
+ * @param {string} state The connection state.
+ * @param {string} name The name of the network.
+ */
+function getConnectionStateText(state, name) {
+  if (state == CrOnc.ConnectionState.CONNECTED)
+    return getText('networkConnected', [name]);
+  if (state == CrOnc.ConnectionState.CONNECTING)
+    return getText('networkConnecting', [name]);
+  if (state == CrOnc.ConnectionState.NOT_CONNECTED)
+    return getText('networkNotConnected');
+  return getText(state);
+};
+
+/**
+ * Polymer class definition for 'cr-network-list-item'.
+ * @element cr-network-list-item
+ */
+Polymer({
+  is: 'cr-network-list-item',
+
+  properties: {
+    /**
+     * The ONC data properties used to display the list item.
+     *
+     * @type {?CrOnc.NetworkStateProperties}
+     */
+    networkState: {
+      type: Object,
+      value: null,
+      observer: 'networkStateChanged_'
+    },
+
+    /**
+     * If true, the element is part of a list of networks and only displays
+     * the network icon and name. Otherwise the element is assumed to be a
+     * stand-alone item (e.g. as part of a summary) and displays the name
+     * of the network type plus the network name and connection state.
+     */
+    isListItem: {
+      type: Boolean,
+      value: false,
+      observer: 'networkStateChanged_'
+    },
+  },
+
+  /**
+   * Polymer networkState changed method. Updates the element based on the
+   * network state.
+   */
+  networkStateChanged_: function() {
+    if (!this.networkState)
+      return;
+
+    var network = this.networkState;
+    var isDisconnected =
+        network.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED;
+    if (this.isListItem) {
+      var name = network.Name || getText('OncType' + network.Type);
+      this.$.networkName.textContent = name;
+      this.$.networkName.classList.toggle('connected', !isDisconnected);
+      return;
+    }
+    if (network.Name && network.ConnectionState) {
+      this.$.networkName.textContent = getText('OncType' + network.Type);
+      this.$.networkName.classList.toggle('connected', false);
+      this.$.networkStateText.textContent =
+          getConnectionStateText(network.ConnectionState, network.Name);
+      this.$.networkStateText.classList.toggle('connected', !isDisconnected);
+      return;
+    }
+    this.$.networkName.textContent = getText('OncType' + network.Type);
+    this.$.networkName.classList.toggle('connected', false);
+    this.$.networkStateText.textContent = getText('networkDisabled');
+    this.$.networkStateText.classList.toggle('connected', false);
+
+    if (network.Type == CrOnc.Type.CELLULAR) {
+      if (!network.GUID)
+        this.$.networkStateText.textContent = getText('networkDisabled');
+    }
+  },
+
+  /**
+   * @param {string} isListItem The value of this.isListItem.
+   * @return {string} The class name based on isListItem.
+   * @private
+   */
+  isListItemClass_: function(isListItem) {
+    return isListItem ? 'list-item' : '';
+  }
+});
+})();
diff --git a/ui/webui/resources/cr_elements/v1_0/network/cr_network_select.css b/ui/webui/resources/cr_elements/v1_0/network/cr_network_select.css
new file mode 100644
index 0000000..204e397
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_select.css
@@ -0,0 +1,7 @@
+/* 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. */
+
+:host {
+  display: inline-block;
+}
diff --git a/ui/webui/resources/cr_elements/v1_0/network/cr_network_select.html b/ui/webui/resources/cr_elements/v1_0/network/cr_network_select.html
new file mode 100644
index 0000000..28bb7c2
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_select.html
@@ -0,0 +1,27 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_expand_button/cr_expand_button.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_network_list.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_network_list_item.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/network/cr_onc_types.html">
+
+<dom-module id="cr-network-select">
+  <link rel="import" type="css" href="cr_network_select.css">
+  <template>
+    <div class="layout vertical">
+      <div class="layout horizontal center">
+        <cr-network-list-item class="flex" hidden$="[[!showActive]]"
+            network-state="[[activeNetworkState]]">
+        </cr-network-list-item>
+        <cr-expand-button toggles hidden$="[[!expandable]]"
+            expanded="{{networkListOpened}}">
+        </cr-expand-button>
+      </div>
+      <cr-network-list opened="[[networkListOpened]]" max-height="[[maxHeight]]"
+          networks="[[networkStateList]]"
+          on-selected="onNetworkListItemSelected_">
+      </cr-network-list>
+    </div>
+  </template>
+  <script src="cr_network_select.js"></script>
+</dom-module>
diff --git a/ui/webui/resources/cr_elements/v1_0/network/cr_network_select.js b/ui/webui/resources/cr_elements/v1_0/network/cr_network_select.js
new file mode 100644
index 0000000..75677b5
--- /dev/null
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_network_select.js
@@ -0,0 +1,154 @@
+// 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 wrapping cr-network-list including the
+ * networkingPrivate calls to populate it.
+ */
+
+/**
+ * @element cr-network-select
+ */
+Polymer({
+  is: 'cr-network-select',
+
+  properties: {
+    /**
+     * Network state for the active network.
+     * @type {?CrOnc.NetworkStateProperties}
+     */
+    activeNetworkState: {
+      type: Object,
+      value: null
+    },
+
+    /**
+     * If true, the element includes an 'expand' button that toggles the
+     * expanded state of the network list.
+     */
+    expandable: {
+      type: Boolean,
+      value: false
+    },
+
+    /**
+     * The maximum height in pixels for the list.
+     */
+    maxHeight: {
+      type: Number,
+      value: 1000
+    },
+
+    /**
+     * If true, expand the network list.
+     */
+    networkListOpened: {
+      type: Boolean,
+      value: true,
+      observer: "networkListOpenedChanged_"
+    },
+
+    /**
+     * If true, show the active network state.
+     */
+    showActive: {
+      type: Boolean,
+      value: false
+    },
+
+    /**
+     * List of all network state data for all visible networks.
+     * @type {!Array<!CrOnc.NetworkStateProperties>}
+     */
+    networkStateList: {
+      type: Array,
+      value: function() { return []; }
+    }
+  },
+
+  /**
+   * Listener function for chrome.networkingPrivate.onNetworkListChanged event.
+   * @type {?function(!Array<string>)}
+   * @private
+   */
+  networkListChangedListener_: null,
+
+  /**
+   * Listener function for chrome.networkingPrivate.onDeviceStateListChanged
+   * event.
+   * @type {?function(!Array<string>)}
+   * @private
+   */
+  deviceStateListChangedListener_: null,
+
+  /** @override */
+  attached: function() {
+    this.networkListChangedListener_ = this.refreshNetworks_.bind(this);
+    chrome.networkingPrivate.onNetworkListChanged.addListener(
+        this.networkListChangedListener_);
+
+    this.deviceStateListChangedListener_ = this.refreshNetworks_.bind(this);
+    chrome.networkingPrivate.onDeviceStateListChanged.addListener(
+        this.deviceStateListChangedListener_);
+
+    this.refreshNetworks_();
+    chrome.networkingPrivate.requestNetworkScan();
+  },
+
+  /** @override */
+  detached: function() {
+    chrome.networkingPrivate.onNetworksChanged.removeListener(
+        this.networksChangedListener_);
+    chrome.networkingPrivate.onDeviceStateListChanged.removeListener(
+        this.deviceStateListChangedListener_);
+  },
+
+  /**
+   * Polymer chnaged function.
+   * @private
+   */
+  networkListOpenedChanged_: function() {
+    if (this.networkListOpened)
+      chrome.networkingPrivate.requestNetworkScan();
+  },
+
+  /**
+   * Request the list of visible networks.
+   * @private
+   */
+  refreshNetworks_: function() {
+    var filter = {
+      networkType: 'All',
+      visible: true,
+      configured: false
+    };
+    chrome.networkingPrivate.getNetworks(
+        filter, this.getNetworksCallback_.bind(this));
+  },
+
+  /**
+   * @param {!Array<!CrOnc.NetworkStateProperties>} states
+   * @private
+   */
+  getNetworksCallback_: function(states) {
+    this.activeNetworkState = states[0] || null;
+    this.networkStateList = states;
+  },
+
+  /**
+   * Event triggered when a cr-network-list-item is selected.
+   * @param {!{detail: !CrOnc.NetworkStateProperties}} event
+   * @private
+   */
+  onNetworkListItemSelected_: function(event) {
+    var state = event.detail;
+    if (state.ConnectionState != CrOnc.ConnectionState.NOT_CONNECTED)
+      return;
+    chrome.networkingPrivate.startConnect(state.GUID, function() {
+      var lastError = chrome.runtime.lastError;
+      if (lastError && lastError != 'connecting')
+        console.error('networkingPrivate.startConnect error:', lastError);
+    });
+  },
+});
diff --git a/ui/webui/resources/cr_elements/v1_0/cr_onc/cr_onc_types.html b/ui/webui/resources/cr_elements/v1_0/network/cr_onc_types.html
index 6794ad3..6794ad3 100644
--- a/ui/webui/resources/cr_elements/v1_0/cr_onc/cr_onc_types.html
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_onc_types.html
diff --git a/ui/webui/resources/cr_elements/v1_0/cr_onc/cr_onc_types.js b/ui/webui/resources/cr_elements/v1_0/network/cr_onc_types.js
index ca630c1..ca630c1 100644
--- a/ui/webui/resources/cr_elements/v1_0/cr_onc/cr_onc_types.js
+++ b/ui/webui/resources/cr_elements/v1_0/network/cr_onc_types.js
diff --git a/ui/webui/resources/cr_elements_images.grdp b/ui/webui/resources/cr_elements_images.grdp
index 571301a..96dc03d 100644
--- a/ui/webui/resources/cr_elements_images.grdp
+++ b/ui/webui/resources/cr_elements_images.grdp
@@ -1,51 +1,51 @@
 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_CDMA1XRTT"
-           file="cr_elements/cr_network_icon/badge_1x.png" 
+           file="cr_elements/network/badge_1x.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_3G"
-           file="cr_elements/cr_network_icon/badge_3g.png" 
+           file="cr_elements/network/badge_3g.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_4G"
-           file="cr_elements/cr_network_icon/badge_4g.png" 
+           file="cr_elements/network/badge_4g.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_EDGE"
-           file="cr_elements/cr_network_icon/badge_edge.png" 
+           file="cr_elements/network/badge_edge.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_EVDO"
-           file="cr_elements/cr_network_icon/badge_evdo.png" 
+           file="cr_elements/network/badge_evdo.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_GPRS"
-           file="cr_elements/cr_network_icon/badge_gsm.png" 
+           file="cr_elements/network/badge_gsm.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_HSPA"
-           file="cr_elements/cr_network_icon/badge_hspa.png" 
+           file="cr_elements/network/badge_hspa.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_HSPA_PLUS"
-           file="cr_elements/cr_network_icon/badge_hspa_plus.png" 
+           file="cr_elements/network/badge_hspa_plus.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_LTE"
-           file="cr_elements/cr_network_icon/badge_lte.png" 
+           file="cr_elements/network/badge_lte.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_LTE_ADVANCED"
-           file="cr_elements/cr_network_icon/badge_lte_advanced.png" 
+           file="cr_elements/network/badge_lte_advanced.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_ROAMING"
-           file="cr_elements/cr_network_icon/badge_roaming.png" 
+           file="cr_elements/network/badge_roaming.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_BADGE_SECURE"
-           file="cr_elements/cr_network_icon/badge_secure.png" 
+           file="cr_elements/network/badge_secure.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_ICON_ETHERNET"
-           file="cr_elements/cr_network_icon/ethernet.png" 
+           file="cr_elements/network/ethernet.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_ICON_MOBILE"
-           file="cr_elements/cr_network_icon/mobile.png" 
+           file="cr_elements/network/mobile.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_ICON_VPN"
-           file="cr_elements/cr_network_icon/vpn.png" 
+           file="cr_elements/network/vpn.png" 
            type="BINDATA" />
   <include name="IDR_WEBUI_CR_ELEMENTS_NETWORK_ICON_WIFI"
-           file="cr_elements/cr_network_icon/wifi.png" 
+           file="cr_elements/network/wifi.png" 
            type="BINDATA" />
 </grit-part>
diff --git a/ui/webui/resources/cr_elements_resources.grdp b/ui/webui/resources/cr_elements_resources.grdp
index f0d343a..23df251 100644
--- a/ui/webui/resources/cr_elements_resources.grdp
+++ b/ui/webui/resources/cr_elements_resources.grdp
@@ -70,19 +70,46 @@
              file="../../webui/resources/cr_elements/v1_0/cr_input/cr_input.js"
              type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_ICON_CSS"
-             file="../../webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.css"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_icon.css"
              type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_ICON_HTML"
-             file="../../webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.html"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_icon.html"
              type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_ICON_JS"
-             file="../../webui/resources/cr_elements/v1_0/cr_network_icon/cr_network_icon.js"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_icon.js"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_LIST_CSS"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_list.css"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_LIST_HTML"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_list.html"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_LIST_JS"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_list.js"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_LIST_ITEM_CSS"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_list_item.css"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_LIST_ITEM_HTML"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_list_item.html"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_LIST_ITEM_JS"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_list_item.js"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_SELECT_CSS"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_select.css"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_SELECT_HTML"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_select.html"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_1_0_CR_NETWORK_SELECT_JS"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_network_select.js"
              type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_1_0_CR_ONC_TYPES_HTML"
-             file="../../webui/resources/cr_elements/v1_0/cr_onc/cr_onc_types.html"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_onc_types.html"
              type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_1_0_CR_ONC_TYPES_JS"
-             file="../../webui/resources/cr_elements/v1_0/cr_onc/cr_onc_types.js"
+             file="../../webui/resources/cr_elements/v1_0/network/cr_onc_types.js"
              type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_1_0_CR_TOGGLE_BUTTON_CSS"
              file="../../webui/resources/cr_elements/v1_0/cr_toggle_button/cr_toggle_button.css"