Commit graph

310 commits

Author SHA1 Message Date
Cameron Smick
236d6d4946 refactor(devtools): pass node to logValue to log the appropriate prop to the console
The "Log to console" button in the prop-actions-menu component incorrectly logs the entire props object rather than the value of the individual prop with which the button is associated. Passing the `node` to the logValue function fixes the prop lookup logic and logs the appropriate prop value to the console.
2026-04-07 09:35:12 -07:00
Georgi Serev
68a8396baa
refactor(devtools): show appropriate change detection label in the directive tree
Depending on the client app version, either show "OnPush" (pre-v22) or "Eager" (v22+); As part of the change, `APP_DATA` root signal has been introduced along with a minor bug fix related to component metadata displaying.
2026-04-02 11:37:34 -07:00
hawkgs
687e75c42a refactor(devtools): update directive forest chevrons positioning method
Update how chevrons of each expandable directive forest item are positioned by being more explicit.
2026-03-30 12:14:18 +02:00
hawkgs
0ad18ee933 refactor(devtools): drop explicit OnPush change detection strategy
Drop explicit `ChangeDetectionStrategy.OnPush` from the apps since it's now the default.
2026-03-25 12:58:11 -07:00
Matthieu Riegler
eae8f7e30b feat(core): Set default Component changeDetection strategy to OnPush
The default change detection strategy is now OnPush.

