[OsSettingsLanguages] Add all input methods and search UI

Mock: http://go/cros-lang-settings-ux-slide#slide=24
Figma: http://go/cros-lang-settings-figma
Normal view: http://screen/BSw5Hr7mBSADReH
Search view: http://screen/6VKAdL8xeyzJvCS

Note: Input methods names look like duplicate now because they are under
revision. Will add capability to search by language and country later.

Bug: 1113439
Change-Id: Id28cd18db110321048be54ce8c0948ae9a76fa8e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2397988
Commit-Queue: My Nguyen <myy@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#806933}

chrome/app/os_settings_strings.grdp

@@ -304,6 +304,9 @@
   <message name="IDS_OS_SETTINGS_LANGUAGES_ALL_INPUT_METHODS_LABEL" translateable="false" desc="Title of the list of all keyboard layouts or input method editors.">
     All input methods
   </message>
+  <message name="IDS_OS_SETTINGS_LANGUAGES_SEARCH_INPUT_METHODS_LABEL" translateable="false" desc="Placeholder in the input field to search keyboard layouts or input method editors.">
+    Search input methods
+  </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/extensions/api/language_settings_private/language_settings_private_api.cc

@@ -47,6 +47,7 @@
 
 #if defined(OS_CHROMEOS)
 #include "chrome/grit/generated_resources.h"
+#include "chromeos/constants/chromeos_features.h"
 #include "ui/base/ime/chromeos/component_extension_ime_manager.h"
 #include "ui/base/ime/chromeos/extension_ime_util.h"
 #include "ui/base/ime/chromeos/input_method_manager.h"
@@ -133,6 +134,12 @@ std::vector<std::string> GetSortedComponentIMEs(
       }
     }
   }
+  if (base::FeatureList::IsEnabled(
+          chromeos::features::kLanguageSettingsUpdate)) {
+    for (const auto& input_method_id : available_component_imes) {
+      component_ime_list.push_back(input_method_id);
+    }
+  }
 
   return component_ime_list;
 }

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="../metrics_recorder.html">
@@ -19,6 +20,15 @@
         padding-inline-end: 0;
       }
 
+      cr-search-field {
+        padding-bottom: 8px;
+      }
+
+      .label {
+        padding-bottom: 4px;
+        padding-top: 8px;
+      }
+
       .list-item {
         color: var(--cros-text-color-primary);
         min-height: 36px;
@@ -32,13 +42,20 @@
     <cr-dialog id="dialog" close-text="$i18n{close}" show-on-attach>
       <div slot="title">$i18n{addInputMethodLabel}</div>
       <div id="dialogBody" slot="body" scrollable>
+        <cr-search-field label="$i18n{searchInputMethodsLabel}"
+            id="search" on-search-changed="onSearchChanged_"
+            on-keydown="onKeydown_" autofocus>
+        </cr-search-field>
         <template is="dom-if" if="[[showSuggestedList_]]">
           <div id="suggestedInputMethods">
-            $i18n{suggestedInputMethodsLabel}
+            <div class="label">
+              $i18n{suggestedInputMethodsLabel}
+            </div>
             <iron-list scroll-target="[[$$('suggestedInputMethods')]]"
                 items="[[suggestedInputMethods_]]">
               <template>
                 <cr-checkbox class="list-item no-outline"
+                    checked="[[willAdd_(item.id, inputMethodsToAdd_.size)]]"
                     tab-index="[[tabIndex]]" on-change="onCheckboxChange_">
                   [[item.displayName]]
                 </cr-checkbox>
@@ -46,6 +63,23 @@
             </iron-list>
           </div>
         </template>
+        <div id="allInputMethods">
+          <div id="allInputMethodsLabel" class="label"
+              hidden="[[!showSuggestedList_]]">
+            $i18n{allInputMethodsLabel}
+          </div>
+          <iron-list scroll-target="[[$$('allInputMethods')]]"
+              items="[[getAllInputMethods_(languages.inputMethods,
+                  lowercaseQueryString_)]]">
+            <template>
+              <cr-checkbox class="list-item no-outline"
+                  checked="[[willAdd_(item.id, inputMethodsToAdd_.size)]]"
+                  tab-index="[[tabIndex]]" on-change="onCheckboxChange_">
+                [[item.displayName]]
+              </cr-checkbox>
+            </template>
+          </iron-list>
+        </div>
       </div>
       <div slot="button-container">
         <cr-button class="cancel-button" on-click="onCancelButtonTap_">

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

