617 Commits

Author SHA1 Message Date
Kam aaac1bcd79 fix(devtools): restore build under stricter ts_project deps
The rules_angular bump in #69410 made ts_project require every `deps`
entry to provide the JsInfo provider. `esbuild_base` listed
`//packages:package_json` in its deps, but `esbuild-base.config.mts` never
imports or reads package.json, so the dependency is unnecessary and now
breaks analysis (`//packages:package_json` is a `copy_to_bin` target that
provides only DefaultInfo). Remove it.

(cherry picked from commit aa7d9fcc61)
2026-06-19 11:37:22 +02:00
Cameron Smick 152601ed94 refactor(core): add childSignalProp to ReactiveNodeKind
Add `childSignalProp` to `ReactiveNodeKind` in order to consolidate `ReactiveNodeKind` types and enable Client-Only Wiz to use it.

(cherry picked from commit ae6d8dae75)
2026-06-17 20:03:17 +00:00
Matthieu Riegler 4183e11aac refactor(devtools): ensure code is escaped
By stringifying twice we ensure the code is escape before building the string template.

(cherry picked from commit 74fa0588b1)
2026-06-16 15:25:40 +00:00
Aleksander Bodurri 61dbc2bf91 feat(devtools): improve transfer state tab
- promote to default-on (remove opt-in setting and gear-menu toggle)
- replace the <pre> value cell with a collapsible JSON tree
- add key filter and column sort (size sorts by raw bytes)
- show an educational empty state when the app has no transfer state
- iterate every root in the directive forest and merge their state
- guard size calculation against undefined and circular references
- register listener once with DestroyRef cleanup; add a loading timeout
- distinguish array/string badge colors via theme-aware tokens
- responsive value cell width; flex-based table scroll
- add a component spec; seed the harness fixture with more demo data

(cherry picked from commit 06db706238)
2026-06-08 19:47:19 +00:00
Matthieu Riegler 592b121209 refactor(devtools): Prevent cross-tab privilege escalation
The background script must not rely on the user-controllable `port.name` to authenticate DevTools panel connections.

(cherry picked from commit 7896e74222)
2026-06-03 22:47:39 +00:00
bravesasha c47a5ac971 refactor(devtools): remove unnecessary async from serializeTransferState
Remove unnecessary `async`/`Promise<void>` from `serializeTransferState` and the
redundant `async () =>` wrapper in `provideAppInitializer` — the function contains
no async operations, so this is a zero behavior change cleanup.

(cherry picked from commit a28604be02)
2026-06-03 22:42:26 +00:00
Matthieu Riegler 0d2e90d479 refactor(devtools): Harden props navigation
To prevent any unwanted access/changes to some props like the `prototype` or `constructor`

(cherry picked from commit 752fb476eb)
2026-06-03 18:55:05 +02:00
Cameron Smick 76a8c87725 refactor(core): Split the ng global into internal and external objects
Split the `ng` global interface into two interfaces:
* `ExternalCoreGlobalUtils` includes all the functionality which has been shipped in a long-lived Angular version externally and which is subject to the versioning constraints described above.
* `InternalCoreGlobalUtils` includes internal-only functionality which has **not** been shipped in a long-lived Angular version.

This split means that all APIs in `InternalCoreGlobalUtils` can be iterated and evolved at a much faster pace. Angular DevTools can support those features, and we can make breaking changes more-or-less whenever we want. The downside is that external Angular developers cannot take advantage of those APIs or else we would be subject to the same versioning constraint we're trying to avoid here.

This means we can use `InternalCoreGlobalUtils` as a kind of "beta" channel for new DevTools APIs. Once that functionality is validated and the design is stabilized, the feature can be moved into `ExternalCoreGlobalUtils` and made available for external Angular developers when we're ready to commit to the long-lived version constraint. This will hopefully help us strike a better balance between iterating on new APIs quickly and maintaining stable APIs for external Angular users.

