Skip to content

Commit

Permalink
CrOS Settings: Add Internet menu item description
Browse files Browse the repository at this point in the history 
Add description for the Internet menu item when feature
OsSettingsRevampWayfinding is enabled to one of the followings:
  - If there are networks connected, show the name of one connected
    network with the priority: Ethernet, Wi-Fi, mobile(Cellular, Tether)
    and VPN.
  - If there is no networks connected but the hotspot is available, show
    "Hotspot available".
  - If there is no networks connected and hotspot is unavailable, show
    "Wi-Fi, mobile data".

Bug: b/295062479
Test: browser_tests --gtest_filter=*OsSettingsMenuRevampTest*
Change-Id: I1e2ad7c721079a6e639d4d02aed878949656de91
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4977242
Reviewed-by: Wes Okuhara <wesokuhara@google.com>
Commit-Queue: Connie Xu <conniekxu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1215798}
  • Loading branch information
conniekxu authored and Chromium LUCI CQ committed Oct 26, 2023
1 parent 2d1005c commit 70595e5
Show file tree
Hide file tree
Showing 7 changed files with 418 additions and 32 deletions.
9 changes: 9 additions & 0 deletions chrome/app/os_settings_strings.grdp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3909,6 +3909,12 @@ Press an assigned switch or key to remove assignment.
</message>

<!-- Internet page (OS settings) -->
<message name="IDS_OS_SETTINGS_INTERNET_MENU_ITEM_DESCRIPTION" desc="Description for the Internet menu item in the left menu when no networks are connected and hotspot is unavailable.">
Wi-Fi, mobile data
</message>
<message name="IDS_OS_SETTINGS_INTERNET_MENU_ITEM_DESCRIPTION_HOTSPOT_AVAILABLE" desc="Description for the Internet menu item in the left menu when no networks are connected but hotspot is unavailable.">
Hotspot available
</message>
<message name="IDS_SETTINGS_INTERNET_ADD_CELLULAR" desc="The accessibility label for the add cellular icon at Settings > Internet > Add Cellular label. This text will not be visible, but will be announced when ChromeVox is on and the user navigates to the icon. Clicking this icon will show a dialog that allows the user to activate a physical SIM or set up eSIM.">
Add Cellular...
</message>
Expand Down Expand Up @@ -4080,6 +4086,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_OS_SETTINGS_REVAMP_INTERNET" desc="Name of the settings page which displays internet preferences.">
Internet
</message>
<message name="IDS_SETTINGS_INTERNET_HOTSPOT" desc="Name of the settings page which displays hotspot preferences.">
Hotspot
</message>
Expand Down
1 change: 1 addition & 0 deletions chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_INTERNET_MENU_ITEM_DESCRIPTION.png.sha1
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
b55fa2cf4f9ce34eb32ed53726b7966dd5478c82
1 change: 1 addition & 0 deletions ...gs_strings_grdp/IDS_OS_SETTINGS_INTERNET_MENU_ITEM_DESCRIPTION_HOTSPOT_AVAILABLE.png.sha1
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
0e0b768fba00414f9d371f3dec8edbc1a4e7ba4f
1 change: 1 addition & 0 deletions chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_REVAMP_INTERNET.png.sha1
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
b570318305564de19431628c948cf4f6779cecf0
222 changes: 192 additions & 30 deletions chrome/browser/resources/ash/settings/os_settings_menu/os_settings_menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,23 @@ import './menu_item.js';

