[ProfilePicker]: Optimize profile picker network requests.

This CL uses |SetupBundledWebUIDataSource| to optimize network requests for the
profile picker main view and the profile creation flows.

Before:
Requests: 75 requests
Time: 5.28s

Optimized:
Requests: ~22 requests
Time: 601ms

Bug: 1129395
Change-Id: I51147a4f3cd57f1dc43d6ec3ca339e9df2781c80
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2416512Reviewed-by: Andrew Grieve <agrieve@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811622}

chrome/browser/resources/BUILD.gn

@@ -510,13 +510,18 @@ if (!is_android && !is_chromeos) {
   }
 
   grit("profile_picker_resources") {
-    source = "signin/profile_picker/profile_picker_resources.grd"
-
-    deps = [ "//chrome/browser/resources/signin/profile_picker:web_components" ]
     grit_flags = [
       "-E",
       "root_gen_dir=" + rebase_path(root_gen_dir, root_build_dir),
     ]
+    if (optimize_webui) {
+      source = "signin/profile_picker/profile_picker_resources_vulcanized.grd"
+      deps = [ "//chrome/browser/resources/signin/profile_picker:build" ]
+    } else {
+      source = "signin/profile_picker/profile_picker_resources.grd"
+      deps =
+          [ "//chrome/browser/resources/signin/profile_picker:web_components" ]
+    }
 
     defines = chrome_grit_defines
     outputs = [

chrome/browser/resources/signin/profile_picker/BUILD.gn

@@ -2,8 +2,77 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+import("//chrome/common/features.gni")
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/grit/preprocess_grit.gni")
 import("//tools/polymer/html_to_js.gni")
+import("../../optimize_webui.gni")
+
+if (optimize_webui) {
+  preprocess_folder = "preprocessed"
+
+  optimize_webui("build") {
+    host = "profile-picker"
+    js_module_in_files = [
+      "profile_picker.js",
+      "lazy_load.js",
+    ]
+    input = rebase_path("$target_gen_dir/$preprocess_folder", root_build_dir)
+    js_out_files = [
+      "profile_picker.rollup.js",
+      "lazy_load.rollup.js",
+      "shared.rollup.js",
+    ]
+
+    deps = [
+      ":preprocess",
+      ":preprocess_generated",
+      ":shared",
+      "../../../../../ui/webui/resources:preprocess",
+    ]
+    excludes = [
+      "chrome://resources/js/cr.m.js",
+      "chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js",
+      "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js",
+    ]
+  }
+
+  preprocess_grit("preprocess") {
+    in_folder = "./"
+    out_folder = "$target_gen_dir/$preprocess_folder"
+    in_files = [
+      "profile_picker.js",
+      "navigation_behavior.js",
+      "policy_helper.js",
+      "icons.js",
+      "lazy_load.js",
+      "ensure_lazy_loaded.js",
+      "manage_profiles_browser_proxy.js",
+    ]
+  }
+
+  preprocess_grit("shared") {
+    in_folder = "../"
+    out_folder = "$target_gen_dir/$preprocess_folder"
+    in_files = [ "signin_icons.js" ]
+  }
+
+  preprocess_grit("preprocess_generated") {
+    deps = [ ":web_components" ]
+    in_folder = target_gen_dir
+    out_folder = "$target_gen_dir/$preprocess_folder"
+    in_files = [
+      "profile_picker_app.js",
+      "profile_picker_main_view.js",
+      "profile_card.js",
+      "profile_card_menu.js",
+      "profile_creation_flow/profile_type_choice.js",
+      "profile_creation_flow/local_profile_customization.js",
+      "profile_picker_shared_css.js",
+      "profile_creation_flow/shared_css.js",
+    ]
+  }
+}
 
 group("closure_compile") {
   deps = [
@@ -20,11 +89,38 @@ js_type_check("profile_picker_files") {
         "js_module_root=./gen/chrome/browser/resources/signin/profile_picker/",
       ]
   deps = [
+    ":ensure_lazy_loaded",
+    ":lazy_load",
+    ":navigation_behavior",
+    ":policy_helper",
+    ":profile_card",
+    ":profile_card_menu",
+    ":profile_picker",
     ":profile_picker_app",
     ":profile_picker_main_view",
   ]
 }
 
+js_library("profile_picker") {
+  deps = [
+    ":ensure_lazy_loaded",
+    ":manage_profiles_browser_proxy",
+    ":navigation_behavior",
+    ":profile_picker_app",
+  ]
+}
+
+js_library("ensure_lazy_loaded") {
+  deps = [ ":lazy_load" ]
+}
+
+js_library("lazy_load") {
+  deps = [
+    "profile_creation_flow:local_profile_customization",
+    "profile_creation_flow:profile_type_choice",
+  ]
+}
+
 js_library("profile_picker_main_view") {
   deps = [
     ":manage_profiles_browser_proxy",
@@ -50,7 +146,9 @@ js_library("navigation_behavior") {
 
 js_library("profile_picker_app") {
   deps = [
+    ":ensure_lazy_loaded",
     ":navigation_behavior",
+    ":profile_picker_main_view",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_lazy_render:cr_lazy_render.m",
     "//ui/webui/resources/cr_elements/cr_view_manager:cr_view_manager.m",

chrome/browser/resources/signin/profile_picker/profile_creation_flow/ensure_lazy_loaded.js → chrome/browser/resources/signin/profile_picker/ensure_lazy_loaded.js

@@ -13,7 +13,7 @@ export function ensureLazyLoaded() {
   if (!lazyLoadPromise) {
     const script = document.createElement('script');
     script.type = 'module';
-    script.src = './profile_creation_flow/lazy_load.js';
+    script.src = './lazy_load.js';
     document.body.appendChild(script);
 
     lazyLoadPromise = Promise.all([

chrome/browser/resources/signin/profile_picker/profile_creation_flow/lazy_load.js → chrome/browser/resources/signin/profile_picker/lazy_load.js

@@ -2,5 +2,5 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './profile_type_choice.js';
-import './local_profile_customization.js';
+import './profile_creation_flow/profile_type_choice.js';
+import './profile_creation_flow/local_profile_customization.js';
\ No newline at end of file

chrome/browser/resources/signin/profile_picker/profile_creation_flow/BUILD.gn

@@ -13,9 +13,6 @@ js_type_check("closure_compile") {
   ]
 }
 
-js_library("ensure_lazy_loaded") {
-}
-
 js_library("profile_type_choice") {
   deps = [
     "..:manage_profiles_browser_proxy",

chrome/browser/resources/signin/profile_picker/profile_creation_flow/local_profile_customization.html

@@ -127,7 +127,7 @@
 
 <div id="wrapperContainer">
   <div id="wrapper">
-    <cr-input id="nameInput" value="{{profileName_}}" pattern=".*\\S.*"
+    <cr-input id="nameInput" value="{{profileName_}}" pattern="[[pattern_]]"
         placeholder="$i18n{createProfileNamePlaceholder}"
         auto-validate spellcheck="false">
     </cr-input>

chrome/browser/resources/signin/profile_picker/profile_creation_flow/local_profile_customization.js

@@ -91,6 +91,12 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /** @private */
+    pattern_: {
+      type: String,
+      value: '.*\\S.*',
+    },
   },
 
   /** @private {?ManageProfilesBrowserProxy} */

chrome/browser/resources/signin/profile_picker/profile_picker.html

 <!doctype html>
 <html dir="$i18n{textdirection}" lang="$i18n{language}">
   <head>
+    <base href="chrome://profile-picker">
     <meta charset="utf-8">
     <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
     <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
@@ -18,6 +19,6 @@
       }
     </style>
     <profile-picker-app></profile-picker-app>
-    <script type="module" src="profile_picker_app.js"></script>
+    <script type="module" src="profile_picker.js"></script>
   </body>
 </html>

chrome/browser/resources/signin/profile_picker/profile_picker.js

+import './profile_picker_app.js';
+
+export {ensureLazyLoaded} from './ensure_lazy_loaded.js';
+export {ManageProfilesBrowserProxy, ManageProfilesBrowserProxyImpl} from './manage_profiles_browser_proxy.js';
+export {navigateTo, Routes} from './navigation_behavior.js';

chrome/browser/resources/signin/profile_picker/profile_picker_app.js

@@ -11,10 +11,10 @@ import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {ensureLazyLoaded} from './ensure_lazy_loaded.js';
 import {AutogeneratedThemeColorInfo, ManageProfilesBrowserProxy, ManageProfilesBrowserProxyImpl} from './manage_profiles_browser_proxy.js';
 import {navigateTo, NavigationBehavior, ProfileCreationSteps, Routes} from './navigation_behavior.js';
 import {isProfileCreationAllowed} from './policy_helper.js';
-import {ensureLazyLoaded} from './profile_creation_flow/ensure_lazy_loaded.js';
 
 Polymer({
   is: 'profile-picker-app',

chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd

@@ -62,6 +62,11 @@
           file="profile_picker.html"
           type="chrome_html"
           compress="false"/>
+      <structure
+          name="IDR_PROFILE_PICKER_PROFILE_PICKER_JS"
+          file="profile_picker.js"
+          type="chrome_html"
+          compress="false"/>
       <structure
           name="IDR_PROFILE_PICKER_NAVIGATION_BEHAVIOR_JS"
           file="navigation_behavior.js"
@@ -77,19 +82,14 @@
           file="icons.js"
           type="chrome_html"
           compress="false"/>
-      <structure
-          name="IDR_SIGNIN_ICONS_JS"
-          file="../signin_icons.js"
-          type="chrome_html"
-          compress="false"/>
       <structure
           name="IDR_PROFILE_PICKER_LAZY_LOAD_JS"
-          file="profile_creation_flow/lazy_load.js"
+          file="lazy_load.js"
           type="chrome_html"
           compress="false"/>
       <structure
           name="IDR_PROFILE_PICKER_ENSURE_LAZY_LOADED_JS"
-          file="profile_creation_flow/ensure_lazy_loaded.js"
+          file="ensure_lazy_loaded.js"
           type="chrome_html"
           compress="false"/>
       <structure

chrome/browser/resources/signin/profile_picker/profile_picker_resources_vulcanized.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/profile_picker_resources.h" type="rc_header">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="grit/profile_picker_resources_map.cc"
+            type="resource_map_source" />
+    <output filename="grit/profile_picker_resources_map.h"
+            type="resource_map_header" />
+    <output filename="profile_picker_resources.pak" type="data_package" />
+  </outputs>
+  <release seq="1">
+    <includes>
+      <include name="IDR_PROFILE_PICKER_PROFILE_PICKER_HTML"
+               file="profile_picker.html"
+               type="chrome_html" />
+      <include name="IDR_PROFILE_PICKER_PROFILE_PICKER_ROLLUP_JS"
+               file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_picker.rollup.js"
+               use_base_dir="false"
+               type="chrome_html" />
+      <include name="IDR_PROFILE_PICKER_LAZY_LOAD_ROLLUP_JS"
+               file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/lazy_load.rollup.js"
+               type="BINDATA"
+               use_base_dir="false" />
+      <include name="IDR_PROFILE_PICKER_SHARED_ROLLUP_JS"
+               file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/shared.rollup.js"
+               type="BINDATA"
+               use_base_dir="false" />
+      <include name="IDR_PROFILE_PICKER_IMAGES_LEFT_BANNER_IMAGE"
+               file="images/left_banner_image.svg"
+               type="BINDATA" />
+      <include name="IDR_PROFILE_PICKER_IMAGES_RIGHT_BANNER_IMAGE"
+               file="images/right_banner_image.svg"
+               type="BINDATA" />
+      <include name="IDR_PROFILE_PICKER_IMAGES_DARK_MODE_LEFT_BANNER_IMAGE"
+               file="images/dark_mode_left_banner_image.svg"
+               type="BINDATA" />
+      <include name="IDR_PROFILE_PICKER_IMAGES_DARK_MODE_RIGHT_BANNER_IMAGE"
+               file="images/dark_mode_right_banner_image.svg"
+               type="BINDATA" />
+      <include name="IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_IMAGES_BANNER_LIGHT_IMAGE"
+               file="profile_creation_flow/images/banner_light_image.svg"
+               type="BINDATA" />
+      <include name="IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_IMAGES_BANNER_DARK_IMAGE"
+               file="profile_creation_flow/images/banner_dark_image.svg"
+               type="BINDATA" />
+    </includes>
+  </release>
+</grit>

chrome/browser/ui/webui/signin/profile_picker_ui.cc

@@ -16,6 +16,7 @@
 #include "chrome/browser/ui/webui/webui_util.h"
 #include "chrome/common/pref_names.h"
 #include "chrome/common/webui_url_constants.h"
+#include "chrome/grit/browser_resources.h"
 #include "chrome/grit/chromium_strings.h"
 #include "chrome/grit/generated_resources.h"
 #include "chrome/grit/profile_picker_resources.h"
@@ -136,12 +137,40 @@ ProfilePickerUI::ProfilePickerUI(content::WebUI* web_ui)
 
   std::string generated_path =
       "@out_folder@/gen/chrome/browser/resources/signin/profile_picker/";
+
+  AddStrings(html_source);
+#if BUILDFLAG(OPTIMIZE_WEBUI)
+  webui::SetupBundledWebUIDataSource(
+      html_source, "profile_picker.js",
+      IDR_PROFILE_PICKER_PROFILE_PICKER_ROLLUP_JS,
+      IDR_PROFILE_PICKER_PROFILE_PICKER_HTML);
+  html_source->AddResourcePath("lazy_load.js",
+                               IDR_PROFILE_PICKER_LAZY_LOAD_ROLLUP_JS);
+  html_source->AddResourcePath("shared.rollup.js",
+                               IDR_PROFILE_PICKER_SHARED_ROLLUP_JS);
+  html_source->AddResourcePath("images/left_banner_image.svg",
+                               IDR_PROFILE_PICKER_IMAGES_LEFT_BANNER_IMAGE);
+  html_source->AddResourcePath("images/right_banner_image.svg",
+                               IDR_PROFILE_PICKER_IMAGES_RIGHT_BANNER_IMAGE);
+  html_source->AddResourcePath(
+      "images/dark_mode_left_banner_image.svg",
+      IDR_PROFILE_PICKER_IMAGES_DARK_MODE_LEFT_BANNER_IMAGE);
+  html_source->AddResourcePath(
+      "images/dark_mode_right_banner_image.svg",
+      IDR_PROFILE_PICKER_IMAGES_DARK_MODE_RIGHT_BANNER_IMAGE);
+  html_source->AddResourcePath(
+      "profile_creation_flow/images/banner_light_image.svg",
+      IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_IMAGES_BANNER_LIGHT_IMAGE);
+  html_source->AddResourcePath(
+      "profile_creation_flow/images/banner_dark_image.svg",
+      IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_IMAGES_BANNER_DARK_IMAGE);
+#else
+  html_source->AddResourcePath("signin_icons.js", IDR_SIGNIN_ICONS_JS);
   webui::SetupWebUIDataSource(
       html_source,
       base::make_span(kProfilePickerResources, kProfilePickerResourcesSize),
       generated_path, IDR_PROFILE_PICKER_PROFILE_PICKER_HTML);
-  html_source->AddResourcePath("signin_icons.js", IDR_SIGNIN_ICONS_JS);
-  AddStrings(html_source);
+#endif
   content::WebUIDataSource::Add(profile, html_source);
 }
 

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

@@ -36,7 +36,7 @@ js_library("profile_creation_flow_test") {
   deps = [
     "..:chai_assert",
     "..:test_util.m",
-    "//chrome/browser/resources/signin/profile_picker/profile_creation_flow:profile_type_choice",
+    "//chrome/browser/resources/signin/profile_picker:lazy_load",
   ]
 }
 
@@ -45,10 +45,7 @@ js_library("profile_picker_app_test") {
     ":test_manage_profiles_browser_proxy",
     "..:chai_assert",
     "..:test_util.m",
-    "//chrome/browser/resources/signin/profile_picker:navigation_behavior",
-    "//chrome/browser/resources/signin/profile_picker:profile_picker_app",
-    "//chrome/browser/resources/signin/profile_picker/profile_creation_flow:ensure_lazy_loaded",
-    "//chrome/browser/resources/signin/profile_picker/profile_creation_flow:local_profile_customization",
+    "//chrome/browser/resources/signin/profile_picker:profile_picker",
   ]
 }
 
@@ -62,6 +59,6 @@ js_library("test_dice_web_signin_intercept_browser_proxy") {
 js_library("test_manage_profiles_browser_proxy") {
   deps = [
     "..:test_browser_proxy.m",
-    "//chrome/browser/resources/signin/profile_picker:manage_profiles_browser_proxy",
+    "//chrome/browser/resources/signin/profile_picker:profile_picker",
   ]
 }

chrome/test/data/webui/signin/profile_creation_flow_test.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://profile-picker/profile_creation_flow/profile_type_choice.js';
+import 'chrome://profile-picker/lazy_load.js';
 
 import {assertTrue} from '../chai_assert.js';
 import {isChildVisible} from '../test_util.m.js';

chrome/test/data/webui/signin/profile_picker_app_test.js

@@ -2,11 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://profile-picker/profile_picker_app.js';
-
-import {ManageProfilesBrowserProxyImpl} from 'chrome://profile-picker/manage_profiles_browser_proxy.js';
-import {navigateTo, Routes} from 'chrome://profile-picker/navigation_behavior.js';
-import {ensureLazyLoaded} from 'chrome://profile-picker/profile_creation_flow/ensure_lazy_loaded.js';
+import {ensureLazyLoaded, ManageProfilesBrowserProxyImpl, navigateTo, Routes} from 'chrome://profile-picker/profile_picker.js';
 
 import {assertTrue} from '../chai_assert.js';
 import {waitBeforeNextRender} from '../test_util.m.js';

chrome/test/data/webui/signin/test_manage_profiles_browser_proxy.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {ManageProfilesBrowserProxy} from 'chrome://profile-picker/manage_profiles_browser_proxy.js';
+import {ManageProfilesBrowserProxy} from 'chrome://profile-picker/profile_picker.js';
 
 import {TestBrowserProxy} from '../test_browser_proxy.m.js';
 

tools/gritsettings/resource_ids.spec

@@ -195,7 +195,10 @@
     "includes": [1830],
     "structures": [1840],
   },
-  "chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd": {
+  "chrome/browser/resources/signin/profile_picker/profile_picker_resources_vulcanized.grd": {
+    "includes": [1850],
+  },
+ "chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd": {
     "includes": [1860],
     "structures": [1870],
   },