fix(devtools): remove existing highlight before highlighting another element (angular#57746)

sheikalthaf · pkozlowski-opensource · commit 860272980128 · 2024-09-23T16:00:23.000+02:00
In this PR we will remove the exiting highlight before highlighting the another element so that the highlight always be one PR Close angular#57746
diff --git a/devtools/projects/ng-devtools-backend/src/lib/highlighter.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/highlighter.spec.ts
@@ -183,12 +183,17 @@ describe('highlighter', () => {
   });
 
   describe('highlightSelectedElement', () => {
+    function createElement(name: string) {
+      const element = document.createElement(name);
+      element.style.width = '25px';
+      element.style.height = '20px';
+      element.style.display = 'block';
+      document.body.appendChild(element);
+      return element;
+    }
+
     it('should show overlay', () => {
-      const appNode = document.createElement('app');
-      appNode.style.width = '25px';
-      appNode.style.height = '20px';
-      appNode.style.display = 'block';
-      document.body.appendChild(appNode);
+      const appNode = createElement('app');
       (window as any).ng = {
         getComponent: (el: any) => new (class FakeComponent {})(),
       };
@@ -202,5 +207,19 @@ describe('highlighter', () => {
       highlighter.unHighlight();
       expect(document.body.querySelectorAll('.ng-devtools-overlay').length).toBe(0);
     });
+
+    it('should remove the previous overlay when calling highlightSelectedElement again', () => {
+      const appNode = createElement('app');
+      const appNode2 = createElement('app-two');
+
+      (window as any).ng = {
+        getComponent: (el: any) => new (class FakeComponent {})(),
+      };
+
+      highlighter.highlightSelectedElement(appNode);
+      highlighter.highlightSelectedElement(appNode2);
+      const overlay = document.body.querySelectorAll('.ng-devtools-overlay');
+      expect(overlay.length).toBe(1);
+    });
   });
 });
diff --git a/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts b/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts
@@ -83,6 +83,7 @@ export function getDirectiveName(dir: Type<unknown> | undefined | null): string
 }
 
 export function highlightSelectedElement(el: Node): void {
+  unHighlight();
   selectedElementOverlay = addHighlightForElement(el);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -83,6 +83,7 @@ export function getDirectiveName(dir: Type<unknown> \| undefined \| null): string`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`export function highlightSelectedElement(el: Node): void {`
	`86`	`+ unHighlight();`
`86`	`87`	`selectedElementOverlay = addHighlightForElement(el);`
`87`	`88`	`}`
`88`	`89`