refactor(benchmarks): simplify and clean up code

* Remove genrule to create styles.css
* Import indigo-pink.scss via CheckboxBenchmarkApp's styleUrls
* Set the view encapsulation of CheckboxBenchmarkApp to none so that the styles from indigo-pink.scss are applied to the whole page
* Remove some unused imports
* Add a comment to WORKSPACE to clarify what browser_repositories does
* Add a todo comment to WORKSPACE to remind myself to deduplicate the chromium browsers
* Change CheckboxBenchmarkApp's mat-checkbox so that indeterminate is a one-way binding
* Moved @angular/dev-infra and @angular/benchpress from deps to dev deps

Author: wagnermaciel

WORKSPACE

@@ -130,6 +130,11 @@ rbe_autoconfig(
     repository = "google/rbe-ubuntu16-04-webtest",
 )
 
+# Load pinned rules_webtesting browser versions for tests.
+#
+# todo(wagnermaciel): deduplicate browsers - this will load another version of chromium in the
+# repository. We probably want to use the chromium version loaded here (from dev-infra) as that
+# one has RBE improvements.
 load("@npm_angular_dev_infra_private//benchmark/browsers:browser_repositories.bzl", "browser_repositories")
 
 browser_repositories()

package.json

@@ -45,8 +45,6 @@
   },
   "version": "9.2.0-next.0",
   "dependencies": {
-    "@angular/benchpress": "^0.2.0",
-    "@angular/dev-infra": "file:../dev-infra",
     "@angular-devkit/build-optimizer": "^0.900.6",
     "@angular/animations": "^9.1.0-next.4",
     "@angular/common": "^9.1.0-next.4",
@@ -68,6 +66,8 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
+    "@angular/benchpress": "^0.2.0",
+    "@angular/dev-infra": "file:../dev-infra",
     "@angular-devkit/core": "^9.0.4",
     "@angular-devkit/schematics": "^9.0.4",
     "@angular/bazel": "^9.1.0-next.4",

test/benchmarks/material/checkbox/BUILD.bazel

@@ -1,12 +1,5 @@
 load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
 
-genrule(
-    name = "indigo-pink",
-    srcs = ["//src/material/core:theming/prebuilt/indigo-pink.css"],
-    outs = ["styles.css"],
-    cmd = "cp $< $@",
-)
-
 # todo(wagnermaciel): If assets are defined and no index.html is provided, throw error with clear error message.
 component_benchmark(
     name = "benchmark",
@@ -23,6 +16,6 @@ component_benchmark(
 				"//src/cdk/a11y",
     ],
 		ng_srcs = [":app.module.ts"],
-    styles = [":indigo-pink"],
+    styles = ["//src/material/prebuilt-themes:indigo-pink"],
     prefix = "",
 )

test/benchmarks/material/checkbox/app.module.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { A11yModule } from '@angular/cdk/a11y';
-import { Component, NgModule, ViewChild } from '@angular/core';
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
 /**
  * @title Checkbox benchmark component.
@@ -23,12 +23,13 @@ import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
     <ng-container *ngIf="isVisible">
       <mat-checkbox
         [checked]="isChecked"
-        [(indeterminate)]="isIndeterminate"
+        [indeterminate]="isIndeterminate"
         (change)="toggleIsChecked()"
         >Check me!</mat-checkbox>
     </ng-container>
   `,
-  styles: [],
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
 })
 export class CheckboxBenchmarkApp {
   isChecked = false;