From aff8bb222c108c336b1f5edae50e2c40dfd53790 Mon Sep 17 00:00:00 2001 From: Avcharov Hryhorii Date: Mon, 25 Aug 2025 18:30:52 +0200 Subject: [PATCH] refactor(devtools): provide signalGraphEnabled via settings service (#63374) signalGraphEnabled was previously passed down the component tree. This change refactors the logic to use the settings service instead, which already holds the value and allows sharing it across components. PR Close #63374 --- .../src/lib/application-providers/settings_provider.ts | 2 +- .../src/lib/devtools-tabs/devtools-tabs.component.html | 1 - .../directive-explorer/directive-explorer.component.html | 1 - .../directive-explorer/directive-explorer.component.ts | 2 -- .../property-tab/property-tab-header.component.ts | 8 ++++++-- .../property-tab/property-tab.component.html | 2 -- .../property-tab/property-tab.component.ts | 1 - .../property-tab/property-view/BUILD.bazel | 1 + .../property-view/property-tab-body.component.html | 1 - .../property-view/property-tab-body.component.ts | 1 - .../property-view/property-view-body.component.html | 1 - .../property-view/property-view-body.component.ts | 1 - .../property-view/property-view-tree.component.ts | 5 ++++- .../property-view/property-view.component.html | 1 - .../property-tab/property-view/property-view.component.ts | 1 - 15 files changed, 12 insertions(+), 17 deletions(-) diff --git a/devtools/projects/ng-devtools/src/lib/application-providers/settings_provider.ts b/devtools/projects/ng-devtools/src/lib/application-providers/settings_provider.ts index f54dc694f4a..1445a886e46 100644 --- a/devtools/projects/ng-devtools/src/lib/application-providers/settings_provider.ts +++ b/devtools/projects/ng-devtools/src/lib/application-providers/settings_provider.ts @@ -36,7 +36,7 @@ export function provideSettings(): (Provider | EnvironmentProviders)[] { } /** - * Migrrates the provided data to the latest data format, if needed. + * Migrates the provided data to the latest data format, if needed. * Returns a new object with the migrated data. * * @param data Non-migrated data diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html index 9e7e54132b6..bd62ef75487 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html @@ -67,7 +67,6 @@ [showCommentNodes]="showCommentNodes()" [isHydrationEnabled]="isHydrationEnabled()" (toggleInspector)="toggleInspector()" - [signalGraphEnabled]="signalGraphEnabled()" /> @let profilerVisible = activeTab() === 'Profiler'; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html index a9e2bdb3dbb..1a0d2a46b0a 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html @@ -43,7 +43,6 @@ @if (currentSelectedElement(); as currentSelectedElement) { (); - readonly currentSelectedElement = signal(null); readonly forest = signal([]); readonly splitDirection = signal<'horizontal' | 'vertical'>('horizontal'); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts index 78b1082fed8..e62575561f8 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts @@ -6,13 +6,14 @@ * found in the LICENSE file at https://angular.dev/license */ -import {ChangeDetectionStrategy, Component, input, output, signal} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, output, signal, inject} from '@angular/core'; 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'; @Component({ templateUrl: './property-tab-header.component.html', @@ -22,9 +23,12 @@ import {ButtonComponent} from '../../../shared/button/button.component'; imports: [MatExpansionModule, MatIcon, ComponentMetadataComponent, ButtonComponent], }) export class PropertyTabHeaderComponent { + private readonly settings = inject(Settings); + protected readonly currentSelectedElement = input.required(); - protected readonly signalGraphEnabled = input.required(); protected readonly showSignalGraph = output(); protected readonly expanded = signal(false); + + protected readonly signalGraphEnabled = this.settings.signalGraphEnabled; } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html index be039b86e65..0f0a25ee626 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html @@ -3,7 +3,6 @@ @if (currentSelectedElement) { @let hydration = currentSelectedElement.hydration; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts index fa4f7c7ffc7..911f08e5c2a 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts @@ -24,7 +24,6 @@ import {DeferViewComponent} from './defer-view/defer-view.component'; }) export class PropertyTabComponent { readonly currentSelectedElement = input.required(); - readonly signalGraphEnabled = input.required(); readonly viewSource = output(); readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel index 00deb7ffa32..25184bc3a1a 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel @@ -61,6 +61,7 @@ ng_project( "//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", diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html index 58a6ee86ef5..3ab3efd95b0 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html @@ -5,7 +5,6 @@ (viewSource)="viewSource.emit(directive.name)" (showSignalGraph)="showSignalGraph.emit($event)" [directive]="directive" - [signalGraphEnabled]="signalGraphEnabled()" /> } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts index 445dc89f957..277622179fe 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts @@ -22,7 +22,6 @@ import {PropertyViewComponent} from './property-view.component'; }) export class PropertyTabBodyComponent { readonly currentSelectedElement = input.required(); - readonly signalGraphEnabled = input.required(); readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>(); readonly viewSource = output(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html index 16e9487e8a6..769921c1bd6 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html @@ -24,7 +24,6 @@ (); readonly directiveOutputControls = input.required(); readonly directiveStateControls = input.required(); - readonly signalGraphEnabled = input.required(); readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>(); readonly showSignalGraph = output(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts index 0b685781531..18166d703c3 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts @@ -20,6 +20,7 @@ import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular 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', @@ -41,14 +42,16 @@ import {DebugSignalGraphNode} from '../../../../../../../protocol'; export class PropertyViewTreeComponent { protected readonly supportedApis = inject(SUPPORTED_APIS); private readonly signalGraph = inject(SignalGraphManager); + private readonly settings = inject(Settings); readonly dataSource = input.required(); readonly treeControl = input.required>(); - readonly signalGraphEnabled = input.required(); readonly updateValue = output(); readonly inspect = output(); readonly showSignalGraph = output(); + protected readonly signalGraphEnabled = this.settings.signalGraphEnabled; + hasChild = (_: number, node: FlatNode): boolean => node.expandable; toggle(node: FlatNode): void { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.html index 3a6ea1a407f..0dada92df13 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.html @@ -8,7 +8,6 @@ [directivePropControls]="directivePropControls()!" [directiveOutputControls]="directiveOutputControls()!" [directiveStateControls]="directiveStateControls()!" - [signalGraphEnabled]="signalGraphEnabled()" (inspect)="inspect.emit($event)" (showSignalGraph)="showSignalGraph.emit($event)" > diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts index 745fbfaba01..9d228d5ee3c 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts @@ -22,7 +22,6 @@ import {PropertyViewHeaderComponent} from './property-view-header.component'; }) export class PropertyViewComponent { readonly directive = input.required<{name: string}>(); - readonly signalGraphEnabled = input.required(); readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>(); readonly viewSource = output();