Migrate chrome://tab-search/ to Mojo JS modules

Bug: 1004256
Change-Id: I9d3f89aa71db9eefab041ac27266e894451bc56c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2515220Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org>
Commit-Queue: Ken Rockot <rockot@google.com>
Cr-Commit-Position: refs/heads/master@{#824430}

chrome/browser/resources/tab_search/BUILD.gn

@@ -67,11 +67,11 @@ preprocess_grit("preprocess_fuse") {
 }
 
 preprocess_grit("preprocess_mojo") {
-  deps = [ "//chrome/browser/ui/webui/tab_search:mojo_bindings_js" ]
-  in_folder = "$root_gen_dir/chrome/browser/ui/webui/tab_search/"
+  deps = [ "//chrome/browser/ui/webui/tab_search:mojo_bindings_webui_js" ]
+  in_folder = "$root_gen_dir/mojom-webui/chrome/browser/ui/webui/tab_search/"
   out_folder = "$target_gen_dir/$preprocess_folder"
   out_manifest = "$target_gen_dir/$preprocess_mojo_manifest"
-  in_files = [ "tab_search.mojom-lite.js" ]
+  in_files = [ "tab_search.mojom-webui.js" ]
 }
 
 grit("tab_search_resources") {
@@ -101,6 +101,13 @@ grit("tab_search_resources") {
 
 js_type_check("closure_compile") {
   is_polymer3 = true
+  closure_flags =
+      default_closure_args + mojom_js_args + [
+        "js_module_root=" + rebase_path(".", root_build_dir),
+        "js_module_root=" + rebase_path(
+                "$root_gen_dir/mojom-webui/chrome/browser/ui/webui/tab_search",
+                root_build_dir),
+      ]
   deps = [
     ":app",
     ":fuzzy_search",
@@ -141,7 +148,7 @@ js_library("tab_data") {
 
 js_library("tab_search_api_proxy") {
   deps = [
-    "//chrome/browser/ui/webui/tab_search:mojo_bindings_js_library_for_compile",
+    "//chrome/browser/ui/webui/tab_search:mojo_bindings_webui_js",
     "//ui/webui/resources/js:cr.m",
   ]
   externs_list = [ "$externs_path/metrics_private.js" ]

chrome/browser/resources/tab_search/app.js

@@ -22,6 +22,7 @@ import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/poly
 
 import {fuzzySearch} from './fuzzy_search.js';
 import {TabData} from './tab_data.js';
+import {Tab, WindowTabs} from './tab_search.mojom-webui.js';
 import {TabSearchApiProxy, TabSearchApiProxyImpl} from './tab_search_api_proxy.js';
 
 const selectorNavigationKeys = ['ArrowUp', 'ArrowDown', 'Home', 'End'];
@@ -43,7 +44,7 @@ export class TabSearchAppElement extends PolymerElement {
         value: '',
       },
 
-      /** @private {?Array<!tabSearch.mojom.WindowTabs>} */
+      /** @private {?Array<!WindowTabs>} */
       openTabs_: {
         type: Array,
         observer: 'openTabsChanged_',
@@ -185,7 +186,7 @@ export class TabSearchAppElement extends PolymerElement {
   }
 
   /**
-   * @param {!tabSearch.mojom.Tab} updatedTab
+   * @param {!Tab} updatedTab
    * @private
    */
   onTabUpdated_(updatedTab) {
@@ -277,7 +278,7 @@ export class TabSearchAppElement extends PolymerElement {
   }
 
   /**
-   * @param {!Array<!tabSearch.mojom.WindowTabs>} newOpenTabs
+   * @param {!Array<!WindowTabs>} newOpenTabs
    * @private
    */
   openTabsChanged_(newOpenTabs) {
@@ -431,7 +432,7 @@ export class TabSearchAppElement extends PolymerElement {
   }
 
   /**
-   * @param {!Array<!tabSearch.mojom.WindowTabs>} windowTabs
+   * @param {!Array<!WindowTabs>} windowTabs
    * @private
    */
   updateFilteredTabs_(windowTabs) {
@@ -488,7 +489,7 @@ export class TabSearchAppElement extends PolymerElement {
     }
   }
 
-  /** return {!tabSearch.mojom.Tab} */
+  /** return {!Tab} */
   getSelectedTab_() {
     return this.filteredOpenTabs_[this.getSelectedIndex()].tab;
   }

chrome/browser/resources/tab_search/tab_data.js

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {Tab} from './tab_search.mojom-webui.js';
+
 /**
  * TabData contains tabSearch.mojom.Tab and data derived from it.
  * It makes tabSearch.mojom.Tab immutable and works well for closure compiler
@@ -9,7 +11,7 @@
  */
 export class TabData {
   constructor() {
-    /** @type {!tabSearch.mojom.Tab} */
+    /** @type {!Tab} */
     this.tab;
 
     /** @type {string} */

chrome/browser/resources/tab_search/tab_search_api_proxy.js

@@ -2,12 +2,10 @@
 // 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 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js';
-import './tab_search.mojom-lite.js';
-
 import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
 
+import {PageCallbackRouter, PageHandlerFactory, PageHandlerRemote, ProfileTabs, SwitchToTabInfo} from './tab_search.mojom-webui.js';
+
 /**
  * These values are persisted to logs and should not be renumbered or re-used.
  * See tools/metrics/histograms/enums.xml.
@@ -23,18 +21,18 @@ export class TabSearchApiProxy {
   /** @param {number} tabId */
   closeTab(tabId) {}
 
-  /** @return {Promise<{profileTabs: tabSearch.mojom.ProfileTabs}>} */
+  /** @return {Promise<{profileTabs: ProfileTabs}>} */
   getProfileTabs() {}
 
   showFeedbackPage() {}
 
   /**
-   * @param {!tabSearch.mojom.SwitchToTabInfo} info
+   * @param {!SwitchToTabInfo} info
    * @param {boolean} withSearch
    */
   switchToTab(info, withSearch) {}
 
-  /** @return {!tabSearch.mojom.PageCallbackRouter} */
+  /** @return {!PageCallbackRouter} */
   getCallbackRouter() {}
 
   showUI() {}
@@ -45,13 +43,13 @@ export class TabSearchApiProxy {
 /** @implements {TabSearchApiProxy} */
 export class TabSearchApiProxyImpl {
   constructor() {
-    /** @type {!tabSearch.mojom.PageCallbackRouter} */
-    this.callbackRouter = new tabSearch.mojom.PageCallbackRouter();
+    /** @type {!PageCallbackRouter} */
+    this.callbackRouter = new PageCallbackRouter();
 
-    /** @type {!tabSearch.mojom.PageHandlerRemote} */
-    this.handler = new tabSearch.mojom.PageHandlerRemote();
+    /** @type {!PageHandlerRemote} */
+    this.handler = new PageHandlerRemote();
 
-    const factory = tabSearch.mojom.PageHandlerFactory.getRemote();
+    const factory = PageHandlerFactory.getRemote();
     factory.createPageHandler(
         this.callbackRouter.$.bindNewPipeAndPassRemote(),
         this.handler.$.bindNewPipeAndPassReceiver());

chrome/browser/resources/tab_search/tab_search_item.js

@@ -14,6 +14,7 @@ import {highlight} from 'chrome://resources/js/search_highlight_utils.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {TabData} from './tab_data.js';
+import {Tab} from './tab_search.mojom-webui.js';
 import './strings.js';
 
 export class TabSearchItem extends PolymerElement {
@@ -51,7 +52,7 @@ export class TabSearchItem extends PolymerElement {
   }
 
   /**
-   * @param {!tabSearch.mojom.Tab} tab
+   * @param {!Tab} tab
    * @return {string}
    * @private
    */

chrome/browser/resources/tab_search/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_APP_JS"
+               file="${root_gen_dir}/chrome/browser/resources/tab_search/app.js"
+               type="BINDATA"
+               use_base_dir="false" />
+      <include name="IDR_FUSE_JS"
+               file="../../../../third_party/fusejs/dist/fuse.basic.esm.min.js"
+               type="BINDATA"/>
+      <include name="IDR_FUZZY_SEARCH_JS"
+               file="fuzzy_search.js"
+               type="BINDATA"/>
+      <include name="IDR_TAB_DATA_JS"
+               file="tab_data.js"
+               type="BINDATA" />
+      <include name="IDR_TAB_SEARCH_API_PROXY_JS"
+               file="tab_search_api_proxy.js"
+               type="BINDATA" />
+      <include name="IDR_TAB_SEARCH_ITEM_JS"
+               file="${root_gen_dir}/chrome/browser/resources/tab_search/tab_search_item.js"
+               type="BINDATA"
+               use_base_dir="false"/>
+      <include name="IDR_TAB_SEARCH_MOJOM_WEBUI_JS"
+               file="${root_gen_dir}/mojom-webui/chrome/browser/ui/webui/tab_search/tab_search.mojom-webui.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_SEARCH_FIELD_JS"
+               file="${root_gen_dir}/chrome/browser/resources/tab_search/tab_search_search_field.js"
+               type="BINDATA"
+               use_base_dir="false" />
+    </includes>
+  </release>
+</grit>

chrome/browser/ui/webui/tab_search/BUILD.gn

@@ -7,4 +7,5 @@ import("//mojo/public/tools/bindings/mojom.gni")
 mojom("mojo_bindings") {
   sources = [ "tab_search.mojom" ]
   public_deps = [ "//mojo/public/mojom/base" ]
+  webui_module_path = "/"
 }

chrome/test/data/webui/tab_search/BUILD.gn

@@ -6,10 +6,18 @@ import("//third_party/closure_compiler/compile_js.gni")
 
 js_type_check("closure_compile") {
   is_polymer3 = true
-  closure_flags = default_closure_args + [
-                    "browser_resolver_prefix_replacements=\"chrome://tab-search/=../../chrome/browser/resources/tab-search/\"",
-                    "js_module_root=../../chrome/test/data/webui/",
-                    "js_module_root=./gen/chrome/test/data/webui/",
+  closure_flags =
+      default_closure_args + mojom_js_args + [
+        "browser_resolver_prefix_replacements=\"chrome://tab-search/=./\"",
+        "js_module_root=" + rebase_path("//chrome/browser/resources/tab_search",
+                                        root_build_dir),
+        "js_module_root=" +
+            rebase_path("//chrome/test/data/webui", root_build_dir),
+        "js_module_root=" +
+            rebase_path("$root_gen_dir/chrome/test/data/webui", root_build_dir),
+        "js_module_root=" + rebase_path(
+                "$root_gen_dir/mojom-webui/chrome/browser/ui/webui/tab_search",
+                root_build_dir),
       ]
   deps = [
     ":fuzzy_search_test",

chrome/test/data/webui/tab_search/tab_search_app_focus_test.js

@@ -6,6 +6,7 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
 import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 import {TabSearchAppElement} from 'chrome://tab-search/app.js';
+import {ProfileTabs} from 'chrome://tab-search/tab_search.mojom-webui.js';
 import {TabSearchApiProxy, TabSearchApiProxyImpl} from 'chrome://tab-search/tab_search_api_proxy.js';
 import {TabSearchItem} from 'chrome://tab-search/tab_search_item.js';
 import {TabSearchSearchField} from 'chrome://tab-search/tab_search_search_field.js';
@@ -26,7 +27,7 @@ suite('TabSearchAppFocusTest', () => {
   disableScrollIntoViewAnimations(TabSearchItem);
 
   /**
-   * @param {tabSearch.mojom.ProfileTabs} sampleData
+   * @param {ProfileTabs} sampleData
    * @param {Object=} loadTimeOverridenData
    */
   async function setupTest(sampleData, loadTimeOverridenData) {

chrome/test/data/webui/tab_search/tab_search_app_test.js

@@ -5,6 +5,7 @@
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 import {TabSearchAppElement} from 'chrome://tab-search/app.js';
+import {ProfileTabs, Tab} from 'chrome://tab-search/tab_search.mojom-webui.js';
 import {TabSearchApiProxy, TabSearchApiProxyImpl} from 'chrome://tab-search/tab_search_api_proxy.js';
 import {TabSearchItem} from 'chrome://tab-search/tab_search_item.js';
 import {TabSearchSearchField} from 'chrome://tab-search/tab_search_search_field.js';
@@ -43,7 +44,7 @@ suite('TabSearchAppTest', () => {
   }
 
   /**
-   * @param {tabSearch.mojom.ProfileTabs} sampleData
+   * @param {ProfileTabs} sampleData
    * @param {Object=} loadTimeOverridenData
    */
   async function setupTest(sampleData, loadTimeOverridenData) {
@@ -213,7 +214,7 @@ suite('TabSearchAppTest', () => {
         (tabSearchApp.shadowRoot.querySelector('tab-search-item[id="1"]'));
     assertEquals('Google', tabSearchItem.data.tab.title);
     assertEquals('https://www.google.com', tabSearchItem.data.tab.url);
-    const updatedTab = /** @type {!tabSearch.mojom.Tab} */ ({
+    const updatedTab = /** @type {!Tab} */ ({
       index: 0,
       tabId: 1,
       title: 'Example',

chrome/test/data/webui/tab_search/test_tab_search_api_proxy.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {PageCallbackRouter, PageRemote, ProfileTabs} from 'chrome://tab-search/tab_search.mojom-webui.js';
 import {TabSearchApiProxy} from 'chrome://tab-search/tab_search_api_proxy.js';
 import {TestBrowserProxy} from '../test_browser_proxy.m.js';
 
@@ -17,14 +18,14 @@ export class TestTabSearchApiProxy extends TestBrowserProxy {
       'closeUI',
     ]);
 
-    /** @type {!tabSearch.mojom.PageCallbackRouter} */
-    this.callbackRouter = new tabSearch.mojom.PageCallbackRouter();
+    /** @type {!PageCallbackRouter} */
+    this.callbackRouter = new PageCallbackRouter();
 
-    /** @type {!tabSearch.mojom.PageRemote} */
+    /** @type {!PageRemote} */
     this.callbackRouterRemote =
         this.callbackRouter.$.bindNewPipeAndPassRemote();
 
-    /** @private {tabSearch.mojom.ProfileTabs} */
+    /** @private {ProfileTabs} */
     this.profileTabs_;
   }
 
@@ -64,12 +65,12 @@ export class TestTabSearchApiProxy extends TestBrowserProxy {
     return this.callbackRouter;
   }
 
-  /** return {!tabSearch.mojom.PageRemote} */
+  /** return {!PageRemote} */
   getCallbackRouterRemote() {
     return this.callbackRouterRemote;
   }
 
-  /** @param {tabSearch.mojom.ProfileTabs} profileTabs */
+  /** @param {ProfileTabs} profileTabs */
   setProfileTabs(profileTabs) {
     this.profileTabs_ = profileTabs;
   }