(cherry picked from commit d069c55ab4)
2026-05-27 16:37:34 -07:00
Cameron Smick 62287510b8 refactor(devtools): make the hydration property of DevToolsNode optional
Make the `hydration`` property of `DevToolsNode`` optional as frameworks like Client-Only Wiz don't have the same hydration concept as Angular and will not set one for nodes returned from `getComponentForest`.

(cherry picked from commit 23f3894c40)
2026-05-27 10:54:35 -07:00
Cameron Smick 02a6970819 refactor(devtools): make the DevToolsNode element property optional
The Angular DevTools Extension doesn't use the `element` property in Client-Only Wiz apps. Once the new `ng.getComponentForest`` function is implemented, Client-Only Wiz could provide `ComponentTreeNode`s without an `element` property. This change supports that case by making the `element` property optional.

(cherry picked from commit dbceef6221)
2026-05-19 13:04:53 -07:00
Cameron Smick 89dcb8eacc refactor(devtools): Modify buildDirectiveForest to set default values for properties that will not be included in the forest returned by non-Angular frameworks.
Set default values for the `directives`, `element`, `hydration`, and `component.isElement` properties of every `ComponentTreeNode` returned by `ng.getComponentForest` for non-Angular apps.

(cherry picked from commit 3c255bccc1)
2026-05-19 13:04:20 -07:00
Cameron Smick d30f74c02b refactor(devtools): add optional injector property to DevToolsNode and IndexedNode types
Add an optional injector property to the DevToolsNode and IndexedNode types. Features that require an injector use the injector stored on the node, if it exists, and fall back to getInjectorFromElementNode if it doesn't.

(cherry picked from commit 0cf8a61e58)
2026-05-19 13:04:20 -07:00
Cameron Smick cbe1e1d51d refactor(devtools): Modify buildDirectiveForest to call ng.getComponentForest if it exists.
A new ng global function, ng.getComponentForest, is being added to allow the framework to provide the component forest without writing metadata to the DOM. This will allow devtools to display components that don't render any DOM.

(cherry picked from commit 50c0ce8275)
2026-05-19 13:04:20 -07:00
Aleksander Bodurri c88e2149e4 refactor(devtools): use WeakRef in idToInjector map for injector cleanup
Replace the manual injectorsSeen cleanup mechanism with WeakRef and FinalizationRegistry. The old approach worked but coupled cleanup to the UI change detection and required tracking seen injectors across traversal. WeakRef lets the browser handle this naturally, removing the injectorsSeen set and the manual cleanup loop.

(cherry picked from commit 84d757446b)
2026-05-12 11:37:13 -07:00
hawkgs 1cb2e6bf5b feat(devtools): improve value highlighting in object previews
Introduce a more fine-grained value preview highlighting based on the property type in the `ng-object-tree-explorer`.
2026-05-05 17:06:41 -07:00
hawkgs f8045272b5 refactor(devtools): update object value previews
Improve BigInt, function and object/class instance value previews during state serialization.
2026-05-05 17:06:41 -07:00
hawkgs 93b5496ee8 refactor(devtools): minor improvements of the resolution path UI
Change the string representation of `InjectionToken`s; Add an explanatory label to the visualization.
2026-05-05 09:34:57 -07:00
Matthieu Riegler d91070ee4f refactor(devtools): cleanup
This are not the droids you are looking for.
2026-05-01 15:59:40 -07:00
Georgi Serev 9d803c51f4 feat(devtools): create a new settings menu
Create a new settings menu with more available space for new options and better organization and classification.
2026-05-01 15:54:26 -07:00
Matthieu Riegler ef38017418 build: move devtools only deps out of the workspace
This reduces the clutering of the workspace package.
2026-04-28 13:05:33 -07:00
Matthieu Riegler 4ad3a1fe37 refactor(core): Don't throw when there are not async metadata
In the context of AOT tests, component with defer blocks no longer throw on instanciation if the component is not overridden (with `overrideComponent`)

Prior to this change, all components with a `@defer` block would throw if `compileComponents` was not invoked.

