feat(devtools): Use Chrome DevTools Performance extension API

Incorporate feedback form previous commit:

Remove listeners when component is distroyed
Rename track name to Angular DevTools
Use optional chaining deeper in chrome devtools performance namespace

devtools/projects/ng-devtools-backend/src/lib/hooks/index.ts

@@ -45,7 +45,7 @@ const endMark = (nodeName: string, method: Method) => {
               extensionName: 'Angular',
             },
             color: 'primary',
-            track: '🅰️ Angular Extension',
+            track: '🅰️ Angular DevTools',
           },
         },
       };
@@ -58,9 +58,17 @@ const endMark = (nodeName: string, method: Method) => {
 };
 
 let timingAPIFlag = false;
+let lastTimingAPIFlagStatus = false;
 
-export const enableTimingAPI = () => (timingAPIFlag = true);
-export const disableTimingAPI = () => (timingAPIFlag = false);
+export const enableTimingAPI = () => {
+  lastTimingAPIFlagStatus = timingAPIFlag;
+  timingAPIFlag = true;
+};
+// If the recording was stopped from Chrome profiler (Performance panel)
+// restore keep the value of the timings API flag as the user had set it
+// in Angular DevTools before the recording started.
+export const disableTimingAPI = (forBrowserProfiler: boolean = false) =>
+  (timingAPIFlag = forBrowserProfiler && lastTimingAPIFlagStatus);
 
 const timingAPIEnabled = () => timingAPIFlag;
 

devtools/projects/protocol/src/lib/messages.ts

@@ -276,7 +276,12 @@ export interface Events {
   removeComponentHighlight: () => void;
 
   enableTimingAPI: () => void;
-  disableTimingAPI: () => void;
+  // forBrowserProfiler is used to determine if the event is dispatched
+  // because the Chrome profiler (Performance panel) stopped recording
+  // In this case, we need to ensure we keep the value of the
+  // timings API flag as the user had set it in Angular DevTools before
+  // the recording started.
+  disableTimingAPI: (forBrowserProfiler: boolean) => void;
 
   // todo: type properly
   getInjectorProviders: (injector: SerializedInjector) => void;

devtools/projects/shell-browser/src/app/app.component.ts

@@ -17,23 +17,29 @@ import {Events, MessageBus} from 'protocol';
 export class AppComponent implements OnInit {
   private _cd = inject(ChangeDetectorRef);
   private readonly _messageBus = inject<MessageBus<Events>>(MessageBus);
-
+  private onProfilingStartedListener = (() => {
+    this._messageBus.emit('enableTimingAPI');
+  }).bind(this);
+  private onProfilingStoppedListener = (() => {
+    this._messageBus.emit('disableTimingAPI');
+  }).bind(this);
   ngOnInit(): void {
     chrome.devtools.network.onNavigated.addListener(() => {
       window.location.reload();
     });
     // At the moment the chrome.devtools.performance namespace does not
-    // have an entry in DefinitelyTyped so this is a temporary
-    // workaround to prevent TypeScript failures while the cooresponding
+    // have an entry in DefinitelyTyped, so this is a temporary
+    // workaround to prevent TypeScript failures while the corresponding
     // type is added upstream.
     const chromeDevToolsPerformance = (chrome.devtools as any).performance;
-    chromeDevToolsPerformance?.onProfilingStarted.addListener(() => {
-      this._messageBus.emit('enableTimingAPI');
-    });
-    chromeDevToolsPerformance?.onProfilingStopped.addListener(() => {
-      this._messageBus.emit('disableTimingAPI');
-    });
+    chromeDevToolsPerformance?.onProfilingStarted?.addListener?.(this.onProfilingStartedListener);
+    chromeDevToolsPerformance?.onProfilingStopped?.addListener?.(this.onProfilingStoppedListener);
 
     this._cd.detectChanges();
   }
+  ngOnDestroy(): void {
+    const chromeDevToolsPerformance = (chrome.devtools as any).performance;
+    chromeDevToolsPerformance?.onProfilingStarted?.addListener?.(this.onProfilingStartedListener);
+    chromeDevToolsPerformance?.onProfilingStopped?.addListener?.(this.onProfilingStoppedListener);
+  }
 }