cr_components/network: Convert NetworkListItem to Polymer 3.

Also convert the types in NetworkListTypes as well since they are
trivial and NetworkListItem depends on them.

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

chrome/test/data/webui/BUILD.gn

@@ -245,6 +245,7 @@ if (include_js_tests) {
         "$root_gen_dir/chrome/test/data/webui/cr_components/chromeos/network/cr_policy_network_behavior_mojo_tests.m.js",
         "$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_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

@@ -9,13 +9,6 @@ GEN_INCLUDE(['//chrome/test/data/webui/polymer_browser_test_base.js']);
 
 GEN('#include "content/public/test/browser_test.h"');
 
-// Tests are flaky on ChromeOS, debug (crbug.com/1114675).
-GEN('#if defined(OS_CHROMEOS) && !defined(NDEBUG)');
-GEN('#define MAYBE_All DISABLED_All');
-GEN('#else');
-GEN('#define MAYBE_All All');
-GEN('#endif');
-
 // Polymer 2 test list format:
 //
 // ['ModuleNameTest', 'module.js',
@@ -38,20 +31,16 @@ GEN('#endif');
       '../../chromeos/fake_network_config_mojom.js',
     ]
   ],
-  ['NetworkConfigElementBehavior', 'network/network_config_element_behavior_test.js',
-    []
-  ],
-  ['NetworkPasswordInput', 'network/network_password_input_test.js',
-    []
-  ],
-].forEach(test => registerTest('Network', 'internet-config-dialog', ...test));
+  ['NetworkConfigElementBehavior', 'network/network_config_element_behavior_test.js', []],
+  ['NetworkListItemTest', 'network/network_list_item_test.js', []],
+  ['NetworkPasswordInput', 'network/network_password_input_test.js', []],
+].forEach(test => registerTest('Network', 'os-settings', ...test));
 
 [
   ['BasePage', 'cellular_setup/base_page_test.js',
     []
   ],
 ].forEach(test => registerTest('CellularSetup', 'cellular-setup', ...test));
-
 // clang-format on
 
 function registerTest(componentName, webuiHost, testName, module, deps) {

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'],
+ ['NetworkListItem', 'network/network_list_item_test.m.js'],
  ['NetworkPasswordInput', 'network/network_password_input_test.m.js'],
 ].forEach(test => registerTest('Network', ...test));
 

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

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

chrome/test/data/webui/cr_components/chromeos/network/network_list_item_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_item.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';
+// clang-format on
+
+suite('CrComponentsNetworkPasswordInputTest', function() {
+  /** @type {!NetworkListItem|undefined} */
+  let listItem;
+
+  let mojom;
+
+  setup(function() {
+    mojom = chromeos.networkConfig.mojom;
+
+    listItem = document.createElement('network-list-item');
+    document.body.appendChild(listItem);
+    Polymer.dom.flush();
+  });
+
+  test('Network icon visibility', function() {
+    // The network icon is not shown if there is no network state.
+    let networkIcon = listItem.$$('network-icon');
+    assertFalse(!!networkIcon);
+
+    listItem.item = OncMojo.getDefaultNetworkState(mojom.NetworkType.kEthernet, 'eth0');
+    assertTrue(!!listItem.item);
+
+    // Update the network state.
+    listItem.networkState = listItem.item;
+    Polymer.dom.flush();
+
+    // The network icon exists now.
+    networkIcon = listItem.$$('network-icon');
+    assertTrue(!!networkIcon);
+  });
+});

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

@@ -262,8 +262,8 @@ js_type_check("closure_compile_module") {
 
     #  ":network_ip_config.m",
     #  ":network_list.m",
-    #  ":network_list_item.m",
-    #  ":network_list_types.m",
+    ":network_list_item.m",
+    ":network_list_types.m",
     ":network_listener_behavior.m",
 
     #  ":network_nameservers.m",
@@ -392,17 +392,14 @@ js_library("network_list.m") {
 js_library("network_list_item.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/network/network_list_item.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
   extra_deps = [ ":network_list_item_module" ]
 }
 
 js_library("network_list_types.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/network/network_list_types.m.js" ]
-  deps = [
-    # TODO: Fill those in.
-  ]
-  extra_deps = [ ":network_list_types_module" ]
+  extra_deps = [ ":modulize" ]
 }
 
 js_library("network_listener_behavior.m") {
@@ -520,7 +517,6 @@ group("polymer3_elements") {
     ":network_ip_config_module",
     ":network_list_item_module",
     ":network_list_module",
-    ":network_list_types_module",
     ":network_nameservers_module",
     ":network_password_input_module",
     ":network_property_list_mojo_module",
@@ -606,12 +602,7 @@ polymer_modulizer("network_list_item") {
   js_file = "network_list_item.js"
   html_file = "network_list_item.html"
   html_type = "dom-module"
-}
-
-polymer_modulizer("network_list_types") {
-  js_file = "network_list_types.js"
-  html_file = "network_list_types.html"
-  html_type = "dom-module"
+  auto_imports = cr_components_chromeos_auto_imports
 }
 
 polymer_modulizer("network_nameservers") {
@@ -673,6 +664,7 @@ js_modulizer("modulize") {
     "mojo_interface_provider.js",
     "network_config_element_behavior.js",
     "network_listener_behavior.js",
+    "network_list_types.js",
     "network_proxy.js",
     "onc_mojo.js",
   ]

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

@@ -169,8 +169,21 @@ Polymer({
     const status = this.getNetworkStateText_();
     const isManaged = this.item.source === OncSource.kDevicePolicy ||
         this.item.source === OncSource.kUserPolicy;
-    const index = this.parentElement.items.indexOf(this.item) + 1;
-    const total = this.parentElement.items.length;
+
+    // TODO(jonmann): Reaching into the parent element breaks encapsulation so
+    // refactor this logic into the parent (NetworkList) and pass into
+    // NetworkListItem as a property.
+    let index;
+    let total;
+    if (this.parentElement.items) {
+      index = this.parentElement.items.indexOf(this.item) + 1;
+      total = this.parentElement.items.length;
+    } else {
+      // This should only happen in tests; see TODO above.
+      index = 0;
+      total = 1;
+    }
+
     switch (this.item.type) {
       case NetworkType.kCellular:
         if (isManaged) {

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

@@ -23,3 +23,5 @@ NetworkList.CustomItemState;
 
 /** @typedef {OncMojo.NetworkStateProperties|NetworkList.CustomItemState} */
 NetworkList.NetworkListItemType;
+
+// #export {NetworkList}

ui/webui/resources/cr_components/cr_components_resources_v3.grdp

@@ -38,6 +38,14 @@
            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_ITEM_M_JS"
+           file="${root_gen_dir}/ui/webui/resources/cr_components/chromeos/network/network_list_item.m.js"
+           use_base_dir="false"
+           type="BINDATA" />
+    <include name="IDR_WEBUI_CHROMEOS_NETWORK_LIST_TYPES_M_JS"
+           file="${root_gen_dir}/ui/webui/resources/cr_components/chromeos/network/network_list_types.m.js"
+           use_base_dir="false"
+           type="BINDATA" />
     <include name="IDR_WEBUI_CHROMEOS_NETWORK_PASSWORD_INPUT_M_JS"
            file="${root_gen_dir}/ui/webui/resources/cr_components/chromeos/network/network_password_input.m.js"
            use_base_dir="false"