@@ -40,7 +40,8 @@ Polymer({
     showSuggestedList_: {
       type: Boolean,
       value: false,
-      computed: 'shouldShowSuggestedList_(suggestedInputMethods_)'
+      computed:
+          'shouldShowSuggestedList_(suggestedInputMethods_, lowercaseQueryString_)'
     },
 
     /** @private */
@@ -49,6 +50,20 @@ Polymer({
       value: true,
       computed: 'shouldDisableActionButton_(inputMethodsToAdd_.size)',
     },
+
+    /** @private */
+    lowercaseQueryString_: {
+      type: String,
+      value: '',
+    },
+  },
+
+  /**
+   * @param {!CustomEvent<string>} e
+   * @private
+   */
+  onSearchChanged_(e) {
+    this.lowercaseQueryString_ = e.detail.toLocaleLowerCase();
   },
 
   /**
@@ -67,12 +82,41 @@ Polymer({
         });
   },
 
+  /**
+   * @return {!Array<!chrome.languageSettingsPrivate.InputMethod>} A list of
+   *     possible input methods.
+   * @private
+   */
+  getAllInputMethods_() {
+    return this.languages.inputMethods.supported.filter(inputMethod => {
+      // Don't show input methods which are already enabled.
+      if (this.languageHelper.isInputMethodEnabled(inputMethod.id)) {
+        return false;
+      }
+      // Show input methods whose name matches the query.
+      return inputMethod.displayName.toLocaleLowerCase().includes(
+          this.lowercaseQueryString_);
+    });
+  },
+
   /**
    * @return {boolean}
    * @private
    */
   shouldShowSuggestedList_() {
-    return this.suggestedInputMethods_.length > 0;
+    return this.suggestedInputMethods_.length > 0 &&
+        !this.lowercaseQueryString_;
+  },
+
+  /**
+   * True if the user has chosen to add this input method (checked its
+   * checkbox).
+   * @param {string} id
+   * @return {boolean}
+   * @private
+   */
+  willAdd_(id) {
+    return this.inputMethodsToAdd_.has(id);
   },
 
   /**
@@ -116,4 +160,17 @@ Polymer({
     settings.recordSettingChange();
     this.$.dialog.close();
   },
+
+  /**
+   * @param {!KeyboardEvent} e
+   * @private
+   */
+  onKeydown_(e) {
+    // Close dialog if 'esc' is pressed and the search box is already empty.
+    if (e.key === 'Escape' && !this.$.search.getValue().trim()) {
+      this.$.dialog.close();
+    } else if (e.key !== 'PageDown' && e.key !== 'PageUp') {
+      this.$.search.scrollIntoViewIfNeeded();
+    }
+  },
 });

chrome/browser/resources/settings/languages_page/languages.js

