-
Notifications
You must be signed in to change notification settings - Fork 2.4k
WebUI Builds, Paths and Resources
Chromium HTML will refer to resources either relatively (e.g. ../my_module.html
) or via full url (e.g. chrome://history/my_module.html
). It is important that these can be accessed both via HTTP and via FileSystem. The corresponding filesystem path is defined in the opmize_web_ui
build action as the input
param. For example chrome://settings/
corresponds to $target_gen_dir/settings_resources.unpak/
.
This is why most of the GN build files for a chromium webui will perform the following steps:
- Closure compiler - performs type checking
- Use grit to pack the files via a GRD file to a single PAK file
- Unpack the PAK file to an output directory
- optimize_web_ui: combine to single file and minify
- Use grit again to pack the optimized files to a single PAK file
If the path is chrome://resources or chrome://brave-resources, the FileSystem location for the path is defined in optimize_web_ui.py script, as this is common to all WebUIs:
_URL_MAPPINGS = [
('chrome://resources/cr_components/', _CR_COMPONENTS_PATH),
('chrome://resources/cr_elements/', _CR_ELEMENTS_PATH),
('chrome://resources/css/', _CSS_RESOURCES_PATH),
('chrome://resources/html/', _HTML_RESOURCES_PATH),
('chrome://resources/js/', _JS_RESOURCES_PATH),
('chrome://resources/polymer/v1_0/', _POLYMER_PATH),
('chrome://brave-resources/', _BR_RESOURCES_PATH)
]
If the path is chrome://anything-else, the Filesystem location is defined in the "optimize_webui" GN definition, e.g:
optimize_webui("build") {
host = "history"
input = rebase_path(“.”, root_build_dir)
…
}
This lets the script know that the current directory that the BUILD.gn
file is to be used as the base path for all chrome://history/x URL includes.
Only Release builds are optimized in this way. For Debug builds, usually all the source files are bundled in to a PAK file directly and served individually from a UrlDataSource. That is, the chrome://settings WebUI will serve chrome://settings/module1 and chrome://settings/module2 directly, and without flattening or minifying.
It is important to test any additions or changes to module loading with the optimize_web_ui
build flag set on and off.
WebUIs which are created wholly for Brave do not use optimize_webui. Instead, they use Webpack, which handles type checking, module resolution, module concatentation or chunking, and minifying. It also generates the GRD file dynamically based on Javascript module imports and optimization settings. More information about that is on the wiki page https://github.com/brave/brave-browser/wiki/Javascript-and-Typescript-Bundling