Commit graph

261 commits

Author SHA1 Message Date
Avcharov Hryhorii
aff8bb222c refactor(devtools): provide signalGraphEnabled via settings service (#63374)
signalGraphEnabled was previously passed down the component tree.
This change refactors the logic to use the settings service instead,
which already holds the value and allows sharing it across components.

PR Close #63374
2025-08-26 09:42:12 -07:00
Avcharov Hryhorii
1cb113cdec fix(devtools): prevent profiler bars flickering after change detection (#63350)
Without trackBy cdkVirtualFor rerenders full list after in each update

PR Close #63350
2025-08-26 09:41:08 -07:00
Joey Perrott
3df1dccebe refactor: various build and import specificer fixes for strict deps (#63323)
Change direct deps in bazel targets and import specifiers within files to maintain strict deps requirements ahead of enabling strict deps tests in the repo

PR Close #63323
2025-08-22 14:45:00 -07:00
hawkgs
863401b858 refactor(devtools): add property show graph button (#62853)
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
2025-08-20 09:04:24 +00:00
AleksanderBodurri
5115050928 fix(devtools): DOM traversal bug (#62719)
Previously, Angular devtools would mistakenly traverse the same DOM elements multiple times while doing traversal for the component tree explorer. This error case would occur when more than 1 Angular application root component was present on the same page and in distinct DOM branches.

Some example cases that did work previously:

```html
<app-root>
...
</app-root>
```

```html
<app-root>
...
<app-root-2></app-root-2>
...
</app-root>
```

An example of where it would enter the irregular behaviour

```html
<app-root>
...
</app-root>
<app-root-2>
...
</app-root-2>
```

Now, we properly ignore duplicate DOM paths when looking for application and non-application root component to begin the Angular DevTools component discovery logic.

PR Close #62719
2025-08-18 15:43:09 +00:00
Joey Perrott
c35c0c7f2f build: update to bazel 7.6.0 (#63096)
Update to later version of bazel

PR Close #63096
2025-08-14 13:01:30 +02:00
hawkgs
7ecf13db06 refactor(devtools): improve router tree search UX (#63107)
Improve the search functionality of the router tree by making the results more distinguishable.

PR Close #63107
2025-08-13 09:27:26 -07:00
hawkgs
d47ea29b89 refactor(devtools): keep TreeVisualizer snapped node on focus (#62982)
Keep `TreeVisualizer` snapped node on focus when the container/split is being resized.

PR Close #62982
2025-08-11 12:26:31 -07:00
hawkgs
c0bfe23bc9 refactor(devtools): save theme preference (#63050)
Save the theme preference in the settings store.

PR Close #63050
2025-08-08 08:58:14 -07:00
Ryan Bendel
d24d5742db feat(platform-browser): Add IsolatedShadowDom encapsulation method (#62723)
IsolatedShadowDom encapsulation fixes style leakage in Shadowdom encapsulation by removing sharedstyleshost from dom-renderer IsolatedShadowdom class. Updates docs.

PR Close #62723
2025-08-06 16:48:37 +02:00
hawkgs
533f8e48fd refactor(devtools): save transfer state tab state in the settings store (#62429)
Save the Transfer State tab state in the Settings store.

PR Close #62429
2025-08-06 15:12:00 +02:00
hawkgs
b66ad99020 refactor(devtools): implement a migration mechanism for the settings store (#62429)
Implement a simple mechanism that allows settings store data to be migrated, if needed.

PR Close #62429
2025-08-06 15:12:00 +02:00
hawkgs
cb8d30a293 refactor(devtools): save user settings in the settings store (#62429)
Save user settings in the `SettingsStore`.

NOTE: The theme is omitted since the change is not trivial and it will be handled in a separate PR.

PR Close #62429
2025-08-06 15:12:00 +02:00
hawkgs
1cdb54559d refactor(devtools): implement settings store (#62429)
Introduces a set of services tasked with saving user settings.

PR Close #62429
2025-08-06 15:12:00 +02:00
hawkgs
3d9fc3e09c fix(devtools): injector tree root refocus on CD (#62987)
Fixes the unwanted root node refocus on change detection in the Injector Tree visualizations.

PR Close #62987
2025-08-05 10:07:29 +02:00
Matthieu Riegler
65f587bc5d fix(devtools): Display falsy signal values correctly (#62919)
falsy value would display their preview because of the logical or.

fixes #55727

PR Close #62919
2025-08-01 12:36:45 +02:00
Milo
b0f0b6d836 refactor(devtools): update graph effect colors, fix graph animations (#62912)
make effects purple instead of invisible, fix epoch animations for new nodes, and remove graph transitions when switching between two components in the component tree

PR Close #62912
2025-08-01 12:36:09 +02:00
Joey Perrott
cbc258eec8 build: remove ts_project_interop infrastructure (#62908)
Remove the interop macros and final usages

PR Close #62908
2025-07-31 09:12:58 +00:00
Joey Perrott
008ed216d3 build: remove usages of runtime_rnjs_interop (#62908)
Remove all usages of the runtime_rnjs_interop feature

PR Close #62908
2025-07-31 09:12:58 +00:00
hawkgs
a1318af71a fix(devtools): truncate text in the property tab header (#62868)
Handle very long component names when the "Show Signal Graph" button is visible.

PR Close #62868
2025-07-29 12:17:07 +00:00
hawkgs
82d585f49b fix(devtools): transfer state settings menu item text size (#62851)
Fix the text size of the transfer state settings menu item. Also, rename "Show" to "Enable" to match the rest of the non-default tabs text.

PR Close #62851
2025-07-28 14:15:46 +02:00
Milo
3f720044f9 refactor(devtools): cleanup a few devtools bazel files (#62786)
remove unused styles, update to es2022

PR Close #62786
2025-07-25 10:03:42 +02:00
Hryhorii Avcharov
a2f366f629 feat(devtools): add transfer state tab (#62465)
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
2025-07-22 08:41:10 -04:00
hawkgs
cc468efc74 refactor(devtools): introduce docs-ref-button (#62685)
Used for external Angular docs links.

PR Close #62685
2025-07-21 12:21:55 -04:00
hawkgs
009a27df3f refactor(devtools): make the component metadata menu more prominent (#62685)
Add an arrow icon to indicate that this is an expansion panel. Reduce the active area (which toggles the menu) to the text only.

PR Close #62685
2025-07-21 12:21:55 -04:00
AleksanderBodurri
08d37649af fix(devtools): stop reseting currentlyMatchedIndex when a node is selected in the component explorer (#62727)
This was causing some unintended behaviour when paired with our new zoneless configuration. I'm not sure why currentlyMatchedIndex was getting set to -1 here. With this removed it seems like things are working as expected. Previously a select call would reset this index *after* a search filter was applied, which would cause weird behaviour with the "next" and "prev" buttons.

PR Close #62727
2025-07-21 12:15:02 -04:00
hawkgs
d441ac4533 fix(devtools): make some containers scrollable (#62703)
Add scrolling to some containers in the app.

PR Close #62703
2025-07-21 09:32:58 -04:00
hawkgs
d3b770d636 refactor(devtools): restyle the signal details panel (#62681)
Restyle the details panel to match and be inline with the existing UI/style.

PR Close #62681
2025-07-18 07:00:57 -04:00
Matthieu Riegler
ea2339e1e4 refactor(devtools): replace/remove animations from the animation package (#62633)
Animations can be handled by the styling directly

PR Close #62633
2025-07-17 14:24:37 -04:00
hawkgs
2f7f9569f7 refactor(devtools): rearrange main toolbar menu buttons (#62684)
Place the version in the info menu and move both the info and gear buttons to the right-hand side of the toolbar.

PR Close #62684
2025-07-17 14:06:31 -04:00
Matthieu Riegler
8caaf5ed22 refactor(devtools): Migrate the devtools app to zoneless. (#62454)
This commit also removed the useless ngZone invocations

PR Close #62454
2025-07-17 13:55:36 -04:00
Milo
2e6c2ff52c refactor(devtools): disable view source button if source function is not available (#62678)
if there is no debuggableFn, we shouldn't allow users to click the view source button

PR Close #62678
2025-07-17 13:28:35 -04:00
hawkgs
33f3193fe2 refactor(devtools): show profiler progress bar during recording (#62547)
Show the profiler progress bar during the full recording instead of only when there are no frames.

PR Close #62547
2025-07-15 07:58:33 -07:00
Joey Perrott
5eeb9f3e7e build: move all rule/macro loading into devtools/defaults.bzl (#62627)
Move all of our loading into a local defaults.bzl file instead of mixed loading via tools/defaults and devtolls/defaults

PR Close #62627
2025-07-14 15:47:05 -07:00
Milo
cfa44df503 refactor(devtools): simplify vendored deps to make importing into google3 easier (#62567)
prefer using node_modules/webtreemap, and remove memo-decorator

PR Close #62567
2025-07-14 14:48:17 -07:00
Matthieu Riegler
292015b550 refactor(devtools): Use OnPush on all components (#62610)
The end goal is to move the devtools app to zoneless.

PR Close #62610
2025-07-14 11:35:47 -07:00
Matthieu Riegler
aef489dae5 refactor(devtools): use signal inputs for split component (#62550)
This also introduced a local direction signal so it can be written from the outside

PR Close #62550
2025-07-11 10:37:50 -07:00
Milo
1de7ab28b4 fix(devtools): fix some build errors from g3 typescript (#62412)
this avoids some issues with casting types

PR Close #62412
2025-07-11 10:35:22 -07:00
AleksanderBodurri
bf292bdcae test(devtools): revive cypress tests (#61972)
Previously these tests would run automatically when Angular DevTools lived in another repo. These files have continued to live here but have not been running automatically on each PR.

Now, these test files have been revived to run properly with our changes since the repo merge. This is a first step to reviving our e2e testing.

Next steps include writing cypress tests for new features like Injector Graph, Router tree, signals visualizations, etc.

PR Close #61972
2025-07-11 10:33:50 -07:00
hawkgs
c75a88f863 fix(devtools): make font sizes consistent (#62575)
Fix the inconsistent font sizes that are result of Material changes.

PR Close #62575
2025-07-10 10:29:15 -07:00
hawkgs
2a992dd641 refactor(devtools): cleanup Material leftovers (#62575)
Cleanup some Material leftovers and drop some redundant markup.

PR Close #62575
2025-07-10 10:29:14 -07:00
hawkgs
3aa821d003 refactor(devtools): improve breadcrumbs component (#62575)
Drop the redundant and lefover code. Slightly update the look.

PR Close #62575
2025-07-10 10:29:14 -07:00
hawkgs
85e387a090 refactor(devtools): unify table styles (#62466)
Make tabular data styles consistent across the app, whether that's a native or Material table.

PR Close #62466
2025-07-07 15:24:24 +00:00
hawkgs
70e4c3f6a6 refactor(devtools): make tree visualizations accessible (#62396)
Improve the accessibility of the SVG tree visualizations by employing `<title>` and `aria-labelledby`.

PR Close #62396
2025-07-03 09:35:03 +00:00
hawkgs
7eb4a07519 refactor(devtools): remove leftover code from router-tree template (#62396)
Remove some SVG visualization leftover code from the template.

PR Close #62396
2025-07-03 09:35:02 +00:00
Joey Perrott
50a69dee6c build: only require workspace build packages for web tests when provided (#62443)
Only use the builds from the workspace as for the bootstrap scripts for web testing

PR Close #62443
2025-07-03 08:34:25 +00:00
Joey Perrott
85b3ae2e3e build: migrate devtools to use packaged version of @angular/* packages (#62413)
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
2025-07-02 16:10:25 +00:00
Milo
c30f4eebc1 refactor(devtools): update signal body on change (#62410)
when the epoch of a signal changes, update the preview text

PR Close #62410
2025-07-02 14:27:27 +00:00
hawkgs
d9132830f6 refactor(devtools): use responsive-split for the signal graph tab (#62395)
Use responsive-split for the signal graph tab.

PR Close #62395
2025-07-02 07:42:41 +00:00
hawkgs
b25fb8ab1e fix(devtools): restore the router tree visualization legend (#62378)
Fixes a regression from #62264

PR Close #62378
2025-07-01 09:23:08 +00:00
hawkgs
e7ff105646 refactor(devtools): convert all inputs to .ng-input (#62376)
Use the newly introduced input design for all inputs across the app.

PR Close #62376
2025-06-30 13:46:07 +00:00
hawkgs
3eec4badab refactor(devtools): abstract and reuse the tree visualizer (#62264)
Abstract the injector tree visualizer so it can be used for both the Injector Tree and Router Tree tabs without having to rely on separate identical implementations.

PR Close #62264
2025-06-30 07:39:16 +00:00
hawkgs
f10e1bc53c fix(devtools): profiler records only the first frames from the stream (#62335)
Fixes a regression from #62215 where the profiler records only the first emitted frames from the stream.

PR Close #62335
2025-06-27 13:19:29 +00:00
hawkgs
f9435050d8 refactor(devtools): main nav (#62242)
Keep only the navigation elements within the `nav` rather than all toolbar elements.

PR Close #62242
2025-06-27 13:07:46 +00:00
hawkgs
fd7650c404 refactor(devtools): update profiler recorder icons (#62246)
Update the recorder controls icons to match better the presented actions.

PR Close #62246
2025-06-27 13:04:53 +00:00
hawkgs
e8addbf8c7 refactor(devtools): improve flamegraph UI by employing the new flamegraph API (#62299)
Use colors from the existing color palette and enable tooltips.

PR Close #62299
2025-06-27 09:27:11 +00:00
Joey Perrott
1d3449c0ce build: migrate devtools to use new sass ruleset (#62297)
Use the new sass ruleset for bazel sass building in devtools

PR Close #62297
2025-06-27 09:25:43 +00:00
Angular Robot
df1a61fea2 build: update all non-major dependencies (#62323)
See associated pull request for more information.

Closes #62317 as a pr takeover

PR Close #62323
2025-06-27 08:35:22 +00:00
Joey Perrott
b84859073b build: migrate to use web test runner rules (#62292)
Migrate karma tests throughout the repo to use the new web test runner based rule instead

PR Close #62292
2025-06-26 17:19:10 +00:00
hawkgs
54f3571a35 fix(devtools): injector tree vis node snap/focus, vertical orientation and links (#62048)
1. Fix node coordinates origin – now X and Y represent the exact center of the node
2. Improve links – they now start and end precisely at the nodes' edges
3. Fix node click to zoom/focus/snap (thanks to 1.)
4. Fix vertical orientation links

PR Close #62048
2025-06-24 16:27:07 +00:00
Jessica Janiuk
08276b5655 Revert "test(devtools): revive cypress tests (#61972)" (#62243)
This reverts commit 75d246e03c.

PR Close #62243
2025-06-24 15:03:46 +00:00
AleksanderBodurri
75d246e03c test(devtools): revive cypress tests (#61972)
Previously these tests would run automatically when Angular DevTools lived in another repo. These files have continued to live here but have not been running automatically on each PR.

Now, these test files have been revived to run properly with our changes since the repo merge. This is a first step to reviving our e2e testing.

Next steps include writing cypress tests for new features like Injector Graph, Router tree, signals visualizations, etc.

PR Close #61972
2025-06-24 14:22:21 +00:00
hawkgs
e3e9e37c42 refactor(devtools): improve profiler visualizations (#62215)
Improve the profiler's visualization modes visually.

PR Close #62215
2025-06-24 10:48:44 +00:00
hawkgs
505da620ff refactor(devtools): refine and improve the new profiler layout (#62215)
Improve the styles and the components' layout in general.

PR Close #62215
2025-06-24 10:48:44 +00:00
hawkgs
2788544c6a refactor(devtools): introduce input styles (#62215)
Add global styles for input elements.

PR Close #62215
2025-06-24 10:48:44 +00:00
hawkgs
2fc176d7fe refactor(devtools): restructure profiler UI (#62215)
Reposition the components in order to optimize the space and improve logical structure.

PR Close #62215
2025-06-24 10:48:44 +00:00
Milo
c4df77f4e5 feat(devtools): add an experimental signals toggle (#62218)
create an experimental toggle to allow opening the signals graph view

PR Close #62218
2025-06-24 09:41:10 +00:00
Milo
24d299ea97 refactor(devtools): connect signal graph into directive explorer (#62108)
add an open signal graph button that can be enabled from
devtools-tabs, display the signal graph in a split pane

PR Close #62108
2025-06-19 10:09:21 +02:00
Milo
89efd27884 refactor(devtools): create devtools signals view (#61919)
create a component for the devtools signal pane, including view source, view value, and flashing of node updates

PR Close #61919
2025-06-17 11:19:53 +02:00
hawkgs
132fd3c301 refactor(devtools): reorganize profiler components (#62073)
Reorganize the components under `[...]/devtools-tabs/profiler`.

PR Close #62073
2025-06-17 10:52:07 +02:00
hawkgs
be2747eb26 fix(devtools): errors caused by the injector tree (#62029)
Errors:
- Attempting to translate SVGs when the tab is not on focus (Regression from #61241)
- Null injector node focus error

Extra:
- Improve scoping of the injector-tree component class members

PR Close #62029
2025-06-13 12:34:06 +02:00
hawkgs
966f96ce4e refactor(devtools): use a ResizeObserver for the responsive split (#61525)
Do not rely on `window:resize` since the split can be resized by other split panels as well.

PR Close #61525
2025-06-12 10:08:54 +02:00
hawkgs
bd3dc192fd refactor(devtools): improve profiler recorder controls (#62010)
Reorganize the template and reduce the vertical space taken by the controls.

PR Close #62010
2025-06-12 10:07:21 +02:00
Milo
b9141da6fc refactor(devtools): use import type to improve performance (#61966)
fixes a few lint errors when including devtools in g3

PR Close #61966
2025-06-10 14:43:46 -07:00
hawkgs
9cf12b0694 fix(devtools): add aria-labels to icon-only buttons (#61981)
Add aria-labels to the buttons that have an icon-only content.

PR Close #61981
2025-06-10 12:03:30 -07:00
hawkgs
a3c69260a1 fix(devtools): material components background colors (#61969)
Add overrides for the default background colors of some the Material components currently in use by Devtools. Most likely a regression by a recent Material version bump.

PR Close #61969
2025-06-09 09:44:31 -07:00
Milo
fd2fca8bce refactor(devtools): check if signal graph is supported (#61915)
add a new devtools field in SupportedApis to check if the
getSignalGraphApi exists

PR Close #61915
2025-06-09 09:43:51 -07:00
Milo
9bb04e5ac8 feat(devtools): update colors for signals pane (#61918)
add dynamic-green-02 and dynamic-blue-02

PR Close #61918
2025-06-06 10:55:05 +02:00
Milo
8e861eff1a feat(devtools): add button component (#61549)
enables flexible styling of button components with ng-button attribute

PR Close #61549
2025-06-05 10:09:51 +02:00
hawkgs
e5e0c777b7 refactor(devtools): defer tabs (#61241)
Defer tab loading and rendering on app initialization.

PR Close #61241
2025-06-03 07:10:56 -04:00
AleksanderBodurri
170211cb71 fix(devtools): issue where on initial render DevTools would not load properly (#61812)
Commit 3e70d64 introduced cdk version 20.0.0-rc2 which introduced a change to how the cdk virtual scroll sets some internal state.

Previously in DevTools we were using a computed incorrectly to respond to changes in the directive forest and apply them to the underlying datasource. With the change to the CDK shown above, this incorrect usage caused us to attempt to update underlying signals in the virtual scroll directive while within a computed callback, throwing an error.

This commit corrects our usage by swapping from a computed to an effect, allowing the underlying signals in the scroll directive to be updated without error.

PR Close #61812
2025-06-02 12:36:17 -04:00
Milo
6f16d92988 feat(devtools): inspect signals (#61540)
add a new global api for the devtools connector to jump to the source of
a computed or effect

PR Close #61540
2025-06-02 09:35:30 -04:00
Sumit Arora
582fedd726 refactor(devtools): fixing PR comments and adding unit tests (#59999)
- Update code to fix PR comments and cleanup code
- Add unit tests for the new code

PR Close #59999
2025-05-30 09:48:12 -04:00
Sumit Arora
280119fec0 refactor(devtools): adding route details panel for selected route (#59999)
On clicking a route in the router tree, the route details panel is displayed.
- The panel shows the details of the selected route, including the path, component, providers, guards etc.
- Clicking on a chip will navigate to the corresponding source file in the editor.
- Clicking on the path will navigate to the corresponding route in the router tree.

Demo Application Source: https://github.com/sumitarora/angular-routes-demo
Demo Application Deployed: https://sumitarora.github.io/angular-routes-demo/#/

PR Close #59999
2025-05-30 09:48:12 -04:00
hawkgs
21fa353591 refactor(devtools): introduce a more sophisticated directive forest filter (#61085)
Parse the filter string and match by component and directive names independently.

PR Close #61085
2025-05-30 09:46:22 -04:00
Milo
fc14ca5e34 refactor(devtools): switch default font to material symbols (#61281)
update from Material Icons to Material Symbols, and use the local
font copy instead of Google fonts to avoid version mismatches

PR Close #61281
2025-05-20 08:53:51 +00:00
hawkgs
f5c67f1cde refactor(devtools): introduce responsive-split directive (#61204)
The `ResponsiveSplitDirective` adds responsive behavior to the `as-split` component by a provided width to height ratio.

PR Close #61204
2025-05-20 08:51:59 +00:00
hawkgs
34f60549f2 refactor(devtools): fix profiler tree map viz background color (#61330)
Fixes a regression caused most likely by #60374.

PR Close #61330
2025-05-16 07:43:51 +00:00
Matthieu Riegler
5af8afee4b refactor(devtools): fix button styling on the profiler frame selector (#61309)
Missing standalone import.

PR Close #61309
2025-05-14 09:27:13 -07:00
Joey Perrott
ae0ad878eb build: rename devtools ts_library to ts_project (#61317)
Rename ts_library to ts_project throughout devtools

PR Close #61317
2025-05-14 08:51:21 -07:00
Joey Perrott
31efc4bd24 build: migrate devtools to use ng-project (#61317)
Migrate devtools to use ng-project

PR Close #61317
2025-05-14 08:51:20 -07:00
Joey Perrott
e2c763a12c build: migrate adev devtools package to use ts_project (#61210)
Migrate usages to ts_project

PR Close #61210
2025-05-08 09:38:30 -07:00
Matthieu Riegler
eda8909772 fix(devtools): support defer blocks in IdentityTracker (#61139)
This reverts the fix of #61080 which wasn't adequate.

PR Close #61139
2025-05-06 13:44:37 -07:00
Matthieu Riegler
e6a34277fc feat(devtools): defer blocks support (#60629)
This commit adds the support for defer block in the Angular DevTools.

@defer block are now visible in the directive tree and give access to defer & hydration details.

This feature also brings support of incrementation hydration.

PR Close #60629
2025-04-29 22:07:47 -07:00
Matthieu Riegler
2df00c9b4b build(devtools): cleanup dependencies (#60936)
Removing `platform-browser-dynamic` because we don't need it anymore.

PR Close #60936
2025-04-29 12:16:16 -07:00
hawkgs
a1deb87a8e refactor(devtools): improve directive explorer filtering (#60672)
- Highlight only the matched part of the text
- Select the first match by default
- Show the matches count along with the currently selected one
- Minor UI fixes and performance optimizations

PR Close #60672
2025-04-24 09:39:22 -07:00
hawkgs
6845d2a92b refactor(devtools): fix resolution path viz padding (#60971)
Adjusts the right padding appropriately.

PR Close #60971
2025-04-24 09:36:51 -07:00
hawkgs
cebb9d2c1e refactor(devtools): disable unsupported features (#60585)
Prepare the app for Wiz & ACX and handle unsupported features by disabling their respective UI.

PR Close #60585
2025-04-22 21:29:04 +02:00
hawkgs
037dede0a0 refactor(devtools): improve components tab side pane UI (#60901)
Improve the overall UI/UX. Drop the expandable containers shadows in favor of solid borders.

PR Close #60901
2025-04-18 21:14:15 +02:00
hawkgs
f838726afb refactor(devtools): typography (#60531)
Introduce typography placeholder classes and employ them across the app where applicable.

PR Close #60531
2025-04-18 08:35:59 +02:00