diff --git a/devtools/projects/ng-devtools/src/lib/application-operations/index.ts b/devtools/projects/ng-devtools/src/lib/application-operations/index.ts index ae00f791819f..5ef08c460cd0 100644 --- a/devtools/projects/ng-devtools/src/lib/application-operations/index.ts +++ b/devtools/projects/ng-devtools/src/lib/application-operations/index.ts @@ -14,6 +14,7 @@ export abstract class ApplicationOperations { abstract selectDomElement(position: ElementPosition, target: Frame): void; abstract inspect(directivePosition: DirectivePosition, objectPath: string[], target: Frame): void; abstract inspectSignal(position: SignalNodePosition, target: Frame): void; + abstract setSignalBreakpoint(position: SignalNodePosition, target: Frame): void; abstract viewSourceFromRouter(name: string, type: string, target: Frame): void; abstract setStorageItems(items: {[key: string]: unknown}): Promise; abstract getStorageItems(items: string[]): Promise<{[key: string]: unknown}>; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html index 8a58b84b2b1c..822eaa03853c 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html @@ -15,6 +15,7 @@ [graph]="signalGraph.graph()!" [element]="signalGraph.element()!" (gotoSource)="gotoSource($event)" + (setBreakpoint)="setBreakpoint($event)" (expandCluster)="expandCluster($event)" (highlightDeps)="highlightDeps($event)" (close)="detailsVisible.set(false)" diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts index 87673a31e5cf..fb4ae568cdb6 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts @@ -104,6 +104,17 @@ export class SignalGraphPaneComponent { ); } + setBreakpoint(node: DevtoolsSignalGraphNode) { + const frame = this.frameManager.selectedFrame(); + this.appOperations.setSignalBreakpoint( + { + element: this.signalGraph.element()!, + signalId: node.id, + }, + frame!, + ); + } + expandCluster(clusterId: string) { this.visualizer().expandCluster(clusterId); } diff --git a/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html b/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html index fb6e55b44e7e..a30992872dee 100644 --- a/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html +++ b/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html @@ -16,6 +16,17 @@ > code + } @else if (isClusterNode) {