Skip to content

Commit f5c67f1

Browse files
hawkgsthePunderWoman
hawkgs
authored and
thePunderWoman
committed
refactor(devtools): introduce responsive-split directive (angular#61204)
The `ResponsiveSplitDirective` adds responsive behavior to the `as-split` component by a provided width to height ratio. PR Close angular#61204
1 parent 1749ee6 commit f5c67f1

File tree

8 files changed

+370
-249
lines changed

8 files changed

+370
-249
lines changed

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ ng_project(
3636
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path:resolution-path_rjs",
3737
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers:injector-providers_rjs",
3838
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host:tree-visualizer-host_rjs",
39+
"//devtools/projects/ng-devtools/src/lib/shared/responsive-split:responsive-split_rjs",
3940
"//devtools/projects/ng-devtools/src/lib/vendor/angular-split:angular-split_rjs",
4041
"//devtools/projects/protocol:protocol_rjs",
4142
],

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html‎

Lines changed: 60 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -3,71 +3,64 @@
33
This feature is only available on version 17.0.0 or higher of Angular.
44
</p>
55
}
6-
<as-split
7-
[class.hidden]="!diDebugAPIsAvailable()"
8-
unit="pixel"
9-
direction="vertical"
10-
[gutterSize]="9"
11-
[disabled]="true"
12-
>
13-
<as-split-area size="50">
14-
<div class="options">
15-
<mat-checkbox (change)="toggleHideInjectorsWithNoProviders()">
16-
Hide injectors with no providers
17-
</mat-checkbox>
18-
<mat-checkbox (change)="toggleHideAngularInjectors()">
19-
Hide framework injectors
20-
</mat-checkbox>
21-
</div>
22-
</as-split-area>
23-
<as-split-area>
24-
<as-split unit="percent" direction="horizontal" [gutterSize]="9">
25-
<as-split-area size="60">
26-
<as-split unit="percent" direction="vertical" [gutterSize]="9">
27-
<as-split-area size="35">
28-
<div class="injector-hierarchy">
29-
<h2>
30-
<span>Environment Hierarchy</span>
31-
<a
32-
class="hierarchy-ref"
33-
href="https://angular.dev/guide/di/hierarchical-dependency-injection#types-of-injector-hierarchies"
34-
target="_blank"
35-
>
36-
<mat-icon matTooltip="Open docs reference"> open_in_new </mat-icon>
37-
</a>
38-
</h2>
39-
<section class="injector-graph">
40-
<ng-tree-visualizer-host #environmentTree />
41-
</section>
42-
</div>
43-
</as-split-area>
44-
<as-split-area size="65">
45-
<div class="injector-hierarchy">
46-
<h2>
47-
<span>Element Hierarchy</span>
48-
<a
49-
class="hierarchy-ref"
50-
href="https://angular.dev/guide/di/hierarchical-dependency-injection#types-of-injector-hierarchies"
51-
target="_blank"
52-
>
53-
<mat-icon matTooltip="Open docs reference"> open_in_new </mat-icon>
54-
</a>
55-
</h2>
56-
<section class="injector-graph">
57-
<ng-tree-visualizer-host #elementTree />
58-
</section>
59-
</div>
60-
</as-split-area>
61-
</as-split>
62-
</as-split-area>
63-
@if (selectedNode() && providers().length > 0) {
64-
<as-split-area size="40" [minSize]="25">
65-
<ng-injector-providers
66-
[injector]="selectedNode()!.data.injector"
67-
[providers]="providers()"
68-
/>
6+
<div class="wrapper" [class.hidden]="!diDebugAPIsAvailable()">
7+
<div class="options">
8+
<mat-checkbox (change)="toggleHideInjectorsWithNoProviders()">
9+
Hide injectors with no providers
10+
</mat-checkbox>
11+
<mat-checkbox (change)="toggleHideAngularInjectors()"> Hide framework injectors </mat-checkbox>
12+
</div>
13+
<as-split class="trees" unit="percent" direction="horizontal" [gutterSize]="9">
14+
<as-split-area size="60">
15+
<as-split
16+
[ngResponsiveSplit]="responsiveSplitConfig"
17+
(directionChange)="onResponsiveSplitDirChange($event)"
18+
unit="percent"
19+
[gutterSize]="9"
20+
>
21+
<as-split-area [size]="envHierarchySize()">
22+
<div class="injector-hierarchy">
23+
<h2>
24+
<span>Environment Hierarchy</span>
25+
<a
26+
class="hierarchy-ref"
27+
href="https://angular.dev/guide/di/hierarchical-dependency-injection#types-of-injector-hierarchies"
28+
target="_blank"
29+
>
30+
<mat-icon matTooltip="Open docs reference"> open_in_new </mat-icon>
31+
</a>
32+
</h2>
33+
<section class="injector-graph">
34+
<ng-tree-visualizer-host #environmentTree />
35+
</section>
36+
</div>
37+
</as-split-area>
38+
<as-split-area [size]="elHierarchySize()">
39+
<div class="injector-hierarchy">
40+
<h2>
41+
<span>Element Hierarchy</span>
42+
<a
43+
class="hierarchy-ref"
44+
href="https://angular.dev/guide/di/hierarchical-dependency-injection#types-of-injector-hierarchies"
45+
target="_blank"
46+
>
47+
<mat-icon matTooltip="Open docs reference"> open_in_new </mat-icon>
48+
</a>
49+
</h2>
50+
<section class="injector-graph">
51+
<ng-tree-visualizer-host #elementTree />
52+
</section>
53+
</div>
6954
</as-split-area>
70-
}
71-
</as-split>
72-
</as-split-area>
73-
</as-split>
55+
</as-split>
56+
</as-split-area>
57+
@if (selectedNode() && providers().length > 0) {
58+
<as-split-area size="40" [minSize]="25">
59+
<ng-injector-providers
60+
[injector]="selectedNode()!.data.injector"
61+
[providers]="providers()"
62+
/>
63+
</as-split-area>
64+
}
65+
</as-split>
66+
</div>

0 commit comments

Comments
 (0)