refactor(devtools): property-tab folder structure (#63759)

Re-organize components and use separate BUILD files.

PR Close #63759

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel

@@ -1,53 +1,28 @@
 load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
 
-package(default_visibility = ["//visibility:public"])
+package(default_visibility = ["//devtools:__subpackages__"])
 
-_STYLE_SRCS = [
-    "component-metadata.component.scss",
-    "property-tab.component.scss",
-    "property-tab-header.component.scss",
-]
-
-_STYLE_LABELS = [
-    src[:-len(".component.scss")].replace("-", "_") + "_styles"
-    for src in _STYLE_SRCS
-]
-
-[
-    sass_binary(
-        name = label,
-        src = src,
-        deps = [
-            "//devtools/projects/ng-devtools/src/styles:typography",
-        ],
-    )
-    for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
-]
+sass_binary(
+    name = "property-tab_styles",
+    src = "property-tab.component.scss",
+)
 
 ng_project(
     name = "property-tab",
     srcs = [
-        "component-metadata.component.ts",
         "property-tab.component.ts",
-        "property-tab-header.component.ts",
     ],
     angular_assets = [
         "property-tab.component.html",
-        "property-tab-header.component.html",
-        "component-metadata.component.html",
-    ] + _STYLE_LABELS,
+        ":property-tab_styles",
+    ],
     deps = [
-        "//:node_modules/@angular/common",
         "//:node_modules/@angular/core",
-        "//:node_modules/@angular/material",
-        "//:node_modules/rxjs",
-        "//devtools/projects/ng-devtools/src/lib/application-services:settings",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view",
-        "//devtools/projects/ng-devtools/src/lib/shared/button",
-        "//devtools/projects/ng-devtools/src/lib/shared/docs-ref-button",
         "//devtools/projects/protocol",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/BUILD.bazel

@@ -0,0 +1,30 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+    name = "property-tab-header_styles",
+    src = "property-tab-header.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "property-tab-header",
+    srcs = [
+        "property-tab-header.component.ts",
+    ],
+    angular_assets = [
+        "property-tab-header.component.html",
+        ":property-tab-header_styles",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/application-services:settings",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata",
+        "//devtools/projects/ng-devtools/src/lib/shared/button",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/BUILD.bazel

@@ -0,0 +1,28 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+    name = "component-metadata_styles",
+    src = "component-metadata.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "component-metadata",
+    srcs = [
+        "component-metadata.component.ts",
+    ],
+    angular_assets = [
+        "component-metadata.component.html",
+        ":component-metadata_styles",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
+        "//devtools/projects/ng-devtools/src/lib/shared/docs-ref-button",
+        "//devtools/projects/protocol",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../styles/typography';
+@use '../../../../../../styles/typography';
 
 :host {
   display: block;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.ts

@@ -19,10 +19,10 @@ import {
   AngularDirectiveMetadata,
   AcxDirectiveMetadata,
   ComponentType,
-} from '../../../../../../protocol';
+} from '../../../../../../../../protocol';
 
-import {ElementPropertyResolver} from '../property-resolver/element-property-resolver';
-import {DocsRefButtonComponent} from '../../../shared/docs-ref-button/docs-ref-button.component';
+import {ElementPropertyResolver} from '../../../property-resolver/element-property-resolver';
+import {DocsRefButtonComponent} from '../../../../../shared/docs-ref-button/docs-ref-button.component';
 
 @Component({
   selector: 'ng-component-metadata',

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../styles/typography';
+@use '../../../../../styles/typography';
 
 :host {
   border-bottom: 1px solid var(--color-separator);

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.ts

@@ -10,10 +10,10 @@ import {ChangeDetectionStrategy, Component, input, output, signal, inject} from
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatIcon} from '@angular/material/icon';
 
-import {IndexedNode} from '../directive-forest/index-forest';
-import {ComponentMetadataComponent} from './component-metadata.component';
-import {ButtonComponent} from '../../../shared/button/button.component';
-import {Settings} from '../../../application-services/settings';
+import {IndexedNode} from '../../directive-forest/index-forest';
+import {ComponentMetadataComponent} from './component-metadata/component-metadata.component';
+import {ButtonComponent} from '../../../../shared/button/button.component';
+import {Settings} from '../../../../application-services/settings';
 
 @Component({
   templateUrl: './property-tab-header.component.html',

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html

@@ -5,12 +5,17 @@
     [currentSelectedElement]="currentSelectedElement"
     (showSignalGraph)="showSignalGraph.emit(null)"
   />
-  <ng-property-tab-body
-    (inspect)="inspect.emit($event)"
-    (viewSource)="viewSource.emit($event)"
-    (showSignalGraph)="showSignalGraph.emit($event)"
-    [currentSelectedElement]="currentSelectedElement"
-  />
+
+  <div class="explorer-panel">
+    @for (directive of currentDirectives(); track $index) {
+      <ng-property-view
+        (inspect)="inspect.emit($event)"
+        (viewSource)="viewSource.emit(directive.name)"
+        (showSignalGraph)="showSignalGraph.emit($event)"
+        [directive]="directive"
+      />
+    }
+  </div>
 
   @let hydration = currentSelectedElement.hydration;
   @if (hydration && hydration.status === 'dehydrated') {

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.scss

@@ -1,3 +1,11 @@
 .dehydrated-component {
-  padding: 12px;
+  padding: 0.75rem;
+}
+
+/* FRAGILE */
+::ng-deep {
+  .mat-expansion-panel {
+    border-bottom: 1px solid var(--color-separator);
+    box-shadow: none !important;
+  }
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts

@@ -6,20 +6,20 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core';
 import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../protocol';
 
 import {IndexedNode} from '../directive-forest/index-forest';
 import {FlatNode} from '../property-resolver/element-property-resolver';
-import {PropertyTabBodyComponent} from './property-view/property-tab-body.component';
-import {PropertyTabHeaderComponent} from './property-tab-header.component';
+import {PropertyTabHeaderComponent} from './property-tab-header/property-tab-header.component';
 import {DeferViewComponent} from './defer-view/defer-view.component';
+import {PropertyViewComponent} from './property-view/property-view.component';
 
 @Component({
   selector: 'ng-property-tab',
   templateUrl: './property-tab.component.html',
   styleUrls: ['./property-tab.component.scss'],
-  imports: [PropertyTabHeaderComponent, PropertyTabBodyComponent, DeferViewComponent],
+  imports: [PropertyTabHeaderComponent, PropertyViewComponent, DeferViewComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PropertyTabComponent {
@@ -28,4 +28,16 @@ export class PropertyTabComponent {
   readonly viewSource = output<string>();
   readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
   readonly showSignalGraph = output<DebugSignalGraphNode | null>();
+
+  readonly currentDirectives = computed(() => {
+    const selected = this.currentSelectedElement();
+    if (!selected) {
+      return;
+    }
+    const directives = [...selected.directives];
+    if (selected.component) {
+      directives.push(selected.component);
+    }
+    return directives;
+  });
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel

@@ -1,72 +1,26 @@
 load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
 
-package(default_visibility = ["//visibility:public"])
+package(default_visibility = ["//devtools:__subpackages__"])
 
-_STYLE_SRCS = [
-    "property-editor.component.scss",
-    "property-preview.component.scss",
-    "property-tab-body.component.scss",
-    "property-view.component.scss",
-    "property-view-body.component.scss",
-    "property-view-header.component.scss",
-    "property-view-tree.component.scss",
-    "dependency-viewer.component.scss",
-]
-
-_STYLE_LABELS = [
-    src[:-len(".component.scss")].replace("-", "_") + "_styles"
-    for src in _STYLE_SRCS
-]
-
-[
-    sass_binary(
-        name = label,
-        src = src,
-        deps = [
-            "//devtools/projects/ng-devtools/src/styles:typography",
-        ],
-    )
-    for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
-]
+sass_binary(
+    name = "property-view_styles",
+    src = "property-view.component.scss",
+)
 
 ng_project(
     name = "property-view",
     srcs = [
-        "dependency-viewer.component.ts",
-        "property-editor.component.ts",
-        "property-preview.component.ts",
-        "property-tab-body.component.ts",
         "property-view.component.ts",
-        "property-view-body.component.ts",
-        "property-view-header.component.ts",
-        "property-view-tree.component.ts",
     ],
     angular_assets = [
         "property-view.component.html",
-        "property-view-tree.component.html",
-        "property-view-header.component.html",
-        "property-view-body.component.html",
-        "property-preview.component.html",
-        "property-editor.component.html",
-        "property-tab-body.component.html",
-        "dependency-viewer.component.html",
-    ] + _STYLE_LABELS,
+        ":property-view_styles",
+    ],
     deps = [
-        "//:node_modules/@angular/cdk",
-        "//:node_modules/@angular/common",
         "//:node_modules/@angular/core",
-        "//:node_modules/@angular/forms",
-        "//:node_modules/@angular/material",
-        "//:node_modules/rxjs",
-        "//devtools/projects/ng-devtools/src/lib/application-environment",
-        "//devtools/projects/ng-devtools/src/lib/application-providers:supported_apis",
-        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
-        "//devtools/projects/ng-devtools/src/lib/application-services:settings",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/resolution-path",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph:signal-graph-manager",
-        "//devtools/projects/ng-devtools/src/lib/shared/docs-ref-button",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header",
         "//devtools/projects/protocol",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html

@@ -1,10 +0,0 @@
-@for (directive of currentDirectives(); track $index) {
-  <div class="explorer-panel">
-    <ng-property-view
-      (inspect)="inspect.emit($event)"
-      (viewSource)="viewSource.emit(directive.name)"
-      (showSignalGraph)="showSignalGraph.emit($event)"
-      [directive]="directive"
-    />
-  </div>
-}

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.scss

@@ -1,6 +0,0 @@
-::ng-deep {
-  .mat-expansion-panel {
-    border-bottom: 1px solid var(--color-separator);
-    box-shadow: none !important;
-  }
-}

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts

@@ -1,41 +0,0 @@
-/**
- * @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.dev/license
- */
-
-import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core';
-import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../../protocol';
-
-import {IndexedNode} from '../../directive-forest/index-forest';
-import {FlatNode} from '../../property-resolver/element-property-resolver';
-import {PropertyViewComponent} from './property-view.component';
-
-@Component({
-  templateUrl: './property-tab-body.component.html',
-  selector: 'ng-property-tab-body',
-  styleUrls: ['./property-tab-body.component.scss'],
-  imports: [PropertyViewComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PropertyTabBodyComponent {
-  readonly currentSelectedElement = input.required<IndexedNode>();
-
-  readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
-  readonly viewSource = output<string>();
-  readonly showSignalGraph = output<DebugSignalGraphNode>();
-
-  readonly currentDirectives = computed(() => {
-    const selected = this.currentSelectedElement();
-    if (!selected) {
-      return;
-    }
-    const directives = [...selected.directives];
-    if (selected.component) {
-      directives.push(selected.component);
-    }
-    return directives;
-  });
-}

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/BUILD.bazel

@@ -0,0 +1,32 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+    name = "property-view-body_styles",
+    src = "property-view-body.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "property-view-body",
+    srcs = [
+        "property-view-body.component.ts",
+    ],
+    angular_assets = [
+        "property-view-body.component.html",
+        ":property-view-body_styles",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree",
+        "//devtools/projects/ng-devtools/src/lib/shared/docs-ref-button",
+        "//devtools/projects/protocol",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/BUILD.bazel

@@ -0,0 +1,28 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+    name = "dependency-viewer_styles",
+    src = "dependency-viewer.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "dependency-viewer",
+    srcs = [
+        "dependency-viewer.component.ts",
+    ],
+    angular_assets = [
+        "dependency-viewer.component.html",
+        ":dependency-viewer_styles",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path",
+        "//devtools/projects/protocol",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.scss

@@ -1,6 +1,8 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../../styles/typography';
 
 :host {
+  display: block;
+
   .dep-data {
     display: flex;
     flex-wrap: nowrap;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/dependency-viewer.component.ts

@@ -7,7 +7,7 @@
  */
 
 import {ChangeDetectionStrategy, Component, input} from '@angular/core';
-import {SerializedInjectedService} from '../../../../../../../protocol';
+import {SerializedInjectedService} from '../../../../../../../../../protocol';
 import {ResolutionPathComponent} from './resolution-path/resolution-path.component';
 import {MatTooltip} from '@angular/material/tooltip';
 import {MatExpansionModule} from '@angular/material/expansion';

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../../styles/typography';
+@use '../../../../../../../../styles/typography';
 
 :host {
   display: flex;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.spec.ts

@@ -10,7 +10,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
 import {NODE_TYPE_CLASS_MAP, ResolutionPathComponent} from './resolution-path.component';
-import {SerializedInjector} from '../../../../../../../../protocol';
+import {SerializedInjector} from '../../../../../../../../../../protocol';
 
 describe('ResolutionPath', () => {
   let component: ResolutionPathComponent;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.ts

@@ -7,7 +7,7 @@
  */
 
 import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
-import {SerializedInjector} from '../../../../../../../../protocol';
+import {SerializedInjector} from '../../../../../../../../../../protocol';
 
 export const NODE_TYPE_CLASS_MAP: {[key in SerializedInjector['type']]: string} = {
   'element': 'type-element',

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.html

@@ -10,7 +10,11 @@
               <ng-docs-ref-button docs="dependency-injection" />
             </mat-panel-title>
           </mat-expansion-panel-header>
-          <ng-injected-services [controller]="controller()" />
+          <div class="services">
+            @for (dependency of dependencies(); track dependency.position[0]) {
+              <ng-dependency-viewer [dependency]="dependency" />
+            }
+          </div>
         </mat-expansion-panel>
       </div>
     }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.scss

@@ -1,10 +1,17 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../styles/typography';
 
 :host {
   ng-docs-ref-button {
     margin-left: 0.125rem;
   }
 
+  .services {
+    margin: 0.5rem;
+    border-radius: 0.375rem;
+    background: color-mix(in srgb, var(--senary-contrast) 50%, var(--color-background) 50%);
+    overflow: hidden;
+  }
+
   /* FRAGILE */
   ::ng-deep {
     mat-expansion-panel {

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts

@@ -12,26 +12,21 @@ import {
   Component,
   ɵFramework as Framework,
   computed,
-  forwardRef,
   input,
   output,
   signal,
 } from '@angular/core';
-import {
-  DebugSignalGraphNode,
-  DirectivePosition,
-  SerializedInjectedService,
-} from '../../../../../../../protocol';
+import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../../../protocol';
 
 import {
   DirectivePropertyResolver,
   DirectiveTreeData,
-} from '../../property-resolver/directive-property-resolver';
-import {FlatNode} from '../../property-resolver/element-property-resolver';
-import {PropertyViewTreeComponent} from './property-view-tree.component';
+} from '../../../property-resolver/directive-property-resolver';
+import {FlatNode} from '../../../property-resolver/element-property-resolver';
+import {PropertyViewTreeComponent} from './property-view-tree/property-view-tree.component';
 import {MatExpansionModule} from '@angular/material/expansion';
-import {DependencyViewerComponent} from './dependency-viewer.component';
-import {DocsRefButtonComponent} from '../../../../shared/docs-ref-button/docs-ref-button.component';
+import {DependencyViewerComponent} from './dependency-viewer/dependency-viewer.component';
+import {DocsRefButtonComponent} from '../../../../../shared/docs-ref-button/docs-ref-button.component';
 
 @Component({
   selector: 'ng-property-view-body',
@@ -40,10 +35,10 @@ import {DocsRefButtonComponent} from '../../../../shared/docs-ref-button/docs-re
   imports: [
     MatExpansionModule,
     CdkDropList,
-    forwardRef(() => InjectedServicesComponent),
     CdkDrag,
     PropertyViewTreeComponent,
     DocsRefButtonComponent,
+    DependencyViewerComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -109,46 +104,3 @@ export class PropertyViewBodyComponent {
     });
   }
 }
-
-@Component({
-  selector: 'ng-injected-services',
-  template: `
-    <div class="services">
-      @for (dependency of dependencies(); track dependency.position[0]) {
-        <ng-dependency-viewer [dependency]="dependency" />
-      }
-    </div>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        padding: 0.5rem;
-
-        .services {
-          border-radius: 0.375rem;
-          background: color-mix(in srgb, var(--senary-contrast) 50%, var(--color-background) 50%);
-          overflow: hidden;
-
-          .wrapper {
-            ng-dependency-viewer {
-              display: block;
-            }
-          }
-        }
-    `,
-  ],
-  imports: [DependencyViewerComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class InjectedServicesComponent {
-  readonly controller = input.required<DirectivePropertyResolver>();
-
-  readonly dependencies = computed<SerializedInjectedService[]>(() => {
-    const metadata = this.controller().directiveMetadata;
-    if (!metadata) return [];
-    if (!('dependencies' in metadata)) return [];
-
-    return metadata.dependencies ?? [];
-  });
-}

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/BUILD.bazel

@@ -0,0 +1,35 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+    name = "property-view-tree_styles",
+    src = "property-view-tree.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "property-view-tree",
+    srcs = [
+        "property-view-tree.component.ts",
+    ],
+    angular_assets = [
+        "property-view-tree.component.html",
+        ":property-view-tree_styles",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/common",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/application-providers:supported_apis",
+        "//devtools/projects/ng-devtools/src/lib/application-services:settings",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph:signal-graph-manager",
+        "//devtools/projects/protocol",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/BUILD.bazel

@@ -0,0 +1,27 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+    name = "property-editor_styles",
+    src = "property-editor.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "property-editor",
+    srcs = [
+        "property-editor.component.ts",
+    ],
+    angular_assets = [
+        "property-editor.component.html",
+        ":property-editor_styles",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/forms",
+        "//devtools/projects/protocol",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../../../styles/typography';
 
 .editor {
   cursor: text;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.ts

@@ -18,7 +18,7 @@ import {
   ChangeDetectionStrategy,
 } from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {ContainerType} from '../../../../../../../protocol';
+import {ContainerType} from '../../../../../../../../../../protocol';
 
 type EditorType = string | number | boolean;
 type EditorResult = EditorType | Array<EditorType>;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/BUILD.bazel

@@ -0,0 +1,27 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+    name = "property-preview_styles",
+    src = "property-preview.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "property-preview",
+    srcs = [
+        "property-preview.component.ts",
+    ],
+    angular_assets = [
+        "property-preview.component.html",
+        ":property-preview_styles",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
+        "//devtools/projects/protocol",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-preview/property-preview.component.ts

@@ -7,9 +7,9 @@
  */
 
 import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core';
-import {PropType} from '../../../../../../../protocol';
+import {PropType} from '../../../../../../../../../../protocol';
 
-import {FlatNode} from '../../property-resolver/element-property-resolver';
+import {FlatNode} from '../../../../../property-resolver/element-property-resolver';
 
 @Component({
   selector: 'ng-property-preview',

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../../styles/typography';
 
 :host {
   width: 100%;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-tree/property-view-tree.component.ts

@@ -6,21 +6,21 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, input, output} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MatTooltip} from '@angular/material/tooltip';
 import {MatIcon} from '@angular/material/icon';
 import {FlatTreeControl} from '@angular/cdk/tree';
 
-import {FlatNode} from '../../property-resolver/element-property-resolver';
-import {PropertyDataSource} from '../../property-resolver/property-data-source';
-import {PropertyEditorComponent} from './property-editor.component';
-import {PropertyPreviewComponent} from './property-preview.component';
+import {FlatNode} from '../../../../property-resolver/element-property-resolver';
+import {PropertyDataSource} from '../../../../property-resolver/property-data-source';
+import {PropertyEditorComponent} from './property-editor/property-editor.component';
+import {PropertyPreviewComponent} from './property-preview/property-preview.component';
 import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular/material/tree';
-import {SUPPORTED_APIS} from '../../../../application-providers/supported_apis';
-import {SignalGraphManager} from '../../signal-graph/signal-graph-manager';
-import {DebugSignalGraphNode} from '../../../../../../../protocol';
-import {Settings} from '../../../../application-services/settings';
+import {SUPPORTED_APIS} from '../../../../../../application-providers/supported_apis';
+import {SignalGraphManager} from '../../../../signal-graph/signal-graph-manager';
+import {DebugSignalGraphNode} from '../../../../../../../../../protocol';
+import {Settings} from '../../../../../../application-services/settings';
 
 @Component({
   selector: 'ng-property-view-tree',

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/BUILD.bazel

@@ -0,0 +1,28 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+    name = "property-view-header_styles",
+    src = "property-view-header.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "property-view-header",
+    srcs = [
+        "property-view-header.component.ts",
+    ],
+    angular_assets = [
+        "property-view-header.component.html",
+        ":property-view-header_styles",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../styles/typography';
+@use '../../../../../../styles/typography';
 
 mat-toolbar {
   @extend %body-medium-01;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header/property-view-header.component.ts

@@ -11,7 +11,7 @@ import {MatIcon} from '@angular/material/icon';
 import {MatTooltip} from '@angular/material/tooltip';
 import {MatToolbar} from '@angular/material/toolbar';
 import {Platform} from '@angular/cdk/platform';
-import {FrameManager} from '../../../../application-services/frame_manager';
+import {FrameManager} from '../../../../../application-services/frame_manager';
 
 @Component({
   selector: 'ng-property-view-header',

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts

@@ -10,8 +10,8 @@ import {ChangeDetectionStrategy, Component, computed, inject, input, output} fro
 import {DebugSignalGraphNode, DirectivePosition} from '../../../../../../../protocol';
 
 import {ElementPropertyResolver, FlatNode} from '../../property-resolver/element-property-resolver';
-import {PropertyViewBodyComponent} from './property-view-body.component';
-import {PropertyViewHeaderComponent} from './property-view-header.component';
+import {PropertyViewBodyComponent} from './property-view-body/property-view-body.component';
+import {PropertyViewHeaderComponent} from './property-view-header/property-view-header.component';
 
 @Component({
   selector: 'ng-property-view',