Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(devtools): provide signalGraphEnabled via settings service (#63374)

Browse source 
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
This commit is contained in:
Avcharov Hryhorii 2025-08-25 18:30:52 +02:00 committed by Andrew Kushnir
parent 1cb113cdec
commit aff8bb222c
15 changed files with 12 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
devtools/projects/ng-devtools/src/lib/application-providers/settings_provider.ts
View file

@ -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

1
devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
View file

@ -67,7 +67,6 @@
[showCommentNodes]="showCommentNodes()"
[isHydrationEnabled]="isHydrationEnabled()"
(toggleInspector)="toggleInspector()"
[signalGraphEnabled]="signalGraphEnabled()"
/>
@let profilerVisible = activeTab() === 'Profiler';

1
devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html
View file

@ -43,7 +43,6 @@
@if (currentSelectedElement(); as currentSelectedElement) {
<ng-property-tab
[currentSelectedElement]="currentSelectedElement"
[signalGraphEnabled]="signalGraphEnabled()"
(showSignalGraph)="showSignalGraph($event)"
(inspect)="inspect($event)"
(viewSource)="viewSource($event)"

2
devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
View file

@ -118,8 +118,6 @@ export class DirectiveExplorerComponent {
read: ElementRef,
});
readonly signalGraphEnabled = input.required<boolean>();
readonly currentSelectedElement = signal<IndexedNode | null>(null);
readonly forest = signal<DevToolsNode[]>([]);
readonly splitDirection = signal<'horizontal' | 'vertical'>('horizontal');

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

@ -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<IndexedNode>();
protected readonly signalGraphEnabled = input.required<boolean>();
protected readonly showSignalGraph = output<void>();
protected readonly expanded = signal(false);
protected readonly signalGraphEnabled = this.settings.signalGraphEnabled;
}

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

@ -3,7 +3,6 @@
@if (currentSelectedElement) {
<ng-property-tab-header
[currentSelectedElement]="currentSelectedElement"
[signalGraphEnabled]="signalGraphEnabled()"
(showSignalGraph)="showSignalGraph.emit(null)"
/>
<ng-property-tab-body
@ -11,7 +10,6 @@
(viewSource)="viewSource.emit($event)"
(showSignalGraph)="showSignalGraph.emit($event)"
[currentSelectedElement]="currentSelectedElement"
[signalGraphEnabled]="signalGraphEnabled()"
/>
@let hydration = currentSelectedElement.hydration;

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

@ -24,7 +24,6 @@ import {DeferViewComponent} from './defer-view/defer-view.component';
})
export class PropertyTabComponent {
readonly currentSelectedElement = input.required<IndexedNode | null>();
readonly signalGraphEnabled = input.required<boolean>();
readonly viewSource = output<string>();
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();

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

@ -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",

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

@ -5,7 +5,6 @@
(viewSource)="viewSource.emit(directive.name)"
(showSignalGraph)="showSignalGraph.emit($event)"
[directive]="directive"
[signalGraphEnabled]="signalGraphEnabled()"
/>
</div>
}

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

@ -22,7 +22,6 @@ import {PropertyViewComponent} from './property-view.component';
})
export class PropertyTabBodyComponent {
readonly currentSelectedElement = input.required<IndexedNode>();
readonly signalGraphEnabled = input.required<boolean>();
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
readonly viewSource = output<string>();

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

@ -24,7 +24,6 @@
<ng-property-view-tree
[dataSource]="panel.controls().dataSource"
[treeControl]="panel.controls().treeControl"
[signalGraphEnabled]="signalGraphEnabled()"
(updateValue)="updateValue($event)"
(inspect)="handleInspect($event)"
(showSignalGraph)="showSignalGraph.emit($event)"

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

@ -53,7 +53,6 @@ export class PropertyViewBodyComponent {
readonly directivePropControls = input.required<DirectiveTreeData>();
readonly directiveOutputControls = input.required<DirectiveTreeData>();
readonly directiveStateControls = input.required<DirectiveTreeData>();
readonly signalGraphEnabled = input.required<boolean>();
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
readonly showSignalGraph = output<DebugSignalGraphNode>();

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

@ -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<PropertyDataSource>();
readonly treeControl = input.required<FlatTreeControl<FlatNode>>();
readonly signalGraphEnabled = input.required<boolean>();
readonly updateValue = output<any>();
readonly inspect = output<any>();
readonly showSignalGraph = output<DebugSignalGraphNode>();
protected readonly signalGraphEnabled = this.settings.signalGraphEnabled;
hasChild = (_: number, node: FlatNode): boolean => node.expandable;
toggle(node: FlatNode): void {

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

@ -8,7 +8,6 @@
[directivePropControls]="directivePropControls()!"
[directiveOutputControls]="directiveOutputControls()!"
[directiveStateControls]="directiveStateControls()!"
[signalGraphEnabled]="signalGraphEnabled()"
(inspect)="inspect.emit($event)"
(showSignalGraph)="showSignalGraph.emit($event)"
></ng-property-view-body>

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

@ -22,7 +22,6 @@ import {PropertyViewHeaderComponent} from './property-view-header.component';
})
export class PropertyViewComponent {
readonly directive = input.required<{name: string}>();
readonly signalGraphEnabled = input.required<boolean>();
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
readonly viewSource = output<void>();