refactor(devtools): hide hydration error when the component tree is c…

…ollapsed

This commit improves the devtools UX.

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

@@ -21,53 +21,55 @@
       (mouseleave)="removeHighlight()"
       [style.padding-left]="15 + 15 * node.level + 'px'"
     >
-    <div class="tree-node-info">
-      @if (node.expandable) {
-        <button
-          [style.left]="15 * node.level + 'px'"
-          (click)="treeControl.toggle(node)"
-          [attr.aria-label]="'toggle ' + node.name"
-        >
-          <mat-icon class="mat-icon-rtl-mirror">
-            {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
-          </mat-icon>
-        </button>
-      }
-      <span class="element-name" [class.angular-element]="isElement(node)">{{ node.name }}</span>
-
-      @if (node.directives) {
-        <span class="dir-names">[{{ node.directives }}]</span>
-      }
-      @if (isSelected(node)) {
-        <span class="console-reference"> == $ng0 </span>
-      }
-
-      @switch(node.hydration?.status) {
-        @case('hydrated') {
-          <mat-icon matTooltip="Hydrated" class="hydration">water_drop</mat-icon>
+      <div class="tree-node-info">
+        @if (node.expandable) {
+          <button
+            [style.left]="15 * node.level + 'px'"
+            (click)="treeControl.toggle(node)"
+            [attr.aria-label]="'toggle ' + node.name"
+          >
+            <mat-icon class="mat-icon-rtl-mirror">
+              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
+            </mat-icon>
+          </button>
         }
-        @case('skipped') {
-          <mat-icon matTooltip="Skipped" class="hydration skipped">invert_colors_off</mat-icon>
+        <span class="element-name" [class.angular-element]="isElement(node)">{{ node.name }}</span>
+
+        @if (node.directives) {
+          <span class="dir-names">[{{ node.directives }}]</span>
         }
-        @case('mismatched') {
-          <mat-icon matTooltip="Mismatch" class="hydration mismatched">error_outline</mat-icon>
+        @if (isSelected(node)) {
+          <span class="console-reference"> == $ng0 </span>
         }
-      }
-    </div>
-    @if(node.hydration?.status === 'mismatched' && (node.hydration.expectedNodeDetails || node.hydration.actualNodeDetails)) {
-      <div class="hydration-error">
-        @if(node.hydration.expectedNodeDetails) {
-          <div>Expected Dom:</div>
-          <pre>{{node.hydration.expectedNodeDetails}}</pre>
-        }
-        @if(node.hydration.actualNodeDetails) {
-          <div>Actual Dom:</div>
-          <pre>{{node.hydration.actualNodeDetails}}</pre>
+
+        @switch (node.hydration?.status) {
+          @case ('hydrated') {
+            <mat-icon matTooltip="Hydrated" class="hydration">water_drop</mat-icon>
+          }
+          @case ('skipped') {
+            <mat-icon matTooltip="Skipped" class="hydration skipped">invert_colors_off</mat-icon>
+          }
+          @case ('mismatched') {
+            <mat-icon matTooltip="Mismatch" class="hydration mismatched">error_outline</mat-icon>
+          }
         }
       </div>
-    }
+      @if (
+        treeControl.isExpanded(node) && 
+        node.hydration?.status === 'mismatched' && 
+        (node.hydration.expectedNodeDetails || node.hydration.actualNodeDetails)
+      ) {
+        <div class="hydration-error">
+          @if (node.hydration.expectedNodeDetails) {
+            <div>Expected Dom:</div>
+            <pre>{{node.hydration.expectedNodeDetails}}</pre>
+          }
+          @if (node.hydration.actualNodeDetails) {
+            <div>Actual Dom:</div>
+            <pre>{{node.hydration.actualNodeDetails}}</pre>
+          }
+        </div>
+      }
     </div>
-
   </ng-container>
-
 </cdk-virtual-scroll-viewport>