Skip to content

Commit

Permalink
CrOS Settings: Extract Languages L1 page to card element
Browse files Browse the repository at this point in the history
This is done in preparation to create a reusable element that can live
in the Languages page and the new System Preferences category.

Screenshot: http://screen/7EtMz3ghNWkMXha.png

Bug: b/297108916, b/263823772
Test: browser_tests --gtest_filter="OSSettingsOsLanguagesPage*"
Change-Id: I8a31263ab1d1f6006605e2216491d9d8d7baaa12
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4812075
Reviewed-by: Michael Cui <mlcui@google.com>
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Commit-Queue: Wes Okuhara <wesokuhara@google.com>
Cr-Commit-Position: refs/heads/main@{#1188458}
  • Loading branch information
Wes Okuhara authored and Chromium LUCI CQ committed Aug 25, 2023
1 parent c9fff86 commit 9b42a1b
Show file tree
Hide file tree
Showing 10 changed files with 229 additions and 152 deletions.
1 change: 1 addition & 0 deletions chrome/browser/resources/ash/settings/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ build_webui("build") {
"os_languages_page/cr_checkbox_with_policy.ts",
"os_languages_page/input_method_options_page.ts",
"os_languages_page/input_page.ts",
"os_languages_page/language_settings_card.ts",
"os_languages_page/os_add_languages_dialog.ts",
"os_languages_page/os_edit_dictionary_page.ts",
"os_languages_page/os_japanese_clear_ime_data_dialog.ts",
Expand Down
1 change: 1 addition & 0 deletions chrome/browser/resources/ash/settings/lazy_load.ts
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ export {OsSettingsChangeDeviceLanguageDialogElement} from './os_languages_page/c
export {CrCheckboxWithPolicyElement} from './os_languages_page/cr_checkbox_with_policy.js';
export {SettingsInputMethodOptionsPageElement} from './os_languages_page/input_method_options_page.js';
export {OsSettingsInputPageElement} from './os_languages_page/input_page.js';
export {LanguageSettingsCardElement} from './os_languages_page/language_settings_card.js';
export {SettingsLanguagesElement} from './os_languages_page/languages.js';
export {LanguagesBrowserProxy, LanguagesBrowserProxyImpl} from './os_languages_page/languages_browser_proxy.js';
export {InputsShortcutReminderState, LanguagesMetricsProxyImpl, LanguagesPageInteraction} from './os_languages_page/languages_metrics_proxy.js';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<style include="settings-shared"></style>

<settings-card header-text="$i18n{osLanguagesPageTitle}">
<cr-link-row
id="languagesRow"
label="$i18n{languagesPageTitle}"
sub-label="[[getLanguageDisplayName_(
languages.prospectiveUILanguage, languageHelper)]]"
on-click="onLanguagesV2Click_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
<cr-link-row
id="inputRow"
class="hr"
label="$i18n{inputPageTitleV2}"
sub-label="[[getInputMethodDisplayName_(
languages.inputMethods.currentId, languageHelper)]]"
on-click="onInputClick_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
<template is="dom-if" if="[[smartInputsEnabled_]]">
<cr-link-row
id="smartInputsRow"
class="hr"
label="$i18n{smartInputsTitle}"
on-click="onSmartInputsClick_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
</template>
</settings-card>
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
// Copyright 2023 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
* @fileoverview
* 'language-settings-card' is the card element containing language settings.
*/

import 'chrome://resources/cr_elements/cr_link_row/cr_link_row.js';
import '../os_settings_page/settings_card.js';
import '../settings_shared.css.js';

import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {PrefsState} from '../common/types.js';
import {RouteOriginMixin} from '../route_origin_mixin.js';
import {Router, routes} from '../router.js';

import {getTemplate} from './language_settings_card.html.js';
import {LanguageHelper, LanguagesModel} from './languages_types.js';

// The IME ID for the Accessibility Common extension used by Dictation.
const ACCESSIBILITY_COMMON_IME_ID =
'_ext_ime_egfdjlfmgnehecnclamagfafdccgfndpdictation';

const LanguageSettingsCardElementBase =
RouteOriginMixin(I18nMixin(PolymerElement));

