Tab Search: WebUI optimize configuration

Adds a webui optimized configuration for the 'Tab Search' feature. The resulting code reduces the number of network requests. Pinpoint benchmarks collected below suggest the webui optimized version of 'Tab Search' performs better in low end device scenarios.

Pinpoint results spreadsheet: https://docs.google.com/spreadsheets/d/1sKon_KLA3dU0iASJ24BBFAq4qa_R0q5r3L9uPHmCwXU/edit#gid=1996236618 details and summary included in the crbug.

Fixed: 1157194
Change-Id: I833a300f94a37296064b8c7db19c1d8e7a9ace1e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2529733Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org>
Commit-Queue: Roman Arora <romanarora@chromium.org>
Cr-Commit-Position: refs/heads/master@{#836131}

chrome/browser/resources/tab_search/BUILD.gn

@@ -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("//chrome/browser/resources/optimize_webui.gni")
 import("//chrome/common/features.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/grit_rule.gni")
@@ -16,24 +17,63 @@ preprocess_web_components_manifest = "preprocessed_gen_manifest.json"
 preprocess_fuse_manifest = "preprocessed_fuse_manifest.json"
 preprocess_mojo_manifest = "preprocessed_mojo_manifest.json"
 
+if (optimize_webui) {
+  build_manifest = "build_manifest.json"
+
+  optimize_webui("build") {
+    host = "tab-search"
+    input = rebase_path("$target_gen_dir/$preprocess_folder", root_build_dir)
+    js_out_files = [ "tab_search.rollup.js" ]
+    js_module_in_files = [ "tab_search.js" ]
+    out_manifest = "$target_gen_dir/$build_manifest"
+
+    excludes = [
+      "chrome://resources/js/cr.m.js",
+      "chrome://resources/mojo/mojo/public/js/bindings.js",
+      "chrome://resources/mojo/mojo/public/mojom/base/time.mojom-webui.js",
+      "fuse.js",
+    ]
+
+    deps = [
+      ":preprocess",
+      ":preprocess_mojo",
+      ":preprocess_web_components",
+      "../../../../ui/webui/resources:preprocess",
+    ]
+  }
+}
+
 generate_grd("build_grd") {
-  input_files = [ "tab_search_page.html" ]
-  input_files_base_dir = rebase_path(".", "//")
-  resource_path_rewrites = [ "fuse.basic.esm.min.js|fuse.js" ]
-  deps = [
-    ":preprocess",
-    ":preprocess_fuse",
-    ":preprocess_mojo",
-    ":preprocess_web_components",
-  ]
-  manifest_files = [
-    "$target_gen_dir/$preprocess_manifest",
-    "$target_gen_dir/$preprocess_fuse_manifest",
-    "$target_gen_dir/$preprocess_mojo_manifest",
-    "$target_gen_dir/$preprocess_web_components_manifest",
-  ]
   grd_prefix = "tab_search"
   out_grd = "$target_gen_dir/${grd_prefix}_resources.grd"
+  input_files = [ "tab_search.html" ]
+  input_files_base_dir = rebase_path(".", "//")
+  resource_path_rewrites = [ "fuse.basic.esm.min.js|fuse.js" ]
+
+  if (optimize_webui) {
+    deps = [
+      ":build",
+      ":preprocess_fuse",
+    ]
+    manifest_files = [
+      "$target_gen_dir/$preprocess_fuse_manifest",
+      "$target_gen_dir/$build_manifest",
+    ]
+    resource_path_rewrites += [ "tab_search.rollup.js|tab_search.js" ]
+  } else {
+    deps = [
+      ":preprocess",
+      ":preprocess_fuse",
+      ":preprocess_mojo",
+      ":preprocess_web_components",
+    ]
+    manifest_files = [
+      "$target_gen_dir/$preprocess_manifest",
+      "$target_gen_dir/$preprocess_fuse_manifest",
+      "$target_gen_dir/$preprocess_mojo_manifest",
+      "$target_gen_dir/$preprocess_web_components_manifest",
+    ]
+  }
 }
 
 preprocess_if_expr("preprocess") {
@@ -43,6 +83,7 @@ preprocess_if_expr("preprocess") {
   in_files = [
     "fuzzy_search.js",
     "tab_data.js",
+    "tab_search.js",
     "tab_search_api_proxy.js",
   ]
 }
@@ -106,6 +147,7 @@ js_type_check("closure_compile") {
     ":fuzzy_search",
     ":infinite_list",
     ":tab_data",
+    ":tab_search",
     ":tab_search_api_proxy",
     ":tab_search_item",
     ":tab_search_search_field",
@@ -115,6 +157,7 @@ js_type_check("closure_compile") {
 js_library("app") {
   deps = [
     ":fuzzy_search",
+    ":infinite_list",
     ":tab_data",
     ":tab_search_api_proxy",
     ":tab_search_item",
@@ -146,6 +189,10 @@ js_library("tab_data") {
   deps = []
 }
 
+js_library("tab_search") {
+  deps = [ ":app" ]
+}
+
 js_library("tab_search_api_proxy") {
   deps = [
     "//chrome/browser/ui/webui/tab_search:mojo_bindings_webui_js",

chrome/browser/resources/tab_search/app.js

@@ -2,7 +2,6 @@
 // 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/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/cr_elements/mwb_shared_style.js';
 import 'chrome://resources/cr_elements/mwb_shared_vars.js';

chrome/browser/resources/tab_search/tab_search_page.html → chrome/browser/resources/tab_search/tab_search.html

@@ -25,7 +25,7 @@
 </head>
 <body>
   <tab-search-app></tab-search-app>
-  <script type="module" src="app.js"></script>
+  <script type="module" src="tab_search.js"></script>
   <script type="module" src="chrome://resources/cr_elements/mwb_shared_vars.js">
   </script>
 </body>

chrome/browser/resources/tab_search/tab_search.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 './app.js';
+
+export {TabSearchAppElement} from './app.js';
+export {fuzzySearch} from './fuzzy_search.js';
+export {InfiniteList} from './infinite_list.js';
+export {TabData} from './tab_data.js';
+export {PageCallbackRouter, PageRemote, ProfileTabs, Tab} from './tab_search.mojom-webui.js';
+export {TabSearchApiProxy, TabSearchApiProxyImpl} from './tab_search_api_proxy.js';
+export {TabSearchItem} from './tab_search_item.js';
+export {TabSearchSearchField} from './tab_search_search_field.js';

chrome/browser/ui/webui/tab_search/tab_search_ui.cc

@@ -74,7 +74,7 @@ TabSearchUI::TabSearchUI(content::WebUI* web_ui)
 
   webui::SetupWebUIDataSource(
       source, base::make_span(kTabSearchResources, kTabSearchResourcesSize),
-      /*generated_path=*/std::string(), IDR_TAB_SEARCH_TAB_SEARCH_PAGE_HTML);
+      /*generated_path=*/std::string(), IDR_TAB_SEARCH_TAB_SEARCH_HTML);
   content::WebUIDataSource::Add(web_ui->GetWebContents()->GetBrowserContext(),
                                 source);
 

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

@@ -45,8 +45,7 @@ js_library("tab_search_app_test") {
   deps = [
     ":test_tab_search_api_proxy",
     "..:chai_assert",
-    "//chrome/browser/resources/tab_search:app",
-    "//chrome/browser/resources/tab_search:infinite_list",
+    "//chrome/browser/resources/tab_search:tab_search",
   ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
@@ -55,7 +54,7 @@ js_library("tab_search_app_focus_test") {
   deps = [
     ":test_tab_search_api_proxy",
     "..:chai_assert",
-    "//chrome/browser/resources/tab_search:app",
+    "//chrome/browser/resources/tab_search:tab_search",
   ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
@@ -63,7 +62,7 @@ js_library("tab_search_app_focus_test") {
 js_library("test_tab_search_api_proxy") {
   deps = [
     "..:test_browser_proxy.m",
-    "//chrome/browser/resources/tab_search:tab_search_api_proxy",
+    "//chrome/browser/resources/tab_search:tab_search",
     "//chrome/browser/ui/webui/tab_search:mojo_bindings_js_library_for_compile",
   ]
 }
@@ -71,7 +70,7 @@ js_library("test_tab_search_api_proxy") {
 js_library("tab_search_item_test") {
   deps = [
     "..:chai_assert",
-    "//chrome/browser/resources/tab_search:tab_search_item",
+    "//chrome/browser/resources/tab_search:tab_search",
   ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }

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

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {fuzzySearch} from 'chrome://tab-search/fuzzy_search.js';
-import {TabData} from 'chrome://tab-search/tab_data.js';
+import {fuzzySearch, TabData} from 'chrome://tab-search/tab_search.js';
 import {assertDeepEquals, assertEquals} from '../../chai_assert.js';
 
 /**

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

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {InfiniteList} from 'chrome://tab-search/infinite_list.js';
-import {TabSearchItem} from 'chrome://tab-search/tab_search_item.js';
+import {InfiniteList, TabSearchItem} from 'chrome://tab-search/tab_search.js';
 
 import {assertEquals, assertGT, assertNotEquals, assertTrue} from '../../chai_assert.js';
 import {flushTasks, waitAfterNextRender} from '../../test_util.m.js';

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

@@ -4,11 +4,7 @@
 
 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';
+import {ProfileTabs, TabSearchApiProxyImpl, TabSearchAppElement, TabSearchItem, TabSearchSearchField} from 'chrome://tab-search/tab_search.js';
 
 import {assertEquals, assertGT} from '../../chai_assert.js';
 import {flushTasks} from '../../test_util.m.js';

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

@@ -3,11 +3,7 @@
 // found in the LICENSE file.
 
 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';
+import {ProfileTabs, Tab, TabSearchApiProxyImpl, TabSearchAppElement, TabSearchSearchField} from 'chrome://tab-search/tab_search.js';
 
 import {assertEquals, assertFalse, assertNotEquals, assertTrue} from '../../chai_assert.js';
 import {flushTasks, waitAfterNextRender} from '../../test_util.m.js';

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

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {TabData} from 'chrome://tab-search/tab_data.js';
-import {TabSearchItem} from 'chrome://tab-search/tab_search_item.js';
+import {TabData, TabSearchItem} from 'chrome://tab-search/tab_search.js';
 
 import {assertDeepEquals} from '../../chai_assert.js';
 import {flushTasks} from '../../test_util.m.js';

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

@@ -2,8 +2,8 @@
 // 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 {PageCallbackRouter, PageRemote, ProfileTabs, TabSearchApiProxy} from 'chrome://tab-search/tab_search.js';
+
 import {TestBrowserProxy} from '../test_browser_proxy.m.js';
 
 /** @implements {TabSearchApiProxy} */