Skip to content

Commit

Permalink
CrOS Settings: Convert OS Bluetooth page to TS part 1
Browse files Browse the repository at this point in the history 
Converts various dialogs and the devices subpage to TS.
Additionally loads HTML templates for all custom elements at runtime.

Bug: 1315757, 1292025
Test: browser_tests with --gtest_filter="OSSettings*Bluetooth*"
Change-Id: I9c6081e597907cf646355983f81692ba947a6d04
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4077195
Reviewed-by: Wes Okuhara <wesokuhara@google.com>
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Commit-Queue: Wes Okuhara <wesokuhara@google.com>
Cr-Commit-Position: refs/heads/main@{#1084484}
  • Loading branch information
Wes Okuhara authored and Chromium LUCI CQ committed Dec 16, 2022
1 parent c389206 commit 7b416a3
Show file tree
Hide file tree
Showing 19 changed files with 237 additions and 415 deletions.
1 change: 0 additions & 1 deletion chrome/browser/resources/settings/chromeos/BUILD.gn
View file
Expand Up @@ -299,7 +299,6 @@ group("generate_web_components") {
"multidevice_page:web_components",
"nearby_share_page:web_components",
"os_a11y_page:web_components",
"os_bluetooth_page:web_components",
"os_people_page:web_components",
"os_privacy_page:web_components",
]
Expand Down
72 changes: 0 additions & 72 deletions chrome/browser/resources/settings/chromeos/os_bluetooth_page/BUILD.gn
View file
Expand Up @@ -3,19 +3,15 @@
# found in the LICENSE file.

import("//third_party/closure_compiler/compile_js.gni")
import("//tools/polymer/html_to_js.gni")
import("../os_settings.gni")

js_type_check("closure_compile_module") {
closure_flags = os_settings_closure_flags
is_polymer3 = true
deps = [
":os_bluetooth_change_device_name_dialog",
":os_bluetooth_device_detail_subpage",
":os_bluetooth_devices_subpage",
":os_bluetooth_devices_subpage_browser_proxy",
":os_bluetooth_page",
":os_bluetooth_pairing_dialog",
":os_bluetooth_saved_devices_subpage",
":os_bluetooth_summary",
":os_bluetooth_true_wireless_images",
Expand All @@ -31,7 +27,6 @@ js_type_check("closure_compile_module") {
js_library("os_bluetooth_page") {
deps = [
":os_bluetooth_devices_subpage",
":os_bluetooth_pairing_dialog",
":os_bluetooth_summary",
"//ash/webui/common/resources:i18n_behavior",
"//ash/webui/common/resources/bluetooth:cros_bluetooth_config",
Expand Down Expand Up @@ -110,27 +105,8 @@ js_library("os_bluetooth_true_wireless_images") {
]
}

js_library("os_bluetooth_device_detail_subpage") {
deps = [
":os_bluetooth_change_device_name_dialog",
":os_bluetooth_forget_device_dialog",
":os_bluetooth_true_wireless_images",
"..:os_route",
"..:route_observer_behavior",
"..:route_origin_behavior",
"..:router",
"//ash/webui/common/resources:i18n_behavior",
"//ash/webui/common/resources/bluetooth:bluetooth_device_battery_info",
"//ash/webui/common/resources/bluetooth:bluetooth_metrics_utils",
"//ash/webui/common/resources/bluetooth:bluetooth_utils",
"//chromeos/ash/services/bluetooth_config/public/mojom:mojom_webui_js",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
}

js_library("os_bluetooth_saved_devices_subpage") {
deps = [
":os_bluetooth_change_device_name_dialog",
":os_bluetooth_true_wireless_images",
":os_saved_devices_list",
":settings_fast_pair_constants",
Expand All @@ -147,26 +123,6 @@ js_library("os_bluetooth_saved_devices_subpage") {
]
}

js_library("os_bluetooth_change_device_name_dialog") {
deps = [
"//ash/webui/common/resources:i18n_behavior",
"//ash/webui/common/resources/bluetooth:bluetooth_utils",
"//ash/webui/common/resources/bluetooth:cros_bluetooth_config",
"//chromeos/ash/services/bluetooth_config/public/mojom:mojom_webui_js",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
}

js_library("os_bluetooth_pairing_dialog") {
deps = [
"//ash/webui/common/resources/bluetooth:bluetooth_metrics_utils",
"//ash/webui/common/resources/bluetooth:bluetooth_pairing_ui",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
externs_list =
[ "//ui/webui/resources/cr_elements/cr_dialog/cr_dialog_externs.js" ]
}

js_library("os_remove_saved_device_dialog") {
deps = [
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
Expand All @@ -175,14 +131,6 @@ js_library("os_remove_saved_device_dialog") {
[ "//ui/webui/resources/cr_elements/cr_dialog/cr_dialog_externs.js" ]
}

js_library("os_bluetooth_forget_device_dialog") {
deps = [
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
externs_list =
[ "//ui/webui/resources/cr_elements/cr_dialog/cr_dialog_externs.js" ]
}

js_library("settings_fast_pair_constants") {
}

Expand Down Expand Up @@ -214,23 +162,3 @@ js_library("os_saved_devices_list_item") {
"//ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu_externs.js",
]
}

html_to_js("web_components") {
js_files = [
"os_paired_bluetooth_list_item.js",
"os_remove_saved_device_dialog.js",
"os_bluetooth_forget_device_dialog.js",
"os_paired_bluetooth_list.js",
"os_saved_devices_list_item.js",
"os_saved_devices_list.js",
"os_bluetooth_devices_subpage.js",
"os_bluetooth_saved_devices_subpage.js",
"os_bluetooth_page.js",
"os_bluetooth_summary.js",
"os_bluetooth_device_detail_subpage.js",
"os_bluetooth_true_wireless_images.js",
"os_bluetooth_change_device_name_dialog.js",
"os_bluetooth_pairing_dialog.js",
"settings_fast_pair_toggle.js",
]
}
6 changes: 3 additions & 3 deletions ...resources/settings/chromeos/os_bluetooth_page/os_bluetooth_change_device_name_dialog.html
View file
Expand Up @@ -54,9 +54,9 @@
invalid="[[isInputInvalid_]]"
label="$i18n{bluetoothDeviceDetailChangeNameDialogNewName}"
aria-description="[[i18n('bluetoothChangeNameDialogInputA11yLabel',
MAX_INPUT_LENGTH)]]"
maxInputLength)]]"
error-message="[[i18n('bluetoothChangeNameDialogInputA11yLabel',
MAX_INPUT_LENGTH)]]">
maxInputLength)]]">
</cr-input>
<div id="inputInfo" aria-hidden="true">
<span id="inputSubtitle">
Expand All @@ -79,4 +79,4 @@
$i18n{bluetoothDeviceDetailChangeNameDialogDone}
</cr-button>
</div>
</cr-dialog>
</cr-dialog>
78 changes: 36 additions & 42 deletions ...os_bluetooth_change_device_name_dialog.js → ...os_bluetooth_change_device_name_dialog.ts
View file
Expand Up @@ -9,79 +9,76 @@

