Implement md-settings network lists.

* Adds cr-network-list and cr-expand-button
* Adds network-summary-item containing expandable network list
* Implements 'connect' functionality for selected networks

BUG=475667

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

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

chrome/browser/resources/settings/internet_page/internet_page.js

@@ -24,7 +24,7 @@ Polymer('cr-settings-internet-page', {
      * ID of the page.
      *
      * @attribute PAGE_ID
-     * @const string
+     * @const {string}
      */
     PAGE_ID: 'internet',
 
@@ -32,7 +32,7 @@ Polymer('cr-settings-internet-page', {
      * Route for the page.
      *
      * @attribute route
-     * @type string
+     * @type {string}
      * @default ''
      */
     route: '',
@@ -41,7 +41,7 @@ Polymer('cr-settings-internet-page', {
      * Whether the page is a subpage.
      *
      * @attribute subpage
-     * @type boolean
+     * @type {boolean}
      * @default false
      */
     subpage: false,
@@ -50,7 +50,7 @@ Polymer('cr-settings-internet-page', {
      * Title for the page header and navigation menu.
      *
      * @attribute pageTitle
-     * @type string
+     * @type {string}
      */
     pageTitle: loadTimeData.getString('internetPageTitle'),
 
@@ -59,7 +59,7 @@ Polymer('cr-settings-internet-page', {
      * icon for the active internet connection.
      *
      * @attribute icon
-     * @type string
+     * @type {string}
      * @default 'settings-ethernet'
      */
     icon: 'settings-ethernet',

chrome/browser/resources/settings/internet_page/network_summary.html

 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_network_list_item/cr_network_list_item.html">
+<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_onc/cr_onc_data.html">
+<link rel="import" href="network_summary_item.html">
 <link rel="import" href="network_summary_style.html">
 
 <polymer-element name="cr-network-summary">
   <template>
     <core-style ref="networkSummaryStyle"></core-style>
     <div id="summary" vertical layout>
-      <cr-network-list-item networkState="{{networkStates.Ethernet}}"
-          hidden?="{{!networkStates.Ethernet}}">
-      </cr-network-list-item>
-      <cr-network-list-item networkState="{{networkStates.WiFi}}"
-          hidden?="{{!networkStates.WiFi}}">
-      </cr-network-list-item>
-      <cr-network-list-item networkState="{{networkStates.Cellular}}"
-          hidden?="{{!networkStates.Cellular}}">
-      </cr-network-list-item>
-      <cr-network-list-item networkState="{{networkStates.WiMAX}}"
-          hidden?="{{!networkStates.WiMAX}}">
-      </cr-network-list-item>
-      <cr-network-list-item networkState="{{networkStates.VPN}}"
-          hidden?="{{!networkStates.VPN}}">
-      </cr-network-list-item>
+      <cr-network-summary-item
+          deviceState="{{deviceStates.Ethernet}}"
+          networkState="{{networkStates.Ethernet}}"
+          networkStateList="{{networkStateLists.Ethernet}}"
+          on-selected="{{onSelected_}}">
+      </cr-network-summary-item>
+      <cr-network-summary-item
+          deviceState="{{deviceStates.WiFi}}"
+          networkState="{{networkStates.WiFi}}"
+          networkStateList="{{networkStateLists.WiFi}}"
+          on-expanded="{{onWiFiExpanded_}}"
+          on-selected="{{onSelected_}}"
+          on-device-enabled-toggled="{{onDeviceEnabledToggled_}}">
+      </cr-network-summary-item>
+      <cr-network-summary-item
+          deviceState="{{deviceStates.Cellular}}"
+          networkState="{{networkStates.Cellular}}"
+          networkStateList="{{networkStateLists.Cellular}}"
+          on-selected="{{onSelected_}}"
+          on-device-enabled-toggled="{{onDeviceEnabledToggled_}}">
+      </cr-network-summary-item>
+      <cr-network-summary-item
+          deviceState="{{deviceStates.WiMAX}}"
+          networkState="{{networkStates.WiMAX}}"
+          networkStateList="{{networkStateLists.WiMAX}}"
+          on-selected="{{onSelected_}}"
+          on-device-enabled-toggled="{{onDeviceEnabledToggled_}}">
+      </cr-network-summary-item>
+      <cr-network-summary-item
+          deviceState="{{deviceStates.VPN}}"
+          networkState="{{networkStates.VPN}}"
+          networkStateList="{{networkStateLists.VPN}}"
+          on-selected="{{onSelected_}}">
+      </cr-network-summary-item>
     </div>
   </template>
   <script src="network_summary.js"></script>

chrome/browser/resources/settings/internet_page/network_summary.js

@@ -6,57 +6,130 @@
  * @fileoverview Polymer element for displaying a summary of network states
  * by type: Ethernet, WiFi, Cellular, WiMAX, and VPN.
  */
+(function() {
+
+/** @typedef {chrome.networkingPrivate.DeviceStateProperties} */
+var DeviceStateProperties;
+
+/** @typedef {chrome.networkingPrivate.NetworkStateProperties} */
+var NetworkStateProperties;
+
+/**
+ * @typedef {{
+ *   Ethernet: (DeviceStateProperties|undefined),
+ *   WiFi: (DeviceStateProperties|undefined),
+ *   Cellular: (DeviceStateProperties|undefined),
+ *   WiMAX: (DeviceStateProperties|undefined),
+ *   VPN: (DeviceStateProperties|undefined)
+ * }}
+ */
+var DeviceStateObject;
+
+/**
+ * @typedef {{
+ *   Ethernet: (CrOncDataElement|undefined),
+ *   WiFi: (CrOncDataElement|undefined),
+ *   Cellular: (CrOncDataElement|undefined),
+ *   WiMAX: (CrOncDataElement|undefined),
+ *   VPN: (CrOncDataElement|undefined)
+ * }}
+ */
+var NetworkStateObject;
+
+/**
+ * @typedef {{
+ *   Ethernet: (Array<CrOncDataElement>|undefined),
+ *   WiFi: (Array<CrOncDataElement>|undefined),
+ *   Cellular: (Array<CrOncDataElement>|undefined),
+ *   WiMAX: (Array<CrOncDataElement>|undefined),
+ *   VPN: (Array<CrOncDataElement>|undefined)
+ * }}
+ */
+var NetworkStateListObject;
+
+/** @const {!Array<string>} */
+var NETWORK_TYPES = ['Ethernet', 'WiFi', 'Cellular', 'WiMAX', 'VPN'];
+
 Polymer('cr-network-summary', {
   publish: {
+    /**
+     * The device state for each network device type.
+     *
+     * @attribute deviceStates
+     * @type {?DeviceStateObject}
+     * @default null
+     */
+    deviceStates: null,
+
     /**
      * Network state data for each network type.
      *
      * @attribute networkStates
-     * @type {{
-     *   Ethernet: (CrOncDataElement|undefined),
-     *   WiFi: (CrOncDataElement|undefined),
-     *   Cellular: (CrOncDataElement|undefined),
-     *   WiMAX: (CrOncDataElement|undefined),
-     *   VPN: (CrOncDataElement|undefined)
-     * }}
-     * @default {}
+     * @type {?NetworkStateObject}
+     * @default null
      */
     networkStates: null,
+
+    /**
+     * List of network state data for each network type.
+     *
+     * @attribute networkStateLists
+     * @type {?NetworkStateListObject}
+     * @default null
+     */
+    networkStateLists: null,
   },
 
   /**
    * Listener function for chrome.networkingPrivate.onNetworkListChanged event.
-   * @type {function(!Array<string>)}
+   * @type {?function(!Array<string>)}
    * @private
    */
-  listChangedListener_: null,
+  networkListChangedListener_: null,
+
+  /**
+   * Listener function for chrome.networkingPrivate.onDeviceStateListChanged
+   * event.
+   * @type {?function(!Array<string>)}
+   * @private
+   */
+  deviceStateListChangedListener_: null,
 
   /**
    * Listener function for chrome.networkingPrivate.onNetworksChanged event.
-   * @type {function(!Array<string>)}
+   * @type {?function(!Array<string>)}
    * @private
    */
   networksChangedListener_: null,
 
   /**
    * Dictionary of GUIDs identifying primary (active) networks for each type.
-   * @type {Object}
+   * @type {?Object}
    * @private
    */
-  networkIds_: {},
+  networkIds_: null,
 
   /** @override */
   created: function() {
+    this.deviceStates = {};
     this.networkStates = {};
+    this.networkStateLists = {};
+    this.networkIds_ = {};
   },
 
   /** @override */
   attached: function() {
-    this.getNetworks_();
+    this.getNetworkLists_();
 
-    this.listChangedListener_ = this.onNetworkListChangedEvent_.bind(this);
+    this.networkListChangedListener_ =
+        this.onNetworkListChangedEvent_.bind(this);
     chrome.networkingPrivate.onNetworkListChanged.addListener(
-        this.listChangedListener_);
+        this.networkListChangedListener_);
+
+    this.deviceStateListChangedListener_ =
+        this.onDeviceStateListChangedEvent_.bind(this);
+    chrome.networkingPrivate.onDeviceStateListChanged.addListener(
+        this.deviceStateListChangedListener_);
 
     this.networksChangedListener_ = this.onNetworksChangedEvent_.bind(this);
     chrome.networkingPrivate.onNetworksChanged.addListener(
@@ -66,20 +139,66 @@ Polymer('cr-network-summary', {
   /** @override */
   detached: function() {
     chrome.networkingPrivate.onNetworkListChanged.removeListener(
-        this.listChangedListener_);
+        this.networkListChangedListener_);
+
+    chrome.networkingPrivate.onDeviceStateListChanged.removeListener(
+        this.deviceStateListChangedListener_);
 
     chrome.networkingPrivate.onNetworksChanged.removeListener(
         this.networksChangedListener_);
   },
 
   /**
+   * Event triggered when the WiFi cr-network-summary-item is expanded.
+   * @param {!{detail: {expanded: boolean, type: string}}} event
    * @private
    */
-  onNetworkListChangedEvent_: function() {
-    this.getNetworks_();
+  onWiFiExpanded_: function(event) {
+    this.getNetworkStates_();  // Get the latest network states (only).
+    chrome.networkingPrivate.requestNetworkScan();
   },
 
   /**
+   * Event triggered when a cr-network-summary-item is selected.
+   * @param {!{detail: !CrOncDataElement}} event
+   * @private
+   */
+  onSelected_: function(event) {
+    var onc = event.detail;
+    if (onc.disconnected()) {
+      this.connectToNetwork_(onc);
+      return;
+    }
+    // TODO(stevenjb): Show details for connected or unconfigured networks.
+  },
+
+  /**
+   * Event triggered when the enabled state of a cr-network-summary-item is
+   * toggled.
+   * @param {!{detail: {enabled: boolean, type: string}}} event
+   * @private
+   */
+  onDeviceEnabledToggled_: function(event) {
+    if (event.detail.enabled)
+      chrome.networkingPrivate.enableNetworkType(event.detail.type);
+    else
+      chrome.networkingPrivate.disableNetworkType(event.detail.type);
+  },
+
+  /**
+   * networkingPrivate.onNetworkListChanged event callback.
+   * @private
+   */
+  onNetworkListChangedEvent_: function() { this.getNetworkLists_(); },
+
+  /**
+   * networkingPrivate.onDeviceStateListChanged event callback.
+   * @private
+   */
+  onDeviceStateListChangedEvent_: function() { this.getNetworkLists_(); },
+
+  /**
+   * networkingPrivate.onNetworksChanged event callback.
    * @param {!Array<string>} networkIds The list of changed network GUIDs.
    * @private
    */
@@ -92,48 +211,110 @@ Polymer('cr-network-summary', {
     }, this);
   },
 
-  /** @private */
-  getNetworks_: function() {
+  /**
+   * Handles UI requests to connect to a network.
+   * TODO(stevenjb): Handle Cellular activation, etc.
+   * @param {!CrOncDataElement} state The network state.
+   * @private
+   */
+  connectToNetwork_: function(state) {
+    chrome.networkingPrivate.startConnect(state.data.GUID);
+  },
+
+  /**
+   * Requests the list of device states and network states from Chrome.
+   * Updates deviceStates, networkStates, and networkStateLists once the
+   * results are returned from Chrome.
+   * @private
+   */
+  getNetworkLists_: function() {
+    // First get the device states.
+    chrome.networkingPrivate.getDeviceStates(
+      function(states) {
+        this.getDeviceStatesCallback_(states);
+        // Second get the network states.
+        this.getNetworkStates_();
+      }.bind(this));
+  },
+
+  /**
+   * Requests the list of network states from Chrome. Updates networkStates and
+   * networkStateLists once the results are returned from Chrome.
+   * @private
+   */
+  getNetworkStates_: function() {
     var filter = {
       networkType: 'All',
       visible: true,
       configured: false
     };
-    chrome.networkingPrivate.getNetworks(filter,
-                                         this.getNetworksCallback_.bind(this));
+    chrome.networkingPrivate.getNetworks(
+        filter, this.getNetworksCallback_.bind(this));
   },
 
   /**
-   * @param {!Array<!chrome.networkingPrivate.NetworkStateProperties>} states
-   *     The state properties for all networks.
+   * networkingPrivate.getDeviceStates callback.
+   * @param {!Array<!DeviceStateProperties>} states The state properties for all
+   *     available devices.
+   * @private
+   */
+  getDeviceStatesCallback_: function(states) {
+    /** @type {!DeviceStateObject} */ var newStates = {};
+    states.forEach(function(state) { newStates[state.Type] = state; });
+    this.deviceStates = newStates;
+  },
+
+  /**
+   * networkingPrivate.getNetworksState callback.
+   * @param {!Array<!NetworkStateProperties>} states The state properties for
+   *     all visible networks.
    * @private
    */
   getNetworksCallback_: function(states) {
-    // Clear all active networks.
+    // Clear any current networks.
     this.networkIds_ = {};
 
     // Get the first (active) state for each type.
     var foundTypes = {};
+    /** @type {!NetworkStateListObject} */ var oncNetworks = {
+      Ethernet: [],
+      WiFi: [],
+      Cellular: [],
+      WiMAX: [],
+      VPN: []
+    };
     states.forEach(function(state) {
       var type = state.Type;
       if (!foundTypes[type]) {
         foundTypes[type] = true;
         this.updateNetworkState_(type, state);
       }
+      oncNetworks[type].push(CrOncDataElement.create(state));
+    }, this);
+
+    // Set any types not found to a default value or null.
+    NETWORK_TYPES.forEach(function(type) {
+      if (!foundTypes[type]) {
+        /** @type {NetworkStateProperties} */ var defaultState = null;
+        if (this.deviceStates[type])
+          defaultState = { GUID: '', Type: 'WiFi' };
+        this.updateNetworkState_(type, defaultState);
+      }
     }, this);
 
-    // Set any types not found to null. TODO(stevenjb): Support types that are
-    // disabled but available with no active network.
-    var types = ['Ethernet', 'WiFi', 'Cellular', 'WiMAX', 'VPN'];
-    types.forEach(function(type) {
-      if (!foundTypes[type])
-        this.updateNetworkState_(type, null);
+    // Set the network list for each type.
+    NETWORK_TYPES.forEach(function(type) {
+      this.networkStateLists[type] = oncNetworks[type];
     }, this);
+
+    // Create a VPN entry in deviceStates if there are any VPN networks.
+    if (this.networkStateLists.VPN && this.networkStateLists.VPN.length > 0)
+      this.deviceStates.VPN = { Type: 'VPN', State: 'Enabled' };
   },
 
   /**
-   * @param {!chrome.networkingPrivate.NetworkStateProperties} state The state
-   *     properties for the network.
+   * networkingPrivate.getState callback.
+   * @param {!NetworkStateProperties} state The network state properties.
    * @private
    */
   getStateCallback_: function(state) {
@@ -148,9 +329,9 @@ Polymer('cr-network-summary', {
    * Sets 'networkStates[type]' which will update the cr-network-list-item
    * associated with 'type'.
    * @param {string} type The network type.
-   * @param {chrome.networkingPrivate.NetworkStateProperties} state The state
-   *     properties for the network to associate with |type|. May be null if
-   *     there are no networks matching |type|.
+   * @param {?NetworkStateProperties} state The state properties for the network
+   *     to associate with |type|. May be null if there are no networks matching
+   *     |type|.
    * @private
    */
   updateNetworkState_: function(type, state) {
@@ -159,3 +340,4 @@ Polymer('cr-network-summary', {
       this.networkIds_[state.GUID] = true;
   },
 });
+})();

chrome/browser/resources/settings/internet_page/network_summary_item.html

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_network_list/cr_network_list.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_network_list_item/cr_network_list_item.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_onc/cr_onc_data.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toggle_button/cr_toggle_button.html">
+<link rel="import" href="network_summary_item_style.html">
+
+<polymer-element name="cr-network-summary-item">
+  <template>
+    <core-style ref="networkSummaryStyle"></core-style>
+    <div vertical layout hidden?="{{!deviceState}}">
+      <div id="details" horizontal layout on-click="{{onDetailsClicked_}}">
+        <cr-network-list-item id="detailsItem" flex
+            networkState="{{networkState}}">
+        </cr-network-list-item>
+        <div id="buttons" horizontal layout>
+          <cr-expand-button id="expandListButton"
+              class="{{ {invisible: !expandIsVisible_(deviceState, networkStateList)} | tokenList }}"
+              expanded="{{expanded}}">
+          </cr-expand-button>
+          <cr-toggle-button id="deviceEnabledButton"
+              checked="{{deviceIsEnabled_(deviceState)}}"
+              class="{{ {invisible: !deviceEnabledIsVisible_(deviceState)} | tokenList }}"
+              on-click="{{onDeviceEnabledToggled_}}">
+          </cr-toggle-button>
+        </div>
+      </div>
+      <cr-network-list id="networkList" vertical layout
+          maxHeight="{{maxHeight}}"
+          networks="{{networkStateList}}"
+          on-selected="{{onListItemSelected_}}"
+          opened="{{expanded}}">
+      </cr-network-list>
+    </div>
+  </template>
+  <script src="network_summary_item.js"></script>
+</polymer-element>

chrome/browser/resources/settings/internet_page/network_summary_item.js

+// 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 the network state for a specific
+ * type and a list of networks for that type.
+ */
+(function() {
+
+/** @typedef {chrome.networkingPrivate.DeviceStateProperties} */
+var DeviceStateProperties;
+
+Polymer('cr-network-summary-item', {
+  publish: {
+    /**
+     * True if the list is expanded.
+     *
+     * @attribute expanded
+     * @type {boolean}
+     * @default false
+     */
+    expanded: false,
+
+    /**
+     * The maximum height in pixels for the list of networks.
+     *
+     * @attribute maxHeight
+     * @type {number}
+     * @default 200
+     */
+    maxHeight: 200,
+
+    /**
+     * Device state for the network type.
+     *
+     * @attribute deviceState
+     * @type {?DeviceStateProperties}
+     * @default null
+     */
+    deviceState: null,
+
+    /**
+     * Network state for the active network.
+     *
+     * @attribute networkState
+     * @type {?CrOncDataElement}
+     * @default null
+     */
+    networkState: null,
+
+    /**
+     * List of all network state data for the network type.
+     *
+     * @attribute networkStateList
+     * @type {?Array<!CrOncDataElement>}
+     * @default null
+     */
+    networkStateList: null,
+  },
+
+  /**
+   * Polymer expanded changed method.
+   */
+  expandedChanged: function() {
+    var type = this.deviceState ? this.deviceState.Type : '';
+    this.fire('expanded', {expanded: this.expanded, type: type});
+  },
+
+  /**
+   * Polymer deviceState changed method.
+   */
+  deviceStateChanged: function() {
+    this.updateSelectable_();
+    if (!this.deviceIsEnabled_(this.deviceState))
+      this.expanded = false;
+  },
+
+  /**
+   * Polymer networkStateList changed method.
+   */
+  networkStateListChanged: function() {
+    this.updateSelectable_();
+  },
+
+  /**
+   * @param {?DeviceStateProperties} deviceState The state of a device.
+   * @return {boolean} Whether or not the device state is enabled.
+   * @private
+   */
+  deviceIsEnabled_: function(deviceState) {
+    return deviceState && deviceState.State == 'Enabled';
+  },
+
+  /**
+   * @param {?DeviceStateProperties} deviceState The device state.
+   * @return {boolean} Whether or not to show the UI to enable the network.
+   * @private
+   */
+  deviceEnabledIsVisible_: function(deviceState) {
+    return deviceState &&
+        deviceState.Type != 'Ethernet' && deviceState.Type != 'VPN';
+  },
+
+  /**
+   * @param {?DeviceStateProperties} deviceState The device state.
+   * @param {?Array<!CrOncDataElement>} networkList A list of networks.
+   * @return {boolean} Whether or not to show the UI to expand the list.
+   * @private
+   */
+  expandIsVisible_: function(deviceState, networkList) {
+    if (!this.deviceIsEnabled_(deviceState) || !networkList)
+      return false;
+    var minLength = (this.type == 'WiFi') ? 1 : 2;
+    return networkList.length >= minLength;
+  },
+
+  /**
+   * Event triggered when the details div is clicked on.
+   * @param {!Object} event The enable button event.
+   * @private
+   */
+  onDetailsClicked_: function(event) {
+    if ((event.target.id == 'expandListButton') ||
+        (this.deviceState && !this.deviceIsEnabled_(this.deviceState))) {
+      // Already handled or disabled, do nothing.
+      return;
+    }
+    if (this.expandIsVisible_(this.deviceState, this.networkStateList)) {
+      // Expandable, toggle expand.
+      this.expanded = !this.expanded;
+      return;
+    }
+    // Not expandable, fire 'selected' with |networkState|.
+    this.fire('selected', this.networkState);
+  },
+
+  /**
+   * Event triggered when a cr-network-item is the network list is selected.
+   * @param {!{detail: CrNetworkListItem}} event
+   * @private
+   */
+  onListItemSelected_: function(event) {
+    var onc = event.detail;
+    this.fire('selected', onc);
+  },
+
+  /**
+   * Event triggered when the enable button is toggled.
+   * @param {!Object} event The enable button event.
+   * @private
+   */
+  onDeviceEnabledToggled_: function(event) {
+    var deviceIsEnabled = this.deviceIsEnabled_(this.deviceState);
+    var type = this.deviceState ? this.deviceState.Type : '';
+    this.fire('device-enabled-toggled',
+              {enabled: !deviceIsEnabled, type: type});
+    // Make sure this does not propagate to onDetailsClicked_.
+    event.stopPropagation();
+  },
+
+  /**
+   * Called whenever the 'selectable' state might change.
+   * @private
+   */
+  updateSelectable_: function() {
+    // TODO(stevenjb): Make any actionable item selectable.
+    var selectable =
+          this.expandIsVisible_(this.deviceState, this.networkStateList);
+    this.$.details.classList.toggle('selectable', selectable);
+  },
+});
+})();

chrome/browser/resources/settings/internet_page/network_summary_item_style.html

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
+
+<core-style id="networkSummaryStyle">
+
+#details.selectable:hover {
+  background-color: lightgrey;
+}
+
+#detailsItem {
+  margin-bottom: 10px;
+}
+
+#buttons {
+  align-items: center;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+#deviceEnabledButton {
+  margin: 0px 10px;
+}
+
+#networkList {
+  max-height: 400px;
+  margin: 0px 70px 10px 40px;
+}
+
+</core-style>

chrome/browser/resources/settings/internet_page/network_summary_style.html

@@ -2,7 +2,9 @@
 <link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
 
 <core-style id="networkSummaryStyle">
-cr-network-list-item {
-  margin-bottom: 10px;
+
+#summary {
+  padding-right: 40px;
 }
+
 </core-style>

chrome/browser/resources/settings/settings_resources.grd

@@ -238,6 +238,15 @@
         <structure name="IDR_SETTINGS_NETWORK_SUMMARY_JS"
                    file="internet_page/network_summary.js"
                    type="chrome_html" />
+        <structure name="IDR_SETTINGS_NETWORK_SUMMARY_ITEM_STYLE_HTML"
+                   file="internet_page/network_summary_item_style.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_NETWORK_SUMMARY_ITEM_HTML"
+                   file="internet_page/network_summary_item.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_NETWORK_SUMMARY_ITEM_JS"
+                   file="internet_page/network_summary_item.js"
+                   type="chrome_html" />
       </if>
     </structures>
   </release>

chromeos/dbus/fake_shill_manager_client.cc

@@ -10,6 +10,7 @@
 #include "base/strings/string_number_conversions.h"
 #include "base/strings/string_split.h"
 #include "base/strings/string_util.h"
+#include "base/strings/stringprintf.h"
 #include "base/values.h"
 #include "chromeos/chromeos_switches.h"
 #include "chromeos/dbus/dbus_thread_manager.h"
@@ -30,6 +31,7 @@ namespace {
 
 // Allow parsed command line option 'tdls_busy' to set the fake busy count.
 int s_tdls_busy_count = 0;
+int s_extra_wifi_networks = 0;
 
 // Used to compare values for finding entries to erase in a ListValue.
 // (ListValue only implements a const_iterator version of Find).
@@ -735,6 +737,15 @@ void FakeShillManagerClient::SetupDefaultEnvironment() {
                                    base::FundamentalValue(true));
       profiles->AddService(shared_profile, kPortaledWifiPath);
     }
+
+    for (int i = 0; i < s_extra_wifi_networks; ++i) {
+      int id = 4 + i;
+      std::string path = base::StringPrintf("/service/wifi%d", id);
+      std::string guid = base::StringPrintf("wifi%d_guid", id);
+      std::string name = base::StringPrintf("wifi%d", id);
+      services->AddService(path, guid, name, shill::kTypeWifi,
+                           shill::kStateIdle, add_to_visible);
+    }
   }
 
   // Wimax
@@ -1078,6 +1089,9 @@ bool FakeShillManagerClient::ParseOption(const std::string& arg0,
 
 bool FakeShillManagerClient::SetInitialNetworkState(std::string type_arg,
                                                     std::string state_arg) {
+  int state_arg_as_int = -1;
+  base::StringToInt(state_arg, &state_arg_as_int);
+
   std::string state;
   if (state_arg.empty() || state_arg == "1" || state_arg == "on" ||
       state_arg == "enabled" || state_arg == "connected" ||
@@ -1088,6 +1102,10 @@ bool FakeShillManagerClient::SetInitialNetworkState(std::string type_arg,
              state_arg == "inactive" || state_arg == shill::kStateIdle) {
     // Technology enabled, services are created but are not connected.
     state = shill::kStateIdle;
+  } else if (type_arg == shill::kTypeWifi && state_arg_as_int > 1) {
+    // Enabled and connected, add extra wifi networks.
+    state = shill::kStateOnline;
+    s_extra_wifi_networks = state_arg_as_int - 1;
   } else if (state_arg == "disabled" || state_arg == "disconnect") {
     // Technology disabled but available, services created but not connected.
     state = kNetworkDisabled;

ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/core-icon/core-icon.html">
+<link rel="import" href="chrome://resources/polymer/paper-icon-button/paper-icon-button.html">
+
+<polymer-element name="cr-expand-button">
+  <template>
+    <paper-icon-button toggle active="{{expanded}}" disabled="{{disabled}}"
+        icon="{{expanded ? 'expand-less' : 'expand-more'}}">
+    </paper-icon-button>
+  </template>
+  <script src="cr_expand_button.js"></script>
+</polymer-element>

ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.js

+// 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-expand-button' is a chrome-specific wrapper around paper-button that
+ * toggles between an opened (expanded) and closed state.
+ *
+ * Example:
+ *
+ *    <cr-expand-button expanded="{{sectionIsExpanded}}"></cr-expand-button>
+ *
+ * @group Chrome Elements
+ * @element cr-expand-button
+ */
+Polymer('cr-expand-button', {
+  publish: {
+    /**
+     * If true, the button is in the expanded state and will show the
+     * 'expand-less' icon. If false, the button shows the 'expand-more' icon.
+     *
+     * @attribute expanded
+     * @type {boolean}
+     * @default false
+     */
+    expanded: false,
+
+    /**
+     * If true, the button will be disabled and greyed out.
+     *
+     * @attribute disabled
+     * @type {boolean}
+     * @default false
+     */
+    disabled: {value: false, reflect: true},
+  },
+});

ui/webui/resources/cr_elements/cr_network_list/cr_network_list.css

+/* 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;
+}

ui/webui/resources/cr_elements/cr_network_list/cr_network_list.html

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/core-list/core-list.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_collapse/cr_collapse.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_network_list_item/cr_network_list_item.html">
+
+<polymer-element name="cr-network-list">
+  <template>
+    <link rel="stylesheet" href="cr_network_list.css">
+    <cr-collapse on-core-resize="{{onResized_}}" opened="{{opened}}">
+      <div id="container" vertical layout flex>
+        <core-list id="networkList"
+            data="{{networks}}"
+            on-core-activate="{{onSelected_}}">
+          <template>
+            <cr-network-list-item networkState="{{model}}" isListItem>
+            </cr-network-list-item>
+          </template>
+        </core-list>
+      </div>
+    </cr-collapse>
+  </template>
+  <script src="cr_network_list.js"></script>
+</polymer-element>

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

+// 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,
+
+    /**
+     * The list of network state properties for the items to display.
+     *
+     * @attribute networks
+     * @type {?Array<!CrOncDataElement>}
+     * @default null
+     */
+    networks: null,
+
+    /**
+     * True if the list is opened.
+     *
+     * @attribute opened
+     * @type {boolean}
+     * @default false
+     */
+    opened: false,
+  },
+
+  /** @override */
+  created: function() {
+    this.networks = [];
+  },
+
+  /**
+   * 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);
+  }
+});

ui/webui/resources/cr_elements/cr_network_list_item/cr_network_list_item.css

@@ -8,10 +8,9 @@
   flex-direction: row;
   margin: 0;
   padding: 4px;
-  width: 100%;
 }
 
-#divOuter:hover {
+#divOuter.listItem:hover {
   background-color: lightgrey;
 }
 

ui/webui/resources/cr_elements/cr_network_list_item/cr_network_list_item.html

@@ -4,9 +4,10 @@
 <polymer-element name="cr-network-list-item">
   <template>
     <link rel="stylesheet" href="cr_network_list_item.css">
-    <div id="divOuter">
+    <div id="divOuter" class="{{ {listItem: isListItem} | tokenList }}">
       <div id="divIcon">
-        <cr-network-icon id="icon" networkState="{{networkState}}">
+        <cr-network-icon id="icon"
+            networkState="{{networkState}}" isListItem="{{isListItem}}">
         </cr-network-icon>
       </div>
       <div id="divText">

ui/webui/resources/cr_elements/cr_network_list_item/cr_network_list_item.js

@@ -14,7 +14,7 @@
  * 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.
+ * @param {?Array<string>} args The arguments to replace %1, %2, etc with.
  */
 function getText(text, args) {
   var res = text;
@@ -52,7 +52,7 @@ Polymer('cr-network-list-item', {
      * The ONC data properties used to display the list item.
      *
      * @attribute networkState
-     * @type CrOncDataElement
+     * @type {?CrOncDataElement}
      * @default null
      */
     networkState: null,
@@ -64,7 +64,7 @@ Polymer('cr-network-list-item', {
      * of the network type plus the network name and connection state.
      *
      * @attribute isListItem
-     * @type boolean
+     * @type {boolean}
      * @default false
      */
     isListItem: false,
@@ -83,12 +83,17 @@ Polymer('cr-network-list-item', {
     if (this.isListItem) {
       this.$.networkName.textContent = getText(network.Name);
       this.$.networkName.classList.toggle('connected', !isDisconnected);
-    } else {
+    } else if (network.Name && network.ConnectionState) {
       this.$.networkName.textContent = getText(network.Type);
       this.$.networkName.classList.toggle('connected', false);
       this.$.networkState.textContent =
           getConnectionStateText(network.ConnectionState, network.Name);
       this.$.networkState.classList.toggle('connected', !isDisconnected);
+    } else {
+      this.$.networkName.textContent = getText(network.Type);
+      this.$.networkName.classList.toggle('connected', false);
+      this.$.networkState.textContent = getText('Disabled');
+      this.$.networkState.classList.toggle('connected', false);
     }
   },
 });

ui/webui/resources/cr_elements_resources.grdp

@@ -36,6 +36,12 @@
   <structure name="IDR_CR_ELEMENTS_CR_DROPDOWN_MENU_JS"
              file="../../webui/resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.js"
              type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_EXPAND_BUTTON_HTML"
+             file="../../webui/resources/cr_elements/cr_expand_button/cr_expand_button.html"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_EXPAND_BUTTON_JS"
+             file="../../webui/resources/cr_elements/cr_expand_button/cr_expand_button.js"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_NETWORK_ICON_CSS"
              file="../../webui/resources/cr_elements/cr_network_icon/cr_network_icon.css"
              type="chrome_html" />
@@ -45,6 +51,15 @@
   <structure name="IDR_CR_ELEMENTS_CR_NETWORK_ICON_JS"
              file="../../webui/resources/cr_elements/cr_network_icon/cr_network_icon.js"
              type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_NETWORK_LIST_CSS"
+             file="../../webui/resources/cr_elements/cr_network_list/cr_network_list.css"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_NETWORK_LIST_HTML"
+             file="../../webui/resources/cr_elements/cr_network_list/cr_network_list.html"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_NETWORK_LIST_JS"
+             file="../../webui/resources/cr_elements/cr_network_list/cr_network_list.js"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_NETWORK_LIST_ITEM_CSS"
              file="../../webui/resources/cr_elements/cr_network_list_item/cr_network_list_item.css"
              type="chrome_html" />