# Copyright (C) 2018 The Android Open Source Project # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. import("../gn/perfetto.gni") import("../gn/perfetto_check_build_deps.gni") import("../gn/wasm.gni") import("../protos/perfetto/trace_processor/proto_files.gni") # Prevent that this file is accidentally included in embedder builds. assert(enable_perfetto_ui) ui_dir = "$root_build_dir/ui" chrome_extension_dir = "$root_build_dir/chrome_extension" ui_gen_dir = "$target_out_dir/gen" nodejs_root = "../buildtools/nodejs" nodejs_bin = rebase_path("$nodejs_root/bin", root_build_dir) # +----------------------------------------------------------------------------+ # | The outer "ui" target to just ninja -C out/xxx ui | # +----------------------------------------------------------------------------+ group("ui") { deps = [ ":chrome_extension_assets_dist", ":chrome_extension_bundle_dist", ":dist", ":gen_dist_file_map", ":service_worker_bundle_dist", ":test_scripts", # IMPORTANT: Only add deps here if they are NOT part of the production UI # (e.g., tests, extensions, ...). Any UI dep should go in the # |ui_dist_targets| list below. The only exception is the service worker # target, that depends on that list. ] } # The list of targets that produces dist/ files for the UI. This list is used # also by the gen_dist_file_map to generate the map of hashes of all UI files, # which is turn used by the service worker code for the offline caching. ui_dist_targets = [ ":assets_dist", ":catapult_dist", ":controller_bundle_dist", ":engine_bundle_dist", ":frontend_bundle_dist", ":index_dist", ":scss", ":typefaces_dist", ":wasm_dist", ] # Buils the ui, but not service worker, tests and extensions. group("dist") { deps = ui_dist_targets } # A minimal page to profile the WASM engine without the all UI. group("query") { deps = [ ":query_bundle_dist", ":query_dist", ":ui", ] } # +----------------------------------------------------------------------------+ # | Template used to run node binaries using the hermetic node toolchain. | # +----------------------------------------------------------------------------+ template("node_bin") { action(target_name) { forward_variables_from(invoker, [ "inputs", "outputs", "depfile", ]) deps = [ ":node_modules" ] if (defined(invoker.deps)) { deps += invoker.deps } script = "../gn/standalone/build_tool_wrapper.py" _node_cmd = invoker.node_cmd args = [] if (defined(invoker.suppress_stdout) && invoker.suppress_stdout) { args += [ "--suppress_stdout" ] } if (defined(invoker.suppress_stderr) && invoker.suppress_stderr) { args += [ "--suppress_stderr" ] } args += [ "--path=$nodejs_bin", "node", rebase_path("node_modules/.bin/$_node_cmd", root_build_dir), ] + invoker.args } } # +----------------------------------------------------------------------------+ # | Template for "sorcery" the source map resolver. | # +----------------------------------------------------------------------------+ template("sorcery") { node_bin(target_name) { assert(defined(invoker.input)) assert(defined(invoker.output)) forward_variables_from(invoker, [ "deps" ]) inputs = [ invoker.input ] outputs = [ invoker.output, invoker.output + ".map", ] node_cmd = "sorcery" args = [ "-i", rebase_path(invoker.input, root_build_dir), "-o", rebase_path(invoker.output, root_build_dir), ] } } # +----------------------------------------------------------------------------+ # | Template for bundling js | # +----------------------------------------------------------------------------+ template("bundle") { node_bin(target_name) { assert(defined(invoker.input)) assert(defined(invoker.output)) forward_variables_from(invoker, [ "deps" ]) inputs = [ invoker.input, "rollup.config.js", ] outputs = [ invoker.output, invoker.output + ".map", ] node_cmd = "rollup" args = [ "-c", rebase_path("rollup.config.js", root_build_dir), rebase_path(invoker.input, root_build_dir), "-o", rebase_path(invoker.output, root_build_dir), "-f", "iife", "-m", "--silent", ] } } # +----------------------------------------------------------------------------+ # | Bundles all *.js files together resolving CommonJS require() deps. | # +----------------------------------------------------------------------------+ # Bundle together all js sources into a bundle.js file, that will ultimately be # included by the .html files. bundle("frontend_bundle") { deps = [ ":transpile_all_ts" ] input = "$target_out_dir/frontend/index.js" output = "$target_out_dir/frontend_bundle.js" } bundle("chrome_extension_bundle") { deps = [ ":transpile_all_ts" ] input = "$target_out_dir/chrome_extension/index.js" output = "$target_out_dir/chrome_extension_bundle.js" } bundle("controller_bundle") { deps = [ ":transpile_all_ts" ] input = "$target_out_dir/controller/index.js" output = "$target_out_dir/controller_bundle.js" } bundle("engine_bundle") { deps = [ ":transpile_all_ts" ] input = "$target_out_dir/engine/index.js" output = "$target_out_dir/engine_bundle.js" } bundle("service_worker_bundle") { deps = [ ":transpile_service_worker_ts" ] input = "$target_out_dir/service_worker/service_worker.js" output = "$target_out_dir/service_worker.js" } bundle("query_bundle") { deps = [ ":transpile_all_ts" ] input = "$target_out_dir/query/index.js" output = "$target_out_dir/query_bundle.js" } # +----------------------------------------------------------------------------+ # | Protobuf: gen rules to create .js and .d.ts files from protos. | # +----------------------------------------------------------------------------+ node_bin("protos_to_js") { inputs = [] foreach(proto, trace_processor_protos) { inputs += [ "../protos/perfetto/trace_processor/$proto.proto" ] } inputs += [ "../protos/perfetto/common/trace_stats.proto", "../protos/perfetto/common/tracing_service_capabilities.proto", "../protos/perfetto/config/perfetto_config.proto", "../protos/perfetto/ipc/consumer_port.proto", "../protos/perfetto/ipc/wire_protocol.proto", "../protos/perfetto/metrics/metrics.proto", ] outputs = [ "$ui_gen_dir/protos.js" ] node_cmd = "pbjs" args = [ "-t", "static-module", "-w", "commonjs", "-p", rebase_path("..", root_build_dir), "-o", rebase_path(outputs[0], root_build_dir), ] + rebase_path(inputs, root_build_dir) } # Protobuf.js requires to first generate .js files from the .proto and then # create .ts definitions for them. node_bin("protos_to_ts") { deps = [ ":protos_to_js" ] inputs = [ "$ui_gen_dir/protos.js" ] outputs = [ "$ui_gen_dir/protos.d.ts" ] node_cmd = "pbts" args = [ "-p", rebase_path("..", root_build_dir), "-o", rebase_path(outputs[0], root_build_dir), rebase_path(inputs[0], root_build_dir), ] } # +----------------------------------------------------------------------------+ # | TypeScript: transpiles all *.ts into .js | # +----------------------------------------------------------------------------+ # Builds all .ts sources in the repo under |src|. node_bin("transpile_all_ts") { deps = [ ":dist_symlink", ":protos_to_ts", ":wasm_gen", ] inputs = [ "tsconfig.json" ] outputs = [ "$target_out_dir/frontend/index.js", "$target_out_dir/engine/index.js", "$target_out_dir/controller/index.js", "$target_out_dir/query/index.js", "$target_out_dir/chrome_extension/index.js", ] depfile = root_out_dir + "/tsc.d" exec_script("../gn/standalone/glob.py", [ "--root=" + rebase_path(".", root_build_dir), "--filter=*.ts", "--exclude=node_modules", "--exclude=dist", "--exclude=service_worker", "--deps=obj/ui/frontend/index.js", "--output=" + rebase_path(depfile), ], "") node_cmd = "tsc" args = [ "--project", rebase_path(".", root_build_dir), "--outDir", rebase_path(target_out_dir, root_build_dir), ] } node_bin("transpile_service_worker_ts") { deps = [ ":dist_symlink", ":gen_dist_file_map", ] inputs = [ "tsconfig.json", "src/service_worker/service_worker.ts", ] outputs = [ "$target_out_dir/service_worker/service_worker.js" ] node_cmd = "tsc" args = [ "--project", rebase_path("src/service_worker", root_build_dir), "--outDir", rebase_path(target_out_dir, root_build_dir), ] } # +----------------------------------------------------------------------------+ # | Build css. | # +----------------------------------------------------------------------------+ scss_root = "src/assets/perfetto.scss" scss_srcs = [ "src/assets/typefaces.scss", "src/assets/sidebar.scss", "src/assets/topbar.scss", "src/assets/record.scss", "src/assets/common.scss", "src/assets/modal.scss", "src/assets/details.scss", ] # Build css. node_bin("scss") { deps = [ ":dist_symlink" ] inputs = [ scss_root ] + scss_srcs outputs = [ "$ui_dir/perfetto.css" ] node_cmd = "node-sass" args = [ "--quiet", rebase_path(scss_root, root_build_dir), rebase_path(outputs[0], root_build_dir), ] } # +----------------------------------------------------------------------------+ # | Copy rules: create the final output directory. | # +----------------------------------------------------------------------------+ copy("index_dist") { sources = [ "index.html" ] outputs = [ "$ui_dir/index.html" ] } copy("typefaces_dist") { sources = [ "../buildtools/typefaces/MaterialIcons.woff2", "../buildtools/typefaces/Raleway-Regular.woff2", "../buildtools/typefaces/Raleway-Thin.woff2", "../buildtools/typefaces/RobotoCondensed-Light.woff2", "../buildtools/typefaces/RobotoCondensed-Regular.woff2", "../buildtools/typefaces/RobotoMono-Regular.woff2", ] outputs = [ "$ui_dir/assets/{{source_file_part}}" ] } copy("query_dist") { sources = [ "query.html" ] outputs = [ "$ui_dir/query.html" ] } copy("assets_dist") { sources = [ "src/assets/brand.png", "src/assets/favicon.png", "src/assets/logo-3d.png", "src/assets/rec_atrace.png", "src/assets/rec_battery_counters.png", "src/assets/rec_board_voltage.png", "src/assets/rec_cpu_coarse.png", "src/assets/rec_cpu_fine.png", "src/assets/rec_cpu_freq.png", "src/assets/rec_cpu_voltage.png", "src/assets/rec_cpu_wakeup.png", "src/assets/rec_ftrace.png", "src/assets/rec_java_heap_dump.png", "src/assets/rec_lmk.png", "src/assets/rec_logcat.png", "src/assets/rec_long_trace.png", "src/assets/rec_mem_hifreq.png", "src/assets/rec_meminfo.png", "src/assets/rec_native_heap_profiler.png", "src/assets/rec_one_shot.png", "src/assets/rec_ps_stats.png", "src/assets/rec_ring_buf.png", "src/assets/rec_vmstat.png", ] + [ scss_root ] + scss_srcs outputs = [ "$ui_dir/assets/{{source_file_part}}" ] } copy("chrome_extension_assets_dist") { sources = [ "src/assets/logo-128.png", "src/chrome_extension/manifest.json", ] outputs = [ "$chrome_extension_dir/{{source_file_part}}" ] } sorcery("frontend_bundle_dist") { deps = [ ":frontend_bundle" ] input = "$target_out_dir/frontend_bundle.js" output = "$ui_dir/frontend_bundle.js" } sorcery("chrome_extension_bundle_dist") { deps = [ ":chrome_extension_bundle" ] input = "$target_out_dir/chrome_extension_bundle.js" output = "$chrome_extension_dir/chrome_extension_bundle.js" } sorcery("controller_bundle_dist") { deps = [ ":controller_bundle" ] input = "$target_out_dir/controller_bundle.js" output = "$ui_dir/controller_bundle.js" } sorcery("engine_bundle_dist") { deps = [ ":engine_bundle" ] input = "$target_out_dir/engine_bundle.js" output = "$ui_dir/engine_bundle.js" } sorcery("service_worker_bundle_dist") { deps = [ ":service_worker_bundle" ] input = "$target_out_dir/service_worker.js" output = "$ui_dir/service_worker.js" } sorcery("query_bundle_dist") { deps = [ ":query_bundle" ] input = "$target_out_dir/query_bundle.js" output = "$ui_dir/query_bundle.js" } copy("wasm_dist") { deps = [ "//src/trace_processor:trace_processor.wasm($wasm_toolchain)", "//tools/trace_to_text:trace_to_text.wasm($wasm_toolchain)", ] sources = [ "$root_build_dir/wasm/trace_processor.wasm", "$root_build_dir/wasm/trace_to_text.wasm", ] outputs = [ "$ui_dir/{{source_file_part}}" ] } copy("wasm_gen") { deps = [ ":dist_symlink", # trace_processor "//src/trace_processor:trace_processor.d.ts($wasm_toolchain)", "//src/trace_processor:trace_processor.js($wasm_toolchain)", "//src/trace_processor:trace_processor.wasm($wasm_toolchain)", # trace_to_text "//tools/trace_to_text:trace_to_text.d.ts($wasm_toolchain)", "//tools/trace_to_text:trace_to_text.js($wasm_toolchain)", "//tools/trace_to_text:trace_to_text.wasm($wasm_toolchain)", ] sources = [ # trace_processor "$root_build_dir/wasm/trace_processor.d.ts", "$root_build_dir/wasm/trace_processor.js", "$root_build_dir/wasm/trace_processor.wasm", # trace_to_text "$root_build_dir/wasm/trace_to_text.d.ts", "$root_build_dir/wasm/trace_to_text.js", "$root_build_dir/wasm/trace_to_text.wasm", ] if (is_debug) { sources += [ "$root_build_dir/wasm/trace_processor.wasm.map", "$root_build_dir/wasm/trace_to_text.wasm.map", ] } outputs = [ "$ui_gen_dir/{{source_file_part}}" ] } # Copy over the vulcanized legacy trace viewer. copy("catapult_dist") { sources = [ "../buildtools/catapult_trace_viewer/catapult_trace_viewer.html", "../buildtools/catapult_trace_viewer/catapult_trace_viewer.js", ] outputs = [ "$ui_dir/assets/{{source_file_part}}" ] } # +----------------------------------------------------------------------------+ # | Node JS: Creates a symlink in the out directory to node_modules. | # +----------------------------------------------------------------------------+ perfetto_check_build_deps("check_ui_deps") { args = [ "--ui" ] inputs = [ "package-lock.json" ] } # Creates a symlink from out/xxx/ui/node_modules -> ../../../ui/node_modules. # This allows to run rollup and other node tools from the out/xxx directory. action("node_modules_symlink") { deps = [ ":check_ui_deps" ] script = "../gn/standalone/build_tool_wrapper.py" stamp_file = "$target_out_dir/.$target_name.stamp" args = [ "--stamp", rebase_path(stamp_file, root_build_dir), "/bin/ln", "-fns", rebase_path("node_modules", target_out_dir), rebase_path("$target_out_dir/node_modules", root_build_dir), ] outputs = [ stamp_file ] } group("node_modules") { deps = [ ":node_modules_symlink" ] } # Creates a symlink from //ui/dist -> ../../out/xxx/ui. Used only for # autocompletion in IDEs. The problem this is solving is that in tsconfig.json # we can't possibly know the path to ../../out/xxx for outDir. Instead, we set # outDir to "./dist" and create a symlink on the first build. action("dist_symlink") { script = "../gn/standalone/build_tool_wrapper.py" stamp_file = "$target_out_dir/.$target_name.stamp" args = [ "--stamp", rebase_path(stamp_file, root_build_dir), "/bin/ln", "-fns", rebase_path(target_out_dir, "."), rebase_path("dist", root_build_dir), ] inputs = [ "$root_build_dir" ] outputs = [ stamp_file ] } group("test_scripts") { deps = [ ":copy_tests_script", ":copy_unittests_script", ] } copy("copy_unittests_script") { sources = [ "config/ui_unittests_template" ] outputs = [ "$root_build_dir/ui_unittests" ] } copy("copy_tests_script") { sources = [ "config/ui_tests_template" ] outputs = [ "$root_build_dir/ui_tests" ] } # This target generates an map containing all the UI subresources and their # hashes. This is used by the service worker code for offline caching. # This taarget needs to be kept at the end of the BUILD.gn file, because of the # get_target_outputs() call (fails otherwise due to GN's evaluation order). action("gen_dist_file_map") { out_file_path = "$ui_gen_dir/dist_file_map.ts" dist_files = [] foreach(target, ui_dist_targets) { foreach(dist_file, get_target_outputs(target)) { dist_files += [ rebase_path(dist_file, root_build_dir) ] } } deps = [ ":dist" ] script = "../gn/standalone/write_ui_dist_file_map.py" inputs = [] outputs = [ out_file_path ] args = [ "--out", rebase_path(out_file_path, root_build_dir), "--strip", rebase_path(ui_dir, root_build_dir), ] + dist_files }