@@ -132,7 +132,7 @@ Polymer({
     },
 
     /**
-     * Hash set of input method ids that are enabled.
+     * Hash set of enabled input methods id for mebership testings
      * @private {!Set<string>}
      */
     enabledInputMethodSet_: {
@@ -1090,11 +1090,9 @@ Polymer({
     const combinedInputMethods = [];
     for (const languageCode of languageCodes) {
       const inputMethods = this.getInputMethodsForLanguage(languageCode);
-      // Get the language's unused input methods.
+      // Get the language's unused input methods and mark them as used.
       const newInputMethods = inputMethods.filter(
           inputMethod => !usedInputMethods.has(inputMethod.id));
-      // Some input methods might be used by different languages, save the new
-      // ones in usedInputMethods to prevent adding them twice.
       newInputMethods.forEach(
           inputMethod => usedInputMethods.add(inputMethod.id));
       combinedInputMethods.push(...newInputMethods);

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

@@ -307,6 +307,8 @@ void AddInputPageStringsV2(content::WebUIDataSource* html_source) {
        IDS_OS_SETTINGS_LANGUAGES_SUGGESTED_INPUT_METHODS_LABEL},
       {"allInputMethodsLabel",
        IDS_OS_SETTINGS_LANGUAGES_ALL_INPUT_METHODS_LABEL},
+      {"searchInputMethodsLabel",
+       IDS_OS_SETTINGS_LANGUAGES_SEARCH_INPUT_METHODS_LABEL},
       {"spellCheckTitle", IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_TITLE},
       {"spellCheckEnhancedLabel",
        IDS_OS_SETTINGS_LANGUAGES_SPELL_CHECK_ENHANCED_LABEL},

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

@@ -5,6 +5,7 @@
 // clang-format off
 // #import {LanguagesBrowserProxyImpl, LanguagesMetricsProxyImpl} from 'chrome://os-settings/chromeos/lazy_load.js';
 // #import {CrSettingsPrefs, Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {getFakeLanguagePrefs} from '../fake_language_settings_private.m.js'
 // #import {FakeSettingsPrivate} from '../fake_settings_private.m.js';
@@ -169,6 +170,7 @@ suite('input page', () => {
   suite('add input methods dialog', () => {
     let dialog;
     let suggestedInputMethods;
+    let allInputMethods;
     let cancelButton;
     let actionButton;
 
@@ -188,6 +190,9 @@ suite('input page', () => {
       suggestedInputMethods = dialog.$$('#suggestedInputMethods');
       assertTrue(!!suggestedInputMethods);
 
+      allInputMethods = dialog.$$('#allInputMethods');
+      assertTrue(!!allInputMethods);
+
       // No input methods has been selected, so the action button is disabled.
       assertTrue(actionButton.disabled);
       assertFalse(cancelButton.disabled);
@@ -205,19 +210,36 @@ suite('input page', () => {
     });
 
     test('adds input methods', () => {
-      const listItems = suggestedInputMethods.querySelectorAll('.list-item');
-      assertEquals(2, listItems.length);
-      assertEquals('US Swahili keyboard', listItems[0].textContent.trim());
-      assertEquals('Swahili keyboard', listItems[1].textContent.trim());
-      // selecting two input methods.
-      listItems[0].click();
-      listItems[1].click();
+      const suggestedItems =
+          suggestedInputMethods.querySelectorAll('.list-item');
+      // input methods are based on and ordered by enabled languages
+      assertEquals(2, suggestedItems.length);
+      assertEquals('US Swahili keyboard', suggestedItems[0].textContent.trim());
+      assertEquals('Swahili keyboard', suggestedItems[1].textContent.trim());
+      // selecting Swahili keyboard.
+      suggestedItems[1].click();
+
+      const allItems = allInputMethods.querySelectorAll('.list-item');
+      // All input methods should appear and ordered based on fake settings
+      // data.
+      assertEquals(3, allItems.length);
+      assertEquals('Swahili keyboard', allItems[0].textContent.trim());
+      // checked is reflected
+      assertTrue(allItems[0].checked);
+      assertEquals('US Swahili keyboard', allItems[1].textContent.trim());
+      assertFalse(allItems[1].checked);
+      assertEquals('Vietnamese keyboard', allItems[2].textContent.trim());
+      // selecting Vietnamese keyboard
+      allItems[2].click();
+
       actionButton.click();
 
       assertTrue(languageHelper.isInputMethodEnabled(
           '_comp_ime_abcdefghijklmnopqrstuvwxyzabcdefxkb:sw:sw'));
-      assertTrue(languageHelper.isInputMethodEnabled(
+      assertFalse(languageHelper.isInputMethodEnabled(
           '_comp_ime_abcdefghijklmnopqrstuvwxyzabcdefxkb:us:sw'));
+      assertTrue(languageHelper.isInputMethodEnabled(
+          '_comp_ime_abcdefghijklmnopqrstuvwxyzabcdefxkb:vi:vi'));
     });
 
     test('suggested input methods hidden when no languages is enabled', () => {
@@ -245,6 +267,47 @@ suite('input page', () => {
       assertTrue(!!suggestedInputMethods);
       assertEquals('none', getComputedStyle(suggestedInputMethods).display);
     });
+
+    test('searches input methods correctly', () => {
+      const searchInput = dialog.$$('cr-search-field');
+      const getItems = function() {
+        return allInputMethods.querySelectorAll('.list-item:not([hidden])');
+      };
+
+      assertFalse(dialog.$$('#allInputMethodsLabel').hidden);
+      assertEquals('block', getComputedStyle(suggestedInputMethods).display);
+
+      // Expecting a few languages to be displayed when no query exists.
+      assertGE(getItems().length, 1);
+
+      // Search hides suggestedInputMethods and allInputMethodsLabel.
+      searchInput.setValue('v');
+      Polymer.dom.flush();
+      assertTrue(dialog.$$('#allInputMethodsLabel').hidden);
+      assertEquals('none', getComputedStyle(suggestedInputMethods).display);
+
+      // Search input methods name
+      searchInput.setValue('vietnamese');
+      Polymer.dom.flush();
+      assertEquals(1, getItems().length);
+      assertTrue(getItems()[0].textContent.includes('Vietnamese'));
+    });
+
+    test('has escape key behavior working correctly', function() {
+      const searchInput = dialog.$$('cr-search-field');
+      searchInput.setValue('dummyquery');
+
+      // Test that dialog is not closed if 'Escape' is pressed on the input
+      // and a search query exists.
+      MockInteractions.keyDownOn(searchInput, 19, [], 'Escape');
+      assertTrue(dialog.$.dialog.open);
+
+      // Test that dialog is closed if 'Escape' is pressed on the input and no
+      // search query exists.
+      searchInput.setValue('');
+      MockInteractions.keyDownOn(searchInput, 19, [], 'Escape');
+      assertFalse(dialog.$.dialog.open);
+    });
   });
 
   suite('records metrics', () => {

chrome/test/data/webui/settings/fake_language_settings_private.js

@@ -163,7 +163,13 @@ cr.define('settings', function() {
           displayName: 'US Swahili keyboard',
           languageCodes: ['en', 'en-US', 'sw'],
           enabled: false,
-        }
+        },
+        {
+          id: '_comp_ime_abcdefghijklmnopqrstuvwxyzabcdefxkb:vi:vi',
+          displayName: 'Vietnamese keyboard',
+          languageCodes: ['vi'],
+          enabled: false,
+        },
       ];
     }