export class LanguageSettingsCardElement extends
LanguageSettingsCardElementBase {
static get is() {
return 'language-settings-card' as const;
}

static get template() {
return getTemplate();
}

static get properties() {
return {
prefs: {
type: Object,
notify: true,
},

languages: Object,

languageHelper: Object,

/**
* This is enabled when any of the smart inputs features are allowed.
*/
smartInputsEnabled_: {
type: Boolean,
value() {
return loadTimeData.getBoolean('allowEmojiSuggestion');
},
},
};
}

// Public API: Bidirectional data flow.
/** Passed down to children. Do not access without using PrefsMixin. */
prefs: PrefsState;

// Public API: Downwards data flow.
languages: LanguagesModel|undefined;
languageHelper: LanguageHelper|undefined;

// Internal state.
private smartInputsEnabled_: boolean;

constructor() {
super();

/** RouteOriginMixin override */
this.route = routes.OS_LANGUAGES;
}

override ready(): void {
super.ready();

this.addFocusConfig(routes.OS_LANGUAGES_LANGUAGES, '#languagesRow');
this.addFocusConfig(routes.OS_LANGUAGES_INPUT, '#inputRow');
this.addFocusConfig(routes.OS_LANGUAGES_SMART_INPUTS, '#smartInputsRow');
}

private onLanguagesV2Click_(): void {
Router.getInstance().navigateTo(routes.OS_LANGUAGES_LANGUAGES);
}

private onInputClick_(): void {
Router.getInstance().navigateTo(routes.OS_LANGUAGES_INPUT);
}

private onSmartInputsClick_(): void {
Router.getInstance().navigateTo(routes.OS_LANGUAGES_SMART_INPUTS);
}

/**
* @param code The language code of the language.
* @return The display name of the language specified.
*/
private getLanguageDisplayName_(code: string|undefined): string {
if (!code || !this.languageHelper) {
return '';
}
const language = this.languageHelper.getLanguage(code);
if (!language) {
return '';
}
return language.displayName;
}

/**
* @param id The input method ID.
* @return The display name of the input method.
*/
private getInputMethodDisplayName_(id: string|undefined): string {
if (!id || !this.languageHelper) {
return '';
}
if (id === ACCESSIBILITY_COMMON_IME_ID) {
return '';
}
return this.languageHelper.getInputMethodDisplayName(id);
}
}

customElements.define(
LanguageSettingsCardElement.is, LanguageSettingsCardElement);

declare global {
interface HTMLElementTagNameMap {
[LanguageSettingsCardElement.is]: LanguageSettingsCardElement;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,11 @@
<!-- Top-level settings section. -->
<os-settings-animated-pages id="pages" section="[[section_]]">
<div route-path="default">
<settings-card header-text="$i18n{osLanguagesPageTitle}">
<cr-link-row
id="languagesRow"
label="$i18n{languagesPageTitle}"
sub-label="[[getLanguageDisplayName_(
languages.prospectiveUILanguage, languageHelper)]]"
on-click="onLanguagesV2Click_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
<cr-link-row
id="inputRow"
class="hr"
label="[[inputPageTitle_]]"
sub-label="[[getInputMethodDisplayName_(
languages.inputMethods.currentId, languageHelper)]]"
on-click="onInputClick_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
<template is="dom-if" if="[[smartInputsEnabled_]]">
<cr-link-row
id="smartInputsRow"
class="hr"
label="$i18n{smartInputsTitle}"
on-click="onSmartInputsClick_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
</template>
</settings-card>
<language-settings-card
prefs="{{prefs}}"
languages="[[languages]]"
language-helper="[[languageHelper]]">
</language-settings-card>
</div>

<!-- "Languages" page. -->
Expand All @@ -51,7 +28,7 @@

<!-- "Input" page. -->
<template is="dom-if" route-path="/osLanguages/input">
<os-settings-subpage page-title="[[inputPageTitle_]]">
<os-settings-subpage page-title="$i18n{inputPageTitleV2}">
<os-settings-input-page language-helper="[[languageHelper]]"
languages="[[languages]]" prefs="{{prefs}}">
</os-settings-input-page>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,23 @@

