feat(devtools): tone down obtrusive elements in the Injector Tree tab (angular#59499)

Some of the elements are a bit too large so they have been shrunken to fit in with the rest of the UI.

PR Close angular#59499

Author: hawkgs

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

@@ -1,7 +1,7 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -20,10 +20,10 @@ ng_module(
         "injector-tree.component.html",
     ],
     deps = [
-        ":injector_providers",
         ":injector_tree_fns",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:injector_tree_visualizer",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:resolution_path",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers",
         "//devtools/projects/ng-devtools/src/lib/vendor/angular-split",
         "//devtools/projects/protocol",
         "//packages/common",
@@ -35,21 +35,6 @@ ng_module(
     ],
 )
 
-ng_module(
-    name = "injector_providers",
-    srcs = [
-        "injector-providers.component.ts",
-    ],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:resolution_path",
-        "//devtools/projects/protocol",
-        "//packages/animations",
-        "//packages/common",
-        "//packages/core",
-        "@npm//@angular/material",
-    ],
-)
-
 karma_web_test_suite(
     name = "test",
     deps = [

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

@@ -0,0 +1,32 @@
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//devtools/tools:ng_module.bzl", "ng_module")
+
+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:material_sass_deps"],
+)
+
+ng_module(
+    name = "injector-providers",
+    srcs = [
+        "injector-providers.component.ts",
+    ],
+    angular_assets = [
+        "injector-providers.component.html",
+        ":injector_providers_component_styles",
+    ],
+    deps = [
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:resolution_path",
+        "//devtools/projects/protocol",
+        "//packages/animations",
+        "//packages/common",
+        "//packages/core",
+        "@npm//@angular/material",
+    ],
+)

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

@@ -0,0 +1,65 @@
+<h2 class="providers-title">Providers for {{ injector()?.name }}</h2>
+@if (injector()) {
+  <div class="injector-providers">
+    <div class="filter">
+      <mat-form-field appearance="outline">
+        <mat-label>Search by token</mat-label>
+        <input
+          type="text"
+          matInput
+          placeholder="Provider token"
+          (input)="searchToken.set($event.target.value)"
+          [value]="searchToken()"
+        />
+        <mat-icon matSuffix (click)="searchToken.set('')">close</mat-icon>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Search by type</mat-label>
+        <mat-select [value]="searchType()" (selectionChange)="searchType.set($event.value)">
+          <mat-option>None</mat-option>
+          @for (type of providerTypes; track type) {
+            <mat-option [value]="type">{{ $any(providerTypeToLabel)[type] }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    @if (visibleProviders().length > 0) {
+      <table mat-table [dataSource]="visibleProviders()" class="mat-elevation-z4">
+        <ng-container matColumnDef="token">
+          <th mat-header-cell *matHeaderCellDef><h3 class="column-title">Token</h3></th>
+          <td mat-cell *matCellDef="let provider">{{ provider.token }}</td>
+        </ng-container>
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef><h3 class="column-title">Type</h3></th>
+          <td mat-cell *matCellDef="let provider">
+            @if (provider.type === 'multi') {
+              multi (x{{ provider.index.length }})
+            } @else {
+              {{ $any(providerTypeToLabel)[provider.type] }}
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="isViewProvider">
+          <th mat-header-cell *matHeaderCellDef><h3 class="column-title">Is View Provider</h3></th>
+          <td mat-cell *matCellDef="let provider">
+            <mat-icon>{{ provider.isViewProvider ? 'check_circle' : 'cancel' }}</mat-icon>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="log">
+          <th mat-header-cell *matHeaderCellDef><h3 class="column-title"></h3></th>
+          <td mat-cell *matCellDef="let provider">
+            <mat-icon
+              matTooltipPosition="left"
+              matTooltip="Log provider in console"
+              class="select"
+              (click)="select(provider)"
+              >send</mat-icon
+            >
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+    }
+  </div>
+}