[OsSettingsLanguages] Add search for Change Device Language Dialog

Also add description for the dialog.
Will update search field look later.
Keeping search field's onKeyDown behavior similar to AddLanguagesDialog

Current view: http://screen/89QAGJxXX5Yh2nB
Spec: http://go/cros-lang-settings-ux-slide#slide=15

String is being finalised so translateable=false and no screenshots
required

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

chrome/app/os_settings_strings.grdp

@@ -265,6 +265,9 @@
   <message name="IDS_OS_SETTINGS_LANGUAGES_CHANGE_DEVICE_LANGUAGE_DIALOG_TITLE" translateable="false" desc="Title for the dialog to change device language.">
     Change device language
   </message>
+  <message name="IDS_OS_SETTINGS_LANGUAGES_CHANGE_DEVICE_LANGUAGE_DIALOG_DESCRIPTION" translateable="false" desc="Description for the dialog to change device language.">
+    The change in device language requires a restart. <ph name="BEGIN_LINK_LEARN_MORE">&lt;a target="_blank" href="$1"&gt;</ph>Learn more<ph name="END_LINK_LEARN_MORE">&lt;/a&gt;</ph>
+  </message>
   <message name="IDS_OS_SETTINGS_LANGUAGES_CHANGE_DEVICE_LANGUAGE_CONFIRM_BUTTON_LABEL" translateable="false" desc="Label for the button where users can confirm the selected language and restart the device.">
     Confirm and restart
   </message>

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

@@ -29,6 +29,7 @@ js_library("change_device_language_dialog") {
   deps = [
     "../../languages_page:languages",
     "//ui/webui/resources/cr_elements:cr_scrollable_behavior",
+    "//ui/webui/resources/cr_elements/cr_search_field:cr_search_field",
   ]
 }
 
@@ -165,7 +166,9 @@ js_library("change_device_language_dialog.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_languages_page/change_device_language_dialog.m.js" ]
   deps = [
     "../../languages_page:languages.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements:cr_scrollable_behavior.m",
+    "//ui/webui/resources/cr_elements/cr_search_field:cr_search_field.m",
   ]
   extra_deps = [ ":change_device_language_dialog_module" ]
 }

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

@@ -2,11 +2,14 @@
 
 <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/html/assert.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
+<link rel="import" href="../localized_link/localized_link.html">
 <link rel="import" href="../../languages_page/languages.html">
 <link rel="import" href="../../settings_shared_css.html">
 
@@ -22,6 +25,11 @@
         padding-inline-start: 0;
       }
 
+      cr-search-field {
+        margin-bottom: 16px;
+        margin-top: 16px;
+      }
+
       iron-icon[icon='settings:check-circle'] {
         --iron-icon-fill-color: var(--cr-link-color);
         margin-inline-end: 26px;
@@ -56,9 +64,17 @@
     <cr-dialog id="dialog" close-text="$i18n{close}" show-on-attach>
       <div slot="title">$i18n{changeDeviceLanguageDialogTitle}</div>
       <div id="dialogBody" slot="body" scrollable>
+        <settings-localized-link class="padded"
+            localized-string="[[i18nAdvanced(
+                'changeDeviceLanguageDialogDescription')]]">
+        </settings-localized-link>
+        <cr-search-field class="padded" label="$i18n{searchLanguages}"
+            id="search" on-search-changed="onSearchChanged_"
+            on-keydown="onKeydown_" autofocus>
+        </cr-search-field>
         <iron-list scroll-target="[[$$('[slot=body]')]]"
-            items="[[getPossibleDeviceLanguages_(
-                languages.supported, languages.enabled.*)]]"
+            items="[[getPossibleDeviceLanguages_(languages.supported,
+                languages.enabled.*, lowercaseQueryString_)]]"
             selection-enabled selected-item="{{selectedLanguage_}}">
           <template>
             <!-- |selected| is a property of iron-list -->

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

