Commit graph

478 commits

Author SHA1 Message Date
hawkgs
cbb2266984 test(devtools): fix and update flaky component-tree tests
Due to the design of the `ng.getComponent` spy and a race condition where sometimes a `<script>` is added to the test DOM, the `getRootElements` tests used to fail sometimes because those `<script>`s were marked as roots which caused a distortion in the roots count checks. The commit addresses that and also adds an additional test for non-application root Angular components.

(cherry picked from commit 77d7378ffd)
2026-03-16 09:03:47 -07:00
Alan Agius
7907e982ee test: remove duplicate tests
These tests are duplicate and have been removed.
2026-03-11 13:35:26 -07:00
Matthieu Riegler
bd72571583 refactor(devtools): prevent spamming the message bus
This commit adds some state on the bus to prevent sending unecessary messages to the main window.

(cherry picked from commit 263b819a75)
2026-03-09 10:46:08 -07:00
hawkgs
79ac570c26 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`.

(cherry picked from commit ed3dc10fea)
2026-03-09 10:22:02 -07:00
Doug Parker
47486f8c49 release: bump Angular DevTools version to 1.11.0 2026-02-18 10:47:56 -08:00
hawkgs
9f4c025531 refactor(devtools): improve formatting of injector providers token labels
Use `InjectionToken.toString` for the string representation of `InjectionToken`s for better readibility.
2026-02-17 08:33:41 -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
Matthieu Riegler
302ea2ee46 fix(devtools): scope the message bus with URLs to prevent cross message interference
This prevents us from having detectAngular from running indefinitely.
2026-02-11 14:38:33 -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
Doug Parker
da1f61cfbd release: bump Angular DevTools version to 1.10.0 2026-02-04 14:46:56 -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
Alan Agius
4123ebf61e release: bump Angular DevTools version to 1.9.0 2026-01-28 10:52:59 +01: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
Kristiyan Kostadinov
d9c980a958 build: initial test of TypeScript 6
Resolves some initial test failures after updating to TypeScript 6.
2026-01-15 13:41:01 -08: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
Doug Parker
61614f6caa release: bump Angular DevTools version to 1.8.0 2026-01-14 14:14:04 -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
Jan Martin
2c9328639f release: bump Angular DevTools version to 1.7.0 2026-01-07 13:28:29 -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
hawkgs
8795e9f031 refactor(devtools): update extension icon
Change the color of the inactive extension from black to gray (for better contrast in dark mode) and slightly enlarge all of the icons.
2026-01-05 11:42:49 -05:00
hawkgs
eb5f5b61c3 refactor(devtools): rename detect angular script name
Drop the 'for-extension-icon' since the script is dealing only with the app detection.
2026-01-02 08:20:19 +01:00
hawkgs
0db09e33b1 fix(devtools): false positive app not detected
Since Manifest V3, the service worker (background) gets terminated after 30s of inactivity. This can break the initialization phase of DevTools or the BE-FE communication channel, if already initialized. To prevent that, we emit a heartbeat in a >30s interval.
2026-01-02 08:12:18 +01:00
Doug Parker
5a146b3256 release: bump Angular DevTools version to 1.6.4 2025-12-18 13:06:36 -08: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
83691704b7 refactor(devtools): slightly optimize extension initialization messaging
- Stop indefinite `detectAngular` messages after the backend is installed.
- Do not attempt handshake with the BE (from content scripts) until it's installed.
2025-12-15 09:52:52 -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
Jan Martin
954c546273 release: bump Angular DevTools version to 1.6.3 2025-12-10 11:37:13 -08:00
Joey Perrott
aa92f19307 build: update to bazel version 8.4.2
Update bazel to use version 8.4.2
2025-12-08 10:21:59 -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
Alan Agius
3e89577655 release: bump Angular DevTools version to 1.6.2 2025-12-03 13:18:27 +01:00
hawkgs
a5efc35ddf fix(devtools): router tree callables view source functionality
Fix a set of issues with the callable search algorithm and refactor it.
2025-12-03 10:07:20 +01: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