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
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
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
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
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
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
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
Sometimes `forest` can be empty if the provided roots are empty, and was leading to a "Cannot read `resolutionPath` of `undefined`" error. Now we check the forest has a tree in it before looking up `resolutionPath`.
There might be a separate issue with the fact that the backend script likely shouldn't be emitting an empty forest in the first place. However we already check that a resolution path exists at all, so I think it's fair to also check that a tree was provided. We can separately look into making sure the backend is emitting valid data.
PR Close#60403
- The token rendered in the first col of the table is now being truncated in favor of the horizontal scroll of the panel which should make the log button accessible/visible all the time
- Introduced a "No such providers" label when a filter is applied
- The icon of the logProvider button has been substituted with `code` (as per the doc)
- The font size and width of the provider type filter have been slightly improved
PR Close#59531
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
Use the new UI and drop the `InjectorTreeVisualizer` dependency. Additionally, use concrete values for `SerializedInjector.type` type instead of `string`.
PR Close#60011
- Move all styles to ng-devtools/src/styles.
- Create a BrowserService that detects the browsers and adds it as a class to the body. Move global browser styles.
- Create theme mixins that incorporate the browser type into them.
- Refactor some of the affected code along with the introduced changes.
PR Close#59589
Previously, when "Hide injectors with no providers" was toggled, it is possible for the injector tree visualizer to have no Element injectors to visualize. This caused a bug in the slicing logic that splits apart the environment and element injectors from DI resolution paths within the injector tree component in Angular DevTools.
Now, this logic is correctly handled when there are no element injectors to visualize.
PR Close#57442