BREAKING CHANGE: Component with undefined `changeDetection` property are now `OnPush` by default. Specify `changeDetection: ChangeDetectionStrategy.Eager` to keep the previous behavior.
2026-03-24 16:25:02 -07:00
hawkgs
f3e6698455 refactor(devtools): utilize new unified getControlFlowBlocks API (#66167)
Utilize the new `ng.getControlFlowBlocks` API by refactoring the existing render tree extraction code; Slighly modify @for loop details view

PR Close #66167
2026-03-16 14:17:25 -07:00
Hryhorii Avcharov
41a392d85e feat(devtools): add support for @for control flow blocks in directive explorer (#66167)
- Handle @for data in tree strategies and view extraction
- Show @for details in the UI and property tab
- Persist @for state and update UI accordingly

PR Close #66167
2026-03-16 14:17:25 -07:00
hawkgs
dc174d1053 refactor(devtools): introduce prop-actions-menu
Implement a context menu and add it to each property in the properties pane in order to optimize the available space by consolidating the action buttons of property items with multiple of them. Property items with a single action will retain their original behavior where the action button is directly available to click right after the displayed value.
2026-03-16 12:07:32 -06:00
Alan Agius
667219230a test: remove duplicate tests (#67518)
These tests are duplicate and have been removed.

PR Close #67518
2026-03-11 13:37:33 -07:00
hawkgs
832d428d0e refactor(devtools): change upstream and downstream signal deps icons
Update the icons with better custom ones; Introduce an icon component and an assets folder.
2026-03-11 09:25:34 -07:00
hawkgs
55c57d4af1 refactor(devtools): make signal graph visualizer reusable
Make the signal visualizer reusable by detaching it from the signal graph manager.
2026-03-10 10:14:55 -07:00
hawkgs
ed3dc10fea refactor(devtools): fix browser-specific styles infra
Fix browser-specific styles infrastructure. PR #62786 cleans up part of the code, but there are still services that attempt to load these stylesheets on `main`.
2026-03-09 10:21:51 -07:00
Cameron Smick
d4948fb6fc feat(devtools): Add preview for childSignalProp nodes to the signals-visualizer and signal-details components.
The childSignalProp nodes were added to make it easier for users to visualize and understand when signals were being passed between components. Adding the preview for the new nodes makes the data being displayed equivalent to that of other reactive nodes in the signal graph.
2026-03-04 14:28:32 -08:00
Georgi Serev
a3731a13c9
refactor(devtools): rename directive-explorer component names and folder structure
Rename `property-tab` and `signals-view` to `property-pane` and `signal-graph-pane`, and their respective children, to property indicate their purpose and role; Move `diffing` to `directive-explorer`
2026-02-19 09:00:57 -08:00
Cameron Smick
2d9987869b refactor(devtools): Add a new childSignalProp DebugSignalGraphNode kind to represent a signal being passed to a child component as a prop.
The purpose for this change is to add nodes to the signal graph to make it clear when producer nodes, especially those that aren't consumed in the component being inspected, are passed to child components for consumption.
2026-02-13 10:09:59 -08:00
hawkgs
83da928206 fix(devtools): injector tree errors when inspecting null nodes
Due to explicit injector type checks, inspecting nodes that have type !== `environment` but at the same time are rendered in the Environment Injector tree, opening their details used to break the app. This change fixes this.
2026-02-13 09:33:37 -08:00
Georgi Serev
ece827e269
feat(devtools): add dependencies highlighting to the signal graph
Add ability to highlight the upstream and downstream dependencies path via the node details.
2026-02-11 14:37:51 -08:00
hawkgs
c32e732d3d fix(devtools): runtime error when a cluster preview node is missing
Fix the runtime error produced when a cluster preview node is missing triggered during a signal update.
2026-02-09 12:23:17 -08:00
hawkgs
c4abadb528 fix(devtools): duplicated props in the properties panel
Fix the diff algorithm that consequentially caused the duplicated props.
2026-02-09 07:54:31 -08:00
hawkgs
64d34da0b2 fix(devtools): signal node value preview for afterRenderEffect
Render an arrow function (`() => {}`) in the signal nodes in the graph that represent `afterRenderEffect`s.
2026-02-06 07:36:43 -08:00
AleksanderBodurri
35046d3dba feat(devtools): promote router tree to stable
Previous the router tree was an opt-in feature that required manual enablement in settings.

Now the router tree is enabled by default whenever the application supports it and routes are detected.
2026-02-02 11:06:42 -08:00
Georgi Serev
042471044d
refactor(devtools): snap to signal graph nodes selected from the properties panel
Snap to the signal graph node of a corresponding property when the user uses "Show 'prop' signal graph" button.
2026-01-28 18:33:37 +00:00
AleksanderBodurri
105274fe32 feat(devtools): mark special element injector providers as internal
Differentiates special providers like ElementRef from other providers in the DevTools UI.
2026-01-26 22:18:02 +00:00
hawkgs
adae4c7ab0 refactor(devtools): use object-tree-explorer in signal-value-tree
Employ the reusable `object-tree-explorer` in the `signal-value-tree` preview component.
2026-01-20 10:16:54 -08:00
hawkgs
2d4262cfbd fix(devtools): support for @defer-only blocks; defer declared blocks (#66546)
Add support for `@defer`-only blocks (previously, they weren't rendered in the component tree at all); Fix declared blocks section in the details

PR Close #66546
2026-01-20 18:16:32 +00:00
hawkgs
87f4797321 refactor(devtools): drop dagre graph type
Drop Dagre graph type since v7.0.14 introduces better typing.
2026-01-15 11:11:03 -08:00
hawkgs
721094788a refactor(devtools): snap to root node on signal graph render
Drop the old `ResizeObserver` and resize logic in favor of a simpler "snap to root node" (template or first node) functionality.
2026-01-15 11:10:26 -08:00
Georgi Serev
9273f1c3c2
feat(devtools): add resource visualization to the signal graph
Convert the signal graph to a Devtools-FE-specific signal graph that supports clusters; Add support for `resource` clusters; Introduce some improvements to the signal graph viz
2026-01-13 08:32:46 -08:00
hawkgs
e66aeac8d0 refactor(devtools): style the profiler dialogs to match the current design
Decrease the font size and tone down the paddings and margins. Use `ng-button` instead of `mat-button`.
2026-01-09 08:23:18 -08:00
hawkgs
bea5840864 refactor(devtools): add secondary type button
Add a secondary style/type button to `ng-button`.
2026-01-09 08:23:18 -08:00
AleksanderBodurri
241bdeb698 feat(devtools): create an info snackbar when a user logs a property
Previously there is no feedback when clicking this button in Angular DevTools itself, which can produce some confusion if the user does not have the browser console open as well, or if they accidentally turned on some filtering in the browser console.

Now Angular Devtools uses mat snack bar to inform the user that the task was successful
2026-01-07 13:40:45 -05:00
hawkgs
f05d0feac9 fix(devtools): injector tree initial root node snapping on prod
Fix initial broken root node snapping/focusing when the Injector Tree tab is opened in the production app.
2026-01-06 10:22:29 -05:00
hawkgs
4b7f7a550f fix(devtools): retain tree-viz snapped node on pre-render cleanup
Each tree-visualizer render cycle resets the snapped node in an effort to not end up with a non-existent snapped node. However, each render cycle doesn't constitute a completely different tree. This change retains the snapped node as long as it exists in the tree.
2026-01-06 10:22:29 -05:00
hawkgs
2d9e179188 perf(devtools): improve injector tree rendering performance
Introduce an equality function for transformed injector trees in order to omit redundant D3 tree visualization render cycles when the tree hasn't been changed.
2026-01-06 10:22:29 -05:00
Matthieu Riegler
6a94300179 refactor(devtools): use whenStable instead of detectChanges
This commits migrates the devtools tests toward to recommendations
and runs the tests in a zoneless config
2026-01-05 12:24:58 -05:00
Matthieu Riegler
6270bba056 ci: reformat files
This is after we've slightly changed a rule in #66056
2025-12-16 14:44:19 -08:00
Matthieu Riegler
af77b89e2a ci: reformat files
This is after we've slightly changed a rule in #66056
2025-12-16 09:24:36 -08:00
hawkgs
1a9bfa8542 fix(devtools): last supported version
Bump to 12, as the message suggests.
2025-12-12 08:04:50 -08:00
hawkgs
aee536c8ca refactor(devtools): improve the look of app state screens
Improve the look of "app not detected", "unsupported version" and "prod app not supported" screens.
2025-12-12 08:04:50 -08:00
hawkgs
0c4a5c599d fix(devtools): prod app detected screen
Do not call `getSupportedApis` in a prod app since it throws an error due to the absence of `ng`, which prevents the FE from getting the `ngAvailability` message and, respectively, the proper info screen that DevTools cannot be used on a prod app.
2025-12-08 09:21:16 -08:00
Georgi Serev
87e05e935c
refactor(devtools): create a reusable component for all prop mat-trees
Create a reusable component for object property inspection.
2025-12-04 11:44:00 -08:00
hawkgs
1d431a9637 fix(devtools): router tree not being rendered
Convert the `TreeVisualizer` to a signal, in the `TreeVisualizerComponent`, to ensure that the router tree render effect is always called; Use explicit `afterNextRender` phases.
2025-12-04 11:30:14 -08:00
Georgi Serev
2eaa4d54ad
fix(devtools): hide profiler node details when the frame is changed
Hide the details panel when the user selects a new frame.
2025-12-02 12:05:54 +01:00
Kristiyan Kostadinov
26e2092dd1 test: remove unnecessary test calls
Removes calls to `TestBed.configureTestingModule` since they aren't necessary.
2025-11-24 10:18:18 -05:00
SkyZeroZx
ed0647d2e6 refactor(devtools): add matcher and runGuardsAndResolvers support in router viewer
Enhance the Angular DevTools router viewer to display routes that use custom `matcher` functions and reflect the `runGuardsAndResolvers` configuration
2025-11-18 08:29:41 -08:00
hawkgs
e7a6e31a70 fix(devtools): refine when signal graph button is shown
Show the signal graph button only when a signal-graph-eligible node from the directive explorer is selected; Fix client app error when a `defer` node is selected (related)
2025-11-17 14:45:01 -08:00
Shuaib Hasan Akib
f87e9a02b5 refactor(devtools): clean up unused code and modernize component patterns
- Removed unused code and imports
- Migrated to signal-based input() APIs
- Added readonly to Angular-initialized inputs and removed explicit type annotations
- Updated templates to use self-closing tags for consistency
2025-11-17 08:40:15 -08:00
hawkgs
68d823a241 fix(devtools): show profiler exec details only if there are directives
Show the execution details of a captured frame entry only if there are recorded directives.
2025-11-17 08:39:36 -08:00
SkyZeroZx
4126ef1e94 fix(devtools): use isLazy flag to determine disabled state for action button
Refactors the logic that disables the action button for lazy-loaded routes.
Now relies on the isLazy property from the route data instead of string comparisons on the component field.
2025-11-14 08:47:05 -08:00
cexbrayat
c137f1fe91 docs: ExperimentalIsolatedShadowDom mentions 2025-11-14 08:41:13 -08:00