Skip to content

Commit

Permalink
CrOS Settings: Convert peoples page accounts list to TS
Browse files Browse the repository at this point in the history 
Bug= b:263413628
TEST=
1. Run:
    a. `autoninja -C out/Default browser_tests && DISPLAY=:20 out/Default/browser_tests  --gtest_filter="*PeoplePage*"`
    b. `autoninja -C out/Default webui_closure_compile`
    c. `autoninja -C out/Default browser_tests && DISPLAY=:20 out/Default/browser_tests  --gtest_filter="*AccountsPage*"`
2. Manual UI Test

Change-Id: I37395bb9e19c9318829ad6c88e945dcc6004cbed

Disable-Rts: True
Change-Id: I37395bb9e19c9318829ad6c88e945dcc6004cbed
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4126878
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Wes Okuhara <wesokuhara@google.com>
Commit-Queue: Nikki Moteva <moteva@google.com>
Cr-Commit-Position: refs/heads/main@{#1098199}
  • Loading branch information
Moteva authored and Chromium LUCI CQ committed Jan 28, 2023
1 parent f31a3e2 commit 307f54f
Show file tree
Hide file tree
Showing 8 changed files with 227 additions and 279 deletions.
52 changes: 5 additions & 47 deletions chrome/browser/resources/settings/chromeos/os_people_page/BUILD.gn
View file
Expand Up @@ -22,9 +22,6 @@ js_type_check("closure_compile_module") {
":os_sync_controls",
":setup_fingerprint_dialog",
":setup_pin_dialog",
":user_list",
":users_add_user_dialog",
":users_page",
]
}

Expand All @@ -49,6 +46,7 @@ js_library("account_manager") {

externs_list = [
"//ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu_externs.js",
"//ui/webui/resources/cr_elements/cr_dialog/cr_dialog_externs.js",
]
}

Expand Down Expand Up @@ -103,7 +101,10 @@ js_library("lock_screen") {
"//chromeos/ash/services/auth_factor_config/public/mojom:mojom_webui_js",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
externs_list = [ "../settings_controls_types.js" ]
externs_list = [
"../settings_controls_types.js",
"$externs_path/settings_private.js",
]
}

