[WebUI][NTP] Renders realbox matches and handles realbox interactions

Adds the ability to render a *basic* version of autcomplete matches and handle realbox interactions such as: 1. showing and hiding the matches. 2. keyboard shortcuts for querying autocomplete and selecting matches. 3. updating the realbox input with inline autcompletion as the user types and/or the selection changes. tests covered in crrev.com/c/2194275 Bug: 1041129 Change-Id: Ibd010de196c3eebe124feb22808286cd3c05bdee Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2194472 Commit-Queue: Moe Ahmadi <mahmadi@chromium.org> Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org> Cr-Commit-Position: refs/heads/master@{#768625}
marcosholgado · May 14, 2020 · a8574e2 · a8574e2
1 parent 685adbc
commit a8574e2
Show file tree

Hide file tree

Showing 9 changed files with 1,037 additions and 32 deletions.
diff --git a/chrome/browser/resources/new_tab_page/BUILD.gn b/chrome/browser/resources/new_tab_page/BUILD.gn
@@ -18,6 +18,8 @@ js_type_check("closure_compile") {
     ":grid",
     ":logo",
     ":realbox",
+    ":realbox_dropdown",
+    ":realbox_match",
     ":theme_icon",
     ":untrusted_iframe",
     ":utils",
@@ -146,6 +148,23 @@ js_library("realbox") {
   ]
 }
 
+js_library("realbox_dropdown") {
+  deps = [
+    ":utils",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+}
+
+js_library("realbox_match") {
+  deps = [
+    ":utils",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+}
+
 js_library("logo") {
   deps = [
     ":doodle_share_dialog",
@@ -182,6 +201,8 @@ html_to_js("web_components") {
     "mini_page.js",
     "most_visited.js",
     "realbox.js",
+    "realbox_dropdown.js",
+    "realbox_match.js",
     "theme_icon.js",
     "untrusted_iframe.js",
     "voice_search_overlay.js",

diff --git a/chrome/browser/resources/new_tab_page/new_tab_page_resources.grd b/chrome/browser/resources/new_tab_page/new_tab_page_resources.grd
@@ -59,6 +59,12 @@
       <include name="IDR_NEW_TAB_PAGE_REALBOX_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/realbox.js"
           use_base_dir="false" type="BINDATA" compress="false" />
+      <include name="IDR_NEW_TAB_PAGE_REALBOX_DROPDOWN_JS"
+          file="${root_gen_dir}/chrome/browser/resources/new_tab_page/realbox_dropdown.js"
+          use_base_dir="false" type="BINDATA" compress="false" />
+      <include name="IDR_NEW_TAB_PAGE_REALBOX_MATCH_JS"
+          file="${root_gen_dir}/chrome/browser/resources/new_tab_page/realbox_match.js"
+          use_base_dir="false" type="BINDATA" compress="false" />
       <include name="IDR_NEW_TAB_PAGE_BROWSER_PROXY_JS"
           file="browser_proxy.js" type="BINDATA" compress="false" />
       <include name="IDR_NEW_TAB_PAGE_UTILS_JS"

diff --git a/chrome/browser/resources/new_tab_page/realbox.html b/chrome/browser/resources/new_tab_page/realbox.html
@@ -7,6 +7,10 @@
     width: 337px;
   }
 
+  :host([matches-are-visible]) {
+    box-shadow: none;
+  }
+
   @media (min-width: 560px) {
     :host {
       width: 449px;
@@ -19,7 +23,7 @@
     }
   }
 
-  #realboxInputWrapper {
+  #inputWrapper {
     height: 100%;
     position: relative;
   }
@@ -34,6 +38,7 @@
     outline: none;
     padding-inline-end:  40px;
     padding-inline-start: 52px;
+    position: relative;
     width: 100%;
   }
 
@@ -72,6 +77,7 @@
     height: 100%;
     left: 16px;
     position: absolute;
+    top: 0;
     width: 24px;
   }
 
@@ -113,14 +119,38 @@
   :host-context(.focus-outline-visible) #voiceSearchButton:focus {
     box-shadow: var(--ntp-focus-shadow);
   }
+
+  :-webkit-any(input, #realboxIcon, #voiceSearchButton) {
+   z-index: 2;
+  }
+
+  ntp-realbox-dropdown {
+    border-radius: calc(0.5 * var(--ntp-realbox-height));
+    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
+    left: 0;
+    padding-bottom: 8px;
+    padding-top: var(--ntp-realbox-height);
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+  }
 </style>
-<div id="realboxInputWrapper">
-  <div id="realboxIcon" data-icon$="[[realboxIcon_]]"></div>
+<div id="inputWrapper" on-focusout=onInputWrapperFocusout_
+    on-keydown="onInputWrapperKeydown_">
   <input id="input" type="search" autocomplete="off" spellcheck="false"
       aria-live="polite" placeholder="$i18n{searchBoxHint}"
-      on-mousedown="onMouseDown_">
-  </input>
+      on-copy="onInputCutCopy_" on-cut="onInputCutCopy_"
+      on-focus="onInputFocus_" on-input="onInputInput_"
+      on-keydown="onInputKeydown_" on-keyup="onInputKeyup_"
+      on-mousedown="onInputMouseDown_" on-paste="onInputPaste_">
+  <div id="realboxIcon" data-icon$="[[realboxIcon_]]"></div>
   <button id="voiceSearchButton" on-click="onVoiceSearchClick_"
       title="$i18n{voiceSearchButtonLabel}">
   </button>
+  <ntp-realbox-dropdown id="matches" role="listbox" theme="[[theme]]"
+      result="[[result_]]" selected-match-index="{{selectedMatchIndex_}}"
+      on-result-repaint="onResultRepaint_"
+      on-match-focusin="onMatchFocusin_" hidden$="[[!matchesAreVisible]]">
+  </ntp-realbox-dropdown>
 </div>