Implement md-settings network lists.

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

Index: chrome/browser/resources/settings/internet_page/network_summary.html
diff --git a/chrome/browser/resources/settings/internet_page/network_summary.html b/chrome/browser/resources/settings/internet_page/network_summary.html
index f612de5a165861828f400b05c3e6cdeef79846f3..f3d07c6ef034bd0635e30f28a1702d0afaa0c9b2 100644
--- a/chrome/browser/resources/settings/internet_page/network_summary.html
+++ b/chrome/browser/resources/settings/internet_page/network_summary.html
@@ -1,27 +1,56 @@
 <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/cr_elements/cr_onc/cr_onc_data.html">
+<link rel="import" href="network_summary_item.html">
 <link rel="import" href="network_summary_style.html">

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

Missing core-style import.

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

Done.

 
 <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

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

Is there any way you can simplify this with a repeated template or something? I
understand the desire for declarative layout but this is kinda unintelligible to
me and makes bugs hard to spot.

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

I'm not familiar enough with html templates to say for sure, but it seems like
any such approach would obscure the data bindings. I agree that it is a bit
verbose, but I am reluctant to add too much complexity for the sake of brevity.
That said, I am open to specific suggestions.

+          deviceState="{{deviceStates.Ethernet}}"
+          hidden?="{{!itemIsVisible(deviceStates.Ethernet)}}"
+          maxHeight="200"

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

This seems like something that should go in the css.

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

That doesn't appear to work for Polymer attributes. However I removed this and
changed the default for cr-network-summary-item.

+          networkState="{{networkStates.Ethernet}}"
+          networkStateList="{{networkStateLists.Ethernet}}"
+          on-selected="{{onSelected}}">
+      </cr-network-summary-item>
+      <cr-network-summary-item
+          deviceState="{{deviceStates.WiFi}}"
+          hidden?="{{!itemIsVisible(deviceStates.WiFi)}}"
+          maxHeight="200"
+          networkState="{{networkStates.WiFi}}"
+          networkStateList="{{networkStateLists.WiFi}}"
+          on-expanded="{{onExpanded}}"
+          on-selected="{{onSelected}}"
+          on-toggle-enabled="{{onToggleEnabled}}">
+      </cr-network-summary-item>
+      <cr-network-summary-item
+          deviceState="{{deviceStates.Cellular}}"
+          hidden?="{{!itemIsVisible(deviceStates.Cellular)}}"
+          maxHeight="200"
+          networkState="{{networkStates.Cellular}}"
+          networkStateList="{{networkStateLists.Cellular}}"
+          on-selected="{{onSelected}}"
+          on-toggle-enabled="{{onToggleEnabled}}">
+      </cr-network-summary-item>
+      <cr-network-summary-item
+          deviceState="{{deviceStates.WiMAX}}"
+          hidden?="{{!itemIsVisible(deviceStates.WiMAX)}}"
+          maxHeight="200"
+          networkState="{{networkStates.WiMAX}}"
+          networkStateList="{{networkStateLists.WiMAX}}"
+          on-selected="{{onSelected}}"
+          on-toggle-enabled="{{onToggleEnabled}}">
+      </cr-network-summary-item>
+      <cr-network-summary-item
+          deviceState="{{deviceStates.VPN}}"
+          hidden?="{{!itemIsVisible(deviceStates.VPN)}}"
+          maxHeight="200"
+          networkState="{{networkStates.VPN}}"
+          networkStateList="{{networkStateLists.VPN}}"
+          on-selected="{{onSelected}}">
+      </cr-network-summary-item>
     </div>
   </template>
   <script src="network_summary.js"></script>