[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: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Commit-Queue: My Nguyen <myy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#803695}

chrome/app/os_settings_strings.grdp

@@ -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>

chrome/browser/resources/settings/chromeos/os_languages_page/BUILD.gn

@@ -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"

chrome/browser/resources/settings/chromeos/os_languages_page/input_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>

chrome/browser/resources/settings/chromeos/os_languages_page/input_page.js

@@ -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

chrome/browser/resources/settings/chromeos/os_languages_page/remove_input_method_dialog.html

+<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>

chrome/browser/resources/settings/chromeos/os_languages_page/remove_input_method_dialog.js

+// 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();
+  },
+});

chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp

@@ -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"

chrome/browser/resources/settings/os_settings_resources.grd

@@ -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" />

chrome/browser/ui/webui/settings/chromeos/languages_section.cc

@@ -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},

chrome/test/data/webui/settings/chromeos/input_page_test.js

@@ -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', () => {