[CrOS Hotspot] Add hotspot row below network summary rows

This CL is the first in a series of CLs that adds <hotspot-summary-item> row below the existing network summary and its functionality. This CL just add a hotspot summary row with title text. In subsequent CLs we would add more functionality like hotspot icon, subtext and enable/disable toggle. Screenshot: https://screenshot.googleplex.com/69N8BFiTL6CMi3s Bug: b/239477916 Change-Id: Ifecb653b97745dfb53df0e5fcbacc4724d0f691d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4021631 Reviewed-by: Regan Hsu <hsuregan@chromium.org> Commit-Queue: Regan Hsu <hsuregan@chromium.org> Reviewed-by: Chad Duffin <chadduffin@chromium.org> Cr-Commit-Position: refs/heads/main@{#1070579}
chromium · Nov 12, 2022 · 25d9052 · 25d9052
1 parent bedba2b
commit 25d9052
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 2 deletions.
diff --git a/chrome/app/os_settings_strings.grdp b/chrome/app/os_settings_strings.grdp
@@ -2818,6 +2818,9 @@ Press an assigned switch or key to remove assignment.
   <message name="IDS_SETTINGS_INTERNET" desc="Name of the settings page which displays internet preferences.">
     Network
   </message>
+  <message name="IDS_SETTINGS_INTERNET_HOTSPOT" desc="Name of the settings page which displays hotspot preferences.">
+    Hotspot
+  </message>
   <message name="IDS_SETTINGS_INTERNET_SUMMARY_BUTTON_ACCESSIBILITY_LABEL" desc="Accessibility only label for network summary item button that opens network details.">
     <ph name="NETWORK_TYPE">$1<ex>Mobile Data</ex></ph> - <ph name="NETWORK_DISPLAY_NAME">$2<ex>Verizon Wireless</ex></ph>
   </message>

diff --git a/chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_HOTSPOT.png.sha1 b/chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_HOTSPOT.png.sha1
@@ -0,0 +1 @@
+5617c57ccc8fb3280eb1ef7c4dff443a6fac17c6
diff --git a/chrome/browser/resources/settings/chromeos/internet_page/BUILD.gn b/chrome/browser/resources/settings/chromeos/internet_page/BUILD.gn
@@ -19,6 +19,7 @@ js_type_check("closure_compile_module") {
     ":esim_install_error_dialog",
     ":esim_remove_profile_dialog",
     ":esim_rename_dialog",
+    ":hotspot_summary_item",
     ":internet_config",
     ":internet_detail_menu",
     ":internet_detail_page",
@@ -56,6 +57,14 @@ js_library("cellular_setup_dialog") {
       [ "//ui/webui/resources/cr_elements/cr_dialog/cr_dialog_externs.js" ]
 }
 
+js_library("hotspot_summary_item") {
+  deps = [
+    "//ash/webui/common/resources:i18n_behavior",
+    "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout-classes",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("internet_config") {
   deps = [
     ":internet_shared_css",
@@ -268,6 +277,7 @@ js_library("network_proxy_section") {
 
 js_library("network_summary") {
   deps = [
+    ":hotspot_summary_item",
     ":network_summary_item",
     "//ash/webui/common/resources/network:mojo_interface_provider",
     "//ash/webui/common/resources/network:network_listener_behavior",
@@ -416,6 +426,7 @@ html_to_js("web_components") {
     "esim_install_error_dialog.js",
     "esim_remove_profile_dialog.js",
     "esim_rename_dialog.js",
+    "hotspot_summary_item.js",
     "internet_config.js",
     "internet_detail_menu.js",
     "internet_detail_page.js",

diff --git a/chrome/browser/resources/settings/chromeos/internet_page/hotspot_summary_item.html b/chrome/browser/resources/settings/chromeos/internet_page/hotspot_summary_item.html
@@ -0,0 +1,28 @@
+<style include="internet-shared iron-flex">
+  .settings-box {
+    border-top: var(
+        --network-summary-item-border-top, var(--cr-separator-line));
+  }
+  #hotspotPageTitle {
+    padding-inline-start: 22px;
+  }
+</style>
+
+<div class="settings-box two-line no-padding">
+  <div id="hotspotSummaryItemRow"
+      actionable on-click="onWrapperClick_"
+      class="flex layout horizontal center link-wrapper">
+    <iron-icon id="hotspotIcon">
+    </iron-icon>
+    <div id="hotspotPageTitle" class="middle settings-box-text"
+        aria-hidden="true">
+      $i18n{hotspotPageTitle}
+    </div>
+    <cr-icon-button id="hotspotSummaryItemRowArrowIcon"
+        class="subpage-arrow layout end"
+        aria-labelledby="hotspotPageTitle"
+        aria-roledescription="$i18n{subpageArrowRoleDescription}"
+        on-click="onSubpageArrowClick_">
+    </cr-icon-button>
+  </div>
+</div>
diff --git a/chrome/browser/resources/settings/chromeos/internet_page/hotspot_summary_item.js b/chrome/browser/resources/settings/chromeos/internet_page/hotspot_summary_item.js
@@ -0,0 +1,47 @@
+// Copyright 2022 The Chromium Authors
+// 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 hotspot summary item row with
+ * a toggle button below the network summary item.
+ */
+
+import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
+import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
+import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classes.js';
+
+import {I18nBehavior, I18nBehaviorInterface} from 'chrome://resources/ash/common/i18n_behavior.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/**
+ * @constructor
+ * @extends {PolymerElement}
+ * @implements {I18nBehaviorInterface}
+ */
+const HotspotSummaryItemElementBase =
+    mixinBehaviors([I18nBehavior], PolymerElement);
+
+/** @polymer */
+class HotspotSummaryItemElement extends HotspotSummaryItemElementBase {
+  static get is() {
+    return 'hotspot-summary-item';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  /** @private */
+  onSubpageArrowClick_() {
+    // TODO: implementation
+  }
+
+  /** @private */
+  onWrapperClick_() {
+    // TODO: implementation
+  }
+}
+
+customElements.define(HotspotSummaryItemElement.is, HotspotSummaryItemElement);
diff --git a/chrome/browser/resources/settings/chromeos/internet_page/network_summary.html b/chrome/browser/resources/settings/chromeos/internet_page/network_summary.html
@@ -13,4 +13,8 @@
         tether-device-state="[[getTetherDeviceState_(deviceStates)]]">
     </network-summary-item>
   </template>
+  <template is="dom-if" if="[[isHotspotFeatureEnabled_]]">
+    <hotspot-summary-item>
+    </hotspot-summary-item>
+  </template>
 </div>
diff --git a/chrome/browser/resources/settings/chromeos/internet_page/network_summary.js b/chrome/browser/resources/settings/chromeos/internet_page/network_summary.js
@@ -7,11 +7,13 @@
  * by type: Ethernet, WiFi, Cellular, and VPN.
  */
 
+import './hotspot_summary_item.js';
 import './network_summary_item.js';
 
 import {MojoInterfaceProvider, MojoInterfaceProviderImpl} from 'chrome://resources/ash/common/network/mojo_interface_provider.js';
 import {NetworkListenerBehavior, NetworkListenerBehaviorInterface} from 'chrome://resources/ash/common/network/network_listener_behavior.js';
 import {OncMojo} from 'chrome://resources/ash/common/network/onc_mojo.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {CrosNetworkConfigRemote, FilterType, GlobalPolicy, NO_LIMIT} from 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/cros_network_config.mojom-webui.js';
 import {DeviceStateType, NetworkType, OncSource} from 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/network_types.mojom-webui.js';
 import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -95,6 +97,18 @@ class NetworkSummaryElement extends NetworkSummaryElementBase {
 
       /** @private {!GlobalPolicy|undefined} */
       globalPolicy_: Object,
+
+      /**
+       * Return true if hotspot feature flag is enabled.
+       * @private
+       */
+      isHotspotFeatureEnabled_: {
+        type: Boolean,
+        value() {
+          return loadTimeData.valueExists('isHotspotEnabled') &&
+              loadTimeData.getBoolean('isHotspotEnabled');
+        },
+      },
     };
   }
 

diff --git a/chrome/browser/resources/settings/chromeos/internet_page/network_summary_item.html b/chrome/browser/resources/settings/chromeos/internet_page/network_summary_item.html
@@ -58,7 +58,7 @@
       <network-siminfo
           on-click="doNothing_"
           network-state="[[activeNetworkState]]"
-          global-policy="[[globalPolicy]]""
+          global-policy="[[globalPolicy]]"
           device-state="[[deviceState]]">
       </network-siminfo>
     </template>

diff --git a/chrome/browser/resources/settings/chromeos/os_settings.gni b/chrome/browser/resources/settings/chromeos/os_settings.gni
@@ -319,6 +319,7 @@ generated_web_component_files = [
   "chromeos/internet_page/esim_install_error_dialog.js",
   "chromeos/internet_page/esim_remove_profile_dialog.js",
   "chromeos/internet_page/esim_rename_dialog.js",
+  "chromeos/internet_page/hotspot_summary_item.js",
   "chromeos/internet_page/internet_config.js",
   "chromeos/internet_page/internet_detail_menu.js",
   "chromeos/internet_page/internet_detail_page.js",

diff --git a/chrome/browser/resources/settings/chromeos/os_settings.js b/chrome/browser/resources/settings/chromeos/os_settings.js
@@ -21,6 +21,7 @@ import './internet_page/apn_subpage.js';
 import './internet_page/cellular_roaming_toggle_button.js';
 import './internet_page/cellular_setup_dialog.js';
 import './internet_page/esim_remove_profile_dialog.js';
+import './internet_page/hotspot_summary_item.js';
 import './internet_page/internet_config.js';
 import './internet_page/internet_detail_page.js';
 import './internet_page/internet_known_networks_page.js';

diff --git a/chrome/browser/ui/webui/settings/ash/internet_section.cc b/chrome/browser/ui/webui/settings/ash/internet_section.cc
@@ -853,6 +853,7 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
        IDS_SETTINGS_INTERNET_NETWORK_CELLULAR_REFRESHING_PROFILE_LIST},
       {"cellularNetworkResettingESim",
        IDS_SETTINGS_INTERNET_NETWORK_CELLULAR_RESETTING_ESIM},
+      {"hotspotPageTitle", IDS_SETTINGS_INTERNET_HOTSPOT},
   };
   html_source->AddLocalizedStrings(kLocalizedStrings);
 
@@ -880,6 +881,8 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
   html_source->AddBoolean(
       "showHiddenToggle",
       base::FeatureList::IsEnabled(::features::kShowHiddenNetworkToggle));
+  html_source->AddBoolean("isHotspotEnabled",
+                          ash::features::IsHotspotEnabled());
 
   html_source->AddString("networkGoogleNameserversLearnMoreUrl",
                          chrome::kGoogleNameserversLearnMoreURL);

diff --git a/chrome/test/data/webui/settings/chromeos/network_summary_test.js b/chrome/test/data/webui/settings/chromeos/network_summary_test.js
@@ -22,4 +22,10 @@ suite('NetworkSummary', function() {
     assertEquals(1, summaryItems.length);
     assertEquals('WiFi', summaryItems[0].id);
   });
+
+  test('Hotspot summary item', function() {
+    const hotspotSummaryItem = netSummary.$$('hotspot-summary-item');
+    assertTrue(!!hotspotSummaryItem);
+  });
+
 });
diff --git a/chrome/test/data/webui/settings/chromeos/os_settings_v3_browsertest.js b/chrome/test/data/webui/settings/chromeos/os_settings_v3_browsertest.js
@@ -443,7 +443,11 @@ TEST_F('OSSettingsCrostiniExtraContainerPageV3Test', 'AllJsTests', () => {
  ['NearbyShareReceiveDialog', 'nearby_share_receive_dialog_tests.js'],
  ['NetworkAlwaysOnVpn', 'network_always_on_vpn_test.js'],
  ['NetworkProxySection', 'network_proxy_section_test.js'],
- ['NetworkSummary', 'network_summary_test.js'],
+ [
+   'NetworkSummary',
+   'network_summary_test.js',
+   {enabled: ['ash::features::kHotspot']},
+ ],
  ['NetworkSummaryItem', 'network_summary_item_test.js'],
  ['OncMojoTest', 'onc_mojo_test.js'],
  ['OsBluetoothPage', 'os_bluetooth_page_tests.js'],