feat(devtools): don't show comment nodes by default

cypress/integration/comment-nodes.e2e.js

@@ -0,0 +1,22 @@
+function showComments() {
+  cy.get(
+    '#nav-buttons > button.mat-focus-indicator.mat-menu-trigger.mat-icon-button.mat-button-base.mat-primary'
+  ).click();
+  cy.get('#mat-slide-toggle-3 > label > div').click();
+}
+
+describe('Comment nodes', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should not find any comment nodes by default', () => {
+    const nodes = cy.$$('.tree-node:contains("#comment")');
+    expect(nodes.length).to.eql(0);
+  });
+
+  it('should find comment nodes when the setting is enabled', () => {
+    showComments();
+    cy.get('.tree-wrapper').find('.tree-node:contains("#comment")').its('length').should('not.eq', 0);
+  });
+});

projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html

@@ -25,6 +25,7 @@
 
 <div class="tab-content">
   <ng-directive-explorer
+    [showCommentNodes]="showCommentNodes"
     [ngClass]="{ hidden: activeTab !== 'Components' }"
     (toggleInspector)="toggleInspector()"
   ></ng-directive-explorer>
@@ -46,4 +47,13 @@
   >
     Dark Mode
   </mat-slide-toggle>
+  <br />
+  <br />
+  <mat-slide-toggle
+    (change)="showCommentNodes = $event.checked"
+    class="menu-toggle-button"
+    (click)="$event.stopPropagation()"
+  >
+    Show comment nodes
+  </mat-slide-toggle>
 </mat-menu>

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

