[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/+/2416512 Reviewed-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}
This commit is contained in:
@ -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 = [
|
||||
|
@ -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",
|
||||
|
@ -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([
|
@ -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';
|
@ -13,9 +13,6 @@ js_type_check("closure_compile") {
|
||||
]
|
||||
}
|
||||
|
||||
js_library("ensure_lazy_loaded") {
|
||||
}
|
||||
|
||||
js_library("profile_type_choice") {
|
||||
deps = [
|
||||
"..:manage_profiles_browser_proxy",
|
||||
|
@ -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>
|
||||
|
6
chrome/browser/resources/signin/profile_picker/profile_creation_flow/local_profile_customization.js
6
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} */
|
||||
|
@ -1,6 +1,7 @@
|
||||
<!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>
|
||||
|
@ -0,0 +1,5 @@
|
||||
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';
|
@ -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',
|
||||
|
@ -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
|
||||
|
50
chrome/browser/resources/signin/profile_picker/profile_picker_resources_vulcanized.grd
Normal file
50
chrome/browser/resources/signin/profile_picker/profile_picker_resources_vulcanized.grd
Normal file
@ -0,0 +1,50 @@
|
||||
<?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>
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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",
|
||||
]
|
||||
}
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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],
|
||||
},
|
||||
|
Reference in New Issue
Block a user