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

…ollapsed (#54912) This commit improves the devtools UX. PR Close #54912
angular · Apr 25, 2024 · 507d83d · 507d83d
1 parent 4a33efa
commit 507d83d
Showing 1 changed file with 31 additions and 29 deletions.
diff --git a/...src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html b/...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>