import {getDeviceName} from 'chrome://resources/ash/common/bluetooth/bluetooth_utils.js';
import {getBluetoothConfig} from 'chrome://resources/ash/common/bluetooth/cros_bluetooth_config.js';
import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
import {WebUiListenerMixin} from 'chrome://resources/cr_elements/web_ui_listener_mixin.js';
import {getHotspotConfig} from 'chrome://resources/ash/common/hotspot/cros_hotspot_config.js';
import {CrosHotspotConfigInterface, CrosHotspotConfigObserverReceiver, HotspotAllowStatus, HotspotInfo} from 'chrome://resources/ash/common/hotspot/cros_hotspot_config.mojom-webui.js';
import {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 {I18nMixin, I18nMixinInterface} from 'chrome://resources/cr_elements/i18n_mixin.js';
import {WebUiListenerMixin, WebUiListenerMixinInterface} from 'chrome://resources/cr_elements/web_ui_listener_mixin.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
import {BluetoothSystemProperties, DeviceConnectionState, PairedBluetoothDeviceProperties, SystemPropertiesObserverReceiver as BluetoothPropertiesObserverReceiver} from 'chrome://resources/mojo/chromeos/ash/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
import {CrosNetworkConfigInterface, FilterType, NO_LIMIT} from 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/cros_network_config.mojom-webui.js';
import {NetworkType} from 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/network_types.mojom-webui.js';
import {IronSelectorElement} from 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
import {DomRepeat, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {DomRepeat, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {assertExists, castExists} from '../assert_extras.js';
import {isRevampWayfindingEnabled} from '../common/load_time_booleans.js';
import {Constructor} from '../common/types.js';
import {FakeInputDeviceSettingsProvider} from '../device_page/fake_input_device_settings_provider.js';
import {getInputDeviceSettingsProvider} from '../device_page/input_device_mojo_interface_provider.js';
import {InputDeviceSettingsProviderInterface, Keyboard, Mouse, PointingStick, Touchpad} from '../device_page/input_device_settings_types.js';
Expand All @@ -34,7 +43,7 @@ import {MultiDeviceBrowserProxy, MultiDeviceBrowserProxyImpl} from '../multidevi
import {MultiDevicePageContentData, MultiDeviceSettingsMode} from '../multidevice_page/multidevice_constants.js';
import {OsPageAvailability} from '../os_page_availability.js';
import {AccountManagerBrowserProxyImpl} from '../os_people_page/account_manager_browser_proxy.js';
import {RouteObserverMixin} from '../route_observer_mixin.js';
import {RouteObserverMixin, RouteObserverMixinInterface} from '../route_observer_mixin.js';
import {isAdvancedRoute, Route, Router} from '../router.js';

import {getTemplate} from './os_settings_menu.html.js';
Expand Down Expand Up @@ -68,8 +77,47 @@ function capitalize(str: string): string {
return `${firstChar}${remainingStr}`;
}

function getPrioritizedConnectedNetwork(
networkStateList: OncMojo.NetworkStateProperties[]):
OncMojo.NetworkStateProperties|null {
// The priority of the network types. Both Cellular and Tether belongs to
// the Mobile Data.
const orderedNetworkTypes = [
NetworkType.kEthernet,
NetworkType.kWiFi,
NetworkType.kCellular,
NetworkType.kTether,
NetworkType.kVPN,
];

const networkStates:
Record<NetworkType, OncMojo.NetworkStateProperties[]> = {};

for (const networkType of orderedNetworkTypes) {
networkStates[networkType] = [];
}

for (const networkState of networkStateList) {
networkStates[networkState.type].push(networkState);
}

for (const type of orderedNetworkTypes) {
for (const networkState of networkStates[type]) {
if (OncMojo.connectionStateIsConnected(networkState.connectionState)) {
return networkState;
}
}
}

return null;
}

const OsSettingsMenuElementBase =
WebUiListenerMixin(RouteObserverMixin(I18nMixin(PolymerElement)));
mixinBehaviors(
[NetworkListenerBehavior],
WebUiListenerMixin(RouteObserverMixin(I18nMixin(PolymerElement)))) as
Constructor<PolymerElement&I18nMixinInterface&WebUiListenerMixinInterface&
RouteObserverMixinInterface&NetworkListenerBehaviorInterface>;

export class OsSettingsMenuElement extends OsSettingsMenuElementBase {
static get is() {
Expand Down Expand Up @@ -101,6 +149,7 @@ export class OsSettingsMenuElement extends OsSettingsMenuElementBase {
'accountsMenuItemDescription_,' +
'bluetoothMenuItemDescription_,' +
'deviceMenuItemDescription_,' +
'internetMenuItemDescription_,' +
'multideviceMenuItemDescription_)',
readOnly: true,
},
Expand Down Expand Up @@ -166,6 +215,32 @@ export class OsSettingsMenuElement extends OsSettingsMenuElementBase {
type: String,
value: '',
},

internetMenuItemDescription_: {
type: String,
value: '',
},

/**
* Hotspot information including state, active connected client count,
* allow status and hotspot configuration.
*/
hotspotInfo: {
type: Object,
notify: true,
},

/**
* Return true if hotspot feature flag is enabled.
*/
isHotspotFeatureEnabled_: {
type: Boolean,
value() {
return loadTimeData.valueExists('isHotspotEnabled') &&
loadTimeData.getBoolean('isHotspotEnabled');
},
readOnly: true,
},
};
}

Expand Down Expand Up @@ -201,6 +276,14 @@ export class OsSettingsMenuElement extends OsSettingsMenuElementBase {
private touchpadSettingsObserverReceiver_: TouchpadSettingsObserverReceiver|
undefined;

// Internet section members.
hotspotInfo: HotspotInfo|undefined;
private crosHotspotConfig_: CrosHotspotConfigInterface;
private crosHotspotConfigObserverReceiver_: CrosHotspotConfigObserverReceiver;
private isHotspotFeatureEnabled_: boolean;
private networkConfig_: CrosNetworkConfigInterface;
private internetMenuItemDescription_: string;

// Multidevice section members.
private multideviceBrowserProxy_: MultiDeviceBrowserProxy;
private multideviceMenuItemDescription_: string;
Expand All @@ -210,6 +293,12 @@ export class OsSettingsMenuElement extends OsSettingsMenuElementBase {

this.inputDeviceSettingsProvider_ = getInputDeviceSettingsProvider();
this.multideviceBrowserProxy_ = MultiDeviceBrowserProxyImpl.getInstance();

if (this.isRevampWayfindingEnabled_ && this.isHotspotFeatureEnabled_) {
this.crosHotspotConfig_ = getHotspotConfig();
this.crosHotspotConfigObserverReceiver_ =
new CrosHotspotConfigObserverReceiver(this);
}
}

override connectedCallback(): void {
Expand All @@ -231,6 +320,15 @@ export class OsSettingsMenuElement extends OsSettingsMenuElementBase {
this.observePointingStickSettings_();
this.observeTouchpadSettings_();

// Internet menu item.
this.networkConfig_ =
MojoInterfaceProviderImpl.getInstance().getMojoServiceRemote();
this.updateInternetMenuItemDescription_();

if (this.isHotspotFeatureEnabled_) {
this.onHotspotInfoChanged();
}

// Multidevice menu item.
this.addWebUiListener(
'settings.updateMultidevicePageContentData',
Expand Down Expand Up @@ -260,6 +358,12 @@ export class OsSettingsMenuElement extends OsSettingsMenuElementBase {
if (this.isRevampWayfindingEnabled_) {
this.multideviceBrowserProxy_.getPageContentData().then(
this.updateMultideviceMenuItemDescription_.bind(this));

if (this.isHotspotFeatureEnabled_) {
this.crosHotspotConfig_.addObserver(
this.crosHotspotConfigObserverReceiver_.$
.bindNewPipeAndPassRemote());
}
}
}

Expand Down Expand Up @@ -303,6 +407,7 @@ export class OsSettingsMenuElement extends OsSettingsMenuElementBase {
path: `/${routesMojom.NETWORK_SECTION_PATH}`,
icon: 'os-settings:network-wifi',
label: this.i18n('internetPageTitle'),
sublabel: this.internetMenuItemDescription_,
},
{
section: Section.kBluetooth,
Expand Down Expand Up @@ -544,31 +649,6 @@ export class OsSettingsMenuElement extends OsSettingsMenuElementBase {
return bool.toString();
}

/**
* Updates the "Multidevice" menu item description to one of the following:
* - If there is a phone connected, show "Connected to <phone name>".
* - If there is a phone connected but the device name is missing, show
* "Connected to Android phone".
* - If there is no phone connected, show "Phone Hub, Nearby Share".
*/
private updateMultideviceMenuItemDescription_(
pageContentData: MultiDevicePageContentData): void {
if (pageContentData.mode === MultiDeviceSettingsMode.HOST_SET_VERIFIED) {
if (pageContentData.hostDeviceName) {
this.multideviceMenuItemDescription_ = this.i18n(
'multideviceMenuItemDescriptionPhoneConnected',
pageContentData.hostDeviceName);
} else {
this.multideviceMenuItemDescription_ =
this.i18n('multideviceMenuItemDescriptionDeviceNameMissing');
}
return;
}

this.multideviceMenuItemDescription_ =
this.i18n('multideviceMenuItemDescription');
}

/**
* Updates the "Accounts" menu item description to one of the following:
* - If there are multiple accounts (> 1), show "N accounts".
Expand Down Expand Up @@ -626,6 +706,88 @@ export class OsSettingsMenuElement extends OsSettingsMenuElementBase {
connectedDevices.length);
}

async onHotspotInfoChanged(): Promise<void> {
const response = await this.crosHotspotConfig_.getHotspotInfo();
this.hotspotInfo = response.hotspotInfo;
this.updateInternetMenuItemDescription_();
}

/** CrosNetworkConfigObserver impl */
override onNetworkStateListChanged(): void {
this.updateInternetMenuItemDescription_();
}

/** CrosNetworkConfigObserver impl */
override onDeviceStateListChanged(): void {
this.updateInternetMenuItemDescription_();
}

/** CrosNetworkConfigObserver impl */
override onActiveNetworksChanged(): void {
this.updateInternetMenuItemDescription_();
}

/**
* Updates the "Internet" menu item description to one of the followings:
* - If there are networks connected, show the name of one connected network
* with the priority: Ethernet, Wi-Fi, mobile(Cellular, Tether) and VPN.
* - If there is no networks connected but the hotspot is available, show
* "Hotspot available".
* - If there is no networks connected and hotspot is unavailable, show
* "Wi-Fi, mobile data".
*/
private async updateInternetMenuItemDescription_(): Promise<void> {
const {result: networkStateList} =
await this.networkConfig_.getNetworkStateList({
filter: FilterType.kVisible,
limit: NO_LIMIT,
networkType: NetworkType.kAll,
});

const prioritizedConnectedNetwork =
getPrioritizedConnectedNetwork(networkStateList);
if (prioritizedConnectedNetwork) {
this.internetMenuItemDescription_ = prioritizedConnectedNetwork.name;
return;
}

if (this.isHotspotFeatureEnabled_ && this.hotspotInfo) {
if (this.hotspotInfo.allowStatus === HotspotAllowStatus.kAllowed) {
this.internetMenuItemDescription_ =
this.i18n('internetMenuItemDescriptionHotspotAvailable');
return;
}
}

this.internetMenuItemDescription_ =
this.i18n('internetMenuItemDescription');
}

/**
* Updates the "Multidevice" menu item description to one of the following:
* - If there is a phone connected, show "Connected to <phone name>".
* - If there is a phone connected but the device name is missing, show
* "Connected to Android phone".
* - If there is no phone connected, show "Phone Hub, Nearby Share".
*/
private updateMultideviceMenuItemDescription_(
pageContentData: MultiDevicePageContentData): void {
if (pageContentData.mode === MultiDeviceSettingsMode.HOST_SET_VERIFIED) {
if (pageContentData.hostDeviceName) {
this.multideviceMenuItemDescription_ = this.i18n(
'multideviceMenuItemDescriptionPhoneConnected',
pageContentData.hostDeviceName);
} else {
this.multideviceMenuItemDescription_ =
this.i18n('multideviceMenuItemDescriptionDeviceNameMissing');
}
return;
}

this.multideviceMenuItemDescription_ =
this.i18n('multideviceMenuItemDescription');
}

private observeKeyboardSettings_(): void {
if (this.inputDeviceSettingsProvider_ instanceof
FakeInputDeviceSettingsProvider) {
Expand Down
11 changes: 9 additions & 2 deletions chrome/browser/ui/webui/ash/settings/pages/internet/internet_section.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -745,6 +745,10 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
IDS_SETTINGS_DEVICE_INFO_A11Y_LABEL_IMEI_AND_SERIAL},
{"deviceInfoPopupA11yEidImeiAndSerial",
IDS_SETTINGS_DEVICE_INFO_A11Y_LABEL_EID_IMEI_AND_SERIAL},
{"internetMenuItemDescription",
IDS_OS_SETTINGS_INTERNET_MENU_ITEM_DESCRIPTION},
{"internetMenuItemDescriptionHotspotAvailable",
IDS_OS_SETTINGS_INTERNET_MENU_ITEM_DESCRIPTION_HOTSPOT_AVAILABLE},
{"internetAddCellular", IDS_SETTINGS_INTERNET_ADD_CELLULAR},
{"internetAddConnection", IDS_SETTINGS_INTERNET_ADD_CONNECTION},
{"internetAddConnectionExpandA11yLabel",
Expand All @@ -761,7 +765,8 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
{"internetJoinType", IDS_SETTINGS_INTERNET_JOIN_TYPE},
{"internetKnownNetworksPageTitle", IDS_SETTINGS_INTERNET_KNOWN_NETWORKS},
{"internetNoNetworks", IDS_SETTINGS_INTERNET_NO_NETWORKS},
{"internetPageTitle", IDS_SETTINGS_INTERNET},
{"internetPageTitle", isRevampEnabled ? IDS_OS_SETTINGS_REVAMP_INTERNET
: IDS_SETTINGS_INTERNET},
{"internetSummaryButtonA11yLabel",
IDS_SETTINGS_INTERNET_SUMMARY_BUTTON_ACCESSIBILITY_LABEL},
{"internetToggleMobileA11yLabel",
Expand Down Expand Up @@ -1180,7 +1185,9 @@ void InternetSection::AddHandlers(content::WebUI* web_ui) {
}

int InternetSection::GetSectionNameMessageId() const {
return IDS_SETTINGS_INTERNET;
return ash::features::IsOsSettingsRevampWayfindingEnabled()
? IDS_OS_SETTINGS_REVAMP_INTERNET
: IDS_SETTINGS_INTERNET;
}

mojom::Section InternetSection::GetSection() const {
Expand Down

0 comments on commit 70595e5

Please sign in to comment.