Commit graph

16 commits

Author SHA1 Message Date
hawkgs
aee536c8ca refactor(devtools): improve the look of app state screens
Improve the look of "app not detected", "unsupported version" and "prod app not supported" screens.
2025-12-12 08:04:50 -08: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
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
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
hawkgs
77b5eed024 refactor(devtools): extract and organize colors into themes (#60374)
Extract all colors from the stylesheets, reduce their number by merging the similar ones and organize them into themes represented by CSS variables.

PR Close #60374
2025-03-27 18:10:28 +00:00
hawkgs
911a210ff0 refactor(devtools): introduce tree-visualizer-host (#59916)
The purpose of this component is purely to encapsulate and offload the styles from `devtools.component.scss` since it wasn't very clear what their scope is.

PR Close #59916
2025-02-26 12:18:06 -05:00
hawkgs
a0f37224c3 refactor(devtools): use new theme mixins in the stylesheets (#59978)
Use the newly introduced theme mixins in the stylesheets.

PR Close #59978
2025-02-25 14:15:16 -05:00
Sumit Arora
a55575d4d6 fix(devtools): fixing dark mode colors for devtools and router tree (#59329)
added dark mode colors for devtools and router tree  and fixed the router tree legend rerendering issue

PR Close #59329
2025-01-09 10:32:41 -05:00
Sumit Arora
42b1662ae8 refactor(devtools): removing unused styles and addressing PR comments (#58213)
- removed unused styles
- refactored tests and adding types

PR Close #58213
2024-12-03 09:16:25 +01:00
Sumit Arora
ef10d528ed refactor(devtools): adds router graph implementation and demo (#58213)
Follow-up PR for https://github.com/angular/angular/pull/58086 & https://github.com/angular/angular/pull/58199.

Adds below features to Angular DevTools to display router graph:
- Add a new router example in the Angular DevTools demo application.
- Implement the router graph in the Angular DevTools to view the routes that are loaded in the application.

PR Close #58213
2024-12-03 09:16:25 +01:00
Sheik Althaf
f8e5119435 refactor(devtools): migrate devtools to prettier formatting (#58624)
Added html and scss to ng-dev formatter. This is reduce the formatting changes coming in PRs.

PR Close #58624
2024-11-19 16:31:24 -08:00
AleksanderBodurri
9f4063b143 refactor(devtools): provide user with suggestions on why their angular application is not being detected in dev mode (#57861)
We've been seeing some reports about Angular DevTools being unable to detect applications running in dev mode.

This commit adds more context to the error message displayed when development mode is not detected and offers some possible resolutions.

Displays 3 common reasons why DevTools fails to detect an application running in dev mode. Links directly to angular.dev for relevant configurations.

Links to the Angular DevTools issue template if none of the suggestions work.

PR Close #57861
2024-09-23 16:08:16 +02:00
AleksanderBodurri
f4b915b77b feat(devtools): implement zoom and pan in injector graph visualizer (#52489)
Previously only the trackpad could be used to navigate this view.

Now we can zoom and pan around using our mouse wheel and scroll.

Additionally, this commit fixes many issues related to the visualization of the injector graph visualization, allowing it to be more compact without impacting legibility and minimizing edge collisions in larger graphs.

PR Close #52489
2023-11-03 17:37:55 -07:00
AleksanderBodurri
8bdbbf4510 feat(devtools): Implement initial DI debugging features in devtools (#51719)
This commit introduces 2 new features into DevTools.

Directive level dependency inspection: Users can now view which dependencies their directives have injected in the property viewer tab. This view displays not only the dependency but also the resolution path that was used to service the injection.

Injector graph inspection: Users can now view a visualization of the element and environment hierarchies in their application. These trees are displayed separately but on the same page in the Injector Tree tab. User can click on individual injectors to view a list of all the providers configured in that injector, as well as highlight the resolution path from that injector to the root (with the corresponding environment injector connection highlighted as well).

PR Close #51719
2023-10-10 13:10:50 -07:00
Matthieu Riegler
49386de19f docs: Specify when an app is debuggable by the DevTools. (#48970)
DevMode is when the ng debug object is available. `Optimization:true` is responsible for treeshaking everything behind `ngDevMode`.

Fixes #48968

PR Close #48970
2023-04-17 17:32:41 +00:00
AleksanderBodurri
528f33d13d refactor(devtools): prepare codebase for migration to angular/angular repo 2021-11-21 20:23:18 -05:00
Renamed from projects/ng-devtools/src/lib/devtools.component.scss (Browse further)