@@ -23,6 +23,7 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {
 
   inspectorRunning = false;
   routerTreeEnabled = false;
+  showCommentNodes = false;
 
   private _currentThemeSubscription: Subscription;
   currentTheme: Theme;

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html

@@ -11,6 +11,7 @@
           (toggleInspector)="toggleInspector.emit()"
           [forest]="forest"
           [currentSelectedElement]="currentSelectedElement"
+          [showCommentNodes]="showCommentNodes"
         ></ng-directive-forest>
       </as-split-area>
       <as-split-area size="22">

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts

@@ -3,6 +3,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  Input,
   NgZone,
   OnDestroy,
   OnInit,
@@ -58,14 +59,18 @@ const sameDirectives = (a: IndexedNode, b: IndexedNode) => {
   ],
 })
 export class DirectiveExplorerComponent implements OnInit, OnDestroy {
+  @Input() showCommentNodes = false;
   @Output() toggleInspector = new EventEmitter<void>();
 
+  @ViewChild(DirectiveForestComponent) directiveForest: DirectiveForestComponent;
+  @ViewChild(BreadcrumbsComponent) breadcrumbs: BreadcrumbsComponent;
+  @ViewChild(SplitComponent, { static: true, read: ElementRef }) splitElementRef: ElementRef;
+  @ViewChild('directiveForestSplitArea', { static: true, read: ElementRef }) directiveForestSplitArea: ElementRef;
+
   currentSelectedElement: IndexedNode | null = null;
   forest: DevToolsNode[];
   splitDirection: 'horizontal' | 'vertical' = 'horizontal';
-
-  @ViewChild(SplitComponent, { static: true, read: ElementRef }) splitElementRef: ElementRef;
-  @ViewChild('directiveForestSplitArea', { static: true, read: ElementRef }) directiveForestSplitArea: ElementRef;
+  parents: FlatNode[] | null = null;
 
   private _resizeObserver = new ResizeObserver((entries) =>
     this._ngZone.run(() => {
@@ -86,11 +91,6 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy {
   private _clickedElement: IndexedNode | null = null;
   private _refreshRetryTimeout: any = null;
 
-  parents: FlatNode[] | null = null;
-
-  @ViewChild(DirectiveForestComponent) directiveForest: DirectiveForestComponent;
-  @ViewChild(BreadcrumbsComponent) breadcrumbs: BreadcrumbsComponent;
-
   constructor(
     private _appOperations: ApplicationOperations,
     private _messageBus: MessageBus<Events>,

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.spec.ts

@@ -0,0 +1,129 @@
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { ComponentDataSource, FlatNode } from './component-data-source';
+import { DevToolsNode } from 'protocol';
+
+const tree1: DevToolsNode = {
+  element: 'app',
+  directives: [
+    {
+      id: 1,
+      name: 'foo',
+    },
+  ],
+  component: null,
+  children: [
+    {
+      children: [],
+      component: {
+        id: 2,
+        isElement: false,
+        name: 'bar',
+      },
+      directives: [],
+      element: 'bar',
+      nativeElement: document.createElement('bar'),
+    },
+  ],
+  nativeElement: document.createElement('foo'),
+};
+
+const tree2: DevToolsNode = {
+  element: 'app',
+  directives: [
+    {
+      id: 1,
+      name: 'foo',
+    },
+  ],
+  component: null,
+  children: [
+    {
+      children: [],
+      component: {
+        id: 2,
+        isElement: false,
+        name: 'bar',
+      },
+      directives: [],
+      element: 'bar',
+      nativeElement: document.createElement('bar'),
+    },
+    {
+      children: [],
+      component: {
+        id: 3,
+        isElement: false,
+        name: 'qux',
+      },
+      directives: [],
+      element: 'qux',
+      nativeElement: document.createElement('qux'),
+    },
+  ],
+  nativeElement: document.createElement('foo'),
+};
+
+const tree3: DevToolsNode = {
+  element: 'app',
+  directives: [
+    {
+      id: 1,
+      name: 'foo',
+    },
+  ],
+  component: null,
+  children: [
+    {
+      children: [],
+      component: {
+        id: 2,
+        isElement: false,
+        name: 'bar',
+      },
+      directives: [],
+      element: '#comment',
+      nativeElement: document.createComment('bar'),
+    },
+    {
+      children: [],
+      component: {
+        id: 3,
+        isElement: false,
+        name: 'qux',
+      },
+      directives: [],
+      element: '#comment',
+      nativeElement: document.createComment('bar'),
+    },
+  ],
+  nativeElement: document.createElement('foo'),
+};
+
+describe('ComponentDataSource', () => {
+  let dataSource: ComponentDataSource;
+  const treeControl = new FlatTreeControl<FlatNode>(
+    (node) => node.level,
+    (node) => node.expandable
+  );
+
+  beforeEach(() => (dataSource = new ComponentDataSource(treeControl)));
+
+  it('should return new and old items', () => {
+    const result = dataSource.update([tree1], true);
+    expect(result.movedItems.length).toBe(0);
+    expect(result.newItems.length).toBe(2);
+
+    const updatedResult = dataSource.update([tree2], true);
+    expect(updatedResult.movedItems.length).toBe(0);
+    expect(updatedResult.removedItems.length).toBe(0);
+    expect(updatedResult.newItems.length).toBe(1);
+    expect(updatedResult.newItems[0].name).toBe('qux');
+  });
+
+  it('should not return comment nodes when not requested', () => {
+    const result = dataSource.update([tree3], false);
+    expect(result.movedItems.length).toBe(0);
+    expect(result.newItems.length).toBe(1);
+    expect(result.newItems[0].name).toBe('app');
+  });
+});

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts

@@ -84,13 +84,20 @@ export class ComponentDataSource extends DataSource<FlatNode> {
     return this._nodeToFlat.get(indexedNode);
   }
 
-  update(forest: DevToolsNode[]): { newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[] } {
+  update(
+    forest: DevToolsNode[],
+    showCommentNodes: boolean
+  ): { newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[] } {
     if (!forest) {
       return { newItems: [], movedItems: [], removedItems: [] };
     }
 
     const indexedForest = indexForest(forest);
-    const flattenedCollection = this._treeFlattener.flattenNodes(indexedForest) as FlatNode[];
+    let flattenedCollection = this._treeFlattener.flattenNodes(indexedForest) as FlatNode[];
+
+    if (!showCommentNodes) {
+      flattenedCollection = flattenedCollection.filter((node) => node.original.element !== '#comment');
+    }
 
     this.data.forEach((i) => (i.newItem = false));
 

projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts

@@ -27,6 +27,7 @@ import { Subscription } from 'rxjs';
 })
 export class DirectiveForestComponent implements OnInit, OnDestroy {
   @Input() set forest(forest: DevToolsNode[]) {
+    this._latestForest = forest;
     const result = this._updateForest(forest);
     const changed = result.movedItems.length || result.newItems.length || result.removedItems.length;
     if (this.currentSelectedElement && changed) {
@@ -34,6 +35,10 @@ export class DirectiveForestComponent implements OnInit, OnDestroy {
     }
   }
   @Input() currentSelectedElement: IndexedNode;
+  @Input() set showCommentNodes(show: boolean) {
+    this._showCommentNodes = show;
+    this.forest = this._latestForest;
+  }
 
   @Output() selectNode = new EventEmitter<IndexedNode | null>();
   @Output() selectDomElement = new EventEmitter<IndexedNode>();
@@ -52,6 +57,8 @@ export class DirectiveForestComponent implements OnInit, OnDestroy {
 
   private _highlightIDinTreeFromElement: number | null = null;
   private _tabUpdateSubscription: Subscription;
+  private _showCommentNodes = false;
+  private _latestForest: DevToolsNode[];
 
   set highlightIDinTreeFromElement(id: number | null) {
     this._highlightIDinTreeFromElement = id;
@@ -169,7 +176,7 @@ export class DirectiveForestComponent implements OnInit, OnDestroy {
   private _updateForest(
     forest: DevToolsNode[]
   ): { newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[] } {
-    const result = this.dataSource.update(forest);
+    const result = this.dataSource.update(forest, this._showCommentNodes);
     if (!this._initialized && forest && forest.length) {
       this.treeControl.expandAll();
       this._initialized = true;