OS Settings: Convert TetherConnectionDialog to Polymer 3.

R=khorimoto@chromium.org

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

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

@@ -204,7 +204,7 @@ js_type_check("closure_compile_module") {
     ":network_proxy_section.m",
     ":network_summary.m",
     ":network_summary_item.m",
-#    ":tether_connection_dialog.m"
+    ":tether_connection_dialog.m"
   ]
 }
 
@@ -357,7 +357,16 @@ js_library("network_summary_item.m") {
 js_library("tether_connection_dialog.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/internet_page/tether_connection_dialog.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "//chrome/browser/resources/settings/chromeos:os_route.m",
+    "//chromeos/services/network_config/public/mojom:mojom_js_library_for_compile",
+    "//third_party/polymer/v3_0/components-chromium/iron-icon:iron-icon",
+    "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_components/chromeos/network:network_icon.m",
+    "//ui/webui/resources/cr_components/chromeos/network:onc_mojo.m",
+    "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
   extra_deps = [ ":tether_connection_dialog_module" ]
 }
@@ -449,6 +458,10 @@ polymer_modulizer("tether_connection_dialog") {
   js_file = "tether_connection_dialog.js"
   html_file = "tether_connection_dialog.html"
   html_type = "dom-module"
+  auto_imports = os_settings_auto_imports
+  namespace_rewrites = [
+    "cros_network_config.mojom.m.js|cros_network_config.mojom-lite.js"
+  ]
 }
 
 polymer_modulizer("cellular_setup_dialog") {

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_icon.html">
+<link rel="import" href="chrome://resources/cr_components/chromeos/network/onc_mojo.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/mojo/chromeos/services/network_config/public/mojom/cros_network_config.mojom.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="../../chromeos/os_icons.html">
-<link rel="import" href="../os_route.html">
 <link rel="import" href="../../settings_shared_css.html">
+<link rel="import" href="../os_route.html">
 
 <dom-module id="tether-connection-dialog">
   <template>
@@ -81,10 +85,10 @@
           <div id="host-device-text-container">
             <span id="host-device-text-name"
                 aria-describedby="host-device-signal-strength-icon
-                host-device-text-battery">
+                hostDeviceTextBattery">
               [[getDeviceName_(managedProperties)]]
             </span>
-            <span id="host-device-text-battery" class="secondary"
+            <span id="hostDeviceTextBattery" class="secondary"
                 aria-hidden="true">
               [[getBatteryPercentageString_(managedProperties)]]
             </span>

chrome/browser/resources/settings/chromeos/internet_page/tether_connection_dialog.js

@@ -2,12 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-(function() {
-'use strict';
-
-const mojom = chromeos.networkConfig.mojom;
-
-
 /**
  * Maps signal strength from [0, 100] to [0, 4] which represents the number
  * of bars in the signal icon displayed to the user. This is used to select
@@ -85,7 +79,8 @@ Polymer({
   },
 
   /**
-   * @param {!mojom.ManagedProperties|undefined} managedProperties
+   * @param {!chromeos.networkConfig.mojom.ManagedProperties|undefined}
+   *    managedProperties
    * @return {boolean}
    * @private
    */
@@ -97,7 +92,8 @@ Polymer({
   },
 
   /**
-   * @param {!mojom.ManagedProperties|undefined} managedProperties
+   * @param {!chromeos.networkConfig.mojom.ManagedProperties|undefined}
+   *    managedProperties
    * @return {string} The battery percentage integer value converted to a
    *     string. Note that this will not return a string with a "%" suffix.
    * @private
@@ -112,7 +108,8 @@ Polymer({
    * Retrieves an image that corresponds to signal strength of the tether host.
    * Custom icons are used here instead of a <network-icon> because this
    * dialog uses a special color scheme.
-   * @param {!mojom.ManagedProperties|undefined} managedProperties
+   * @param {!chromeos.networkConfig.mojom.ManagedProperties|undefined}
+   *    managedProperties
    * @return {string} The name of the icon to be used to represent the network's
    *     signal strength.
    */
@@ -126,7 +123,8 @@ Polymer({
 
   /**
    * Retrieves a localized accessibility label for the signal strength.
-   * @param {!mojom.ManagedProperties|undefined} managedProperties
+   * @param {!chromeos.networkConfig.mojom.ManagedProperties|undefined}
+   *    managedProperties
    * @return {string} The localized signal strength label.
    */
   getSignalStrengthLabel_(managedProperties) {
@@ -139,7 +137,8 @@ Polymer({
   },
 
   /**
-   * @param {!mojom.ManagedProperties|undefined} managedProperties
+   * @param {!chromeos.networkConfig.mojom.ManagedProperties|undefined}
+   *    managedProperties
    * @return {string}
    * @private
    */
@@ -148,7 +147,8 @@ Polymer({
   },
 
   /**
-   * @param {!mojom.ManagedProperties|undefined} managedProperties
+   * @param {!chromeos.networkConfig.mojom.ManagedProperties|undefined}
+   *    managedProperties
    * @return {string}
    * @private
    */
@@ -161,7 +161,8 @@ Polymer({
   },
 
   /**
-   * @param {!mojom.ManagedProperties|undefined} managedProperties
+   * @param {!chromeos.networkConfig.mojom.ManagedProperties|undefined}
+   *    managedProperties
    * @return {string}
    * @private
    */
@@ -174,7 +175,8 @@ Polymer({
   },
 
   /**
-   * @param {!mojom.ManagedProperties|undefined} managedProperties
+   * @param {!chromeos.networkConfig.mojom.ManagedProperties|undefined}
+   *    managedProperties
    * @return {string}
    * @private
    */
@@ -187,7 +189,8 @@ Polymer({
   },
 
   /**
-   * @param {!mojom.ManagedProperties|undefined} managedProperties
+   * @param {!chromeos.networkConfig.mojom.ManagedProperties|undefined}
+   *    managedProperties
    * @return {string}
    * @private
    */
@@ -199,4 +202,3 @@ Polymer({
         '';
   },
 });
-})();

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

@@ -13,6 +13,7 @@ import './internet_page/internet_known_networks_page.m.js';
 import './internet_page/network_proxy_section.m.js';
 import './internet_page/network_summary.m.js';
 import './internet_page/network_summary_item.m.js';
+import './internet_page/tether_connection_dialog.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

@@ -75,6 +75,11 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_TETHER_CONNECTION_DIALOG_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/internet_page/tether_connection_dialog.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

@@ -327,6 +327,7 @@ if (include_js_tests) {
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/test_os_reset_browser_proxy.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/test_os_sync_browser_proxy.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/test_wallpaper_browser_proxy.m.js",
+        "$root_gen_dir/chrome/test/data/webui/settings/chromeos/tether_connection_dialog_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/timezone_selector_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/timezone_subpage_test.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/test_cups_printers_browser_proxy.m.js",

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

@@ -78,6 +78,7 @@ js_modulizer("modulize") {
     "test_os_reset_browser_proxy.js",
     "test_wallpaper_browser_proxy.js",
     "test_os_sync_browser_proxy.js",
+    "tether_connection_dialog_test.js",
     "timezone_selector_test.js",
     "timezone_subpage_test.js",
     "test_cups_printers_browser_proxy.js",

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

@@ -1216,6 +1216,20 @@ TEST_F('OSSettingsNetworkSummaryTest', 'All', () => {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var OSSettingsTetherConnectionDialogTest = class extends OSSettingsBrowserTest {
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      'tether_connection_dialog_test.js',
+    ]);
+  }
+};
+
+TEST_F('OSSettingsTetherConnectionDialogTest', '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

@@ -122,6 +122,7 @@ TEST_F('OSSettingsNearbyShareSubPageV3Test', 'All', () => mocha.run());
  ['FilesPage', 'os_files_page_test.m.js'],
  ['ResetPage', 'os_reset_page_test.m.js'],
  ['SmartInputsPage', 'smart_inputs_page_test.m.js'],
+ ['TetherConnectionDialog', 'tether_connection_dialog_test.m.js'],
  ['TimezoneSelector', 'timezone_selector_test.m.js'],
  ['TimezoneSubpage', 'timezone_subpage_test.m.js'],
  ['CupsPrinterPage', 'cups_printer_page_tests.m.js'],

chrome/test/data/webui/settings/chromeos/tether_connection_dialog_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('TetherConnectionDialog', function() {
+  /** @type {!TetherConnectionDialogElement|undefined} */
+  let tetherDialog;
+
+  setup(function() {
+    tetherDialog = document.createElement('tether-connection-dialog');
+    document.body.appendChild(tetherDialog);
+    Polymer.dom.flush();
+  });
+
+  test('Battery percentage', function() {
+    tetherDialog.managedProperties = {
+      name: {
+        activeValue: 'name',
+      },
+      typeProperties: {
+        tether: {
+          batteryPercentage: 75,
+          signalStrength: 0,
+        },
+      },
+    };
+    Polymer.dom.flush();
+
+    const batteryEl = tetherDialog.$.hostDeviceTextBattery;
+    assertEquals('75% Battery', batteryEl.innerText.trim());
+  });
+});