[OOBE] screens_list TS migration
Bug: b/314762562
Change-Id: I76c1b2f98d1011ae2930a3fe38eb98faeb9b7c2c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5277156
Reviewed-by: Danila Kuzmin <dkuzmin@google.com>
Auto-Submit: Simon Ziegltrum <ziegltrum@google.com>
Commit-Queue: Simon Ziegltrum <ziegltrum@google.com>
Cr-Commit-Position: refs/heads/main@{#1260984}
diff --git a/chrome/browser/resources/chromeos/login/components/BUILD.gn b/chrome/browser/resources/chromeos/login/components/BUILD.gn
index 18eb0965..5800ec4d 100644
--- a/chrome/browser/resources/chromeos/login/components/BUILD.gn
+++ b/chrome/browser/resources/chromeos/login/components/BUILD.gn
@@ -29,7 +29,6 @@
outputs = [ "$target_gen_dir/{{source_file_part}}" ]
}
-# Copy existing files to output directory for closure compilation.
copy("copy_js") {
sources = [
"display_manager_types.js",
@@ -53,6 +52,5 @@
"api_keys_notice.js",
"oobe_a11y_option.js",
"oobe_i18n_dropdown.js",
- "oobe_screens_list.js",
]
}
diff --git a/chrome/browser/resources/chromeos/login/components/oobe_screens_list.html b/chrome/browser/resources/chromeos/login/components/oobe_screens_list.html
index 7363c92..cfe5767 100644
--- a/chrome/browser/resources/chromeos/login/components/oobe_screens_list.html
+++ b/chrome/browser/resources/chromeos/login/components/oobe_screens_list.html
@@ -202,35 +202,35 @@
}
</style>
<div id="screensList">
- <template is="dom-repeat" items="{{screensList_}}" as="screen">
- <cr-button id="[[getScreenID(screen.screenID)]]"
- visited$="[[isScreenVisited(screen.selected , screen.is_completed)]]"
- disabled="[[isScreenDisabled(screen.is_revisitable , screen.is_completed)]]"
+ <template is="dom-repeat" items="{{screensList}}">
+ <cr-button id="[[getScreenId(item.screenId)]]"
+ visited$="[[isScreenVisited(item.selected , item.isCompleted)]]"
+ disabled="[[isScreenDisabled(item.isRevisitable , item.isCompleted)]]"
class="screen-item"
role="checkbox"
- aria-checked="[[screen.selected]]"
- aria-label$="[[getAriaLabelToggleButtons_(locale,
- screen.title ,
- screen.subtitle ,
- screen.is_synced ,
- screen.is_completed,
- screen.screenID,
- screen.selected)]]"
- on-click="onClick_">
+ aria-checked="[[item.selected]]"
+ aria-label$="[[getAriaLabelToggleButtons(locale,
+ item.title ,
+ item.subtitle ,
+ item.isSynced ,
+ item.isCompleted,
+ item.screenId,
+ item.selected)]]"
+ on-click="onClick">
<div class="flex horizontal layout">
<div class="icon">
- <iron-icon class="screen-icon" icon="[[screen.icon]]"></iron-icon>
+ <iron-icon class="screen-icon" icon="[[item.icon]]"></iron-icon>
</div>
<div class="text-container" aria-hidden="true">
- <div class="screen-title"> [[i18nDynamic(locale, screen.title)]]</div>
- <div class="screen-subtitle">[[getSubtitle_(locale, screen.subtitle,
- screen.screenID )]]</div>
+ <div class="screen-title"> [[i18nDynamic(locale, item.title)]]</div>
+ <div class="screen-subtitle">[[getSubtitle(locale, item.subtitle,
+ item.screenId )]]</div>
</div>
<div class="info-icon" aria-hidden="true">
<iron-icon id="sync-icon"
- hidden="[[isSyncedIconHidden(screen.is_synced ,
- screen.is_completed ,
- screen.selected)]]"
+ hidden="[[isSyncedIconHidden(item.isSynced ,
+ item.isCompleted ,
+ item.selected)]]"
class="sync" icon="oobe-20:sync"></iron-icon>
<paper-tooltip id="tooltip-element" position="left"
aria-hidden="true"
@@ -238,7 +238,7 @@
animation-delay="0">
[[i18nDynamic(locale, 'choobeSyncedTile')]]
</paper-tooltip>
- <iron-icon hidden="[[!screen.selected]]"
+ <iron-icon hidden="[[!item.selected]]"
class="selected" icon="oobe-20:selected"></iron-icon>
</div>
</div>
diff --git a/chrome/browser/resources/chromeos/login/components/oobe_screens_list.js b/chrome/browser/resources/chromeos/login/components/oobe_screens_list.js
deleted file mode 100644
index 24f6bbd..0000000
--- a/chrome/browser/resources/chromeos/login/components/oobe_screens_list.js
+++ /dev/null
@@ -1,181 +0,0 @@
-// 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.
-
-
-import '//resources/ash/common/cr_elements/cros_color_overrides.css.js';
-import '//resources/ash/common/cr_elements/icons.html.js';
-
-import {html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-import {OobeI18nBehavior, OobeI18nBehaviorInterface} from './behaviors/oobe_i18n_behavior.js';
-
-
-/**
- * A single screen item.
- * @typedef {{
- * icon: String,
- * title: String,
- * screenID: String,
- * selected: Boolean,
- * }}
- */
-export let ScreenItem;
-
-/**
- * @constructor
- * @extends {PolymerElement}
- * @implements {OobeI18nBehaviorInterface}
- */
-const OobeScreensListBase = mixinBehaviors([OobeI18nBehavior], PolymerElement);
-
-/**
- * @polymer
- */
-export class OobeScreensList extends OobeScreensListBase {
- static get is() {
- return 'oobe-screens-list';
- }
-
- static get template() {
- return html`{__html_template__}`;
- }
-
- static get properties() {
- return {
- /**
- * List of screens to display.
- * @type {!Array<ScreenItem>}
- */
- screensList_: {
- type: Array,
- value: [],
- notify: true,
- },
- /**
- * List of selected screens.
- */
- screensSelected: {
- type: Array,
- value: [],
- },
- /**
- * Number of selected screens.
- */
- selectedScreensCount: {
- type: Number,
- value: 0,
- notify: true,
- },
- };
- }
-
- /**
- * Initialize the list of screens.
- */
- init(screens) {
- this.screensList_ = screens;
- this.screensSelected = [];
- this.selectedScreensCount = 0;
- }
-
- /**
- * Return the list of selected screens.
- */
- getScreenSelected() {
- return this.screensSelected;
- }
-
- onClick_(e) {
- const clickedScreen = e.model.screen;
- const previousSelectedState = clickedScreen.selected;
- const currentSelectedState = !previousSelectedState;
- const path =
- `screensList_.${this.screensList_.indexOf(clickedScreen)}.selected`;
- this.set(path, currentSelectedState);
- e.currentTarget.setAttribute('checked', currentSelectedState);
-
- if (currentSelectedState) {
- this.selectedScreensCount++;
- this.screensSelected.push(clickedScreen.screenID);
- } else {
- this.selectedScreensCount--;
- this.screensSelected.splice(
- this.screensSelected.indexOf(clickedScreen.screenID), 1);
- }
- this.notifyPath('screensList_');
- }
-
- getSubtitle_(locale, screen_subtitle, screen_id) {
- if (screen_subtitle) {
- // display size screen is special case as the subtitle include directly
- // the percentage and will be placed in the message placeholder.
- if (screen_id === 'display-size') {
- return this.i18nDynamic(
- locale, 'choobeDisplaySizeSubtitle', screen_subtitle);
- }
- return this.i18nDynamic(locale, screen_subtitle);
- }
- return '';
- }
-
- isScreenDisabled(is_revisitable, is_completed) {
- return (!is_revisitable) && is_completed;
- }
-
- isSyncedIconHidden(is_synced, is_completed, is_selected) {
- return (!is_synced) || (is_selected) || (is_completed);
- }
-
- isScreenVisited(is_selected, is_completed) {
- return is_completed && !is_selected;
- }
-
- getScreenID(screen_id) {
- return 'cr-button-' + screen_id;
- }
-
- focus() {
- const screens = this.shadowRoot.querySelectorAll('.screen-item');
- if (screens.length < 1) {
- return;
- }
-
- // Focus the first enabled screen in the list
- for (let i = 0; i < screens.length; ++i) {
- const screen = screens[i];
- if (!this.isScreenDisabled(
- screen.hasAttribute('is_revisitable'),
- screen.hasAttribute('is_completed'))) {
- screen.focus();
- return;
- }
- }
-
- return;
- }
-
- getAriaLabelToggleButtons_(
- locale, screen_title, screen_subtitle, screen_is_synced,
- screen_is_completed, screen_id, screen_is_selected) {
- let ariaLabel = this.i18nDynamic(locale, screen_title);
- if (screen_subtitle) {
- if (screen_id === 'display-size') {
- ariaLabel = ariaLabel + '.' + screen_subtitle;
- } else {
- ariaLabel = ariaLabel + '.' + this.i18nDynamic(locale, screen_subtitle);
- }
- }
- if (!screen_is_selected && screen_is_completed) {
- ariaLabel =
- ariaLabel + '.' + this.i18nDynamic(locale, 'choobeVisitedTile');
- }
- if (!screen_is_selected && !screen_is_completed && screen_is_synced) {
- ariaLabel =
- ariaLabel + '.' + this.i18nDynamic(locale, 'choobeSyncedTile');
- }
- return ariaLabel;
- }
-}
-
-customElements.define(OobeScreensList.is, OobeScreensList);
diff --git a/chrome/browser/resources/chromeos/login/components/oobe_screens_list.ts b/chrome/browser/resources/chromeos/login/components/oobe_screens_list.ts
new file mode 100644
index 0000000..03b9a32
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/components/oobe_screens_list.ts
@@ -0,0 +1,194 @@
+// 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.
+
+
+import '//resources/ash/common/cr_elements/cros_color_overrides.css.js';
+import '//resources/ash/common/cr_elements/icons.html.js';
+
+import {PolymerElementProperties} from '//resources/polymer/v3_0/polymer/interfaces.js';
+import {mixinBehaviors, DomRepeatEvent, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {OobeI18nBehavior, OobeI18nBehaviorInterface} from './behaviors/oobe_i18n_behavior.js';
+
+import {getTemplate} from './oobe_screens_list.html.js';
+
+/**
+ * Data that is passed to the component during initialization.
+ */
+export interface OobeScreensListScreen {
+ screenId: string;
+ title: string;
+ subtitle?: string;
+ icon: string;
+ selected: boolean;
+ isRevisitable: boolean;
+ isSynced: boolean;
+ isCompleted: boolean;
+}
+
+export interface OobeScreensListData extends Array<OobeScreensListScreen>{}
+
+const OobeScreensListBase = mixinBehaviors([OobeI18nBehavior],
+ PolymerElement) as { new (): PolymerElement
+ & OobeI18nBehaviorInterface,
+};
+
+export class OobeScreensList extends OobeScreensListBase {
+ static get is() {
+ return 'oobe-screens-list' as const;
+ }
+
+ static get template(): HTMLTemplateElement {
+ return getTemplate();
+ }
+
+ static get properties(): PolymerElementProperties {
+ return {
+ /**
+ * List of screens to display.
+ */
+ screensList: {
+ type: Array,
+ value: [],
+ notify: true,
+ },
+ /**
+ * List of selected screens.
+ */
+ screensSelected: {
+ type: Array,
+ value: [],
+ },
+ /**
+ * Number of selected screens.
+ */
+ selectedScreensCount: {
+ type: Number,
+ value: 0,
+ notify: true,
+ },
+ };
+ }
+
+ private screensList: OobeScreensListData;
+ private screensSelected: string[];
+ private selectedScreensCount: number;
+
+ /**
+ * Initialize the list of screens.
+ */
+ init(screens: OobeScreensListData): void {
+ this.screensList = screens;
+ this.screensSelected = [];
+ this.selectedScreensCount = 0;
+ }
+
+ /**
+ * Return the list of selected screens.
+ */
+ getScreenSelected(): string[] {
+ return this.screensSelected;
+ }
+
+ private onClick(e: DomRepeatEvent<OobeScreensListScreen, MouseEvent>): void {
+ const clickedScreen = e.model.item;
+ const previousSelectedState = clickedScreen.selected;
+ const currentSelectedState = !previousSelectedState;
+ const path =
+ `screensList.${this.screensList.indexOf(clickedScreen)}.selected`;
+ this.set(path, currentSelectedState);
+ (e.currentTarget as HTMLElement)?.
+ setAttribute('checked', String(currentSelectedState));
+
+ if (currentSelectedState) {
+ this.selectedScreensCount++;
+ this.screensSelected.push(clickedScreen.screenId);
+ } else {
+ this.selectedScreensCount--;
+ this.screensSelected.splice(
+ this.screensSelected.indexOf(clickedScreen.screenId), 1);
+ }
+ this.notifyPath('screensList');
+ }
+
+ private getSubtitle(locale: string, screenSubtitle: string|null,
+ screenId: string): string {
+ if (screenSubtitle) {
+ // display size screen is special case as the subtitle include directly
+ // the percentage and will be placed in the message placeholder.
+ if (screenId === 'display-size') {
+ return this.i18nDynamic(
+ locale, 'choobeDisplaySizeSubtitle', screenSubtitle);
+ }
+ return this.i18nDynamic(locale, screenSubtitle);
+ }
+ return '';
+ }
+
+ private isScreenDisabled(isRevisitable: boolean,
+ isCompleted: boolean): boolean {
+ return !isRevisitable && isCompleted;
+ }
+
+ private isSyncedIconHidden(isSynced: boolean, isCompleted: boolean,
+ isSelected: boolean): boolean {
+ return !isSynced || isSelected || isCompleted;
+ }
+
+ private isScreenVisited(isSelected: boolean, isCompleted: boolean): boolean {
+ return isCompleted && !isSelected;
+ }
+
+ private getScreenId(screenId: string): string {
+ return 'cr-button-' + screenId;
+ }
+
+ override focus(): void {
+ const screens = this.shadowRoot?.querySelectorAll('.screen-item');
+ if (!screens || screens.length < 1) {
+ this.focus();
+ } else {
+ // Focus the first enabled screen in the list
+ for (const screen of screens) {
+ if (!this.isScreenDisabled(
+ screen.hasAttribute('isRevisitable'),
+ screen.hasAttribute('isCompleted'))) {
+ (screen as HTMLElement).focus();
+ return;
+ }
+ }
+ }
+ }
+
+ private getAriaLabelToggleButtons(
+ locale: string, screenTitle: string, screenSubtitle: string|null,
+ screenIsSynced: boolean, screenIsCompleted: boolean, screenId: string,
+ screenIsSelected: boolean): string {
+ let ariaLabel = this.i18nDynamic(locale, screenTitle);
+ if (screenSubtitle) {
+ if (screenId === 'display-size') {
+ ariaLabel = ariaLabel + '.' + screenSubtitle;
+ } else {
+ ariaLabel = ariaLabel + '.' + this.i18nDynamic(locale, screenSubtitle);
+ }
+ }
+ if (!screenIsSelected && screenIsCompleted) {
+ ariaLabel =
+ ariaLabel + '.' + this.i18nDynamic(locale, 'choobeVisitedTile');
+ }
+ if (!screenIsSelected && !screenIsCompleted && screenIsSynced) {
+ ariaLabel =
+ ariaLabel + '.' + this.i18nDynamic(locale, 'choobeSyncedTile');
+ }
+ return ariaLabel;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ [OobeScreensList.is]: OobeScreensList;
+ }
+}
+
+customElements.define(OobeScreensList.is, OobeScreensList);
diff --git a/chrome/browser/resources/chromeos/login/login.gni b/chrome/browser/resources/chromeos/login/login.gni
index 500cd3b..8565d30 100644
--- a/chrome/browser/resources/chromeos/login/login.gni
+++ b/chrome/browser/resources/chromeos/login/login.gni
@@ -60,7 +60,6 @@
"components/oobe_illo_icons.html.js",
"components/oobe_i18n_dropdown.js",
"components/oobe_network_icons.html.js",
- "components/oobe_screens_list.js",
]
oobe_screens_js_files = [
@@ -253,6 +252,7 @@
"components/oobe_carousel.ts",
"components/oobe_cr_lottie.ts",
"components/oobe_display_size_selector.ts",
+ "components/oobe_screens_list.ts",
"components/oobe_slide.ts",
"components/progress_list_item.ts",
"components/security_token_pin.ts",
@@ -277,8 +277,8 @@
"components/keyboard_utils.ts",
"components/keyboard_utils_oobe.ts",
"components/long_touch_detector.ts",
- "components/web_view_helper.ts",
"components/qr_code_canvas.ts",
+ "components/web_view_helper.ts",
"components/web_view_loader.ts",
]
diff --git a/chrome/browser/resources/chromeos/login/screens/common/choobe.ts b/chrome/browser/resources/chromeos/login/screens/common/choobe.ts
index c260805..a228725 100644
--- a/chrome/browser/resources/chromeos/login/screens/common/choobe.ts
+++ b/chrome/browser/resources/chromeos/login/screens/common/choobe.ts
@@ -22,7 +22,7 @@
import {MultiStepBehavior, MultiStepBehaviorInterface} from '../../components/behaviors/multi_step_behavior.js';
import {OobeI18nBehavior, OobeI18nBehaviorInterface} from '../../components/behaviors/oobe_i18n_behavior.js';
import {OOBE_UI_STATE} from '../../components/display_manager_types.js';
-import {OobeScreensList, ScreenItem} from '../../components/oobe_screens_list.js';
+import {OobeScreensList, OobeScreensListData} from '../../components/oobe_screens_list.js';
import {getTemplate} from './choobe.html.js';
@@ -47,7 +47,7 @@
}
interface ChoobeScreenData {
- screens: ScreenItem[];
+ screens: OobeScreensListData;
}
class ChoobeScreen extends ChoobeScreenElementBase {
diff --git a/chrome/browser/ui/webui/ash/login/choobe_screen_handler.cc b/chrome/browser/ui/webui/ash/login/choobe_screen_handler.cc
index 3db7a37..76b7711 100644
--- a/chrome/browser/ui/webui/ash/login/choobe_screen_handler.cc
+++ b/chrome/browser/ui/webui/ash/login/choobe_screen_handler.cc
@@ -38,7 +38,7 @@
base::Value::List screens_list;
for (auto screen : screens) {
base::Value::Dict screen_dict;
- screen_dict.Set("screenID", base::Value(screen.screen_id.name));
+ screen_dict.Set("screenId", base::Value(screen.screen_id.name));
screen_dict.Set("title", base::Value(screen.title_id));
if (screen.subtitle_resource.has_value()) {
screen_dict.Set("subtitle",
@@ -46,9 +46,9 @@
}
screen_dict.Set("icon", base::Value(screen.icon_id));
screen_dict.Set("selected", false);
- screen_dict.Set("is_revisitable", screen.is_revisitable);
- screen_dict.Set("is_synced", screen.is_synced);
- screen_dict.Set("is_completed", screen.is_completed.value_or(false));
+ screen_dict.Set("isRevisitable", screen.is_revisitable);
+ screen_dict.Set("isSynced", screen.is_synced);
+ screen_dict.Set("isCompleted", screen.is_completed.value_or(false));
screens_list.Append(std::move(screen_dict));
}