@@ -11,6 +11,7 @@ Polymer({
 
   behaviors: [
     CrScrollableBehavior,
+    I18nBehavior,
   ],
 
   properties: {
@@ -31,6 +32,20 @@ Polymer({
       type: Boolean,
       computed: 'shouldDisableActionButton_(selectedLanguage_)',
     },
+
+    /** @private */
+    lowercaseQueryString_: {
+      type: String,
+      value: '',
+    },
+  },
+
+  /**
+   * @param {!CustomEvent<string>} e
+   * @private
+   */
+  onSearchChanged_(e) {
+    this.lowercaseQueryString_ = e.detail.toLowerCase();
   },
 
   /**
@@ -39,14 +54,17 @@ Polymer({
    * @private
    */
   getPossibleDeviceLanguages_() {
-    // TODO(crbug/1113439): add search and filter based on search value.
     return this.languages.supported.filter(language => {
       if (!language.supportsUI || language.isProhibitedLanguage ||
           language.code === this.languages.prospectiveUILanguage) {
         return false;
       }
 
-      return true;
+      return !this.lowercaseQueryString_ ||
+          language.displayName.toLowerCase().includes(
+              this.lowercaseQueryString_) ||
+          language.nativeDisplayName.toLowerCase().includes(
+              this.lowercaseQueryString_);
     });
   },
 
@@ -91,4 +109,17 @@ Polymer({
     this.languageHelper.setProspectiveUILanguage(this.selectedLanguage_.code);
     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/ui/webui/settings/chromeos/languages_section.cc

@@ -273,6 +273,11 @@ void AddLanguagesPageStringsV2(content::WebUIDataSource* html_source) {
       l10n_util::GetStringFUTF16(
           IDS_OS_SETTINGS_LANGUAGES_LANGUAGES_PREFERENCE_DESCRIPTION,
           base::ASCIIToUTF16(chrome::kLanguageSettingsLearnMoreUrl)));
+  html_source->AddString(
+      "changeDeviceLanguageDialogDescription",
+      l10n_util::GetStringFUTF16(
+          IDS_OS_SETTINGS_LANGUAGES_CHANGE_DEVICE_LANGUAGE_DIALOG_DESCRIPTION,
+          base::ASCIIToUTF16(chrome::kLanguageSettingsLearnMoreUrl)));
 }
 
 void AddInputPageStringsV2(content::WebUIDataSource* html_source) {

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

@@ -6,6 +6,7 @@
 // #import {LanguagesBrowserProxyImpl, LanguagesMetricsProxyImpl, LanguagesPageInteraction} from 'chrome://os-settings/chromeos/lazy_load.js';
 // #import {CrSettingsPrefs, Router} from 'chrome://os-settings/chromeos/os_settings.js';
 // #import {assert} from 'chrome://resources/js/assert.m.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';
@@ -263,6 +264,51 @@ suite('languages page', () => {
       assertEquals(
           'en-CA', await browserProxy.whenCalled('setProspectiveUILanguage'));
     });
+
+    // Test that searching languages works whether the displayed or native
+    // language name is queried.
+    test('searches languages', function() {
+      const searchInput = dialog.$$('cr-search-field');
+
+      const getItems = function() {
+        return dialog.$.dialog.querySelectorAll('.list-item:not([hidden])');
+      };
+
+      // Expecting a few languages to be displayed when no query exists.
+      assertGE(getItems().length, 1);
+
+      // Issue query that matches the |displayedName| in lowercase.
+      searchInput.setValue('greek');
+      Polymer.dom.flush();
+      assertEquals(1, getItems().length);
+      assertTrue(getItems()[0].textContent.includes('Greek'));
+
+      // Issue query that matches the |nativeDisplayedName|.
+      searchInput.setValue('Ελληνικά');
+      Polymer.dom.flush();
+      assertEquals(1, getItems().length);
+
+      // Issue query that does not match any language.
+      searchInput.setValue('egaugnal');
+      Polymer.dom.flush();
+      assertEquals(0, getItems().length);
+    });
+
+    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', () => {