WebUI Tab Search: Initial commit

Tab Search is served by TabSearchUI with chrome://tab-search.
It's guarded by compile flag enable_tab_search and
enabled by --enable-features=TabSearch

Bug: 1099917
Change-Id: I6621bd9fc2e7489b94a46fa0997cdb8f5f193d93
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3137445Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Robert Liao <robliao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819568}

chrome/browser/resources/tab_search_merge/BUILD.gn

+# 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.
+
+import("//chrome/browser/resources/optimize_webui.gni")
+import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/grit/grit_rule.gni")
+import("//tools/polymer/html_to_js.gni")
+import("//ui/webui/webui_features.gni")
+
+js_type_check("closure_compile") {
+  is_polymer3 = true
+  deps = [ ":app" ]
+}
+
+js_library("app") {
+  deps = [
+    ":tab_search_api_proxy",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
+js_library("tab_search_api_proxy") {
+  deps = [
+    "//chrome/browser/ui/webui/tab_search:mojo_bindings_js_library_for_compile",
+    "//ui/webui/resources/js:cr.m",
+  ]
+}
+
+html_to_js("web_components") {
+  js_files = [ "app.js" ]
+}
+

chrome/browser/resources/tab_search_merge/OWNERS

+robliao@chromium.org
+tluk@chromium.org
+
+# COMPONENT: UI>Browser>TabSearch

chrome/browser/resources/tab_search_merge/app.html

+<div id="searchBar">
+  <iron-icon id="searchIcon" icon="cr:search"></iron-icon>
+  <input id="searchInput" type="text" value="[[searchText_]]"
+    on-input="onSearchInput_">
+</div>
+<div id="content">
+  <template is="dom-repeat" items="[[filteredOpenTabs_]]">
+    <div id="[[item.tabId]]" on-click="onItemClick_">
+      <div>
+        <img src="[[item.favIconUrl]]">
+      </div>
+      <div>
+        <div>[[item.title]]</div>
+        <div>[[item.url]]</div>
+      </div>
+  </template>
+</div>

chrome/browser/resources/tab_search_merge/app.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.
+
+import 'chrome://resources/cr_elements/icons.m.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {TabSearchApiProxy} from './tab_search_api_proxy.js';
+
+/**
+ * @param {string} searchText
+ * @param {!tabSearch.mojom.Tab} item
+ * @return {boolean}
+ */
+function filterFunc(searchText, item) {
+  return item.title.toLowerCase().includes(searchText.toLowerCase());
+};
+
+class TabSearchElement extends PolymerElement {
+  static get is() {
+    return 'tab-search-app';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  static get properties() {
+    return {
+      /** @private {string} */
+      searchText_: {
+        type: String,
+        value: '',
+      },
+
+      /** @private {?Array<!tabSearch.mojom.WindowTabs>} */
+      openTabs_: Array,
+
+      /** @private {!Array<!tabSearch.mojom.Tab>} */
+      filteredOpenTabs_: {
+        type: Array,
+        computed: 'getFilteredTabs_(openTabs_, searchText_)',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    /** @private {!TabSearchApiProxy} */
+    this.apiProxy_ = TabSearchApiProxy.getInstance();
+  }
+
+  /** @override */
+  ready() {
+    super.ready();
+
+    this.apiProxy_.getProfileTabs().then(({profileTabs}) => {
+      if (profileTabs) {
+        this.openTabs_ = profileTabs.windows;
+      }
+    });
+  }
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onSearchInput_(e) {
+    this.searchText_ = e.target.value;
+  }
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onItemClick_(e) {
+    const tabId = parseInt(e.currentTarget.id, 10);
+    this.apiProxy_.switchToTab({tabId});
+  }
+
+  /**
+   * @param {?Array<!tabSearch.mojom.WindowTabs>} windows
+   * @param {string} searchText
+   * @return {!Array<!tabSearch.mojom.Tab>}
+   * @private
+   */
+  getFilteredTabs_(windows, searchText) {
+    const result = [];
+    if (windows) {
+      windows.forEach(window => {
+        result.push(...window.tabs.filter(filterFunc.bind(null, searchText)));
+      });
+    }
+    return result;
+  }
+}
+
+customElements.define(TabSearchElement.is, TabSearchElement);

chrome/browser/resources/tab_search_merge/tab_search_api_proxy.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.
+
+import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+import './tab_search.mojom-lite.js';
+
+import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
+
+export class TabSearchApiProxy {
+  constructor() {
+    /** @type {!tabSearch.mojom.PageCallbackRouter} */
+    this.callbackRouter = new tabSearch.mojom.PageCallbackRouter();
+
+    /** @type {!tabSearch.mojom.PageHandlerRemote} */
+    this.handler = new tabSearch.mojom.PageHandlerRemote();
+
+    const factory = tabSearch.mojom.PageHandlerFactory.getRemote();
+    factory.createPageHandler(
+        this.callbackRouter.$.bindNewPipeAndPassRemote(),
+        this.handler.$.bindNewPipeAndPassReceiver());
+  }
+
+  /**  @return {Promise<{profileTabs: tabSearch.mojom.ProfileTabs}>} */
+  getProfileTabs() {
+    return this.handler.getProfileTabs();
+  }
+
+  /** @param {!tabSearch.mojom.SwitchToTabInfo} info */
+  switchToTab(info) {
+    this.handler.switchToTab(info);
+  }
+}
+
+addSingletonGetter(TabSearchApiProxy);

chrome/browser/resources/tab_search_merge/tab_search_page.html

+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Tab Search</title>
+</head>
+<body>
+  <tab-search-app></tab-search-app>
+  <script type="module" src="app.js"></script>
+</html>

chrome/browser/resources/tab_search_merge/tab_search_resources.grd

+<?xml version="1.0" encoding="UTF-8"?>
+<grit latest_public_release="0" current_release="1" output_all_resource_defines="false">
+  <outputs>
+    <output filename="grit/tab_search_resources.h" type="rc_header">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="grit/tab_search_resources_map.cc"
+            type="resource_file_map_source" />
+    <output filename="grit/tab_search_resources_map.h"
+            type="resource_map_header" />
+    <output filename="tab_search_resources.pak" type="data_package" />
+  </outputs>
+  <release seq="1">
+    <includes>
+      <include name="IDR_TAB_SEARCH_API_PROXY_JS"
+               file="tab_search_api_proxy.js"
+               type="BINDATA" />
+      <include name="IDR_APP_JS"
+               file="${root_gen_dir}/chrome/browser/resources/tab_search/app.js"
+               type="BINDATA"
+               use_base_dir="false" />
+      <include name="IDR_TAB_SEARCH_PAGE_HTML"
+               file="tab_search_page.html"
+               type="BINDATA" />
+      <include name="IDR_TAB_SEARCH_MOJO_LITE_JS"
+               file="${root_gen_dir}/chrome/browser/ui/webui/tab_search/tab_search.mojom-lite.js"
+               use_base_dir="false"
+               type="BINDATA" />
+    </includes>
+  </release>
+</grit>