js_library("lock_screen_password_prompt_dialog") {
Expand Down Expand Up @@ -199,46 +200,3 @@ js_library("setup_pin_dialog") {
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
}

js_library("user_list") {
deps = [
"..:os_route",
"..:route_observer_behavior",
"..:router",
"//ash/webui/common/resources:cr_scrollable_behavior",
"//ash/webui/common/resources:i18n_behavior",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
externs_list = [
"$externs_path/settings_private.js",
"$externs_path/users_private.js",
"//ui/webui/resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer_externs.js",
]
}

js_library("users_add_user_dialog") {
deps = [
"//ash/webui/common/resources:assert",
"//ash/webui/common/resources:i18n_behavior",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
externs_list = [
"$externs_path/users_private.js",
"//ui/webui/resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer_externs.js",
"//ui/webui/resources/cr_elements/cr_dialog/cr_dialog_externs.js",
]
}

js_library("users_page") {
deps = [
":user_list",
":users_add_user_dialog",
"..:deep_linking_behavior",
"..:os_route",
"..:route_observer_behavior",
"..:router",
"//ash/webui/common/resources:assert",
"//ash/webui/common/resources:focus_without_ink_js",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
}
127 changes: 51 additions & 76 deletions ...ings/chromeos/os_people_page/user_list.js → ...ings/chromeos/os_people_page/user_list.ts
View file
Expand Up @@ -20,32 +20,30 @@ import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classe
import '../../settings_shared.css.js';
import '../../settings_vars.css.js';

import {CrScrollableBehavior, CrScrollableBehaviorInterface} from 'chrome://resources/ash/common/cr_scrollable_behavior.js';
import {I18nBehavior, I18nBehaviorInterface} from 'chrome://resources/ash/common/i18n_behavior.js';
import {getInstance as getAnnouncerInstance} from 'chrome://resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer.js';
import {mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {CrA11yAnnouncerElement, getInstance as getAnnouncerInstance} from 'chrome://resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer.js';
import {CrScrollableMixin} from 'chrome://resources/cr_elements/cr_scrollable_mixin.js';
import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {routes} from '../os_route.js';
import {RouteObserverBehavior, RouteObserverBehaviorInterface} from '../route_observer_behavior.js';
import {RouteObserverMixin} from '../route_observer_mixin.js';
import {Router} from '../router.js';

import {getTemplate} from './user_list.html.js';

/**
* @constructor
* @extends {PolymerElement}
* @implements {CrScrollableBehaviorInterface}
* @implements {I18nBehaviorInterface}
* @implements {RouteObserverBehaviorInterface}
*/
const SettingsUserListElementBase = mixinBehaviors(
[CrScrollableBehavior, I18nBehavior, RouteObserverBehavior],
PolymerElement);
declare global {
interface HTMLElementEventMap {
'all-managed-users-removed': CustomEvent<void>;
}
}

const SettingsUserListElementBase =
RouteObserverMixin(I18nMixin(CrScrollableMixin(PolymerElement)));


/** @polymer */
class SettingsUserListElement extends SettingsUserListElementBase {
static get is() {
return 'settings-user-list';
return 'settings-user-list' as const;
}

static get template() {
Expand All @@ -56,7 +54,6 @@ class SettingsUserListElement extends SettingsUserListElementBase {
return {
/**
* Current list of allowed users.
* @private {!Array<!chrome.usersPrivate.User>}
*/
users_: {
type: Array,
Expand All @@ -69,7 +66,6 @@ class SettingsUserListElement extends SettingsUserListElementBase {
/**
* Whether the user list is disabled, i.e. that no modifications can be
* made.
* @type {boolean}
*/
disabled: {
type: Boolean,
Expand All @@ -79,53 +75,46 @@ class SettingsUserListElement extends SettingsUserListElementBase {
};
}

disabled: boolean;
private users_: chrome.usersPrivate.User[];
private usersPrivate_: typeof chrome.usersPrivate;

constructor() {
super();

/** @private */
this.usersPrivate_ = chrome.usersPrivate;
}

/** @override */
ready() {
override ready(): void {
super.ready();

chrome.settingsPrivate.onPrefsChanged.addListener(prefs => {
prefs.forEach(function(pref) {
if (pref.key === 'cros.accounts.users') {
this.usersPrivate_.getUsers(
(/** !Array<!chrome.usersPrivate.User> */ users) => {
this.setUsers_(users);
});
}
}, this);
});
chrome.settingsPrivate.onPrefsChanged.addListener(
(prefs: chrome.settingsPrivate.PrefObject[]) => {
prefs.forEach((pref: chrome.settingsPrivate.PrefObject) => {
if (pref.key === 'cros.accounts.users') {
this.usersPrivate_.getUsers().then(
(users: chrome.usersPrivate.User[]) => {
this.setUsers_(users);
});
}
}, this);
});
}

/** @protected */
currentRouteChanged() {
override currentRouteChanged(): void {
if (Router.getInstance().getCurrentRoute() === routes.ACCOUNTS) {
this.usersPrivate_.getUsers(
(/** !Array<!chrome.usersPrivate.User> */ users) => {
this.usersPrivate_.getUsers().then(
(users: chrome.usersPrivate.User[]) => {
this.setUsers_(users);
});
}
}

/**
* @param {!chrome.usersPrivate.User} user
* @return {string}
* @private
*/
getUserName_(user) {
private getUserName_(user: chrome.usersPrivate.User): string {
return user.isOwner ? this.i18n('deviceOwnerLabel', user.name) : user.name;
}

/**
* Helper function that sorts and sets the given list of allowed users.
* @param {!Array<!chrome.usersPrivate.User>} users List of allowed users.
*/
setUsers_(users) {
private setUsers_(users: chrome.usersPrivate.User[]): void {
this.users_ = users;
this.users_.sort(function(a, b) {
if (a.isOwner !== b.isOwner) {
Expand All @@ -137,12 +126,8 @@ class SettingsUserListElement extends SettingsUserListElementBase {
this.requestUpdateScroll();
}

/**
* @private
* @param {!{model: !{item: !chrome.usersPrivate.User}}} e
*/
removeUser_(e) {
/** @type {!CrA11yAnnouncerElement} */ (getAnnouncerInstance())
private removeUser_(e: DomRepeatEvent<chrome.usersPrivate.User>): void {
(getAnnouncerInstance() as CrA11yAnnouncerElement)
.announce(this.i18n('userRemovedMessage', e.model.item.name));

// Focus the add user button since, after this removal, the only user left
Expand All @@ -153,50 +138,40 @@ class SettingsUserListElement extends SettingsUserListElementBase {
this.dispatchEvent(event);
}

this.usersPrivate_.removeUser(
e.model.item.email, /* callback */ function() {});
this.usersPrivate_.removeUser(e.model.item.email);
}

/** @private */
shouldHideCloseButton_(disabled, isUserOwner) {
private shouldHideCloseButton_(disabled: boolean, isUserOwner: boolean):
boolean {
return disabled || isUserOwner;
}

/**
* @param {chrome.usersPrivate.User} user
* @private
*/
getProfilePictureUrl_(user) {
private getProfilePictureUrl_(user: chrome.usersPrivate.User): string {
return 'chrome://userimage/' + user.email + '?id=' + Date.now() +
'&frame=0';
}

/**
* @param {chrome.usersPrivate.User} user
* @private
*/
shouldShowEmail_(user) {
private shouldShowEmail_(user: chrome.usersPrivate.User): boolean {
return !user.isChild && user.name !== user.displayEmail;
}

/**
* Use this function to prevent tooltips from displaying for user names. We
* only want to display tooltips for email addresses.
* @param {chrome.usersPrivate.User} user
* @private
*/
getTooltip_(user) {
private getTooltip_(user: chrome.usersPrivate.User): string {
return !this.shouldShowEmail_(user) ? user.displayEmail : '';
}

/**
* @param {!chrome.usersPrivate.User} user
* @return {string}
* @private
*/
getRemoveUserTooltip_(user) {
private getRemoveUserTooltip_(user: chrome.usersPrivate.User): string {
return this.i18n('removeUserTooltip', user.name);
}
}

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

customElements.define(SettingsUserListElement.is, SettingsUserListElement);

0 comments on commit 307f54f

Please sign in to comment.