Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(devtools): hide hydration error when the component tree is collapsed (#54912)

Browse source 
This commit improves the devtools UX.

PR Close #54912
This commit is contained in:
Matthieu Riegler 2024-03-17 15:57:05 +01:00 committed by Andrew Kushnir
parent 4a33efaa3e
commit 507d83d5ed
1 changed files with 32 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>
}
@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>
}
@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(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>