Implement md-settings network lists.

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

Index: chrome/browser/resources/settings/internet_page/network_summary.js
diff --git a/chrome/browser/resources/settings/internet_page/network_summary.js b/chrome/browser/resources/settings/internet_page/network_summary.js
index 34a4b9a30c209d605fc76408bb1a3797f7f84609..3ddfc415fe44a3d7f61c24ffe7b769e345ee4021 100644
--- a/chrome/browser/resources/settings/internet_page/network_summary.js
+++ b/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
+   */
+  networkListChangedListener_: null,
+
+  /**
+   * Listener function for chrome.networkingPrivate.onDeviceStateListChanged
+   * event.
+   * @type {?function(!Array<string>)}
    * @private
    */
-  listChangedListener_: null,
+  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,21 +139,74 @@ 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_);
   },
 
   /**
+   * @param {string} deviceState The state of the device.
+   * @return {boolean} Whether or not an item for the device type is visible.
    * @private
    */
-  onNetworkListChangedEvent_: function() {
-    this.getNetworks_();
+  itemIsVisible_: function(deviceState) { return !!deviceState; },
+
+  /**
+   * Event triggered when the WiFi cr-network-summary-item is expanded.
+   * @param {!{detail: {expanded: boolean, type: string}}} event
+   * @private
+   */
+  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.
   },
 
   /**
-   * @param {!Array<string>} networkIds The list of changed network GUIDs.
+   * Event triggered when the enabled state of a cr-network-summary-item is
+   * toggled.
+   * @param {!{detail: {enabled: boolean, type: string}}} event
+   * @private
+   */
+  onToggleEnabled_: 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
    */
   onNetworksChangedEvent_: function(networkIds) {
@@ -92,48 +218,106 @@ 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

[michaelpg, 2015/04/24 19:35:37]

Remove the comma, so it's clear the callback does both things.

[stevenjb, 2015/04/24 21:18:09]

Done.

+   * 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));

[michaelpg, 2015/04/24 19:35:37]

nit 4 spaces

[stevenjb, 2015/04/24 21:18:09]

Done.

+  },
+
+  /**
+   * networkingPrivate.getDeviceStates callback.
+   * @param {!Array<!DeviceStateProperties>} states The state properties for all
+   *     available devices.
+   * @private
+   */
+  getDeviceStatesCallback_: function(states) {
+    states.forEach(function(state) {
+      this.deviceStates[state.Type] = state;
+    }, this);
   },
 
   /**
-   * @param {!Array<!chrome.networkingPrivate.NetworkStateProperties>} states
-   *     The state properties for all networks.
+   * 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 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) {
+    // Set any types not found to null.
+    NETWORK_TYPES.forEach(function(type) {
       if (!foundTypes[type])
         this.updateNetworkState_(type, null);
     }, this);
+
+    // 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 +332,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 +343,4 @@ Polymer('cr-network-summary', {
       this.networkIds_[state.GUID] = true;
   },
 });
+})();