Commit 0e00e0a8 authored by My Nguyen's avatar My Nguyen Committed by Commit Bot

[OsSettingsLanguages] Add Remove Input Method

Current view: http://screen/9D7MNRAdxvWVhcG
Dialog view: http://screen/a6wQryUi2e2gAg8
Mock: http://go/cros-lang-settings-ux-slide#slide=25

Bug: 1113439
Change-Id: I7279be013ab91dc64dd4442b9fd07307e029b06d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2387462Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Reviewed-by: default avatarRegan Hsu <hsuregan@chromium.org>
Commit-Queue: My Nguyen <myy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#803695}
parent 0734e1b8
......@@ -292,6 +292,9 @@
<message name="IDS_OS_SETTINGS_LANGUAGES_ADD_INPUT_METHOD_LABEL" translateable="false" desc="Button under the list of input methods which opens a dialog that lets the user add keyboard layouts and input method editors.">
Add input methods
</message>
<message name="IDS_OS_SETTINGS_LANGUAGES_REMOVE_INPUT_METHOD_LABEL" translateable="false" desc="Title of the dialog that lets the user remove a given keyboard layout or input method editor.">
Remove <ph name="INPUT_METHOD_NAME">$1<ex>US keyboard</ex></ph>?
</message>
<message name="IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_TITLE" translateable="false" desc="Title for the section containing all the options for spell check settings. The options include picking between using the system's spell check or using Google's web service and a list of the enabled languages which support spell checking.">
Spell check
</message>
......
......@@ -19,6 +19,7 @@ js_type_check("closure_compile") {
":os_languages_page",
":os_languages_page_v2",
":os_languages_section",
":remove_input_method_dialog",
":smart_inputs_page",
"../../languages_page:languages",
"../../languages_page:languages_browser_proxy",
......@@ -144,6 +145,9 @@ js_library("os_add_languages_dialog") {
]
}
js_library("remove_input_method_dialog") {
}
js_library("smart_inputs_page") {
deps = [
"../../prefs:prefs_behavior",
......@@ -165,6 +169,7 @@ js_type_check("closure_compile_module") {
":os_languages_page.m",
":os_languages_page_v2.m",
":os_languages_section.m",
":remove_input_method_dialog.m",
":smart_inputs_page.m",
]
}
......@@ -306,6 +311,11 @@ js_library("os_languages_section.m") {
extra_deps = [ ":os_languages_section_module" ]
}
js_library("remove_input_method_dialog.m") {
sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/remove_input_method_dialog.m.js" ]
extra_deps = [ ":remove_input_method_dialog_module" ]
}
js_library("smart_inputs_page.m") {
sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.m.js" ]
deps = [
......@@ -329,6 +339,7 @@ group("polymer3_elements") {
":os_languages_page_module",
":os_languages_page_v2_module",
":os_languages_section_module",
":remove_input_method_dialog_module",
":smart_inputs_page_module",
"../../languages_page:languages_module",
"../../languages_page:modulize",
......@@ -416,6 +427,15 @@ polymer_modulizer("input_page") {
auto_imports = os_settings_auto_imports
}
polymer_modulizer("remove_input_method_dialog") {
js_file = "remove_input_method_dialog.js"
html_file = "remove_input_method_dialog.html"
html_type = "dom-module"
migrated_imports = settings_migrated_imports
namespace_rewrites = os_settings_namespace_rewrites
auto_imports = os_settings_auto_imports
}
polymer_modulizer("smart_inputs_page") {
js_file = "smart_inputs_page.js"
html_file = "smart_inputs_page.html"
......
......@@ -9,6 +9,7 @@
<link rel="import" href="add_input_methods_dialog.html">
<link rel="import" href="input_method_util.html">
<link rel="import" href="languages_metrics_proxy.html">
<link rel="import" href="remove_input_method_dialog.html">
<link rel="import" href="../os_route.html">
<link rel="import" href="../../controls/settings_toggle_button.html">
<link rel="import" href="../../prefs/prefs_behavior.html">
......@@ -101,6 +102,11 @@
</cr-icon-button>
</div>
</template>
<div class="separator"></div>
<cr-icon-button class="icon-clear"
on-click="onRemoveInputMethodClick_"
title="[[getRemoveInputMethodTooltip_(item)]]">
</cr-icon-button>
</div>
</template>
<div class="list-item">
......@@ -125,6 +131,13 @@
on-close="onAddInputMethodsDialogClose_">
</os-settings-add-input-methods-dialog>
</template>
<template is="dom-if" if="[[showRemoveInputMethodDialog_]]" restamp>
<os-settings-remove-input-method-dialog
input-method="[[inputMethodToRemove_]]"
language-helper="[[languageHelper]]"
on-close="onRemoveInputMethodDialogClose_">
</os-settings-remove-input-method-dialog>
</template>
</template>
<script src="input_page.js"></script>
</dom-module>
......@@ -50,6 +50,15 @@ Polymer({
type: Boolean,
value: false,
},
/** @private {!chrome.languageSettingsPrivate.InputMethod} */
inputMethodToRemove_: Object,
/** @private */
showRemoveInputMethodDialog_: {
type: Boolean,
value: false,
},
},
/** @private {?settings.LanguagesMetricsProxy} */
......@@ -188,6 +197,28 @@ Polymer({
cr.ui.focusWithoutInk(assert(this.$.addInputMethod));
},
/**
* @param {!chrome.languageSettingsPrivate.InputMethod} inputMethod
* @private
*/
getRemoveInputMethodTooltip_(inputMethod) {
return this.i18n('removeInputMethodLabel', inputMethod.displayName);
},
/**
* @param {!{model: !{item: chrome.languageSettingsPrivate.InputMethod}}} e
* @private
*/
onRemoveInputMethodClick_(e) {
this.inputMethodToRemove_ = e.model.item;
this.showRemoveInputMethodDialog_ = true;
},
/** @private */
onRemoveInputMethodDialogClose_() {
this.showRemoveInputMethodDialog_ = false;
},
/**
* @return {string|undefined}
* @private
......
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<dom-module id="os-settings-remove-input-method-dialog">
<template>
<cr-dialog id="dialog" close-text="$i18n{close}" show-on-attach>
<div slot="title">[[getTitle_(inputMethod)]]</div>
<div slot="button-container">
<cr-button class="cancel-button" on-click="onCancelButtonTap_">
$i18n{cancel}
</cr-button>
<cr-button class="action-button" on-click="onActionButtonTap_">
$i18n{remove}
</cr-button>
</div>
</cr-dialog>
</template>
<script src="remove_input_method_dialog.js"></script>
</dom-module>
// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview 'os-settings-remove-input-method-dialog' is a dialog for
* removing an input method.
*/
Polymer({
is: 'os-settings-remove-input-method-dialog',
behaviors: [
I18nBehavior,
],
properties: {
/** @type {!chrome.languageSettingsPrivate.InputMethod} */
inputMethod: Object,
/** @type {!LanguageHelper} */
languageHelper: Object,
},
/** @private */
getTitle_() {
return this.i18n('removeInputMethodLabel', this.inputMethod.displayName);
},
/** @private */
onCancelButtonTap_() {
this.$.dialog.close();
},
/** @private */
onActionButtonTap_() {
this.languageHelper.removeInputMethod(this.inputMethod.id);
this.$.dialog.close();
},
});
......@@ -144,6 +144,11 @@
use_base_dir="false"
compress="false"
type="BINDATA" />
<include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_REMOVE_INPUT_METHOD_DIALOG_M_JS"
file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/remove_input_method_dialog.m.js"
use_base_dir="false"
compress="false"
type="BINDATA" />
<include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_SMART_INPUTS_PAGE_M_JS"
file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.m.js"
use_base_dir="false"
......
......@@ -749,6 +749,12 @@
<structure name="IDR_OS_SETTINGS_LANGUAGES_INPUT_METHOD_UTIL_JS"
file="chromeos/os_languages_page/input_method_util.js"
compress="false" type="chrome_html" />
<structure name="IDR_OS_SETTINGS_LANGUAGES_REMOVE_INPUT_METHOD_DIALOG_HTML"
file="chromeos/os_languages_page/remove_input_method_dialog.html"
compress="false" type="chrome_html" />
<structure name="IDR_OS_SETTINGS_LANGUAGES_REMOVE_INPUT_METHOD_DIALOG_JS"
file="chromeos/os_languages_page/remove_input_method_dialog.js"
compress="false" type="chrome_html" />
<structure name="IDR_OS_SETTINGS_LANGUAGES_SMART_INPUTS_PAGE_HTML"
file="chromeos/os_languages_page/smart_inputs_page.html"
compress="false" type="chrome_html" />
......
......@@ -286,6 +286,8 @@ void AddInputPageStringsV2(content::WebUIDataSource* html_source) {
IDS_OS_SETTINGS_LANGUAGES_INPUT_METHOD_LIST_TITLE},
{"openOptionsPage", IDS_OS_SETTINGS_LANGUAGES_OPEN_OPTIONS_PAGE_LABEL},
{"addInputMethodLabel", IDS_OS_SETTINGS_LANGUAGES_ADD_INPUT_METHOD_LABEL},
{"removeInputMethodLabel",
IDS_OS_SETTINGS_LANGUAGES_REMOVE_INPUT_METHOD_LABEL},
{"spellCheckTitle", IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_TITLE},
{"spellCheckDisabledReason",
IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_DISABLED_REASON},
......
......@@ -97,6 +97,40 @@ suite('input page', () => {
router.getQueryParameters().get('id'),
'_comp_ime_jkghodnilhceideoidjikpgommlajknkxkb:us::eng');
});
test('removes an input method', () => {
const inputMethodName = 'US keyboard';
let inputMethodsList = inputPage.$.inputMethodsList;
let items = inputMethodsList.querySelectorAll('.list-item');
assertEquals(3, items.length);
assertEquals(
inputMethodName,
items[0].querySelector('.display-name').textContent.trim());
assertFalse(!!inputPage.$$('os-settings-remove-input-method-dialog'));
// opens the remove input method dialog.
items[0].querySelector('.icon-clear').click();
Polymer.dom.flush();
const dialog = inputPage.$$('os-settings-remove-input-method-dialog');
assertTrue(!!dialog);
assertTrue(
dialog.$$('[slot=title]').textContent.includes(inputMethodName));
// removes the input method.
const actionButton = dialog.$$('.action-button');
assertTrue(!!actionButton);
actionButton.click();
Polymer.dom.flush();
inputMethodsList = inputPage.$.inputMethodsList;
items = inputMethodsList.querySelectorAll('.list-item');
assertEquals(2, items.length);
assertTrue(
items[0].querySelector('.display-name').textContent.trim() !==
inputMethodName);
});
});
suite('add input methods dialog', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment