Implement component highlighting on change detection cycles along with embedding
the component-specific data to the directive/component tree explorer.
Closes#59057
PR Close#70254
Rename Timing API to Performance Track to better reflect the purpose of the actual feature;
Migrate the settings data object to match the new name and drop some redundant keys.
Enables direct navigation to Angular components from the Chrome Performance panel's flame graph.
This feature integrates Angular DevTools with Chrome's `setOpenResourceHandler` by registering a custom URL scheme (`angular-devtools://component/{instanceId}`).
Closes#63960
This refactoring renames the 'element' (tagName string) property of DevToolsNode to 'tagName' for clarity, as 'element' was ambiguous.
It also restores 'nativeElement' as a flat property (undoing the nesting introduced previously) because there are cases (like control flow blocks) where a tag name is present without an associated DOM node, making nesting inappropriate.
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`.
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.
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.
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.
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.
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
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.
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
- Stop indefinite `detectAngular` messages after the backend is installed.
- Do not attempt handshake with the BE (from content scripts) until it's installed.
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.
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)
Some properties (like gets) might throw when we try to read them.
With this commit we fail gracefuly and show a warning message for the property that can't be read.
fixes#56755
PR Close#64096
Addresses some cleanup items for the router tree:
- No longer loads router ng global APIs as a side effect of importing the router. Rather this is now a runtime step that occurs when provideRouter is called.
- No longer depends on router.navigateByUrl in Angular DevTools. There is now a dedicated global util for this
- Router instance logic no longer depends on token name
- Prevents navigating to lazy or redirect routes (these don't have an associated component)
PR Close#63081
Add "Show graph" button to the signal properties in the side pane only for Angular apps. This required storing the signal graph in a separate service.
PR Close#62853
It appears that the intent is to return an unlisten function when `on` is called. The message bus implementations indicate that. However, the `MessageBus` abstract class returns `void` instead.
Change to `on: () => void`.
PR Close#62898
Add transfer state tab, which is taking transfer state script by using APP_ID. Created internal api ɵgetTransferState to retrieve transfer state value from app into devtools app.
PR Close#62465
Use the packaged versions of the packages instead of the local ts_project dependencies to prevent multiple versions of the deps to enter test bundles
PR Close#62413
hawkgs