[WebUI][NTP] browser tests for realbox

Tests cover the functionality added in:
-crrev.com/c/2194472
-crrev.com/c/2199361

Also fixes bugs and issues that came up while writing the tests:
-Restores previous selection, if any, and if no match is selected by
 default.
-Remove and Toggle buttons can be triggered by pressing 'Enter' and
 'Space'.
-Removes isTrusted check for mouse and keyboard events. This is not
 necessary and not commonly done in WebUI and makes testing complicated.

Bug: 10846603
Change-Id: Id0274fa9a420a6e097a8f63538571498fd3e1d9c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2194275
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#770790}

chrome/browser/resources/new_tab_page/new_tab_page.js

@@ -15,4 +15,5 @@ import './app.js';
 export {BackgroundManager} from './background_manager.js';
 export {BrowserProxy} from './browser_proxy.js';
 export {BackgroundSelectionType} from './customize_dialog.js';
+export {NO_SUGGESTION_GROUP_ID} from './realbox_dropdown.js';
 export {$$, createScrollBorders, decodeString16, hexColorToSkColor, mojoString16, skColorToRgba} from './utils.js';

chrome/browser/resources/new_tab_page/realbox.html

@@ -122,7 +122,7 @@
       on-focus="onInputFocus_" on-input="onInputInput_"
       on-keydown="onInputKeydown_" on-keyup="onInputKeyup_"
       on-mousedown="onInputMouseDown_" on-paste="onInputPaste_">
-  <ntp-realbox-icon match="[[selectedMatch_]]"
+  <ntp-realbox-icon id="icon" match="[[selectedMatch_]]"
       favicon-data-url="[[selectedMatch_.faviconDataUrl]]"
       default-icon="[[realboxIcon_]]" in-searchbox>
   </ntp-realbox-icon>

chrome/browser/resources/new_tab_page/realbox.js

@@ -278,6 +278,16 @@ class RealboxElement extends PolymerElement {
         this.navigateToMatch_(0, this.lastIgnoredEnterEvent_);
         this.lastIgnoredEnterEvent_ = null;
       }
+    } else if (
+        hasMatches && this.selectedMatchIndex_ !== -1 &&
+        this.selectedMatchIndex_ < this.result_.matches.length) {
+      // Restore the selection, if any.
+      this.$.matches.selectIndex(this.selectedMatchIndex_);
+      this.updateInput_({
+        text: decodeString16(this.selectedMatch_.fillIntoEdit),
+        inline: '',
+        moveCursorToEnd: true
+      });
     } else {
       this.$.matches.unselect();
       this.updateInput_({
@@ -418,9 +428,8 @@ class RealboxElement extends PolymerElement {
    * @private
    */
   onInputMouseDown_(e) {
-    if (!e.isTrusted || e.button !== 0) {
-      // Only handle main (generally left) button presses generated by a user
-      // action.
+    if (e.button !== 0) {
+      // Only handle main (generally left) button presses.
       return;
     }
     if (!this.$.input.value) {
@@ -480,6 +489,11 @@ class RealboxElement extends PolymerElement {
       return;
     }
 
+    if (e.defaultPrevented) {
+      // Ignore previousely handled events.
+      return;
+    }
+
     // ArrowUp/ArrowDown query autocomplete when matches are not visible.
     if (!this.matchesAreVisible) {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
@@ -634,11 +648,12 @@ class RealboxElement extends PolymerElement {
   }
 
   /**
-   * Clears the autocomplete results on
+   * Clears the autocomplete result on the page and on the autocomplete backend.
    * @private
    */
   clearAutocompleteMatches_() {
     this.result_ = null;
+    this.$.matches.unselect();
     this.pageHandler_.stopAutocomplete(/*clearResult=*/ true);
     // Autocomplete sends updates once it is stopped. Invalidate those results
     // by setting the |this.lastQueriedInput_| to its default value.

chrome/browser/resources/new_tab_page/realbox_dropdown.html

@@ -62,7 +62,7 @@
           group-is-hidden$="[[groupIsHidden_(hiddenGroupIds_.*, groupId)]]">
         [[headerForGroup_(groupId)]]
         <ntp-realbox-button data-id$="[[groupId]]"
-            on-click="onToggleButtonClick_">
+            on-click="onToggleButtonClick_" on-keydown="onToggleButtonKeydown_">
         </ntp-realbox-button>
       </div>
     </template>

chrome/browser/resources/new_tab_page/realbox_dropdown.js

@@ -257,6 +257,20 @@ class RealboxDropdownElement extends PolymerElement {
     }
   }
 
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onToggleButtonKeydown_(e) {
+    if (e.key !== 'Enter' && e.key !== ' ') {
+      return;
+    }
+
+    // Simulate a click so that it gets handled by |onToggleButtonClick_|.
+    e.target.click();
+    e.preventDefault();  // Prevents default browser action.
+  }
+
   //============================================================================
   // Helpers
   //============================================================================

chrome/browser/resources/new_tab_page/realbox_match.html

@@ -83,7 +83,7 @@
 
 </style>
 <a id="link" href$="[[match.destinationUrl.url]]">
-  <ntp-realbox-icon match="[[match]]"
+  <ntp-realbox-icon id="icon" match="[[match]]"
       favicon-data-url="[[faviconDataUrl]]" image-data-url="[[imageDataUrl]]">
   </ntp-realbox-icon>
   <div id="container">
@@ -92,6 +92,7 @@
     <span id="description" inner-h-t-m-l="[[descriptionHtml_]]"></span>
   </div>
   <ntp-realbox-button id="remove" on-click="onRemoveButtonClick_"
+      on-keydown="onRemoveButtonKeydown_"
       title$="[[removeButtonTitle_]]" hidden$="[[!removeButtonIsVisible_]]">
   </ntp-realbox-button>
 </a>

chrome/browser/resources/new_tab_page/realbox_match.js

@@ -260,10 +260,8 @@ class RealboxMatchElement extends PolymerElement {
    * @private
    */
   onMatchClick_(e) {
-    if (!e.isTrusted || e.defaultPrevented || e.button > 1) {
-      // Only handle main (generally left) and middle button presses generated
-      // by a user action. Ignore previously handled events (i.e. remove
-      // button).
+    if (e.button > 1) {
+      // Only handle main (generally left) and middle button presses.
       return;
     }
 
@@ -294,9 +292,8 @@ class RealboxMatchElement extends PolymerElement {
    * @private
    */
   onRemoveButtonClick_(e) {
-    if (!e.isTrusted || e.button !== 0) {
-      // Only handle main (generally left) button presses generated by a user
-      // action.
+    if (e.button !== 0) {
+      // Only handle main (generally left) button presses.
       return;
     }
     this.dispatchEvent(new CustomEvent('match-remove', {
@@ -306,6 +303,21 @@ class RealboxMatchElement extends PolymerElement {
     }));
 
     e.preventDefault();  // Prevents default browser action (navigation).
+    e.stopPropagation();  // Prevents <iron-selector> from selecting the match.
+  }
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onRemoveButtonKeydown_(e) {
+    if (e.key !== 'Enter' && e.key !== ' ') {
+      return;
+    }
+
+    // Simulate a click so that it gets handled by |onRemoveButtonClick_|.
+    e.target.click();
+    e.preventDefault();  // Prevents default browser action.
   }
 
   //============================================================================