The Angie illustrations on the DevTools empty-state screens (added in
#69786) shipped with an empty `alt` and `aria-hidden="true"`. Give them
descriptive alt text and drop `aria-hidden` to improve accessibility.
(cherry picked from commit 00699f3e66)
The DevTools state screens (Angular not detected, unsupported version,
production build) showed a plain Material icon above the message. Show
the Angie mascot instead, matching the treatment already used across
angular.dev (the 404 page, empty search, the preview error state).
Each screen uses a pose that fits its message: the dizzy `error` pose for
"application not detected", `coding-01` for the version-upgrade prompt,
and `sad` for the production build notice.
(cherry picked from commit d4f2313e4d)
Move the DebugSignalGraph, DebugSignalGraphEdge, and DebugSignalGraphNode interfaces from packages/core/src/render3/util/signal_debug.ts into the packages/core/primitives/devtools/src package. This decouples the signal graph debug types from runtime render3 utilities and allows devtools and internal core tooling to import them directly from primitives as type-only exports.
(cherry picked from commit d997a96b47)
Add `childSignalProp` to `ReactiveNodeKind` in order to consolidate `ReactiveNodeKind` types and enable Client-Only Wiz to use it.
(cherry picked from commit ae6d8dae75)
- 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)
The background script must not rely on the user-controllable `port.name` to authenticate DevTools panel connections.
(cherry picked from commit 7896e74222)
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)
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)
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)
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)
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)
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)
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)
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.
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.
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.
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.
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.
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.
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.
Fixed misspellings in test descriptions in devtools/projects/shell-browser/src/app/tab_manager_spec.ts: recieved/recieves → received/receives in three it(...) titles.
Utilize the new `ng.getControlFlowBlocks` API by refactoring the existing render tree extraction code; Slighly modify @for loop details view
PR Close#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
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.
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.
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`.
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.
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.
Kam