refactor(devtools): reduce material form field density globally (angular#60633)

Make the form field density consistent across the app.

PR Close angular#60633

Author: hawkgs

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/BUILD.bazel

@@ -6,12 +6,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "injector_providers_component_styles",
     src = "injector-providers.component.scss",
-    include_paths = [
-        "external/npm/node_modules",
-    ],
-    deps = [
-        "//devtools/projects/ng-devtools/src/styles:material_sass_deps",
-    ],
 )
 
 ng_module(

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss

@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
 h2 {
   font-size: 0.875rem;
 }
@@ -18,29 +16,13 @@ h2 {
   gap: 0.5rem;
 
   mat-form-field {
-    @include mat.form-field-density(-5);
-    @include mat.form-field-overrides(
-      (
-        container-text-size: 0.8rem,
-        outlined-label-text-size: 0.8rem,
-      )
-    );
-
     &.token-search {
       flex: 1;
     }
 
     &.type-filter {
       width: 10rem;
     }
-
-    mat-select {
-      @include mat.select-overrides(
-        (
-          trigger-text-size: 0.8rem,
-        )
-      );
-    }
   }
 }
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.html

@@ -1,6 +1,6 @@
 <div class="controls">
   <div class="visual-controls">
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Filter</mat-label>
       <input
         matInput
@@ -9,7 +9,7 @@
         placeholder="duration: >30 source: click"
       />
     </mat-form-field>
-    <mat-form-field [class.hidden]="!record()">
+    <mat-form-field [class.hidden]="!record()" appearance="outline">
       <mat-select
         [value]="visualizationMode()"
         (selectionChange)="visualizationMode.set($event.value)"

devtools/projects/ng-devtools/src/styles/_global.scss

@@ -80,3 +80,21 @@ ng-devtools {
 .mat-mdc-menu-content {
   padding: 0 !important;
 }
+
+mat-form-field {
+  @include mat.form-field-density(-5);
+  @include mat.form-field-overrides(
+    (
+      container-text-size: 0.8rem,
+      outlined-label-text-size: 0.8rem,
+    )
+  );
+
+  mat-select {
+    @include mat.select-overrides(
+      (
+        trigger-text-size: 0.8rem,
+      )
+    );
+  }
+}