Commit graph

265 commits

Author SHA1 Message Date
hawkgs
e7a6e31a70 fix(devtools): refine when signal graph button is shown
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)
2025-11-17 14:45:01 -08:00
Shuaib Hasan Akib
f87e9a02b5 refactor(devtools): clean up unused code and modernize component patterns
- Removed unused code and imports
- Migrated to signal-based input() APIs
- Added readonly to Angular-initialized inputs and removed explicit type annotations
- Updated templates to use self-closing tags for consistency
2025-11-17 08:40:15 -08:00
hawkgs
68d823a241 fix(devtools): show profiler exec details only if there are directives
Show the execution details of a captured frame entry only if there are recorded directives.
2025-11-17 08:39:36 -08:00
SkyZeroZx
4126ef1e94 fix(devtools): use isLazy flag to determine disabled state for action button
Refactors the logic that disables the action button for lazy-loaded routes.
Now relies on the isLazy property from the route data instead of string comparisons on the component field.
2025-11-14 08:47:05 -08:00
cexbrayat
c137f1fe91 docs: ExperimentalIsolatedShadowDom mentions 2025-11-14 08:41:13 -08:00
SkyZeroZx
373c101d02 refactor(devtools): improve route data and resolver views
Adds an enhanced route data tree view to better visualize both route resolvers and router data.
2025-11-13 09:11:53 -08:00
hawkgs
402f396b76 refactor(devtools): update inspect icon
Use a custom version of Material `pin_end` icon that doesn't have a dot.
2025-11-10 07:47:14 -08:00
SkyZeroZx
c74367c5de refactor(devtools): replace HostListener with host metadata for keydown handling
Uses host metadata instead of the HostListener decorator for keydown events
2025-11-07 07:44:42 -08:00
Alan Agius
26fed34e0e
build: format md files
This commit configures prettier to format markdown files.
2025-11-06 10:03:05 -08:00
SkyZeroZx
f2ffbe31b0 refactor(devtools): enhance route guard handling and add inline function warning
refactored route guard handling and added warning for inline functions
2025-11-05 15:20:46 -08:00
hawkgs
cb5d36d107 refactor(devtools): remove redirecting flag from router tree
Drops `isRedirect` due to its redundancy in light of the newly introduced `redirectTo`.
2025-11-05 15:20:29 -08:00
Georgi Serev
cd0e96c1d0
fix(devtools): router tree details table data
Introduce layout fixes and use dedicated buttons for the view source and navigate actions.
2025-11-05 17:07:18 +00:00
hawkgs
31d412771b refactor(devtools): update the looks of hydration overlay switch
Move the option under the directive explorer and drop the switch to match the rest of the UI.
2025-11-05 17:04:46 +00:00
SkyZeroZx
058377ed55 refactor(devtools): handle function-based redirectTo and title in router viewer
Refactors router viewer logic to properly process and display redirectTo and title when defined as functions
2025-11-04 17:54:07 +00:00
SkyZeroZx
bd27e96273 refactor(devtools): Removes redundant input undefined in angularVersion
Simplifies the initialization of the version input by removing
an unnecessary undefined
2025-10-30 19:40:07 +00:00
hawkgs
c1dee66866 fix(devtools): signal graph value preview mat-tree row indentation (#64798)
Fix the identation and arrows of signal graph value preview mat-tree.

PR Close #64798
2025-10-30 17:18:29 +00:00
SkyZeroZx
aaa3020b94 refactor(devtools): Improves error messaging for profiler file import
Formats error messages to display error name and message when importing profiler files fails
2025-10-29 12:38:20 +01:00
SkyZeroZx
bfcaf17005 refactor(devtools): Improves clipboard error feedback with snackbar and logging
Enhances user experience by displaying a snackbar notification when clipboard copy fails, and logs detailed error information via the message bus
2025-10-27 19:41:54 +01:00
Matthieu Riegler
50a55d6afb refactor(devtools): use preview value in property editor (#64552)
This way only the `preview` property handles the `Signal()` wrapper (and not individual components anymore)

PR Close #64552
2025-10-21 15:18:56 +00:00
hawkgs
9b7a79af3a refactor(devtools): update debug signal node type to match core type (#64127)
Use a union string type instead of a generic string.

PR Close #64127
2025-10-20 20:15:46 +00:00
AleksanderBodurri
9a1735aee8 fix(devtools): revert router tree dashed edges for lazy routes (#64532)
From my investigation what I know for sure:
- when the graph pans or zooms it updates the transform property on the g element, which in turn causes the browser to repaint the visible space in the g element
- stroke-dasharray is the cause of major performance issues in large graphs.

What I suspect:
- When the g element repaints, it also has to repaint all of the child svg elements. When the dashed line path svgs repaint, the stroke-dasharray calculation is not GPU accelerated, but instead occurs on the CPU, causing extreme lag whenever the svg graph is panned or zoomed.

Temporary solution: remove this dashed edge functionality. We can investigate alternatives for communicated that a path is lazy loaded.

Future long term solution: migrate to canvas based graph renderer for router tree and injector graph.

PR Close #64532
2025-10-20 15:32:49 +00:00
Matthieu Riegler
b7c47d8fad refactor(devtools): Create a separate type of signals for after effect phases. (#64315)
With this change, we ensure afterRenderEffect phases nodes appear more like "effects" than regular signal node.

PR Close #64315
2025-10-16 18:47:13 +00:00
SkyZeroZx
6af231e2d6 refactor(devtools): Replace console warnings with snackbar notifications (#64458)
Improves user experience by displaying UI notifications when attempting to view source for unsupported routes, replacing developer-only console warnings with visible snackbars

PR Close #64458
2025-10-16 14:41:34 +00:00
hawkgs
134ff540b5 fix(devtools): directive-forest minor UI fixes (#64426)
- Fix the hydration icons when the text from the nodes exceeds the component width
- Align and slightly enlarge the arrow icons

PR Close #64426
2025-10-16 14:37:12 +00:00
Matthieu Riegler
17528628fa refactor(devtools): Router viz is only from 20.3.5 onward (#64415)
This is following some updated in #64411

PR Close #64415
2025-10-15 10:39:32 -07:00
Matthieu Riegler
2f8066adbe refactor(devtools): remove "changes" entry. (#64338)
This is just the same value as total time spent. Also it is confusing to some users.

fixes #51206

PR Close #64338
2025-10-15 10:38:20 -07:00
hawkgs
356dc4c952 refactor(devtools): add clear button to the directive explorer filter (#64407)
Add a standard clear button after the matches nav buttons.

PR Close #64407
2025-10-14 09:28:39 -07:00
hawkgs
dffb16afdf refactor(devtools): use lighter property-tab bg only when there are directives (#64404)
Use the contrasting background color only when there are directives to inspect; Drop obsolete CDK drag

PR Close #64404
2025-10-14 09:26:56 -07:00
hawkgs
0b204a8321 fix(devtools): property-view-tree layout (#64343)
Fix various issues related to `property-view-tree` layout.

PR Close #64343
2025-10-13 08:26:29 -07:00
Milo
0ed13485c8 refactor(devtools): stabilize signal graph (#64263)
remove experimental signal graph toggle, enable the signal graph by default if it is available

PR Close #64263
2025-10-07 20:44:03 -04:00
AleksanderBodurri
ac0eb2318c fix(devtools): fix incorrect styling of nodes between renders (#63979)
Previously, the router tree would not properly clean up css classes placed on nodes which would lead to some nodes being incorrectly visualized after each update.

PR Close #63979
2025-10-07 20:19:22 -04:00
Matthieu Riegler
e40307803a refactor(devtools): visual separation between directives in the property tab (#64222)
also a drive by clean-up to remove some `ng-deep` stylings

PR Close #64222
2025-10-03 15:05:50 +00:00
Matthieu Riegler
a10eb38f76 feat(devtools): Add possibility to log directive instances and their prop values (#64143)
The improves debug possibilties via the Angular devtools

fixes #62235

PR Close #64143
2025-09-30 10:30:58 -04:00
hawkgs
caee728d3b fix(devtools): signal graph linkedSignal node UI (#64105)
Fix the colors of `linkedSignal`s. Use grayish colors for unknown/unhandled signals.

PR Close #64105
2025-09-26 11:55:00 -04:00
hawkgs
a45e6fd44a fix(devtools): signal graph effect node (#64076)
Add a label and some other minor UI tweaks.

PR Close #64076
2025-09-25 15:03:15 -04:00
AleksanderBodurri
521c2a7646 feat(devtools): Change lazy/eager visualization by using dashed lines and correctly positioned edge arrows (#63980)
Previously we would visualize route config "types" by colouring different nodes.

Now the we only colour nodes to represent the active route path. Lazy loaded routes are represented with dashed line edges that point in the direction of loading.

PR Close #63980
2025-09-24 14:25:28 +00:00
AleksanderBodurri
4fa3b2673e feat(devtools): display provider count on injector tree nodes (#63632)
Allows the tree visualizer to display a sublabel for each node.

Used by the injector tree to display provider count for each injector.

PR Close #63632
2025-09-18 14:56:47 +00:00
hawkgs
8b43fcec1a fix(devtools): router tree legend overflow (#63813)
Set `overflow` to `hidden` so the router tree legend doesn't overflow its parent container.

PR Close #63813
2025-09-15 19:37:19 +00:00
hawkgs
d476f881af fix(devtools): minor UI issues in transfer state tab (#63810)
Fix some Material-related table regressions and change some font sizes.

PR Close #63810
2025-09-15 15:48:26 +00:00
hawkgs
cfe0f03544 refactor(devtools): add a close button to the injector-provides pane (#63808)
Add a close button to the Injector Providers pane in the Injector Tree.

PR Close #63808
2025-09-15 15:40:00 +00:00
Shuaib Hasan Akib
7e828e3d39 docs(docs-infra): code style improvement and component update (#63557)
- Improved code style consistency in docs-infra
- Updated app.component.ts for enhancements

Co-authored-by: Matthieu Riegler <kyro38@gmail.com>

PR Close #63557
2025-09-15 15:02:24 +00:00
hawkgs
f8cea65c88 refactor(devtools): property-tab folder structure (#63759)
Re-organize components and use separate BUILD files.

PR Close #63759
2025-09-12 16:49:25 +00:00
hawkgs
464bff95ef refactor(devtools): intergrate the TreeVisualizer into the TreeVisualizerHost component (#63530)
Use the `TreeVisualizer` internally in the host component instead of managing these separately in their client components.

PR Close #63530
2025-09-12 15:08:36 +00:00
hawkgs
4a16245af0 refactor(devtools): double the Angular app detection attempts (#63271)
Increases the total attempt time from 5s to 10s.

PR Close #63271
2025-09-11 16:55:28 +00:00
hawkgs
ce4ab17858 fix(devtools): property-tab-header layout for elements (#63682)
Fix SCSS scoping issue that breaks the `property-tab-header` layout for elements.

PR Close #63682
2025-09-10 22:11:13 +00:00
hawkgs
94a0880128 fix(devtools): keep the selected node visible when the directive tree resizes (#63681)
Keep the selected node (component/element) visible when the directive tree component resizes (e.g. signal graph pane becomes visible).

Closes #63670

PR Close #63681
2025-09-10 22:07:07 +00:00
hawkgs
d05680a260 feat(devtools): add a close button to the signal details panel (#63680)
Add a close button to the signal graph details panel.

Closes #63671

PR Close #63680
2025-09-10 22:06:36 +00:00
Andrew Scott
c3576506b3 refactor(core): Update tests for zoneless by default (#63668)
This updates tests and examples only to prepare for zoneless by default.

These changes were identified and made as part of #63382. Anything that
failed gets `provideZoneChangeDetection` unless the fixes were easily
and quickly determined.

It also adds the zoneless provider to the `initTestEnvironment` calls
for tests in this repo to prevent regressions before #63382 is merged.

PR Close #63668
2025-09-09 14:41:56 -07:00
Matthieu Riegler
3dc5056242 Revert "test(devtools): create e2e test cases for injector tree feature (#62844)" (#63653)
This reverts commit 785af438bc.

PR Close #63653
2025-09-09 08:38:58 +02:00
AleksanderBodurri
785af438bc test(devtools): create e2e test cases for injector tree feature (#62844)
Tests validate the current behaviour of the injector tree feature.

- Nodes should be displaying on entering the tab
- Hide framework / Hide injectors with no providers flags should filter the tree properly
- Providers side tab should be able to be opened and filtered properly using the 2 filter input fields for token and type

PR Close #62844
2025-09-08 13:57:14 -07:00