From 507d83d5ed191e4e98bcc2f9ab8f8d4bcf4ea1f7 Mon Sep 17 00:00:00 2001
From: Matthieu Riegler <kyro38@gmail.com>
Date: Sun, 17 Mar 2024 15:57:05 +0100
Subject: [PATCH] refactor(devtools): hide hydration error when the component
 tree is collapsed (#54912)

This commit improves the devtools UX.

PR Close #54912
---
 .../directive-forest.component.html           | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html
index 39e3e162ae99f..dee01c775974e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html
@@ -37,39 +37,41 @@
         }
         <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>
+        @if (node.directives) {
+          <span class="dir-names">[{{ node.directives }}]</span>
         }
-        @case('skipped') {
-          <mat-icon matTooltip="Skipped" class="hydration skipped">invert_colors_off</mat-icon>
+        @if (isSelected(node)) {
+          <span class="console-reference"> == $ng0 </span>
         }
-        @case('mismatched') {
-          <mat-icon matTooltip="Mismatch" class="hydration mismatched">error_outline</mat-icon>
-        }
-      }
-    </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="Hydration skipped" class="hydration skipped">invert_colors_off</mat-icon>
+          }
+          @case ('mismatched') {
+            <mat-icon matTooltip="Hydration 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>