WebUI: cr-network-list: Use a single list of cr-network-list-items

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

Index: ui/webui/resources/cr_elements/network/cr_network_list_item.html
diff --git a/ui/webui/resources/cr_elements/network/cr_network_list_item_css.html b/ui/webui/resources/cr_elements/network/cr_network_list_item.html
similarity index 33%
rename from ui/webui/resources/cr_elements/network/cr_network_list_item_css.html
rename to ui/webui/resources/cr_elements/network/cr_network_list_item.html
index f33e95307c28b04cc3964631b34711e972136209..6eac6d5ad85ac4fc1a0765c487b37d34662766a9 100644
--- a/ui/webui/resources/cr_elements/network/cr_network_list_item_css.html
+++ b/ui/webui/resources/cr_elements/network/cr_network_list_item.html
@@ -1,48 +1,50 @@
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/html/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/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 
-<!-- Common styles <cr-network-list/> items. -->
-<dom-module id="cr-network-list-item-css">
+<dom-module id="cr-network-list-item">
   <template>
     <style include="cr-shared-style">
       :host {
         display: inline-block;
       }
 
-      #divOuter {
-        border-style: none;
+      #divButtons {
+        align-items: center;
         display: flex;
         flex-direction: row;
-        margin: 0;
-        padding: 4px;
       }
 
-      [selectable] {
-        @apply(--cr-actionable);
-      }
-
-      /* TODO(stevenjb): remove once list item focus is fixed. */
-      [selectable]:hover {
-        background-color: var(--cr-focused-item-color);
+      #divDetail {
+        display: flex;
+        flex: 1 0 auto;
+        flex-direction: row;
       }
 
       #divIcon {
         display: flex;
-        flex: 0 0 auto;
         flex-direction: column;
+        flex: 0 0 auto;
         justify-content: center;
-      }
-
-      #icon {
-        height: 32px;
         width: 32px;
-
-        @apply(--cr-network-icon-mixin);
       }
 
-      #divDetail {
+      #divOuter {
+        border-style: none;
         display: flex;
-        flex: 1 0 auto;
         flex-direction: row;
+        margin: 0;
+        height: 32px;
+        padding: 4px;
+      }
+
+      #divOuter[first-custom-item] {
+        border-top: var(--cr-separator-line);
       }
 
       #divText {
@@ -54,36 +56,60 @@
 
       #itemName {
         -webkit-margin-start: 8px;
-        font-size: 16px;
+        font-size: inherit;
+      }
 
-        @apply(--cr-network-name-mixin);
+      #itemName[connected] {
+        font-weight: bold;
       }
 
       #networkStateText {
         -webkit-margin-start: 8px;
-        color: grey;
-        font-size: 14px;
-
-        @apply(--cr-network-state-mixin);
+        color: var(--paper-grey-600);
+        font-size: inherit;
+        font-weight: 400;
       }
 
-      .buttons {
-        align-items: center;
-        display: flex;
-        flex-direction: row;
-      }
-
-      .buttons paper-icon-button {
-        text-align: center;
-      }
-
-      #itemName.connected {
-        font-weight: bold;
+      #networkStateText[connected] {
+        color: var(--google-green-500);
       }
 
-      #networkStateText.connected {
-        color: var(--google-green-500);
+      cr-network-icon,
+      iron-icon {
+        height: 24px;
+        width: 24px;
       }
     </style>
+    <div id="divOuter" actionable$="[[isListItem]]"
+        first-custom-item$="[[item.isFirstCustomItem]]">
+      <div id="divIcon">
+        <template is="dom-if" if="[[networkState]]">
+          <cr-network-icon is-list-item="[[isListItem]]"
+              network-state="[[networkState]]">
+          </cr-network-icon>
+        </template>
+        <template is="dom-if" if="[[item.polymerIcon]]">
+          <iron-icon icon="[[item.polymerIcon]]"></iron-icon>
+        </template>
+      </div>
+      <div id="divText" class="layout horizontal flex">
+        <div id="itemName" connected$="[[isConnected_(networkState)]]">
+          [[getItemName_(item, isListItem)]]
+        </div>
+        <div id="networkStateText"
+            hidden$="[[!isStateTextVisible_(networkState, isListItem)]]"
+            connected$="[[isStateTextConnected_(networkState, isListItem)]]">
+          [[getNetworkStateText_(networkState, isListItem)]]
+        </div>
+      </div>
+      <template is="dom-if"
+          if="[[isSettingsButtonVisible_(networkState, showButtons)]]">
+        <div id="divButtons">
+          <paper-icon-button icon="cr:settings" on-tap="fireShowDetails_">
+          </paper-icon-button>
+        </div>
+      </template>
+    </div>
   </template>
+  <script src="cr_network_list_item.js"></script>
 </dom-module>