cr_components/network: Convert NetworkList to Polymer 3.

R=khorimoto@chromium.org

Bug: 1045266
Test: NetworkNetworkListTest*
Change-Id: I34f03657486f03027c4adb5c6ae36aa421a2c239
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2360925
Commit-Queue: James Hawkins <jhawkins@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799951}

chrome/test/data/webui/BUILD.gn

@@ -249,6 +249,7 @@ if (include_js_tests) {
         "$root_gen_dir/chrome/test/data/webui/cr_components/chromeos/network/cr_policy_network_indicator_mojo_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/cr_components/chromeos/network/network_config_element_behavior_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/cr_components/chromeos/network/network_list_item_test.m.js",
+        "$root_gen_dir/chrome/test/data/webui/cr_components/chromeos/network/network_list_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/cr_components/chromeos/network/network_password_input_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_searchable_drop_down_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/ambient_mode_page_test.m.js",

chrome/test/data/webui/cr_components/chromeos/cr_components_chromeos_browsertest.js

@@ -32,7 +32,8 @@ GEN('#include "content/public/test/browser_test.h"');
     ]
   ],
   ['NetworkConfigElementBehavior', 'network/network_config_element_behavior_test.js', []],
-  ['NetworkListItemTest', 'network/network_list_item_test.js', []],
+  ['NetworkList', 'network/network_list_test.js', []],
+  ['NetworkListItem', 'network/network_list_item_test.js', []],
   ['NetworkPasswordInput', 'network/network_password_input_test.js', []],
 ].forEach(test => registerTest('NetworkComponents', 'os-settings', ...test));
 

chrome/test/data/webui/cr_components/chromeos/cr_components_chromeos_v3_browsertest.js

@@ -13,6 +13,7 @@ GEN('#include "chromeos/constants/chromeos_features.h"');
 [['CrPolicyNetworkBehaviorMojo', 'network/cr_policy_network_behavior_mojo_tests.m.js'],
  ['CrPolicyNetworkIndicatorMojo', 'network/cr_policy_network_indicator_mojo_tests.m.js'],
  ['NetworkConfigElementBehavior', 'network/network_config_element_behavior_test.m.js'],
+ ['NetworkList', 'network/network_list_test.m.js'],
  ['NetworkListItem', 'network/network_list_item_test.m.js'],
  ['NetworkPasswordInput', 'network/network_password_input_test.m.js'],
 ].forEach(test => registerTest('NetworkComponents', ...test));

chrome/test/data/webui/cr_components/chromeos/network/BUILD.gn

@@ -10,6 +10,7 @@ js_modulizer("modulize") {
     "cr_policy_network_indicator_mojo_tests.js",
     "network_config_element_behavior_test.js",
     "network_list_item_test.js",
+    "network_list_test.js",
     "network_password_input_test.js",
   ]
 }

chrome/test/data/webui/cr_components/chromeos/network/network_list_item_test.js

@@ -16,7 +16,7 @@
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // clang-format on
 
