diff --git a/.bazelignore b/.bazelignore index 99de13a1b74..99ab8710a74 100644 --- a/.bazelignore +++ b/.bazelignore @@ -8,6 +8,7 @@ dist aio/content aio/node_modules aio/tools/examples/shared/node_modules +devtools/node_modules packages/bazel/node_modules # All integration test node_modules folders diff --git a/.circleci/config.yml b/.circleci/config.yml index 0552e0ba350..dee23bec4cd 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -733,6 +733,18 @@ jobs: name: Test all windows CI targets command: bazel test --test_tag_filters="-browser:chromium-local" //packages/compiler-cli/... no_output_timeout: 15m + test_angular_devtools: + executor: + name: default-executor + steps: + - custom_attach_workspace + - init_environment + - run: sudo apt-get update + - run: sudo apt-get -y install libgtk-3-0 libasound2 libnss3 libxss1 libdrm2 libgbm-dev libxshmfence-dev + - run: yarn --cwd devtools install --frozen-lockfile --non-interactive --cache-folder ~/.cache/yarn + - run: yarn --cwd devtools test:ci + - run: yarn --cwd devtools build:chrome + - run: yarn --cwd devtools cy:ci workflows: version: 2 @@ -802,6 +814,9 @@ workflows: - test_win: requires: - setup + - test_angular_devtools: + requires: + - setup monitoring: jobs: diff --git a/WORKSPACE b/WORKSPACE index 6e2b9d4d0e4..3ff3ab6d1cb 100644 --- a/WORKSPACE +++ b/WORKSPACE @@ -80,6 +80,6 @@ cldr_data_repository( ) local_repository( - name = "angular_devtools", + name = "devtools", path = "devtools", ) diff --git a/devtools/.bazelrc b/devtools/.bazelrc index 81af7d63e6b..b04c8a6e296 100644 --- a/devtools/.bazelrc +++ b/devtools/.bazelrc @@ -1,95 +1,25 @@ -# Common Bazel settings for JavaScript/NodeJS workspaces -# This rc file is automatically discovered when Bazel is run in this workspace, -# see https://docs.bazel.build/versions/master/guide.html#bazelrc -# -# The full list of Bazel options: https://docs.bazel.build/versions/master/command-line-reference.html +# These options are enabled when running on CI +# We do this by copying this file to /etc/bazel.bazelrc at the start of the build. +# See documentation in /docs/BAZEL.md -# Cache action outputs on disk so they persist across output_base and bazel shutdown (eg. changing branches) -build --disk_cache=~/.cache/bazel-disk-cache +# Import config items common to both Linux and Windows setups. +# https://docs.bazel.build/versions/master/guide.html#bazelrc-syntax-and-semantics +try-import %workspace%/.circleci/bazel.common.rc -# Bazel picks up host-OS-specific config lines from bazelrc files -build --enable_platform_specific_config +# Save downloaded repositories in a location that can be cached by CircleCI. This helps us +# speeding up the analysis time significantly with Bazel managed node dependencies on the CI. +build --repository_cache=/home/circleci/bazel_repository_cache -# Bazel will create symlinks from the workspace directory to output artifacts. -# Build results will be placed in a directory called "dist/bin" -# Other directories will be created like "dist/testlogs" -# Be aware that this will still create a bazel-out symlink in -# your project directory, which you must exclude from version control and your -# editor's search path. -build --symlink_prefix=dist/ -# To disable the symlinks altogether (including bazel-out) you can use -# build --symlink_prefix=/ -# however this makes it harder to find outputs. +# Workaround https://github.com/bazelbuild/bazel/issues/3645 +# Bazel doesn't calculate the memory ceiling correctly when running under Docker. +# Limit Bazel to consuming resources that fit in CircleCI "xlarge" class +# https://circleci.com/docs/2.0/configuration-reference/#resource_class +build --local_cpu_resources=20 +build --local_ram_resources=32768 -# Specifies desired output mode for running tests. -# Valid values are -# 'summary' to output only test status summary -# 'errors' to also print test logs for failed tests -# 'all' to print logs for all tests -# 'streamed' to output logs for all tests in real time -# (this will force tests to be executed locally one at a time regardless of --test_strategy value). -test --test_output=errors +# All build executed remotely should be done using our RBE configuration. +build:remote --google_default_credentials -# Support for debugging NodeJS tests -# Add the Bazel option `--config=debug` to enable this -# --test_output=streamed -# Stream stdout/stderr output from each test in real-time. -# See https://docs.bazel.build/versions/master/user-manual.html#flag--test_output for more details. -# --test_strategy=exclusive -# Run one test at a time. -# --test_timeout=9999 -# Prevent long running tests from timing out -# See https://docs.bazel.build/versions/master/user-manual.html#flag--test_timeout for more details. -# --nocache_test_results -# Always run tests -# --node_options=--inspect-brk -# Pass the --inspect-brk option to all tests which enables the node inspector agent. -# See https://nodejs.org/de/docs/guides/debugging-getting-started/#command-line-options for more details. -# --define=VERBOSE_LOGS=1 -# Rules will output verbose logs if the VERBOSE_LOGS environment variable is set. `VERBOSE_LOGS` will be passed to -# `nodejs_binary` and `nodejs_test` via the default value of the `default_env_vars` attribute of those rules. -# --compilation_mode=dbg -# Rules may change their build outputs if the compilation mode is set to dbg. For example, -# mininfiers such as terser may make their output more human readable when this is set. Rules will pass `COMPILATION_MODE` -# to `nodejs_binary` executables via the actions.run env attribute. -# See https://docs.bazel.build/versions/master/user-manual.html#flag--compilation_mode for more details. -test:debug --test_output=streamed --test_strategy=exclusive --test_timeout=9999 --nocache_test_results --define=VERBOSE_LOGS=1 -# Use bazel run with `--config=debug` to turn on the NodeJS inspector agent. -# The node process will break before user code starts and wait for the debugger to connect. -run:debug --define=VERBOSE_LOGS=1 -- --node_options=--inspect-brk -# The following option will change the build output of certain rules such as terser and may not be desirable in all cases -build:debug --compilation_mode=dbg - -# Turn off legacy external runfiles -# This prevents accidentally depending on this feature, which Bazel will remove. -build --nolegacy_external_runfiles - -# Turn on --incompatible_strict_action_env which was on by default -# in Bazel 0.21.0 but turned off again in 0.22.0. Follow -# https://github.com/bazelbuild/bazel/issues/7026 for more details. -# This flag is needed to so that the bazel cache is not invalidated -# when running bazel via `yarn bazel`. -# See https://github.com/angular/angular/issues/27514. -build --incompatible_strict_action_env -run --incompatible_strict_action_env - -# When running `bazel coverage` --instrument_test_targets needs to be set in order to -# collect coverage information from test targets -coverage --instrument_test_targets - -# Load any settings specific to the current user. -# .bazelrc.user should appear in .gitignore so that settings are not shared with team members -# This needs to be last statement in this -# config, as the user configuration should be able to overwrite flags from this file. -# See https://docs.bazel.build/versions/master/best-practices.html#bazelrc -# (Note that we use .bazelrc.user so the file appears next to .bazelrc in directory listing, -# rather than user.bazelrc as suggested in the Bazel docs) -try-import %workspace%/.bazelrc.user - - -# Use the Angular Ivy compiler -# See https://github.com/angular/angular/blob/master/docs/BAZEL.md#various-flags-used-for-tests -build --define=angular_ivy_enabled=True - -build --nobuild_runfile_links +build --config=remote +import ../.bazelrc \ No newline at end of file diff --git a/devtools/package.json b/devtools/package.json index fe7b7576799..7b08591a448 100644 --- a/devtools/package.json +++ b/devtools/package.json @@ -10,17 +10,17 @@ "build:chrome": "bazel build projects/shell-chrome/src:prodapp", "build:chrome:watch": "ibazel build projects/shell-chrome/src:prodapp", "release": "node projects/shell-chrome/set-version.js && build:chrome", - "test": "bazel test ...", + "test": "bazelisk test ...", "lint": "tslint -p tsconfig.json -c tslint.json", "lint:fix": "tslint -p tsconfig.json -c tslint.json --fix", "e2e": "yarn cy:run", "cy:verify": "$(yarn bin)/cypress verify", "cy:version": "$(yarn bin)/cypress version", - "cy:run": "bazel test cypress:devtools_e2e", - "cy:open": "bazel run cypress:devtools_e2e", + "cy:run": "bazelisk test cypress:devtools_e2e", + "cy:open": "bazelisk run cypress:devtools_e2e", "cy:ci": "start-server-and-test start http-get://localhost:4200 cy:run", "cy:watch": "start-server-and-test start http-get://localhost:4200 cy:open", - "test:ci": "bazel test ...", + "test:ci": "bazelisk test -- //... -//cypress/...", "prettier": "prettier --write \"{,!(node_modules|dist|build|coverage)/**/}*.{js,jsx,ts,tsx,json}\"", "prettier:fix": "pretty-quick --staged" }, diff --git a/devtools/projects/shell-chrome/src/BUILD.bazel b/devtools/projects/shell-chrome/src/BUILD.bazel index f7caa3e1004..d3a31bdadd5 100644 --- a/devtools/projects/shell-chrome/src/BUILD.bazel +++ b/devtools/projects/shell-chrome/src/BUILD.bazel @@ -10,9 +10,218 @@ package(default_visibility = ["//visibility:public"]) sass_library( name = "material-theming", - srcs = ["@npm//:node_modules/@angular/material/_index.scss"], + srcs = [ + "@npm//:node_modules/@angular/material/tabs/_tabs-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/tree/_tree-variables.import.scss", + "@npm//:node_modules/@angular/material/tree/_tree-variables.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-legacy-index.scss", + "@npm//:node_modules/@angular/material/_index.scss", + "@npm//:node_modules/@angular/material/tooltip/_tooltip-theme.import.scss", + "@npm//:node_modules/@angular/material/tooltip/_tooltip-legacy-index.scss", + "@npm//:node_modules/@angular/material/tooltip/_tooltip-theme.scss", + "@npm//:node_modules/@angular/material/sidenav/_sidenav-theme.import.scss", + "@npm//:node_modules/@angular/material/sidenav/_sidenav-legacy-index.scss", + "@npm//:node_modules/@angular/material/sidenav/_sidenav-theme.scss", + "@npm//:node_modules/@angular/material/radio/_radio-theme.import.scss", + "@npm//:node_modules/@angular/material/radio/_radio-legacy-index.scss", + "@npm//:node_modules/@angular/material/radio/_radio-theme.scss", + "@npm//:node_modules/@angular/material/card/_card-legacy-index.scss", + "@npm//:node_modules/@angular/material/card/_card-theme.scss", + "@npm//:node_modules/@angular/material/card/_card-theme.import.scss", + "@npm//:node_modules/@angular/material/core/_core.import.scss", + "@npm//:node_modules/@angular/material/core/_core-theme.scss", + "@npm//:node_modules/@angular/material/core/_core-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/color/_color-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/color/_all-color.scss", + "@npm//:node_modules/@angular/material/core/color/_all-color.import.scss", + "@npm//:node_modules/@angular/material/core/density/private/_density-legacy-index.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/_all-density.import.scss", + "@npm//:node_modules/@angular/material/core/density/private/_all-density.scss", + "@npm//:node_modules/@angular/material/core/focus-indicators/_focus-indicators-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-theme.scss", + "@npm//:node_modules/@angular/material/core/focus-indicators/_focus-indicators.scss", + "@npm//:node_modules/@angular/material/core/ripple/_ripple.import.scss", + "@npm//:node_modules/@angular/material/core/ripple/_ripple-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/ripple/_ripple.scss", + "@npm//:node_modules/@angular/material/core/ripple/_ripple-theme.scss", + "@npm//:node_modules/@angular/material/core/style/_layout-common.scss", + "@npm//:node_modules/@angular/material/core/style/_private.import.scss", + "@npm//:node_modules/@angular/material/core/style/_layout-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_variables.scss", + "@npm//:node_modules/@angular/material/core/style/_style-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/style/_form-common.scss", + "@npm//:node_modules/@angular/material/core/style/_checkbox-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_menu-common.scss", + "@npm//:node_modules/@angular/material/core/style/_variables.import.scss", + "@npm//:node_modules/@angular/material/core/style/_vendor-prefixes.import.scss", + "@npm//:node_modules/@angular/material/core/style/_form-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_elevation.import.scss", + "@npm//:node_modules/@angular/material/core/style/_menu-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_checkbox-common.scss", + "@npm//:node_modules/@angular/material/core/style/_vendor-prefixes.scss", + "@npm//:node_modules/@angular/material/core/style/_list-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_button-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_elevation.scss", + "@npm//:node_modules/@angular/material/core/style/_button-common.scss", + "@npm//:node_modules/@angular/material/core/style/_private.scss", + "@npm//:node_modules/@angular/material/core/style/_list-common.scss", + "@npm//:node_modules/@angular/material/core/option/_option-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/option/_optgroup-theme.scss", + "@npm//:node_modules/@angular/material/core/option/_option-theme.import.scss", + "@npm//:node_modules/@angular/material/core/option/_optgroup-theme.import.scss", + "@npm//:node_modules/@angular/material/core/option/_option-theme.scss", + "@npm//:node_modules/@angular/material/core/theming/_palette.scss", + "@npm//:node_modules/@angular/material/core/theming/_theming-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/theming/_all-theme.import.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/_all-theme.scss", + "@npm//:node_modules/@angular/material/core/theming/_theming.scss", + "@npm//:node_modules/@angular/material/core/theming/_palette.import.scss", + "@npm//:node_modules/@angular/material/core/theming/_theming-deprecated.scss", + "@npm//:node_modules/@angular/material/core/_core.scss", + "@npm//:node_modules/@angular/material/core/typography/_typography-legacy-index.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-utils.scss", + "@npm//:node_modules/@angular/material/core/typography/_typography-utils.import.scss", + "@npm//:node_modules/@angular/material/core/typography/_all-typography.import.scss", + "@npm//:node_modules/@angular/material/core/typography/_typography.import.scss", + "@npm//:node_modules/@angular/material/core/typography/_typography-utils-deprecated.scss", + "@npm//:node_modules/@angular/material/core/typography/_all-typography.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/autocomplete/_autocomplete-legacy-index.scss", + "@npm//:node_modules/@angular/material/autocomplete/_autocomplete-theme.scss", + "@npm//:node_modules/@angular/material/autocomplete/_autocomplete-theme.import.scss", + "@npm//:node_modules/@angular/material/sort/_sort-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/chips/_chips-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/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/progress-bar/_progress-bar-theme.import.scss", + "@npm//:node_modules/@angular/material/progress-bar/_progress-bar-legacy-index.scss", + "@npm//:node_modules/@angular/material/progress-bar/_progress-bar-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/datepicker/_datepicker-theme.scss", + "@npm//:node_modules/@angular/material/datepicker/_datepicker-theme.import.scss", + "@npm//:node_modules/@angular/material/datepicker/_datepicker-legacy-index.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-theme.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-theme.import.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-legacy-index.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-variables.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-variables.import.scss", + "@npm//:node_modules/@angular/material/checkbox/_checkbox-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/slider/_slider-theme.import.scss", + "@npm//:node_modules/@angular/material/slider/_slider-legacy-index.scss", + "@npm//:node_modules/@angular/material/slider/_slider-theme.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-theme.import.scss", + "@npm//:node_modules/@angular/material/stepper/_stepper-variables.scss", + "@npm//:node_modules/@angular/material/stepper/_stepper-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/progress-spinner/_progress-spinner-legacy-index.scss", + "@npm//:node_modules/@angular/material/dialog/_dialog-theme.scss", + "@npm//:node_modules/@angular/material/dialog/_dialog-theme.import.scss", + "@npm//:node_modules/@angular/material/dialog/_dialog-legacy-index.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-outline-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-theme.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-fill-theme.import.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-theme.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-theme.import.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-legacy-theme.import.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-legacy-index.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-standard-theme.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-theme.import.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-variables.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-legacy-index.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-variables.import.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-theme.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-mixins.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-mixins.import.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-variables.import.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-theme.import.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-legacy-index.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-theme.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-variables.scss", + "@npm//:node_modules/@angular/material/button/_button-theme.scss", + "@npm//:node_modules/@angular/material/button/_button-base.import.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-base.scss", + "@npm//:node_modules/@angular/material/table/_table-flex-styles.scss", + "@npm//:node_modules/@angular/material/table/_table-theme.import.scss", + "@npm//:node_modules/@angular/material/table/_table-flex-styles.import.scss", + "@npm//:node_modules/@angular/material/table/_table-legacy-index.scss", + "@npm//:node_modules/@angular/material/table/_table-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/divider/_divider-offset.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-theme.import.scss", + "@npm//:node_modules/@angular/material/divider/_divider-theme.scss", + "@npm//:node_modules/@angular/material/menu/_menu-legacy-index.scss", + "@npm//:node_modules/@angular/material/menu/_menu-theme.scss", + "@npm//:node_modules/@angular/material/menu/_menu-theme.import.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/bottom-sheet/_bottom-sheet-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/select/_select-theme.import.scss", + "@npm//:node_modules/@angular/material/select/_select-legacy-index.scss", + "@npm//:node_modules/@angular/material/select/_select-theme.scss", + "@npm//:node_modules/@angular/material/_theming.scss", + "@npm//:node_modules/@angular/material/icon/_icon-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/snack-bar/_snack-bar-legacy-index.scss", + "@npm//:node_modules/@angular/material/snack-bar/_snack-bar-theme.scss", + "@npm//:node_modules/@angular/material/snack-bar/_snack-bar-theme.import.scss", + "@npm//:node_modules/@angular/material/paginator/_paginator-variables.import.scss", + "@npm//:node_modules/@angular/material/paginator/_paginator-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-variables.scss", + "@npm//:node_modules/@angular/material/badge/_badge-theme.import.scss", + "@npm//:node_modules/@angular/material/badge/_badge-legacy-index.scss", + "@npm//:node_modules/@angular/material/badge/_badge-theme.scss", + "@npm//:node_modules/@angular/cdk/_index.scss", + "@npm//:node_modules/@angular/cdk/a11y/_index.scss", + "@npm//:node_modules/@angular/cdk/a11y/_index.import.scss", + "@npm//:node_modules/@angular/cdk/text-field/_index.scss", + "@npm//:node_modules/@angular/cdk/text-field/_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/overlay/_index.import.scss", + ] ) - sass_binary( name = "shell-chrome-styles", src = "styles.scss", diff --git a/devtools/projects/shell-chrome/src/styles.scss b/devtools/projects/shell-chrome/src/styles.scss index a18f94f069d..c168b320181 100644 --- a/devtools/projects/shell-chrome/src/styles.scss +++ b/devtools/projects/shell-chrome/src/styles.scss @@ -1,4 +1,50 @@ -@use '../../../src/styles.scss'; +@use 'sass:map'; +@use 'external/npm/node_modules/@angular/material/index' as mat; +@include mat.core(); + +html, +body { + padding: 0; + margin: 0; +} + +// Light theme +$light-primary: mat.define-palette(mat.$grey-palette, 700, 200); +$light-accent: mat.define-palette(mat.$blue-palette, 800); +$light-theme: mat.define-light-theme($light-primary, $light-accent); + +// Dark theme +$dark-primary: mat.define-palette(mat.$blue-grey-palette, 50); +$dark-accent: mat.define-palette(mat.$blue-palette, 200); +$dark-theme: map.deep-merge( + mat.define-dark-theme($dark-primary, $dark-accent), + ( + 'color': ( + 'background': ( + background: #202124, + card: #202124, + ), + 'foreground': ( + text: #bcc5ce, + ), + ), + 'background': ( + background: #202124, + card: #202124, + ), + 'foreground': ( + 'text': #bcc5ce, + ), + ) +); + +.light-theme { + @include mat.all-component-themes($light-theme); +} + +.dark-theme { + @include mat.all-component-themes($dark-theme); +} html { background-color: white; diff --git a/devtools/src/BUILD.bazel b/devtools/src/BUILD.bazel index d58f1ee322f..1ad17676fbb 100644 --- a/devtools/src/BUILD.bazel +++ b/devtools/src/BUILD.bazel @@ -9,14 +9,224 @@ package(default_visibility = ["//visibility:public"]) sass_library( name = "material-theming", - srcs = ["@npm//:node_modules/@angular/material/_index.scss"], + srcs = [ + "@npm//:node_modules/@angular/material/tabs/_tabs-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/tree/_tree-variables.import.scss", + "@npm//:node_modules/@angular/material/tree/_tree-variables.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-legacy-index.scss", + "@npm//:node_modules/@angular/material/_index.scss", + "@npm//:node_modules/@angular/material/tooltip/_tooltip-theme.import.scss", + "@npm//:node_modules/@angular/material/tooltip/_tooltip-legacy-index.scss", + "@npm//:node_modules/@angular/material/tooltip/_tooltip-theme.scss", + "@npm//:node_modules/@angular/material/sidenav/_sidenav-theme.import.scss", + "@npm//:node_modules/@angular/material/sidenav/_sidenav-legacy-index.scss", + "@npm//:node_modules/@angular/material/sidenav/_sidenav-theme.scss", + "@npm//:node_modules/@angular/material/radio/_radio-theme.import.scss", + "@npm//:node_modules/@angular/material/radio/_radio-legacy-index.scss", + "@npm//:node_modules/@angular/material/radio/_radio-theme.scss", + "@npm//:node_modules/@angular/material/card/_card-legacy-index.scss", + "@npm//:node_modules/@angular/material/card/_card-theme.scss", + "@npm//:node_modules/@angular/material/card/_card-theme.import.scss", + "@npm//:node_modules/@angular/material/core/_core.import.scss", + "@npm//:node_modules/@angular/material/core/_core-theme.scss", + "@npm//:node_modules/@angular/material/core/_core-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/color/_color-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/color/_all-color.scss", + "@npm//:node_modules/@angular/material/core/color/_all-color.import.scss", + "@npm//:node_modules/@angular/material/core/density/private/_density-legacy-index.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/_all-density.import.scss", + "@npm//:node_modules/@angular/material/core/density/private/_all-density.scss", + "@npm//:node_modules/@angular/material/core/focus-indicators/_focus-indicators-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-theme.scss", + "@npm//:node_modules/@angular/material/core/focus-indicators/_focus-indicators.scss", + "@npm//:node_modules/@angular/material/core/ripple/_ripple.import.scss", + "@npm//:node_modules/@angular/material/core/ripple/_ripple-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/ripple/_ripple.scss", + "@npm//:node_modules/@angular/material/core/ripple/_ripple-theme.scss", + "@npm//:node_modules/@angular/material/core/style/_layout-common.scss", + "@npm//:node_modules/@angular/material/core/style/_private.import.scss", + "@npm//:node_modules/@angular/material/core/style/_layout-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_variables.scss", + "@npm//:node_modules/@angular/material/core/style/_style-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/style/_form-common.scss", + "@npm//:node_modules/@angular/material/core/style/_checkbox-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_menu-common.scss", + "@npm//:node_modules/@angular/material/core/style/_variables.import.scss", + "@npm//:node_modules/@angular/material/core/style/_vendor-prefixes.import.scss", + "@npm//:node_modules/@angular/material/core/style/_form-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_elevation.import.scss", + "@npm//:node_modules/@angular/material/core/style/_menu-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_checkbox-common.scss", + "@npm//:node_modules/@angular/material/core/style/_vendor-prefixes.scss", + "@npm//:node_modules/@angular/material/core/style/_list-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_button-common.import.scss", + "@npm//:node_modules/@angular/material/core/style/_elevation.scss", + "@npm//:node_modules/@angular/material/core/style/_button-common.scss", + "@npm//:node_modules/@angular/material/core/style/_private.scss", + "@npm//:node_modules/@angular/material/core/style/_list-common.scss", + "@npm//:node_modules/@angular/material/core/option/_option-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/option/_optgroup-theme.scss", + "@npm//:node_modules/@angular/material/core/option/_option-theme.import.scss", + "@npm//:node_modules/@angular/material/core/option/_optgroup-theme.import.scss", + "@npm//:node_modules/@angular/material/core/option/_option-theme.scss", + "@npm//:node_modules/@angular/material/core/theming/_palette.scss", + "@npm//:node_modules/@angular/material/core/theming/_theming-legacy-index.scss", + "@npm//:node_modules/@angular/material/core/theming/_all-theme.import.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/_all-theme.scss", + "@npm//:node_modules/@angular/material/core/theming/_theming.scss", + "@npm//:node_modules/@angular/material/core/theming/_palette.import.scss", + "@npm//:node_modules/@angular/material/core/theming/_theming-deprecated.scss", + "@npm//:node_modules/@angular/material/core/_core.scss", + "@npm//:node_modules/@angular/material/core/typography/_typography-legacy-index.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-utils.scss", + "@npm//:node_modules/@angular/material/core/typography/_typography-utils.import.scss", + "@npm//:node_modules/@angular/material/core/typography/_all-typography.import.scss", + "@npm//:node_modules/@angular/material/core/typography/_typography.import.scss", + "@npm//:node_modules/@angular/material/core/typography/_typography-utils-deprecated.scss", + "@npm//:node_modules/@angular/material/core/typography/_all-typography.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/autocomplete/_autocomplete-legacy-index.scss", + "@npm//:node_modules/@angular/material/autocomplete/_autocomplete-theme.scss", + "@npm//:node_modules/@angular/material/autocomplete/_autocomplete-theme.import.scss", + "@npm//:node_modules/@angular/material/sort/_sort-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/chips/_chips-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/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/progress-bar/_progress-bar-theme.import.scss", + "@npm//:node_modules/@angular/material/progress-bar/_progress-bar-legacy-index.scss", + "@npm//:node_modules/@angular/material/progress-bar/_progress-bar-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/datepicker/_datepicker-theme.scss", + "@npm//:node_modules/@angular/material/datepicker/_datepicker-theme.import.scss", + "@npm//:node_modules/@angular/material/datepicker/_datepicker-legacy-index.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-theme.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-theme.import.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-legacy-index.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-variables.scss", + "@npm//:node_modules/@angular/material/toolbar/_toolbar-variables.import.scss", + "@npm//:node_modules/@angular/material/checkbox/_checkbox-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/slider/_slider-theme.import.scss", + "@npm//:node_modules/@angular/material/slider/_slider-legacy-index.scss", + "@npm//:node_modules/@angular/material/slider/_slider-theme.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-theme.import.scss", + "@npm//:node_modules/@angular/material/stepper/_stepper-variables.scss", + "@npm//:node_modules/@angular/material/stepper/_stepper-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/progress-spinner/_progress-spinner-legacy-index.scss", + "@npm//:node_modules/@angular/material/dialog/_dialog-theme.scss", + "@npm//:node_modules/@angular/material/dialog/_dialog-theme.import.scss", + "@npm//:node_modules/@angular/material/dialog/_dialog-legacy-index.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-outline-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-theme.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-fill-theme.import.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-theme.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-theme.import.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-legacy-theme.import.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-legacy-index.scss", + "@npm//:node_modules/@angular/material/form-field/_form-field-standard-theme.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-theme.import.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-variables.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-legacy-index.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-variables.import.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-theme.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-mixins.scss", + "@npm//:node_modules/@angular/material/expansion/_expansion-mixins.import.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-variables.import.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-theme.import.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-legacy-index.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-theme.scss", + "@npm//:node_modules/@angular/material/button-toggle/_button-toggle-variables.scss", + "@npm//:node_modules/@angular/material/button/_button-theme.scss", + "@npm//:node_modules/@angular/material/button/_button-base.import.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-base.scss", + "@npm//:node_modules/@angular/material/table/_table-flex-styles.scss", + "@npm//:node_modules/@angular/material/table/_table-theme.import.scss", + "@npm//:node_modules/@angular/material/table/_table-flex-styles.import.scss", + "@npm//:node_modules/@angular/material/table/_table-legacy-index.scss", + "@npm//:node_modules/@angular/material/table/_table-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/divider/_divider-offset.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-theme.import.scss", + "@npm//:node_modules/@angular/material/divider/_divider-theme.scss", + "@npm//:node_modules/@angular/material/menu/_menu-legacy-index.scss", + "@npm//:node_modules/@angular/material/menu/_menu-theme.scss", + "@npm//:node_modules/@angular/material/menu/_menu-theme.import.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/bottom-sheet/_bottom-sheet-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/select/_select-theme.import.scss", + "@npm//:node_modules/@angular/material/select/_select-legacy-index.scss", + "@npm//:node_modules/@angular/material/select/_select-theme.scss", + "@npm//:node_modules/@angular/material/_theming.scss", + "@npm//:node_modules/@angular/material/icon/_icon-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/snack-bar/_snack-bar-legacy-index.scss", + "@npm//:node_modules/@angular/material/snack-bar/_snack-bar-theme.scss", + "@npm//:node_modules/@angular/material/snack-bar/_snack-bar-theme.import.scss", + "@npm//:node_modules/@angular/material/paginator/_paginator-variables.import.scss", + "@npm//:node_modules/@angular/material/paginator/_paginator-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-variables.scss", + "@npm//:node_modules/@angular/material/badge/_badge-theme.import.scss", + "@npm//:node_modules/@angular/material/badge/_badge-legacy-index.scss", + "@npm//:node_modules/@angular/material/badge/_badge-theme.scss", + "@npm//:node_modules/@angular/cdk/_index.scss", + "@npm//:node_modules/@angular/cdk/a11y/_index.scss", + "@npm//:node_modules/@angular/cdk/a11y/_index.import.scss", + "@npm//:node_modules/@angular/cdk/text-field/_index.scss", + "@npm//:node_modules/@angular/cdk/text-field/_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/overlay/_index.import.scss", + ], ) sass_binary( name = "demo-styles", src = "styles.scss", sourcemap = False, - deps = [":material-theming"], + deps = [":material-theming"] ) _ASSETS = [