fix(devtools): stop second component tree traversal, if devtools metadata is placed on the body tag (angular#64161)

Stop multiple component tree traversals if the app root is the body tag. This caused the devtools ui to duplicate the component information, if the app root was the body tag

PR Close angular#64161

Author: tsc036

devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.spec.ts

@@ -7,9 +7,21 @@
  */
 
 import {Injector, ɵGlobalDevModeUtils} from '@angular/core';
-import {getInjectorFromElementNode} from './component-tree';
+import {getInjectorFromElementNode, getRootElements} from './component-tree';
 
 type Ng = ɵGlobalDevModeUtils['ng'];
+const NG_VERSION = 'ng-version';
+const VERSION = '0.0.0-PLACEHOLDER';
+
+function setNgVersion(element: Element) {
+  element.setAttribute(NG_VERSION, VERSION);
+}
+
+function createRoot() {
+  const root = document.createElement('div');
+  setNgVersion(root);
+  return root;
+}
 
 describe('component-tree', () => {
   afterEach(() => {
@@ -39,4 +51,55 @@ describe('component-tree', () => {
       expect(getInjectorFromElementNode(el)).toBeNull();
     });
   });
+
+  describe('getRootElements', () => {
+    beforeEach(() => {
+      const ng: Partial<Ng> = {
+        getComponent: jasmine.createSpy('getComponent').and.returnValue({}),
+      };
+      (window as any).ng = ng;
+    });
+
+    afterEach(() => {
+      document.body.replaceChildren();
+      document.body.removeAttribute(NG_VERSION);
+      delete (window as any).ng;
+    });
+
+    it('should return root element', () => {
+      const rootElement = createRoot();
+      const childElement = createRoot();
+
+      rootElement.appendChild(childElement);
+      document.body.appendChild(rootElement);
+
+      const roots = getRootElements();
+
+      expect(roots.length).toEqual(1);
+      expect(roots.pop()).toEqual(rootElement);
+    });
+
+    it('should return multiple sibling roots', () => {
+      const firstRoot = createRoot();
+      const secondRoot = createRoot();
+
+      document.body.appendChild(firstRoot);
+      document.body.appendChild(secondRoot);
+
+      const roots = getRootElements();
+
+      expect(roots.length).toEqual(2);
+      expect(roots).toContain(firstRoot);
+      expect(roots).toContain(secondRoot);
+    });
+
+    it('should only return document.body when document.body is the root', () => {
+      setNgVersion(document.body);
+      const child1 = createRoot();
+      document.body.appendChild(child1);
+      const roots = getRootElements();
+      expect(roots.length).toEqual(1);
+      expect(roots).toContain(document.body);
+    });
+  });
 });

devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts

@@ -552,7 +552,8 @@ const getRootLViewsHelper = (element: Element, rootLViews = new Set<any>()): Set
   return rootLViews;
 };
 
-function getRootElements(): Element[] {
+/** Gets the all the root components in the Dom, including those outside the application root */
+export function getRootElements(): Element[] {
   if (!ngDebugClient().getComponent) {
     // If the ngDebugClient does not support getComponent, we cannot proceed.
     return [];
@@ -631,6 +632,9 @@ function getRootElements(): Element[] {
  * @param roots A set of root elements found during the traversal.
  */
 function discoverNonApplicationRootComponents(element: Element, roots: Set<Element>): void {
+  if (roots.has(element)) {
+    return;
+  }
   const children = Array.from(element.children);
   for (const child of children) {
     if (roots.has(child)) {