Settings WebUI: Close language dialog on esc, if no search query exists.

Bug: 714021
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I3c96ce501e1d5ff65b8c27f7d04dab83694acc2e
Reviewed-on: https://chromium-review.googlesource.com/1090000Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#567361}

chrome/browser/resources/settings/languages_page/add_languages_dialog.html

@@ -45,7 +45,8 @@
       <div slot="title">$i18n{addLanguagesDialogTitle}</div>
       <div slot="body" scrollable>
         <settings-subpage-search label="$i18n{searchLanguages}" id="search"
-            on-search-changed="onSearchChanged_" autofocus>
+            on-search-changed="onSearchChanged_"
+            on-keydown="onKeydown_" autofocus>
         </settings-subpage-search>
         <iron-list class="ripple-padding" scroll-target="[[$$('[slot=body]')]]"
             items="[[getLanguages_(

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

@@ -149,4 +149,14 @@ Polymer({
       this.languageHelper.enableLanguage(languageCode);
     });
   },
+
+  /**
+   * @param {!KeyboardEvent} e
+   * @private
+   */
+  onKeydown_: function(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();
+  },
 });

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

@@ -213,6 +213,22 @@ cr.define('languages_page_tests', function() {
         Polymer.dom.flush();
         assertEquals(0, getItems().length);
       });
+
+      test('Escape key behavior', function() {
+        const searchInput = dialog.$$('settings-subpage-search');
+        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(TestNames.LanguageMenu, function() {