OS Settings: Convert NetworkSummaryItem to Polymer 3.

R=khorimoto@chromium.org

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

chrome/browser/resources/settings/chromeos/internet_page/BUILD.gn

@@ -203,7 +203,7 @@ js_type_check("closure_compile_module") {
 #    ":internet_subpage.m",
     ":network_proxy_section.m",
 #    ":network_summary.m",
-#    ":network_summary_item.m",
+    ":network_summary_item.m",
 #    ":tether_connection_dialog.m"
   ]
 }
@@ -336,7 +336,16 @@ js_library("network_summary.m") {
 js_library("network_summary_item.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/internet_page/network_summary_item.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout-classes",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_components/chromeos/network:cr_policy_network_behavior_mojo.m",
+    "//ui/webui/resources/cr_components/chromeos/network:network_icon.m",
+    "//ui/webui/resources/cr_components/chromeos/network:network_siminfo.m",
+    "//ui/webui/resources/cr_components/chromeos/network:onc_mojo.m",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
+    "//ui/webui/resources/cr_elements/cr_toggle:cr_toggle.m",
+    "//ui/webui/resources/cr_elements/policy:cr_policy_indicator_behavior.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
   extra_deps = [ ":network_summary_item_module" ]
 }
@@ -426,6 +435,8 @@ polymer_modulizer("network_summary_item") {
   js_file = "network_summary_item.js"
   html_file = "network_summary_item.html"
   html_type = "dom-module"
+  auto_imports = os_settings_auto_imports
+  namespace_rewrites = os_settings_namespace_rewrites
 }
 
 polymer_modulizer("tether_connection_dialog") {

chrome/browser/resources/settings/chromeos/internet_page/network_summary_item.html

@@ -6,11 +6,10 @@
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/onc_mojo.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
-<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
-<link rel="import" href="../../settings_page/settings_subpage.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 
 <dom-module id="network-summary-item">
   <template>

chrome/browser/resources/settings/chromeos/os_settings.js

@@ -11,6 +11,7 @@ import './internet_page/cellular_setup_dialog.m.js';
 import './internet_page/internet_config.m.js';
 import './internet_page/internet_known_networks_page.m.js';
 import './internet_page/network_proxy_section.m.js';
+import './internet_page/network_summary_item.m.js';
 import './nearby_share_page/nearby_share_receive_dialog.m.js';
 import './nearby_share_page/nearby_share_subpage.m.js';
 import './multidevice_page/multidevice_page.m.js';

chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp

@@ -65,6 +65,11 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_NETWORK_SUMMARY_ITEM_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/internet_page/network_summary_item.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
   <include name="IDR_OS_SETTINGS_PERSONALIZATION_PAGE_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/personalization_page/personalization_page.m.js"
            use_base_dir="false"

chrome/test/data/webui/BUILD.gn

@@ -303,6 +303,7 @@ if (include_js_tests) {
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/nearby_share_receive_dialog_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/nearby_share_subpage_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/network_proxy_section_test.m.js",
+        "$root_gen_dir/chrome/test/data/webui/settings/chromeos/network_summary_item_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/os_edit_dictionary_page_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/os_languages_page_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/os_languages_page_v2_tests.m.js",

chrome/test/data/webui/settings/chromeos/BUILD.gn

@@ -54,6 +54,7 @@ js_modulizer("modulize") {
     "nearby_share_receive_dialog_tests.js",
     "nearby_share_subpage_tests.js",
     "network_proxy_section_test.js",
+    "network_summary_item_test.js",
     "os_edit_dictionary_page_test.js",
     "os_languages_page_tests.js",
     "os_languages_page_v2_tests.js",

chrome/test/data/webui/settings/chromeos/network_summary_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/chromeos/os_settings.js';
+
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// clang-format on
+
+suite('NetworkSummaryItem', function() {
+  /** @type {!NetworkSummaryItemElement|undefined} */
+  let netSummaryItem;
+
+  // Returns true if the element exists and has not been 'removed' by the
+  // Polymer template system.
+  function doesElementExist(selector) {
+    const el = netSummaryItem.$$(selector);
+    return (el !== null) && (el.style.display !== 'none');
+  }
+
+  setup(function() {
+    PolymerTest.clearBody();
+    netSummaryItem = document.createElement('network-summary-item');
+    document.body.appendChild(netSummaryItem);
+    Polymer.dom.flush();
+  });
+
+  test('Device enabled button state', function() {
+    const mojom = chromeos.networkConfig.mojom;
+
+    netSummaryItem.deviceState = {
+      deviceState: mojom.DeviceStateType.kUninitialized,
+      type: mojom.NetworkType.kEthernet,
+    };
+    Polymer.dom.flush();
+    assertFalse(doesElementExist('#deviceEnabledButton'));
+
+    netSummaryItem.deviceState = {
+      deviceState: mojom.DeviceStateType.kUninitialized,
+      type: mojom.NetworkType.kVPN,
+    };
+    Polymer.dom.flush();
+    assertFalse(doesElementExist('#deviceEnabledButton'));
+
+    netSummaryItem.deviceState = {
+      deviceState: mojom.DeviceStateType.kUninitialized,
+      type: mojom.NetworkType.kTether,
+    };
+    Polymer.dom.flush();
+    assertTrue(doesElementExist('#deviceEnabledButton'));
+
+    netSummaryItem.deviceState = {
+      deviceState: mojom.DeviceStateType.kUninitialized,
+      type: mojom.NetworkType.kWiFi,
+    };
+    Polymer.dom.flush();
+    assertFalse(doesElementExist('#deviceEnabledButton'));
+
+    netSummaryItem.setProperties({
+      activeNetworkState: {
+        connectionState: mojom.ConnectionStateType.kConnected,
+        guid: '',
+        type: mojom.NetworkType.kWiFi,
+        typeState: {
+          wifi: {}
+        }
+      },
+      deviceState: {
+        deviceState: mojom.DeviceStateType.kEnabled,
+        type: mojom.NetworkType.kWiFi,
+      },
+    });
+    Polymer.dom.flush();
+    assertTrue(doesElementExist('#deviceEnabledButton'));
+  });
+});

chrome/test/data/webui/settings/chromeos/os_settings_browsertest.js

@@ -1178,7 +1178,6 @@ var OSSettingsNetworkProxySectionTest = class extends OSSettingsBrowserTest {
   /** @override */
   get extraLibraries() {
     return super.extraLibraries.concat([
-      BROWSER_SETTINGS_PATH + '../chromeos/fake_network_config_mojom.js',
       'network_proxy_section_test.js',
     ]);
   }
@@ -1188,6 +1187,21 @@ TEST_F('OSSettingsNetworkProxySectionTest', 'All', () => {
   mocha.run();
 });
 
+// Test fixture for settings-internet-detail-page.
+// eslint-disable-next-line no-var
+var OSSettingsNetworkSummaryItemTest = class extends OSSettingsBrowserTest {
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      'network_summary_item_test.js',
+    ]);
+  }
+};
+
+TEST_F('OSSettingsNetworkSummaryItemTest', 'All', () => {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var OSSettingsPeoplePageAccountManagerTest =
     class extends OSSettingsBrowserTest {

chrome/test/data/webui/settings/chromeos/os_settings_v3_browsertest.js

@@ -107,6 +107,7 @@ TEST_F('OSSettingsNearbyShareSubPageV3Test', 'All', () => mocha.run());
  ['MultideviceSmartLockSubPage', 'multidevice_smartlock_subpage_test.m.js'],
  ['MultideviceSubPage', 'multidevice_subpage_tests.m.js'],
  ['NetworkProxySection', 'network_proxy_section_test.m.js'],
+ ['NetworkSummaryItem', 'network_summary_item_test.m.js'],
  ['OsEditDictionaryPage', 'os_edit_dictionary_page_test.m.js'],
  ['OsLanguagesPage', 'os_languages_page_tests.m.js'],
  ['NearbyShareReceiveDialog', 'nearby_share_receive_dialog_tests.m.js'],