angular/devtools/projects/shell-browser/src/BUILD.bazel
mariu c3205d0962 feat(devtools): Create browser specific styles for chrome and firefox (#46037)
Create browser specific styles for chrome and firefox

PR Close #46037
2022-05-23 14:00:10 -07:00

358 lines
21 KiB
Text

load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_web")
load("//devtools/tools:ng_module.bzl", "ng_module")
load("//devtools/tools:typescript.bzl", "ts_library")
load("//tools:defaults.bzl", "esbuild")
load("//devtools/tools/esbuild:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
load("@bazel_skylib//rules:common_settings.bzl", "string_flag")
package(default_visibility = ["//visibility:public"])
sass_library(
name = "material_theming",
srcs = [
"@npm//:node_modules/@angular/cdk/_index.scss",
"@npm//:node_modules/@angular/cdk/a11y/_index.import.scss",
"@npm//:node_modules/@angular/cdk/a11y/_index.scss",
"@npm//:node_modules/@angular/cdk/overlay/_index.import.scss",
"@npm//:node_modules/@angular/cdk/overlay/_index.scss",
"@npm//:node_modules/@angular/cdk/overlay/_index-deprecated.scss",
"@npm//:node_modules/@angular/cdk/text-field/_index.import.scss",
"@npm//:node_modules/@angular/cdk/text-field/_index.scss",
"@npm//:node_modules/@angular/material/_index.scss",
"@npm//:node_modules/@angular/material/_theming.scss",
"@npm//:node_modules/@angular/material/autocomplete/_autocomplete-legacy-index.scss",
"@npm//:node_modules/@angular/material/autocomplete/_autocomplete-theme.import.scss",
"@npm//:node_modules/@angular/material/autocomplete/_autocomplete-theme.scss",
"@npm//:node_modules/@angular/material/badge/_badge-legacy-index.scss",
"@npm//:node_modules/@angular/material/badge/_badge-theme.import.scss",
"@npm//:node_modules/@angular/material/badge/_badge-theme.scss",
"@npm//:node_modules/@angular/material/bottom-sheet/_bottom-sheet-legacy-index.scss",
"@npm//:node_modules/@angular/material/bottom-sheet/_bottom-sheet-theme.import.scss",
"@npm//:node_modules/@angular/material/bottom-sheet/_bottom-sheet-theme.scss",
"@npm//:node_modules/@angular/material/button-toggle/_button-toggle-legacy-index.scss",
"@npm//:node_modules/@angular/material/button-toggle/_button-toggle-theme.import.scss",
"@npm//:node_modules/@angular/material/button-toggle/_button-toggle-theme.scss",
"@npm//:node_modules/@angular/material/button-toggle/_button-toggle-variables.import.scss",
"@npm//:node_modules/@angular/material/button-toggle/_button-toggle-variables.scss",
"@npm//:node_modules/@angular/material/button/_button-base.import.scss",
"@npm//:node_modules/@angular/material/button/_button-base.scss",
"@npm//:node_modules/@angular/material/button/_button-legacy-index.scss",
"@npm//:node_modules/@angular/material/button/_button-theme.import.scss",
"@npm//:node_modules/@angular/material/button/_button-theme.scss",
"@npm//:node_modules/@angular/material/card/_card-legacy-index.scss",
"@npm//:node_modules/@angular/material/card/_card-theme.import.scss",
"@npm//:node_modules/@angular/material/card/_card-theme.scss",
"@npm//:node_modules/@angular/material/checkbox/_checkbox-legacy-index.scss",
"@npm//:node_modules/@angular/material/checkbox/_checkbox-theme.import.scss",
"@npm//:node_modules/@angular/material/checkbox/_checkbox-theme.scss",
"@npm//:node_modules/@angular/material/chips/_chips-legacy-index.scss",
"@npm//:node_modules/@angular/material/chips/_chips-theme.import.scss",
"@npm//:node_modules/@angular/material/chips/_chips-theme.scss",
"@npm//:node_modules/@angular/material/core/_core.import.scss",
"@npm//:node_modules/@angular/material/core/_core.scss",
"@npm//:node_modules/@angular/material/core/_core-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/_core-theme.scss",
"@npm//:node_modules/@angular/material/core/color/_all-color.import.scss",
"@npm//:node_modules/@angular/material/core/color/_all-color.scss",
"@npm//:node_modules/@angular/material/core/color/_color-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/density/private/_all-density.import.scss",
"@npm//:node_modules/@angular/material/core/density/private/_all-density.scss",
"@npm//:node_modules/@angular/material/core/density/private/_compatibility.import.scss",
"@npm//:node_modules/@angular/material/core/density/private/_compatibility.scss",
"@npm//:node_modules/@angular/material/core/density/private/_density-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/focus-indicators/_focus-indicators.import.scss",
"@npm//:node_modules/@angular/material/core/focus-indicators/_focus-indicators.scss",
"@npm//:node_modules/@angular/material/core/focus-indicators/_focus-indicators-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/focus-indicators/_focus-indicators-theme.scss",
"@npm//:node_modules/@angular/material/core/option/_optgroup-theme.import.scss",
"@npm//:node_modules/@angular/material/core/option/_optgroup-theme.scss",
"@npm//:node_modules/@angular/material/core/option/_option-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/option/_option-theme.import.scss",
"@npm//:node_modules/@angular/material/core/option/_option-theme.scss",
"@npm//:node_modules/@angular/material/core/ripple/_ripple.import.scss",
"@npm//:node_modules/@angular/material/core/ripple/_ripple.scss",
"@npm//:node_modules/@angular/material/core/ripple/_ripple-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/ripple/_ripple-theme.scss",
"@npm//:node_modules/@angular/material/core/selection/pseudo-checkbox/_pseudo-checkbox-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss",
"@npm//:node_modules/@angular/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss",
"@npm//:node_modules/@angular/material/core/style/_button-common.import.scss",
"@npm//:node_modules/@angular/material/core/style/_button-common.scss",
"@npm//:node_modules/@angular/material/core/style/_checkbox-common.import.scss",
"@npm//:node_modules/@angular/material/core/style/_checkbox-common.scss",
"@npm//:node_modules/@angular/material/core/style/_elevation.import.scss",
"@npm//:node_modules/@angular/material/core/style/_elevation.scss",
"@npm//:node_modules/@angular/material/core/style/_form-common.import.scss",
"@npm//:node_modules/@angular/material/core/style/_form-common.scss",
"@npm//:node_modules/@angular/material/core/style/_layout-common.import.scss",
"@npm//:node_modules/@angular/material/core/style/_layout-common.scss",
"@npm//:node_modules/@angular/material/core/style/_list-common.import.scss",
"@npm//:node_modules/@angular/material/core/style/_list-common.scss",
"@npm//:node_modules/@angular/material/core/style/_menu-common.import.scss",
"@npm//:node_modules/@angular/material/core/style/_menu-common.scss",
"@npm//:node_modules/@angular/material/core/style/_private.import.scss",
"@npm//:node_modules/@angular/material/core/style/_private.scss",
"@npm//:node_modules/@angular/material/core/style/_style-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/style/_variables.import.scss",
"@npm//:node_modules/@angular/material/core/style/_variables.scss",
"@npm//:node_modules/@angular/material/core/style/_vendor-prefixes.import.scss",
"@npm//:node_modules/@angular/material/core/style/_vendor-prefixes.scss",
"@npm//:node_modules/@angular/material/core/theming/_all-theme.import.scss",
"@npm//:node_modules/@angular/material/core/theming/_all-theme.scss",
"@npm//:node_modules/@angular/material/core/theming/_palette.import.scss",
"@npm//:node_modules/@angular/material/core/theming/_palette.scss",
"@npm//:node_modules/@angular/material/core/theming/_palette-deprecated.scss",
"@npm//:node_modules/@angular/material/core/theming/_theming.import.scss",
"@npm//:node_modules/@angular/material/core/theming/_theming.scss",
"@npm//:node_modules/@angular/material/core/theming/_theming-deprecated.scss",
"@npm//:node_modules/@angular/material/core/theming/_theming-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/typography/_all-typography.import.scss",
"@npm//:node_modules/@angular/material/core/typography/_all-typography.scss",
"@npm//:node_modules/@angular/material/core/typography/_typography.import.scss",
"@npm//:node_modules/@angular/material/core/typography/_typography.scss",
"@npm//:node_modules/@angular/material/core/typography/_typography-deprecated.scss",
"@npm//:node_modules/@angular/material/core/typography/_typography-legacy-index.scss",
"@npm//:node_modules/@angular/material/core/typography/_typography-utils.import.scss",
"@npm//:node_modules/@angular/material/core/typography/_typography-utils.scss",
"@npm//:node_modules/@angular/material/core/typography/_typography-utils-deprecated.scss",
"@npm//:node_modules/@angular/material/datepicker/_datepicker-legacy-index.scss",
"@npm//:node_modules/@angular/material/datepicker/_datepicker-theme.import.scss",
"@npm//:node_modules/@angular/material/datepicker/_datepicker-theme.scss",
"@npm//:node_modules/@angular/material/dialog/_dialog-legacy-index.scss",
"@npm//:node_modules/@angular/material/dialog/_dialog-theme.import.scss",
"@npm//:node_modules/@angular/material/dialog/_dialog-theme.scss",
"@npm//:node_modules/@angular/material/divider/_divider-legacy-index.scss",
"@npm//:node_modules/@angular/material/divider/_divider-offset.import.scss",
"@npm//:node_modules/@angular/material/divider/_divider-offset.scss",
"@npm//:node_modules/@angular/material/divider/_divider-theme.import.scss",
"@npm//:node_modules/@angular/material/divider/_divider-theme.scss",
"@npm//:node_modules/@angular/material/expansion/_expansion-legacy-index.scss",
"@npm//:node_modules/@angular/material/expansion/_expansion-mixins.import.scss",
"@npm//:node_modules/@angular/material/expansion/_expansion-mixins.scss",
"@npm//:node_modules/@angular/material/expansion/_expansion-theme.import.scss",
"@npm//:node_modules/@angular/material/expansion/_expansion-theme.scss",
"@npm//:node_modules/@angular/material/expansion/_expansion-variables.import.scss",
"@npm//:node_modules/@angular/material/expansion/_expansion-variables.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-fill-theme.import.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-fill-theme.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-legacy-index.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-legacy-theme.import.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-legacy-theme.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-outline-theme.import.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-outline-theme.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-standard-theme.import.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-standard-theme.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-theme.import.scss",
"@npm//:node_modules/@angular/material/form-field/_form-field-theme.scss",
"@npm//:node_modules/@angular/material/grid-list/_grid-list-legacy-index.scss",
"@npm//:node_modules/@angular/material/grid-list/_grid-list-theme.import.scss",
"@npm//:node_modules/@angular/material/grid-list/_grid-list-theme.scss",
"@npm//:node_modules/@angular/material/icon/_icon-legacy-index.scss",
"@npm//:node_modules/@angular/material/icon/_icon-theme.import.scss",
"@npm//:node_modules/@angular/material/icon/_icon-theme.scss",
"@npm//:node_modules/@angular/material/input/_input-legacy-index.scss",
"@npm//:node_modules/@angular/material/input/_input-theme.import.scss",
"@npm//:node_modules/@angular/material/input/_input-theme.scss",
"@npm//:node_modules/@angular/material/list/_list-legacy-index.scss",
"@npm//:node_modules/@angular/material/list/_list-theme.import.scss",
"@npm//:node_modules/@angular/material/list/_list-theme.scss",
"@npm//:node_modules/@angular/material/menu/_menu-legacy-index.scss",
"@npm//:node_modules/@angular/material/menu/_menu-theme.import.scss",
"@npm//:node_modules/@angular/material/menu/_menu-theme.scss",
"@npm//:node_modules/@angular/material/paginator/_paginator-legacy-index.scss",
"@npm//:node_modules/@angular/material/paginator/_paginator-theme.import.scss",
"@npm//:node_modules/@angular/material/paginator/_paginator-theme.scss",
"@npm//:node_modules/@angular/material/paginator/_paginator-variables.import.scss",
"@npm//:node_modules/@angular/material/paginator/_paginator-variables.scss",
"@npm//:node_modules/@angular/material/progress-bar/_progress-bar-legacy-index.scss",
"@npm//:node_modules/@angular/material/progress-bar/_progress-bar-theme.import.scss",
"@npm//:node_modules/@angular/material/progress-bar/_progress-bar-theme.scss",
"@npm//:node_modules/@angular/material/progress-spinner/_progress-spinner-legacy-index.scss",
"@npm//:node_modules/@angular/material/progress-spinner/_progress-spinner-theme.import.scss",
"@npm//:node_modules/@angular/material/progress-spinner/_progress-spinner-theme.scss",
"@npm//:node_modules/@angular/material/radio/_radio-legacy-index.scss",
"@npm//:node_modules/@angular/material/radio/_radio-theme.import.scss",
"@npm//:node_modules/@angular/material/radio/_radio-theme.scss",
"@npm//:node_modules/@angular/material/select/_select-legacy-index.scss",
"@npm//:node_modules/@angular/material/select/_select-theme.import.scss",
"@npm//:node_modules/@angular/material/select/_select-theme.scss",
"@npm//:node_modules/@angular/material/sidenav/_sidenav-legacy-index.scss",
"@npm//:node_modules/@angular/material/sidenav/_sidenav-theme.import.scss",
"@npm//:node_modules/@angular/material/sidenav/_sidenav-theme.scss",
"@npm//:node_modules/@angular/material/slide-toggle/_slide-toggle-legacy-index.scss",
"@npm//:node_modules/@angular/material/slide-toggle/_slide-toggle-theme.import.scss",
"@npm//:node_modules/@angular/material/slide-toggle/_slide-toggle-theme.scss",
"@npm//:node_modules/@angular/material/slider/_slider-legacy-index.scss",
"@npm//:node_modules/@angular/material/slider/_slider-theme.import.scss",
"@npm//:node_modules/@angular/material/slider/_slider-theme.scss",
"@npm//:node_modules/@angular/material/snack-bar/_snack-bar-legacy-index.scss",
"@npm//:node_modules/@angular/material/snack-bar/_snack-bar-theme.import.scss",
"@npm//:node_modules/@angular/material/snack-bar/_snack-bar-theme.scss",
"@npm//:node_modules/@angular/material/sort/_sort-legacy-index.scss",
"@npm//:node_modules/@angular/material/sort/_sort-theme.import.scss",
"@npm//:node_modules/@angular/material/sort/_sort-theme.scss",
"@npm//:node_modules/@angular/material/stepper/_stepper-legacy-index.scss",
"@npm//:node_modules/@angular/material/stepper/_stepper-theme.import.scss",
"@npm//:node_modules/@angular/material/stepper/_stepper-theme.scss",
"@npm//:node_modules/@angular/material/stepper/_stepper-variables.import.scss",
"@npm//:node_modules/@angular/material/stepper/_stepper-variables.scss",
"@npm//:node_modules/@angular/material/table/_table-flex-styles.import.scss",
"@npm//:node_modules/@angular/material/table/_table-flex-styles.scss",
"@npm//:node_modules/@angular/material/table/_table-legacy-index.scss",
"@npm//:node_modules/@angular/material/table/_table-theme.import.scss",
"@npm//:node_modules/@angular/material/table/_table-theme.scss",
"@npm//:node_modules/@angular/material/tabs/_tabs-common.import.scss",
"@npm//:node_modules/@angular/material/tabs/_tabs-common.scss",
"@npm//:node_modules/@angular/material/tabs/_tabs-legacy-index.scss",
"@npm//:node_modules/@angular/material/tabs/_tabs-theme.import.scss",
"@npm//:node_modules/@angular/material/tabs/_tabs-theme.scss",
"@npm//:node_modules/@angular/material/toolbar/_toolbar-legacy-index.scss",
"@npm//:node_modules/@angular/material/toolbar/_toolbar-theme.import.scss",
"@npm//:node_modules/@angular/material/toolbar/_toolbar-theme.scss",
"@npm//:node_modules/@angular/material/toolbar/_toolbar-variables.import.scss",
"@npm//:node_modules/@angular/material/toolbar/_toolbar-variables.scss",
"@npm//:node_modules/@angular/material/tooltip/_tooltip-legacy-index.scss",
"@npm//:node_modules/@angular/material/tooltip/_tooltip-theme.import.scss",
"@npm//:node_modules/@angular/material/tooltip/_tooltip-theme.scss",
"@npm//:node_modules/@angular/material/tree/_tree-legacy-index.scss",
"@npm//:node_modules/@angular/material/tree/_tree-theme.import.scss",
"@npm//:node_modules/@angular/material/tree/_tree-theme.scss",
"@npm//:node_modules/@angular/material/tree/_tree-variables.import.scss",
"@npm//:node_modules/@angular/material/tree/_tree-variables.scss",
],
)
sass_binary(
name = "shell_common_styles",
src = "styles.scss",
sourcemap = False,
deps = [":material_theming"],
)
sass_binary(
name = "shell_firefox_styles",
src = "styles/firefox_styles.scss",
)
sass_binary(
name = "shell_chrome_styles",
src = "styles/chrome_styles.scss",
)
ts_library(
name = "devtools_ts",
srcs = [
"devtools.ts",
],
deps = [
"@npm//@types/chrome",
],
)
js_library(
name = "devtools",
deps = [":devtools_ts"],
)
ng_module(
name = "src",
srcs = [
"main.ts",
],
deps = [
"//devtools/projects/ng-devtools",
"//devtools/projects/shell-browser/src/app",
"//devtools/projects/shell-browser/src/environments:environment",
"//packages/common",
"//packages/common/http",
"//packages/core",
"//packages/platform-browser-dynamic",
],
)
esbuild(
name = "bundle",
config = "//devtools/tools/esbuild:esbuild_config_esm_prod",
entry_points = [":main.ts"],
minify = True,
platform = "browser",
splitting = False,
target = "esnext",
deps = LINKER_PROCESSED_FW_PACKAGES + [":src"],
)
esbuild(
name = "devtools_bundle",
config = "//devtools/tools/esbuild:esbuild_config_esm",
entry_point = "devtools.ts",
format = "iife",
minify = True,
platform = "browser",
splitting = False,
target = "esnext",
deps = [":devtools"],
)
exports_files(["index.html"])
filegroup(
name = "prod_app_static_files",
srcs = [
":index.html",
":shell_chrome_styles",
":shell_common_styles",
":shell_firefox_styles",
"//packages/zone.js/bundles:zone.umd.js",
],
)
string_flag(
name = "flag_browser",
build_setting_default = "chrome",
values = [
"chrome",
"firefox",
],
)
config_setting(
name = "browser_chrome",
flag_values = {":flag_browser": "chrome"},
)
config_setting(
name = "browser_firefox",
flag_values = {":flag_browser": "firefox"},
)
genrule(
name = "copy_manifest",
srcs = select({
":browser_chrome": ["//devtools/projects/shell-browser/src/manifest:manifest.chrome.json"],
":browser_firefox": ["//devtools/projects/shell-browser/src/manifest:manifest.firefox.json"],
}),
outs = ["manifest.json"],
cmd = "cp $< $@",
)
pkg_web(
name = "prodapp",
srcs = [
":bundle",
":copy_manifest",
":devtools_bundle",
":prod_app_static_files",
"//devtools/projects/shell-browser/src:devtools.html",
"//devtools/projects/shell-browser/src/app:backend_bundle",
"//devtools/projects/shell-browser/src/app:background_bundle",
"//devtools/projects/shell-browser/src/app:content_script_bundle",
"//devtools/projects/shell-browser/src/app:ng_validate_bundle",
"//devtools/projects/shell-browser/src/assets",
"//devtools/projects/shell-browser/src/popups",
],
additional_root_paths = [
"projects/ng-devtools/src/lib",
],
substitutions = {"BUILD_SCM_COMMIT_SHA": "{BUILD_SCM_COMMIT_SHA}"},
)