[omnibox] Make a cr-autocomplete-match-list web component

This CL puts a very simple cr-autocomplete-match-list web component within the chrome://resources/cr_components shared directory for usage in both the top chrome omnibox (experimentally under a flag) and the WebUI NTP. Bug: 1046561 Change-Id: I760d7ce2b4eeebf63277a9ca1ca5891bf49dcef1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2091631 Commit-Queue: Tommy Li <tommycli@chromium.org> Reviewed-by: dpapad <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#748992}

[omnibox] Make a cr-autocomplete-match-list web component
This CL puts a very simple cr-autocomplete-match-list web component within the chrome://resources/cr_components shared directory for usage in both the top chrome omnibox (experimentally under a flag) and the WebUI NTP. Bug: 1046561 Change-Id: I760d7ce2b4eeebf63277a9ca1ca5891bf49dcef1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2091631 Commit-Queue: Tommy Li <tommycli@chromium.org> Reviewed-by: dpapad <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#748992}
6d041abf · Tommy C. Li · Commit Bot · a494b6c4 · 6d041abf · 6d041abf
Commit 6d041abf authored Mar 11, 2020 by Tommy C. Li Committed by Commit Bot Mar 11, 2020
9 changed files
--- a/chrome/browser/resources/omnibox/BUILD.gn
+++ b/chrome/browser/resources/omnibox/BUILD.gn
@@ -47,6 +47,7 @@ js_library("omnibox_output") {
 js_library("omnibox_popup") {
  deps = [
    "//chrome/browser/ui/webui/omnibox:mojo_bindings_js_library_for_compile",
+    "//ui/webui/resources/cr_components/omnibox:cr_autocomplete_match_list",
  ]
 }

--- a/chrome/browser/resources/omnibox/omnibox_popup.html
+++ b/chrome/browser/resources/omnibox/omnibox_popup.html
@@ -6,9 +6,11 @@
  <title>Omnibox Popup</title>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <script type="module" src="omnibox_popup.js"></script>
+  <script type="module" src="chrome://resources/cr_components/omnibox/cr_autocomplete_match_list.js">
+  </script>
 </head>
 <body>
-  <ol id="omnibox-results"></ol>
+  <cr-autocomplete-match-list></cr-autocomplete-match-list>
 </body>
 </html>
--- a/chrome/browser/resources/omnibox/omnibox_popup.js
+++ b/chrome/browser/resources/omnibox/omnibox_popup.js
@@ -5,6 +5,8 @@
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
 import './chrome/browser/ui/webui/omnibox/omnibox.mojom-lite.js';
+import {AutocompleteMatchListElement} from 'chrome://resources/cr_components/omnibox/cr_autocomplete_match_list.js';
 /**
 * Javascript proof-of-concept for omnibox_popup.html, served from
 * chrome://omnibox/omnibox_popup.html. This is used for the experimental
@@ -21,15 +23,11 @@ document.addEventListener('DOMContentLoaded', () => {
      (response, isPageController) => {
        // Ignore debug controller and empty results.
        if (!isPageController && response.combinedResults.length > 0) {
-          const ol = document.querySelector('#omnibox-results');
+          /** @private {!AutocompleteMatchListElement} */
-          while (ol.firstChild) {
+          const popup = /** @type {!AutocompleteMatchListElement} */ (
-            ol.firstChild.remove();
+              document.querySelector('cr-autocomplete-match-list'));
-          }
-          response.combinedResults.forEach(result => {
+          popup.updateMatches(response.combinedResults);
-            const li = document.createElement('li');
-            li.textContent = `${result.contents} - ${result.description}`;
-            ol.appendChild(li);
-          });
        }
      });

