From f1ae4d9552e523900a8a134bc4345135d7678a97 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 17 Jul 2020 11:30:50 -0700 Subject: [PATCH 1/4] test(mdc-button): add performance tests for mdc-button --- test/benchmarks/mdc/button/BUILD.bazel | 22 ++++++++++ test/benchmarks/mdc/button/app.module.ts | 43 +++++++++++++++++++ .../benchmarks/mdc/button/button.perf-spec.ts | 38 ++++++++++++++++ 3 files changed, 103 insertions(+) create mode 100644 test/benchmarks/mdc/button/BUILD.bazel create mode 100644 test/benchmarks/mdc/button/app.module.ts create mode 100644 test/benchmarks/mdc/button/button.perf-spec.ts diff --git a/test/benchmarks/mdc/button/BUILD.bazel b/test/benchmarks/mdc/button/BUILD.bazel new file mode 100644 index 000000000000..f277e483fe10 --- /dev/null +++ b/test/benchmarks/mdc/button/BUILD.bazel @@ -0,0 +1,22 @@ +load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark") + +# TODO(wagnermaciel): Update this target to provide indigo-pink in a way that doesn't require having to import it with +# stylesUrls inside the components once `component_benchmark` supports asset injection. + +component_benchmark( + name = "benchmark", + driver = ":button.perf-spec.ts", + driver_deps = [ + "@npm//@angular/dev-infra-private", + "@npm//protractor", + "@npm//@types/jasmine", + ], + ng_deps = [ + "@npm//@angular/core", + "@npm//@angular/platform-browser", + "//src/material-experimental/mdc-button", + ], + ng_srcs = [":app.module.ts"], + prefix = "", + styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"], +) diff --git a/test/benchmarks/mdc/button/app.module.ts b/test/benchmarks/mdc/button/app.module.ts new file mode 100644 index 000000000000..b60d5759f9f6 --- /dev/null +++ b/test/benchmarks/mdc/button/app.module.ts @@ -0,0 +1,43 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {Component, NgModule, ViewEncapsulation} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {MatButtonModule} from '@angular/material-experimental/mdc-button'; + +/** component: mdc-raised-button */ + +@Component({ + selector: 'app-root', + template: ` + + + + `, + encapsulation: ViewEncapsulation.None, + styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'], +}) +export class ButtonBenchmarkApp { + isChecked = false; + isVisible = false; + + show() { this.isVisible = true; } + hide() { this.isVisible = false; } +} + + +@NgModule({ + declarations: [ButtonBenchmarkApp], + imports: [ + BrowserModule, + MatButtonModule, + ], + providers: [], + bootstrap: [ButtonBenchmarkApp], +}) +export class AppModule {} diff --git a/test/benchmarks/mdc/button/button.perf-spec.ts b/test/benchmarks/mdc/button/button.perf-spec.ts new file mode 100644 index 000000000000..1030f68d2669 --- /dev/null +++ b/test/benchmarks/mdc/button/button.perf-spec.ts @@ -0,0 +1,38 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {$, browser} from 'protractor'; +import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities'; + +describe('button performance benchmarks', () => { + beforeAll(() => { + browser.rootEl = '#root'; + }); + + it('renders a basic raised button', async() => { + await runBenchmark({ + id: 'button-render', + url: '', + ignoreBrowserSynchronization: true, + params: [], + prepare: async () => await $('#hide').click(), + work: async () => await $('#show').click(), + }); + }); + + it('clicks a basic raised button', async() => { + await runBenchmark({ + id: 'button-click', + url: '', + ignoreBrowserSynchronization: true, + params: [], + setup: async () => await $('#show').click(), + work: async () => await $('.mat-raised-button').click(), + }); + }); +}); From f45cd2537a2cd64b9edb8bc53d367816b600ea2b Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 17 Jul 2020 11:35:13 -0700 Subject: [PATCH 2/4] fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink --- src/material-experimental/mdc-theming/BUILD.bazel | 1 + src/material-experimental/mdc-theming/_all-theme.scss | 1 + .../mdc-theming/prebuilt/indigo-pink.scss | 4 ++++ 3 files changed, 6 insertions(+) diff --git a/src/material-experimental/mdc-theming/BUILD.bazel b/src/material-experimental/mdc-theming/BUILD.bazel index 87ff3709bbf5..1ff00324e1ac 100644 --- a/src/material-experimental/mdc-theming/BUILD.bazel +++ b/src/material-experimental/mdc-theming/BUILD.bazel @@ -44,5 +44,6 @@ sass_binary( deps = [ ":all_themes", "//src/material-experimental/mdc-typography:all_typography", + "//src/material/core:theming_scss_lib", ], ) diff --git a/src/material-experimental/mdc-theming/_all-theme.scss b/src/material-experimental/mdc-theming/_all-theme.scss index 673c3b7f22d5..e8c1d2c1f7ec 100644 --- a/src/material-experimental/mdc-theming/_all-theme.scss +++ b/src/material-experimental/mdc-theming/_all-theme.scss @@ -12,6 +12,7 @@ @import '../mdc-progress-bar/progress-bar-theme'; @import '../mdc-input/input-theme'; @import '../mdc-form-field/form-field-theme'; +@import '../../material/core/core'; @import '../../material/core/theming/check-duplicate-styles'; @mixin angular-material-mdc-theme($theme-or-color-config) { diff --git a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss index 11d56a21ddd3..5501e3833592 100644 --- a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss +++ b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss @@ -1,6 +1,9 @@ @import '../all-theme'; @import '../../mdc-typography/all-typography'; +// Include non-theme styles for core. +@include mat-core(); + // Define a theme. $primary: mat-palette($mat-indigo); $accent: mat-palette($mat-pink, A200, A100, A400); @@ -10,3 +13,4 @@ $theme: mat-light-theme($primary, $accent); // Include all theme styles for the components. @include angular-material-mdc-theme($theme); @include angular-material-mdc-typography(); +@include mat-core-theme($theme); From 9e422bd59b2640db463c57da3cdee6fddfb4671c Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 28 Jul 2020 15:49:18 -0700 Subject: [PATCH 3/4] fixup! fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink --- src/material-experimental/mdc-theming/BUILD.bazel | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material-experimental/mdc-theming/BUILD.bazel b/src/material-experimental/mdc-theming/BUILD.bazel index 1ff00324e1ac..5a2c4d2293bd 100644 --- a/src/material-experimental/mdc-theming/BUILD.bazel +++ b/src/material-experimental/mdc-theming/BUILD.bazel @@ -32,6 +32,7 @@ sass_library( "//src/material-experimental/mdc-table:mdc_table_scss_lib", "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib", "//src/material/core:core_scss_lib", + "//src/material/core:theming_scss_lib", ], ) @@ -44,6 +45,5 @@ sass_binary( deps = [ ":all_themes", "//src/material-experimental/mdc-typography:all_typography", - "//src/material/core:theming_scss_lib", ], ) From 63f2747fca9255be10a718c379ab29223c5324cf Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 28 Jul 2020 16:02:59 -0700 Subject: [PATCH 4/4] fixup! test(mdc-button): add performance tests for mdc-button --- test/benchmarks/mdc/button/button.perf-spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/benchmarks/mdc/button/button.perf-spec.ts b/test/benchmarks/mdc/button/button.perf-spec.ts index 1030f68d2669..7321b9a7f495 100644 --- a/test/benchmarks/mdc/button/button.perf-spec.ts +++ b/test/benchmarks/mdc/button/button.perf-spec.ts @@ -32,7 +32,7 @@ describe('button performance benchmarks', () => { ignoreBrowserSynchronization: true, params: [], setup: async () => await $('#show').click(), - work: async () => await $('.mat-raised-button').click(), + work: async () => await $('.mat-mdc-raised-button').click(), }); }); });