import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
import './input_method_options_page.js';
import './input_page.js';
import './languages.js';
import './os_japanese_manage_user_dictionary_page.js';
import './os_languages_page_v2.js';
import './smart_inputs_page.js';
import './language_settings_card.js';
import '../os_settings_page/os_settings_animated_pages.js';
import '../os_settings_page/os_settings_subpage.js';
import '../os_settings_page/settings_card.js';
import '../settings_shared.css.js';
import '../settings_vars.css.js';

import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {PrefsState} from '../common/types.js';
import {Section} from '../mojom-webui/routes.mojom-webui.js';
import {RouteOriginMixin} from '../route_origin_mixin.js';
import {Router, routes} from '../router.js';

import {LanguageHelper, LanguagesModel} from './languages_types.js';
import {getTemplate} from './os_languages_section.html.js';

// The IME ID for the Accessibility Common extension used by Dictation.
const ACCESSIBILITY_COMMON_IME_ID =
'_ext_ime_egfdjlfmgnehecnclamagfafdccgfndpdictation';

const OsSettingsLanguagesSectionElementBase =
RouteOriginMixin(I18nMixin(PolymerElement));
const OsSettingsLanguagesSectionElementBase = I18nMixin(PolymerElement);

export class OsSettingsLanguagesSectionElement extends
OsSettingsLanguagesSectionElementBase {
Expand All @@ -52,7 +40,10 @@ export class OsSettingsLanguagesSectionElement extends

static get properties() {
return {
prefs: Object,
prefs: {
type: Object,
notify: true,
},

section_: {
type: Number,
Expand All @@ -65,105 +56,21 @@ export class OsSettingsLanguagesSectionElement extends
notify: true,
},

languageHelper: Object,

inputPageTitle_: {
type: String,
value(this: OsSettingsLanguagesSectionElement): string {
// TODO: b/263823772 - Inline this variable.
const isUpdate2 = true;
return this.i18n(isUpdate2 ? 'inputPageTitleV2' : 'inputPageTitle');
},
},

/**
* This is enabled when any of the smart inputs features is allowed.
*/
smartInputsEnabled_: {
type: Boolean,
value() {
return loadTimeData.getBoolean('allowEmojiSuggestion');
},
languageHelper: {
type: Object,
},

};
}

// Public API: Bidirectional data flow.
/** Passed down to children. Do not access without using PrefsMixin. */
prefs: unknown;
prefs: PrefsState;

// Internal state.
private languages: LanguagesModel|undefined;
// Only defined after a render.
private languageHelper: LanguageHelper;
private section_: Section;

// loadTimeData flags and strings.
private inputPageTitle_: string;
private smartInputsEnabled_: boolean;

constructor() {
super();

/** RouteOriginMixin override */
this.route = routes.OS_LANGUAGES;
}

override ready(): void {
super.ready();

this.addFocusConfig(routes.OS_LANGUAGES_LANGUAGES, '#languagesRow');
this.addFocusConfig(routes.OS_LANGUAGES_INPUT, '#inputRow');
this.addFocusConfig(routes.OS_LANGUAGES_SMART_INPUTS, '#smartInputsRow');
}

private onLanguagesV2Click_(): void {
Router.getInstance().navigateTo(routes.OS_LANGUAGES_LANGUAGES);
}

private onInputClick_(): void {
Router.getInstance().navigateTo(routes.OS_LANGUAGES_INPUT);
}

private onSmartInputsClick_(): void {
Router.getInstance().navigateTo(routes.OS_LANGUAGES_SMART_INPUTS);
}

/**
* @param code The language code of the language.
* @param languageHelper The LanguageHelper object.
* @return The display name of the language specified.
*/
private getLanguageDisplayName_(
code: string|undefined, languageHelper: LanguageHelper): string {
if (!code) {
return '';
}
const language = languageHelper.getLanguage(code);
if (!language) {
return '';
}
return language.displayName;
}

/**
* @param id The input method ID.
* @param languageHelper The LanguageHelper object.
* @return The display name of the input method.
*/
private getInputMethodDisplayName_(
id: string|undefined, languageHelper: LanguageHelper): string {
if (id === undefined) {
return '';
}

if (id === ACCESSIBILITY_COMMON_IME_ID) {
return '';
}

return languageHelper.getInputMethodDisplayName(id);
}
}

customElements.define(
Expand Down

0 comments on commit 9b42a1b

Please sign in to comment.