In none-JIT apps, this change makes `compileComponents()` uneccesary.
2026-04-27 17:04:09 -07:00
Matthieu Riegler 789cbd58b8 refactor(devtools): drop the semver-dsl page
We can use the semver package directly.
2026-04-23 11:37:30 -07:00
Cameron Smick e96673ff64 refactor(devtools): make the DevToolsNode directives property optional
Client-Only Wiz doesn't have the concept of a directive. Once the new ng.getComponentForest function is implemented, Client-Only Wiz cowilluld provide `ComponentTreeNode`s without a `directives`` property. This change supports that case by making the `directives` property optional.
2026-04-23 11:36:00 -07:00
Matthieu Riegler c77f16de93 refactor(devtools): Use @Service instead of @Injectable
Dogfooding is always a good idea.
2026-04-23 11:30:12 -07:00
Doug Parker 51c3a11d69 release: bump Angular DevTools version to 1.14.1 2026-04-08 12:15:55 -07:00
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
Aleksander Bodurri 33b001d478 fix(devtools): clean up removed directive entries in IdentityTracker to prevent memory leak
The IdentityTracker singleton never deleted entries from its internal
  maps (_currentDirectiveId, _currentDirectivePosition, isComponent) for
  destroyed directives. This caused the maps to grow monotonically for
  the entire DevTools session, retaining references to destroyed component
  instances and preventing garbage collection.

  The cleanup was intentionally commented out because the profiler needs
  to resolve IDs and positions of removed components during recording.

  Introduce `setProfilingActive()` to gate cleanup: when profiling is
  inactive, removed entries are deleted immediately during `index()`.
  When profiling is active, removals are deferred into a `_pendingRemovals`
  set and flushed once profiling stops via `capture.ts` start/stop calls.
2026-04-06 11:36:07 -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
Aleksander Bodurri 36edf4870f fix(devtools): fix incorrect logic in destroy function for ChromeMessageBus
Destroy uses window.removeEventListener but the ChromeMessageBus doesn't actually depend on a window object.

In practice this code is unlikely to ever be reached. If a tab is closed the entire context script JS process is killed so this is not an bug that would be very common or even reachable. That being said for correctness this should not be using window.
2026-03-23 14:51:27 -07:00
splincode 25dad82e43 refactor(devtools): improve test descriptions by fixing spelling
Fixed misspellings in test descriptions in devtools/projects/shell-browser/src/app/tab_manager_spec.ts: recieved/recieves → received/receives in three it(...) titles.
2026-03-23 10:32:39 -07:00
Doug Parker 785735b7a5 release: bump Angular DevTools version to 1.14.0 2026-03-18 14:11:47 -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
hawkgs 77d7378ffd 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.
2026-03-16 10:03:42 -06:00
Alan Agius 55b2e95fef build: disable sourcemaps in esbuild_config by setting sourcemap = False
This is now possible due to a fix in esbuild rules.
2026-03-12 14:54:43 -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
Alan Agius 4febb8ad31 build: update aspect_rules_js to 3.0.2 (#67518)
This updates the major version of `aspect_rules_js`.

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
Alan Agius 71c9c6d5e5 release: bump Angular DevTools version to 1.13.0 2026-03-11 14:23:20 +01: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
Matthieu Riegler 263b819a75 refactor(devtools): prevent spamming the message bus
This commit adds some state on the bus to prevent sending unecessary messages to the main window.
2026-03-09 10:45:58 -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
Alan Agius 786ea441e9 build: force external sourcemaps for esbuild targets
Update the `esbuild` macro in devtools to use
`external` sourcemaps by default and remove the ability to override the `sourcemap` and `sources_content` options.
This change is necessary to ensure that the build is deterministic and 100% reproducible as otherwise Firefox will not publish the build.
2026-03-06 12:13:18 -08: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
Doug Parker 01eadde28e release: bump Angular DevTools version to 1.12.0 2026-02-25 17:44:52 -08:00
Doug Parker 8af73eb324 docs(devtools): add debugging instructions
This adds instructions on how to load and debug the Angular DevTools extension in Chrome locally, including where all the relevant sources are.
2026-02-24 09:28:05 -08:00