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_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" />