Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 95f6448

Browse filesBrowse files
hawkgsmilomg
hawkgs
authored and
milomg
committed
refactor(devtools): style the show graph button; add property show graph button
Change the toggle button to a "Show graph" button as per the doc; Add "Show graph" button to the signal properties in the side pane.
1 parent e159801 commit 95f6448
Copy full SHA for 95f6448
Expand file treeCollapse file tree

21 files changed

+213
-27
lines changed

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

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html
+3-2Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<as-split-area size="70">
2929
<ng-signals-tab
3030
[currentElement]="currentSelectedElement.position"
31-
(close)="closeSignalsTab()"
31+
(close)="signalsOpen.set(false)"
3232
#signalsTab
3333
/>
3434
</as-split-area>
@@ -40,7 +40,8 @@
4040
@if (currentSelectedElement(); as currentSelectedElement) {
4141
<ng-property-tab
4242
[currentSelectedElement]="currentSelectedElement"
43-
[toggleSignalGraph]="signals() ? toggleSignalGraph : undefined"
43+
[signalGraphAvailable]="!!signals()"
44+
(showSignalGraph)="showSignalGraph($event)"
4445
(inspect)="inspect($event)"
4546
(viewSource)="viewSource($event)"
4647
/>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
+3-7Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,6 @@ export class DirectiveExplorerComponent {
120120
private readonly _frameManager = inject(FrameManager);
121121

122122
private readonly platform = inject(Platform);
123-
124123
private readonly snackBar = inject(MatSnackBar);
125124

126125
constructor() {
@@ -348,11 +347,8 @@ export class DirectiveExplorerComponent {
348347
}
349348
}
350349

351-
closeSignalsTab() {
352-
this.signalsOpen.set(false);
353-
}
354-
355-
toggleSignalGraph = () => {
356-
this.signalsOpen.set(!this.signalsOpen())
350+
showSignalGraph(node: PropertyFlatNode | null) {
351+
// TBD: Use the node argument for graph node selection/highlighting.
352+
this.signalsOpen.set(true);
357353
}
358354
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ ng_project(
4848
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver:property-resolver_rjs",
4949
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view:defer-view_rjs",
5050
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view:property-view_rjs",
51+
"//devtools/projects/ng-devtools/src/lib/shared/button:button_rjs",
5152
"//devtools/projects/protocol:protocol_rjs",
5253
],
5354
)

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.html

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.html
+5-5Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
<mat-panel-title>
88
<div class="element-header">
99
<div class="component-name">{{ comp.name }}</div>
10+
@if (signalGraphAvailable()) {
11+
<button ng-button type="button" size="compact" (click)="showGraph($event)">
12+
Show Signal Graph
13+
</button>
14+
}
1015
</div>
1116
</mat-panel-title>
12-
@if (toggleSignalGraph()) {
13-
<button (click)="handleToggleSignalGraph($event)">
14-
<mat-icon> schema </mat-icon>
15-
</button>
16-
}
1717
</mat-expansion-panel-header>
1818
<ng-component-metadata [currentSelectedComponent]="comp"></ng-component-metadata>
1919
</mat-expansion-panel>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts
+8-9Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,26 @@
77
*/
88

99
import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
10+
import {MatExpansionModule} from '@angular/material/expansion';
1011

1112
import {IndexedNode} from '../directive-forest/index-forest';
1213
import {ComponentMetadataComponent} from './component-metadata.component';
13-
import {MatExpansionModule} from '@angular/material/expansion';
14-
import {MatIcon} from '@angular/material/icon';
14+
import {ButtonComponent} from '../../../shared/button/button.component';
1515

1616
@Component({
1717
templateUrl: './property-tab-header.component.html',
1818
selector: 'ng-property-tab-header',
1919
styleUrls: ['./property-tab-header.component.scss'],
2020
changeDetection: ChangeDetectionStrategy.OnPush,
21-
imports: [MatExpansionModule, ComponentMetadataComponent, MatIcon],
21+
imports: [MatExpansionModule, ComponentMetadataComponent, ButtonComponent],
2222
})
2323
export class PropertyTabHeaderComponent {
24-
currentSelectedElement = input.required<IndexedNode>();
25-
toggleSignalGraph = input<() =>void>();
24+
readonly currentSelectedElement = input.required<IndexedNode>();
25+
readonly signalGraphAvailable = input<boolean>(false);
26+
readonly showSignalGraph = output<void>();
2627

27-
handleToggleSignalGraph(event: MouseEvent) {
28+
showGraph(event: Event) {
2829
event.stopPropagation();
29-
// we don't show the button unless toggleSignalGraph is defined
30-
const toggleSignalGraphFn = this.toggleSignalGraph()!;
31-
toggleSignalGraphFn();
30+
this.showSignalGraph.emit();
3231
}
3332
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html
+3-1Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
@if (currentSelectedElement) {
44
<ng-property-tab-header
55
[currentSelectedElement]="currentSelectedElement"
6-
[toggleSignalGraph]="toggleSignalGraph()"
6+
[signalGraphAvailable]="signalGraphAvailable()"
7+
(showSignalGraph)="showSignalGraph.emit(null)"
78
/>
89
<ng-property-tab-body
910
(inspect)="inspect.emit($event)"
1011
(viewSource)="viewSource.emit($event)"
12+
(showSignalGraph)="showSignalGraph.emit($event)"
1113
[currentSelectedElement]="currentSelectedElement"
1214
/>
1315

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts
+3-1Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ import {DeferViewComponent} from './defer-view/defer-view.component';
2323
})
2424
export class PropertyTabComponent {
2525
readonly currentSelectedElement = input.required<IndexedNode | null>();
26+
readonly signalGraphAvailable = input<boolean>(false);
27+
2628
readonly viewSource = output<string>();
2729
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
28-
readonly toggleSignalGraph = input<() => void>();
30+
readonly showSignalGraph = output<FlatNode | null>();
2931
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<ng-property-view
44
(inspect)="inspect.emit($event)"
55
(viewSource)="viewSource.emit(directive.name)"
6+
(showSignalGraph)="showSignalGraph.emit($event)"
67
[directive]="directive"
78
/>
89
</div>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export class PropertyTabBodyComponent {
2323
readonly currentSelectedElement = input.required<IndexedNode>();
2424
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
2525
readonly viewSource = output<string>();
26+
readonly showSignalGraph = output<FlatNode>();
2627

2728
readonly currentDirectives = computed(() => {
2829
const selected = this.currentSelectedElement();

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
[treeControl]="panel.controls().treeControl"
3535
(updateValue)="updateValue($event)"
3636
(inspect)="handleInspect($event)"
37+
(showSignalGraph)="showSignalGraph.emit($event)"
3738
/>
3839
</mat-expansion-panel>
3940
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export class PropertyViewBodyComponent {
5151
readonly directiveStateControls = input.required<DirectiveTreeData>();
5252

5353
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
54+
readonly showSignalGraph = output<FlatNode>();
5455

5556
protected readonly dependencies = computed(() => {
5657
const metadata = this.controller().directiveMetadata;

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.html

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.html
+10Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@
2929
<span class="value">
3030
{{ node.prop.descriptor.preview }}
3131
</span>
32+
@if (isSignal(node)) {
33+
<button
34+
class="show-signal-btn"
35+
type="button"
36+
matTooltip="Show signal graph snapshot"
37+
(click)="showGraph($event, node)"
38+
>
39+
<mat-icon>schema</mat-icon>
40+
</button>
41+
}
3242
</div>
3343
</mat-tree-node>
3444
</mat-tree>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss
+21Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,27 @@
3838
margin-left: 18px;
3939
}
4040

41+
.show-signal-btn {
42+
border-radius: 50%;
43+
width: 16px;
44+
height: 16px;
45+
border: none;
46+
background: var(--quinary-contrast);
47+
color: var(--primary-contrast);
48+
vertical-align: text-bottom;
49+
padding: 0;
50+
cursor: pointer;
51+
52+
&:hover {
53+
background: var(--dynamic-blue-02);
54+
color: var(--septenary-contrast);
55+
}
56+
57+
mat-icon {
58+
top: 2px;
59+
}
60+
}
61+
4162
.property-list {
4263
margin: 5px 5px 5px 15px;
4364
mat-tree-node {

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts
+15-2Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9+
import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
10+
import {MatTooltip} from '@angular/material/tooltip';
11+
import {MatIcon} from '@angular/material/icon';
912
import {FlatTreeControl} from '@angular/cdk/tree';
10-
import {Component, input, output} from '@angular/core';
1113

1214
import {FlatNode} from '../../property-resolver/element-property-resolver';
1315
import {PropertyDataSource} from '../../property-resolver/property-data-source';
14-
import {MatIcon} from '@angular/material/icon';
1516
import {PropertyEditorComponent} from './property-editor.component';
1617
import {PropertyPreviewComponent} from './property-preview.component';
1718
import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular/material/tree';
@@ -20,6 +21,7 @@ import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular
2021
selector: 'ng-property-view-tree',
2122
templateUrl: './property-view-tree.component.html',
2223
styleUrls: ['./property-view-tree.component.scss'],
24+
changeDetection: ChangeDetectionStrategy.OnPush,
2325
imports: [
2426
MatTree,
2527
MatTreeNode,
@@ -28,13 +30,15 @@ import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular
2830
PropertyPreviewComponent,
2931
PropertyEditorComponent,
3032
MatIcon,
33+
MatTooltip,
3134
],
3235
})
3336
export class PropertyViewTreeComponent {
3437
readonly dataSource = input.required<PropertyDataSource>();
3538
readonly treeControl = input.required<FlatTreeControl<FlatNode>>();
3639
readonly updateValue = output<any>();
3740
readonly inspect = output<any>();
41+
readonly showSignalGraph = output<FlatNode>();
3842

3943
hasChild = (_: number, node: FlatNode): boolean => node.expandable;
4044

@@ -60,4 +64,13 @@ export class PropertyViewTreeComponent {
6064
newValue,
6165
});
6266
}
67+
68+
isSignal(node: FlatNode) {
69+
return node.prop.descriptor.containerType?.includes('Signal');
70+
}
71+
72+
showGraph(event: Event, node: FlatNode) {
73+
event.stopPropagation();
74+
this.showSignalGraph.emit(node);
75+
}
6376
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.html

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.html
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@
99
[directiveOutputControls]="directiveOutputControls()!"
1010
[directiveStateControls]="directiveStateControls()!"
1111
(inspect)="inspect.emit($event)"
12+
(showSignalGraph)="showSignalGraph.emit($event)"
1213
></ng-property-view-body>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts

Copy file name to clipboardExpand all lines: devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export class PropertyViewComponent {
2323
readonly directive = input.required<{name: string}>();
2424
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
2525
readonly viewSource = output<void>();
26+
readonly showSignalGraph = output<FlatNode>();
2627

2728
private _nestedProps = inject(ElementPropertyResolver);
2829

‎devtools/projects/ng-devtools/src/lib/shared/button/BUILD.bazel

Copy file name to clipboard
+43Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
2+
load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
3+
load("//devtools/tools:ng_project.bzl", "ng_project")
4+
load("//devtools/tools:typescript.bzl", "ts_test_library")
5+
6+
package(default_visibility = ["//devtools:__subpackages__"])
7+
8+
sass_binary(
9+
name = "button_component_styles",
10+
src = "button.component.scss",
11+
deps = [
12+
"//devtools/projects/ng-devtools/src/styles:typography",
13+
],
14+
)
15+
16+
ng_project(
17+
name = "button",
18+
srcs = ["button.component.ts"],
19+
angular_assets = [
20+
":button_component_styles",
21+
],
22+
interop_deps = [
23+
"//packages/core",
24+
],
25+
)
26+
27+
ts_test_library(
28+
name = "button_test",
29+
srcs = ["button.component.spec.ts"],
30+
interop_deps = [
31+
":button",
32+
"//packages/core/testing",
33+
"//packages/platform-browser",
34+
],
35+
)
36+
37+
karma_web_test_suite(
38+
name = "test",
39+
visibility = ["//visibility:public"],
40+
deps = [
41+
":button_test",
42+
],
43+
)

‎devtools/projects/ng-devtools/src/lib/shared/button/button.component.scss

Copy file name to clipboard
+18Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@use '../../../styles/typography';
2+
3+
:host {
4+
@extend %body-01;
5+
border: none;
6+
cursor: pointer;
7+
padding: 0.375rem 0.75rem;
8+
9+
&.size-compact {
10+
padding: 0.1rem 0.5rem;
11+
}
12+
13+
&.type-primary {
14+
border-radius: 2rem;
15+
background: var(--dynamic-blue-02);
16+
color: var(--septenary-contrast);
17+
}
18+
}

‎devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts

Copy file name to clipboard
+44Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {ComponentFixture, TestBed} from '@angular/core/testing';
10+
import {ButtonComponent} from './button.component';
11+
12+
describe('ButtonComponent', () => {
13+
let component: ButtonComponent;
14+
let fixture: ComponentFixture<ButtonComponent>;
15+
let element: Element;
16+
17+
beforeEach(async () => {
18+
await TestBed.configureTestingModule({
19+
imports: [ButtonComponent],
20+
}).compileComponents();
21+
22+
fixture = TestBed.createComponent(ButtonComponent);
23+
component = fixture.componentInstance;
24+
element = fixture.debugElement.nativeElement;
25+
fixture.detectChanges();
26+
});
27+
28+
it('should be primary type by default', () => {
29+
expect(component.btnType()).toEqual('primary');
30+
expect(element.classList.contains('type-primary')).toBeTrue();
31+
});
32+
33+
it('should be standard size by default', () => {
34+
expect(component.size()).toEqual('standard');
35+
expect(element.classList.contains('size-compact')).toBeFalse();
36+
});
37+
38+
it('should be compact size', () => {
39+
fixture.componentRef.setInput('size', 'compact');
40+
fixture.detectChanges();
41+
42+
expect(element.classList.contains('size-compact')).toBeTrue();
43+
});
44+
});

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.