import '../../settings_shared.css.js';
import 'chrome://resources/cr_elements/cr_input/cr_input.js';
import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.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 {I18nBehavior, I18nBehaviorInterface} from 'chrome://resources/ash/common/i18n_behavior.js';
import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
import {PairedBluetoothDeviceProperties} from 'chrome://resources/mojo/chromeos/ash/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

/** @type {number} */
const MAX_INPUT_LENGTH = 32;
import {getTemplate} from './os_bluetooth_change_device_name_dialog.html.js';

const MAX_INPUT_LENGTH: number = 32;

interface SettingsBluetoothChangeDeviceNameDialogElement {
$: {dialog: CrDialogElement};
}

/**
* @constructor
* @extends {PolymerElement}
* @implements {I18nBehaviorInterface}
*/
const SettingsBluetoothChangeDeviceNameDialogElementBase =
mixinBehaviors([I18nBehavior], PolymerElement);
I18nMixin(PolymerElement);

/** @polymer */
class SettingsBluetoothChangeDeviceNameDialogElement extends
SettingsBluetoothChangeDeviceNameDialogElementBase {
static get is() {
return 'os-settings-bluetooth-change-device-name-dialog';
return 'os-settings-bluetooth-change-device-name-dialog' as const;
}

static get template() {
return html`{__html_template__}`;
return getTemplate();
}

static get properties() {
return {
/**
* @private {!PairedBluetoothDeviceProperties}
*/
device: {
type: Object,
observer: 'onDeviceChanged_',
},

/** Used to reference the MAX_INPUT_LENGTH constant in HTML. */
MAX_INPUT_LENGTH: {
/** Used to reference the maxInputLength constant in HTML. */
maxInputLength: {
type: Number,
value: MAX_INPUT_LENGTH,
},

/** @private */
deviceName_: {
type: String,
value: '',
observer: 'onDeviceNameChanged_',
},

/** @private */
isInputInvalid_: {
type: Boolean,
value: false,
reflectToAttribute: true,
},
};
}
private device: PairedBluetoothDeviceProperties;
private maxInputLength: number;
private deviceName_: string;
private isInputInvalid_: boolean;

/** @private */
onDeviceChanged_() {
private onDeviceChanged_(): void {
this.deviceName_ = getDeviceName(this.device);
}

/** @private */
onCancelClick_(event) {
private onCancelClick_(): void {
this.$.dialog.close();
}

/** @private */
onDoneClick_() {
private onDoneClick_(): void {
getBluetoothConfig().setDeviceNickname(
this.device.deviceProperties.id, this.deviceName_);
this.$.dialog.close();
Expand All @@ -90,11 +87,8 @@ class SettingsBluetoothChangeDeviceNameDialogElement extends
/**
* Returns a formatted string containing the current number of characters
* entered in the input compared to the maximum number of characters allowed.
* @param {string} deviceName
* @return {string}
* @private
*/
getInputCountString_(deviceName) {
private getInputCountString_(deviceName: string): string {
// minimumIntegerDigits is 2 because we want to show a leading zero if
// length is less than 10.
return this.i18n(
Expand All @@ -106,31 +100,24 @@ class SettingsBluetoothChangeDeviceNameDialogElement extends

/**
* Observer for deviceName_ that sanitizes its value by truncating it to
* MAX_INPUT_LENGTH. This method will be recursively called until deviceName_
* maxInputLength. This method will be recursively called until deviceName_
* is fully sanitized.
* @param {string} newValue
* @param {string} oldValue
* @private
*/
onDeviceNameChanged_(newValue, oldValue) {
private onDeviceNameChanged_(_newValue: string, oldValue: string): void {
if (oldValue) {
// If oldValue.length > MAX_INPUT_LENGTH, the user attempted to
// If oldValue.length > maxInputLength, the user attempted to
// enter more than the max limit, this method was called and it was
// truncated, and then this method was called one more time.
this.isInputInvalid_ = oldValue.length > MAX_INPUT_LENGTH;
} else {
this.isInputInvalid_ = false;
}

// Truncate the name to MAX_INPUT_LENGTH.
// Truncate the name to maxInputLength.
this.deviceName_ = this.deviceName_.substring(0, MAX_INPUT_LENGTH);
}

/**
* @return {boolean}
* @private
*/
isDoneDisabled_() {
private isDoneDisabled_(): boolean {
if (this.deviceName_ === getDeviceName(this.device)) {
return true;
}
Expand All @@ -143,6 +130,13 @@ class SettingsBluetoothChangeDeviceNameDialogElement extends
}
}

declare global {
interface HTMLElementTagNameMap {
[SettingsBluetoothChangeDeviceNameDialogElement.is]:
SettingsBluetoothChangeDeviceNameDialogElement;
}
}

customElements.define(
SettingsBluetoothChangeDeviceNameDialogElement.is,
SettingsBluetoothChangeDeviceNameDialogElement);

0 comments on commit 7b416a3

Please sign in to comment.