--- a/ui/webui/resources/cr_components/BUILD.gn
+++ b/ui/webui/resources/cr_components/BUILD.gn
@@ -9,6 +9,7 @@ group("closure_compile") {
    "certificate_manager:closure_compile",
    "managed_footnote:closure_compile",
    "managed_footnote:closure_compile_module",
+    "omnibox:closure_compile",
  ]
  if (is_chromeos) {
@@ -20,6 +21,7 @@ group("polymer3_elements") {
  public_deps = [
    "certificate_manager:polymer3_elements",
    "managed_footnote:managed_footnote_module",
+    "omnibox:omnibox_modules",
  ]
  if (is_chromeos) {
    public_deps += [ "chromeos:polymer3_elements" ]

--- a/ui/webui/resources/cr_components/cr_components_resources_v3.grdp
+++ b/ui/webui/resources/cr_components/cr_components_resources_v3.grdp
@@ -6,6 +6,11 @@
         type="BINDATA"
         preprocess="true"
         compress="gzip" />
+  <include name="IDR_WEBUI_CR_COMPONENTS_OMNIBOX_CR_AUTOCOMPLETE_MATCH_LIST_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_components/omnibox/cr_autocomplete_match_list.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
  <if expr="chromeos">
    <include name="IDR_WEBUI_CHROMEOS_SMB_SHARES_ADD_SMB_SHARE_DIALOG_M_JS"
           file="${root_gen_dir}/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.m.js"

--- a/ui/webui/resources/cr_components/omnibox/BUILD.gn
+++ b/ui/webui/resources/cr_components/omnibox/BUILD.gn
+# Copyright 2019 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
+js_type_check("closure_compile") {
+  uses_js_modules = true
+  deps = [ ":cr_autocomplete_match_list" ]
+}
+js_library("cr_autocomplete_match_list") {
+}
+polymer_modulizer("cr_autocomplete_match_list") {
+  js_file = "cr_autocomplete_match_list.js"
+  html_file = "cr_autocomplete_match_list.html"
+  html_type = "v3-ready"
+}
+group("omnibox_modules") {
+  public_deps = [ ":cr_autocomplete_match_list_module" ]
+}
--- a/ui/webui/resources/cr_components/omnibox/OWNERS
+++ b/ui/webui/resources/cr_components/omnibox/OWNERS
+file://components/omnibox/OWNERS
+# COMPONENT: UI>Browser>Omnibox
--- a/ui/webui/resources/cr_components/omnibox/cr_autocomplete_match_list.html
+++ b/ui/webui/resources/cr_components/omnibox/cr_autocomplete_match_list.html
+<div>
+  <span id="contents"></span> - <span id="description"></span>
+</div>
--- a/ui/webui/resources/cr_components/omnibox/cr_autocomplete_match_list.js
+++ b/ui/webui/resources/cr_components/omnibox/cr_autocomplete_match_list.js
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+/**
+ * @fileoverview Custom element for the omnibox popup used in the
+ * WebUI NTP realbox and (experimentally) in the top chrome omnibox.
+ */
+/**
+ * TODO(tommycli): Coalesce this with the Mojo AutocompleteMatch.
+ * @typedef {{
+ *   contents: string,
+ *   description: string,
+ * }}
+ */
+let AutocompleteMatch;
+class AutocompleteMatchElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({mode: 'open'});
+    this.shadowRoot.innerHTML = `{__html_template__}`;
+  }
+  /** @param {!AutocompleteMatch} match */
+  updateMatch(match) {
+    const shadowRoot = this.shadowRoot;
+    shadowRoot.getElementById('contents').textContent = match.contents;
+    shadowRoot.getElementById('description').textContent = match.description;
+  }
+}
+customElements.define('cr-autocomplete-match', AutocompleteMatchElement);
+export class AutocompleteMatchListElement extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    // TODO(tommycli): Get this from the browser via loadTimeData.
+    const maxAutocompleteElements = 8;
+    for (let i = 0; i < maxAutocompleteElements; i++) {
+      shadowRoot.appendChild(document.createElement('cr-autocomplete-match'));
+    }
+  }
+  /** @param {!Array<!AutocompleteMatch>} matches */
+  updateMatches(matches) {
+    for (let i = 0; i < matches.length; i++) {
+      const shadowRoot = /** @type {!ParentNode} */ (this.shadowRoot);
+      shadowRoot.children[i].updateMatch(matches[i]);
+    }
+  }
+}
+customElements.define(
+    'cr-autocomplete-match-list', AutocompleteMatchListElement);