-suite('CrComponentsNetworkPasswordInputTest', function() {
+suite('NetworkListTest', function() {
   /** @type {!NetworkListItem|undefined} */
   let listItem;
 

chrome/test/data/webui/cr_components/chromeos/network/network_list_test.js

+// Copyright 2020 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.
+
+// clang-format off
+// #import 'chrome://os-settings/strings.m.js';
+// #import 'chrome://resources/cr_components/chromeos/network/network_list.m.js';
+
+// #import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+// #import 'chrome://resources/mojo/services/network/public/mojom/ip_address.mojom-lite.js';
+// #import 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/network_types.mojom-lite.js';
+// #import 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js';
+// #import 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/cros_network_config.mojom-lite.js';
+
+// #import {OncMojo} from 'chrome://resources/cr_components/chromeos/network/onc_mojo.m.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// clang-format on
+
+suite('NetworkNetworkListTest', function() {
+  /** @type {!NetworkList|undefined} */
+  let networkList;
+
+  let mojom;
+
+  setup(function() {
+    mojom = chromeos.networkConfig.mojom;
+
+    networkList = document.createElement('network-list');
+    // iron-list will not create list items if the container of the list is of
+    // size zero.
+    networkList.style.height = '100%';
+    networkList.style.width = '100%';
+    document.body.appendChild(networkList);
+    Polymer.dom.flush();
+  });
+
+  test('focus() focuses the first item', async () => {
+    const testNetworks = [
+      OncMojo.getDefaultNetworkState(mojom.NetworkType.kEthernet, 'eth0'),
+      OncMojo.getDefaultNetworkState(mojom.NetworkType.kWiFi, 'wifi'),
+    ];
+    networkList.networks = testNetworks;
+    Polymer.dom.flush();
+
+    // No items are focused initially.
+    const items = networkList.shadowRoot.querySelectorAll('network-list-item');
+    const firstItem = items[0];
+    let activeElement = getDeepActiveElement();
+    assertNotEquals(activeElement, firstItem);
+
+    // Focus the top-level list; the first item is focused.
+    networkList.focus();
+    activeElement = getDeepActiveElement();
+    assertEquals(activeElement, firstItem);
+
+    // Now focus the second item to show that focusing the list focuses the
+    // first element independent of previous focus.
+    const secondItem = items[1];
+    secondItem.focus();
+    activeElement = getDeepActiveElement();
+    assertNotEquals(activeElement, firstItem);
+
+    networkList.focus();
+    activeElement = getDeepActiveElement();
+    assertEquals(activeElement, firstItem);
+  });
+});

ui/webui/resources/cr_components/chromeos/network/BUILD.gn

@@ -261,7 +261,7 @@ js_type_check("closure_compile_module") {
     ":network_icon.m",
 
     #  ":network_ip_config.m",
-    #  ":network_list.m",
+    ":network_list.m",
     ":network_list_item.m",
     ":network_list_types.m",
     ":network_listener_behavior.m",
@@ -384,7 +384,9 @@ js_library("network_ip_config.m") {
 js_library("network_list.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/network/network_list.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements:cr_scrollable_behavior.m",
   ]
   extra_deps = [ ":network_list_module" ]
 }
@@ -596,6 +598,7 @@ polymer_modulizer("network_list") {
   js_file = "network_list.js"
   html_file = "network_list.html"
   html_type = "dom-module"
+  auto_imports = cr_components_chromeos_auto_imports
 }
 
 polymer_modulizer("network_list_item") {

ui/webui/resources/cr_components/chromeos/network/network_list.js

@@ -90,7 +90,7 @@ Polymer({
 
   /** @private */
   updateListItems_() {
-    this.saveScroll(this.$.networkList);
+    this.saveScroll(/** @type {!IronListElement} */ (this.$.networkList));
     const beforeNetworks = this.customItems.filter(function(item) {
       return item.showBeforeNetworksList === true;
     });
@@ -98,7 +98,7 @@ Polymer({
       return item.showBeforeNetworksList !== true;
     });
     this.listItems_ = beforeNetworks.concat(this.networks, afterNetworks);
-    this.restoreScroll(this.$.networkList);
+    this.restoreScroll(/** @type {!IronListElement} */ (this.$.networkList));
     this.updateScrollableContents();
     if (this.focusRequested_) {
       this.async(function() {

ui/webui/resources/cr_components/cr_components_resources_v3.grdp

@@ -38,6 +38,10 @@
            file="${root_gen_dir}/ui/webui/resources/cr_components/chromeos/network/network_listener_behavior.m.js"
            use_base_dir="false"
            type="BINDATA" />
+    <include name="IDR_WEBUI_CHROMEOS_NETWORK_LIST_M_JS"
+           file="${root_gen_dir}/ui/webui/resources/cr_components/chromeos/network/network_list.m.js"
+           use_base_dir="false"
+           type="BINDATA" />
     <include name="IDR_WEBUI_CHROMEOS_NETWORK_LIST_ITEM_M_JS"
            file="${root_gen_dir}/ui/webui/resources/cr_components/chromeos/network/network_list_item.m.js"
            use_base_dir="false"