refactor(devtools): create highlight overlay on node selection (angular#60744)

Currently, highlighting works only when a directive explorer node is hovered. The change enables this feature on node selection as well.

PR Close angular#60744

Author: hawkgs

devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts

@@ -57,12 +57,16 @@ import {serializeDirectiveState} from './state-serializer/state-serializer';
 import {runOutsideAngular, unwrapSignal} from './utils';
 import {DirectiveForestHooks} from './hooks/hooks';
 
+type InspectorRef = {ref: ComponentInspector | null};
+
 export const subscribeToClientEvents = (
   messageBus: MessageBus<Events>,
   depsForTestOnly?: {
     directiveForestHooks?: typeof DirectiveForestHooks;
   },
 ): void => {
+  const inspector: InspectorRef = {ref: null};
+
   messageBus.on('shutdown', shutdownCallback(messageBus));
 
   messageBus.on(
@@ -75,7 +79,7 @@ export const subscribeToClientEvents = (
   messageBus.on('startProfiling', startProfilingCallback(messageBus));
   messageBus.on('stopProfiling', stopProfilingCallback(messageBus));
 
-  messageBus.on('setSelectedComponent', selectedComponentCallback);
+  messageBus.on('setSelectedComponent', selectedComponentCallback(inspector));
 
   messageBus.on('getNestedProperties', getNestedPropertiesCallback(messageBus));
   messageBus.on('getRoutes', getRoutesCallback(messageBus));
@@ -94,7 +98,8 @@ export const subscribeToClientEvents = (
   });
 
   if (appIsAngularInDevMode() && appIsSupportedAngularVersion() && appIsAngularIvy()) {
-    setupInspector(messageBus);
+    inspector.ref = setupInspector(messageBus);
+
     // Often websites have `scroll` event listener which triggers
     // Angular's change detection. We don't want to constantly send
     // update requests, instead we want to request an update at most
@@ -175,12 +180,13 @@ const stopProfilingCallback = (messageBus: MessageBus<Events>) => () => {
   messageBus.emit('profilerResults', [stopProfiling()]);
 };
 
-const selectedComponentCallback = (position: ElementPosition) => {
+const selectedComponentCallback = (inspector: InspectorRef) => (position: ElementPosition) => {
   const node = queryDirectiveForest(
     position,
     initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest(),
   );
   setConsoleReference({node, position});
+  inspector.ref?.highlightByPosition(position);
 };
 
 const getNestedPropertiesCallback =
@@ -335,7 +341,7 @@ const checkForAngular = (messageBus: MessageBus<Events>): void => {
   ]);
 };
 
-const setupInspector = (messageBus: MessageBus<Events>) => {
+const setupInspector = (messageBus: MessageBus<Events>): ComponentInspector => {
   const inspector = new ComponentInspector({
     onComponentEnter: (id: number) => {
       messageBus.emit('highlightComponent', [id]);
@@ -358,6 +364,8 @@ const setupInspector = (messageBus: MessageBus<Events>) => {
 
   messageBus.on('createHydrationOverlay', inspector.highlightHydrationNodes);
   messageBus.on('removeHydrationOverlay', inspector.removeHydrationHighlights);
+
+  return inspector;
 };
 
 export interface SerializableDirectiveInstanceType extends DirectiveType {

devtools/projects/ng-devtools-backend/src/lib/highlighter.ts

@@ -12,6 +12,7 @@ import {ngDebugClient} from './ng-debug-api/ng-debug-api';
 
 let hydrationOverlayItems: HTMLElement[] = [];
 let selectedElementOverlay: HTMLElement | null = null;
+let selectedElement: Node | null = null;
 
 const DEV_TOOLS_HIGHLIGHT_NODE_ID = '____ngDevToolsHighlight';
 
@@ -83,8 +84,12 @@ export function getDirectiveName(dir: Type<unknown> | undefined | null): string
 }
 
 export function highlightSelectedElement(el: Node): void {
+  if (el === selectedElement) {
+    return;
+  }
   unHighlight();
   selectedElementOverlay = addHighlightForElement(el);
+  selectedElement = el;
 }
 
 export function highlightHydrationElement(el: Node, status: HydrationStatus) {