fix(devtools): clean up profiler subscriptions on destroy

Cleans up `uploadedData` and message bus subscriptions when the profiler
is destroyed to prevent duplicate error dialogs and stale profiler results
from accumulating across profiler instances.

Adds coverage for subscription cleanup on destroy.

Author: MeAkib

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
+load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary", "ts_test_library", "zoneless_web_test_suite")
 
 package(default_visibility = ["//devtools:__subpackages__"])
 
@@ -30,3 +30,26 @@ ng_project(
         "//devtools/projects/protocol",
     ],
 )
+
+ts_test_library(
+    name = "profiler_test",
+    srcs = [
+        "profiler.component.spec.ts",
+    ],
+    visibility = [
+        "//visibility:private",
+    ],
+    deps = [
+        ":profiler",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/protocol",
+    ],
+)
+
+zoneless_web_test_suite(
+    name = "test",
+    deps = [
+        ":profiler_test",
+    ],
+)

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.spec.ts

@@ -0,0 +1,77 @@
+/**
+ * @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 {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatDialog} from '@angular/material/dialog';
+
+import {Events, MessageBus} from '../../../../../protocol';
+import {FileApiService} from './file-api-service';
+import {ProfilerComponent} from './profiler.component';
+
+class MessageBusMock implements Pick<MessageBus<Events>, 'on' | 'emit' | 'once' | 'destroy'> {
+  readonly emit = jasmine.createSpy('emit');
+  readonly once = jasmine.createSpy('once');
+  readonly destroy = jasmine.createSpy('destroy');
+  private listeners = new Map<keyof Events, Set<Function>>();
+
+  on = jasmine.createSpy('on').and.callFake((topic: keyof Events, cb: Function) => {
+    if (!this.listeners.has(topic)) this.listeners.set(topic, new Set());
+    this.listeners.get(topic)!.add(cb);
+    return () => this.listeners.get(topic)!.delete(cb);
+  });
+
+  hasListener(topic: keyof Events): boolean {
+    return (this.listeners.get(topic)?.size ?? 0) > 0;
+  }
+}
+
+describe('ProfilerComponent', () => {
+  let messageBus: MessageBusMock;
+  let dialog: jasmine.SpyObj<MatDialog>;
+  let fixture: ComponentFixture<ProfilerComponent>;
+
+  beforeEach(async () => {
+    messageBus = new MessageBusMock();
+    dialog = jasmine.createSpyObj<MatDialog>('MatDialog', ['open']);
+    // Importing an invalid file logs the error.
+    spyOn(console, 'error');
+
+    TestBed.configureTestingModule({
+      imports: [ProfilerComponent],
+      providers: [
+        {provide: MessageBus, useValue: messageBus},
+        {provide: MatDialog, useValue: dialog},
+      ],
+    });
+
+    fixture = TestBed.createComponent(ProfilerComponent);
+    await fixture.whenStable();
+  });
+
+  it('should unregister the profiler message bus listeners on destroy', () => {
+    expect(messageBus.hasListener('profilerResults')).toBeTrue();
+    expect(messageBus.hasListener('sendProfilerChunk')).toBeTrue();
+
+    fixture.destroy();
+
+    expect(messageBus.hasListener('profilerResults')).toBeFalse();
+    expect(messageBus.hasListener('sendProfilerChunk')).toBeFalse();
+  });
+
+  it('should stop handling uploaded files once destroyed', () => {
+    const fileApiService = TestBed.inject(FileApiService);
+
+    fileApiService.uploadedData.next({error: new Error('Invalid file')});
+    expect(dialog.open).toHaveBeenCalledTimes(1);
+
+    fixture.destroy();
+    fileApiService.uploadedData.next({error: new Error('Invalid file')});
+
+    expect(dialog.open).toHaveBeenCalledTimes(1);
+  });
+});

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, inject, signal} from '@angular/core';
+import {Component, DestroyRef, inject, signal} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {MatDialog} from '@angular/material/dialog';
 import {MatIcon} from '@angular/material/icon';
 import {MatTooltip} from '@angular/material/tooltip';
@@ -42,7 +43,9 @@ export class ProfilerComponent {
   public dialog = inject(MatDialog);
 
   constructor() {
-    this._fileApiService.uploadedData.subscribe((importedFile) => {
+    // `FileApiService` is provided in root and outlives this component, which is destroyed and
+    // recreated when another frame is inspected.
+    this._fileApiService.uploadedData.pipe(takeUntilDestroyed()).subscribe((importedFile) => {
       if (importedFile.error) {
         console.error('Could not process uploaded file');
         console.error(importedFile.error);
@@ -84,16 +87,24 @@ export class ProfilerComponent {
       }
     });
 
-    this._messageBus.on('profilerResults', (remainingRecords) => {
+    const unlistenProfilerResults = this._messageBus.on('profilerResults', (remainingRecords) => {
       if (remainingRecords.duration > 0 && remainingRecords.source) {
         this.stream.next([remainingRecords]);
         this._buffer.push(remainingRecords);
       }
     });
 
-    this._messageBus.on('sendProfilerChunk', (chunkOfRecords: ProfilerFrame) => {
-      this.stream.next([chunkOfRecords]);
-      this._buffer.push(chunkOfRecords);
+    const unlistenProfilerChunk = this._messageBus.on(
+      'sendProfilerChunk',
+      (chunkOfRecords: ProfilerFrame) => {
+        this.stream.next([chunkOfRecords]);
+        this._buffer.push(chunkOfRecords);
+      },
+    );
+
+    inject(DestroyRef).onDestroy(() => {
+      unlistenProfilerResults();
+      unlistenProfilerChunk();
     });
   }