Creates set of unit tests for each function in the data transformation pipeline that enables injector metadata to be visualized as d3 graphs.
PR Close#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
In Devtools bar chart we can see the total time for all the directive instances in one change detection run.
This PR changes the bar chart to display the total count and time for all directive instances instead of showing the time for each directive instance separately in one change detection run.
PR Close#50866
Currently internally Angular has some customized tsconfig files, because we don't align with the tsconfig of the rest of g3. These changes enable `noImplicitReturns` and `noPropertyAccessFromIndexSignature` to align better with the internal config.
PR Close#51728
Currently the label showing the component name is always positioned from the bottom/right edge of the element which may be outside of the viewport. These changes add some logic to fall back to a different position so that the label is always visible.
I've also cleaned the `highlighter.ts` file up a bit.
Fixes#48479.
PR Close#50656
The existing DevTools demo app that is used for developing on DevTools is exclusively an NgModule application. This commit creates a copy of the old demo app but with no NgModules and only standalone APIs/Components/Directives/Pipes
PR Close#48533
We do this because of a bug caused by https://github.com/evanw/esbuild/issues/2950 and a recent change to how angular static properties are attached to class constructors. Targeting esnext or es2022 will cause the static initializer blocks that attach these static properties on class constructors to reference a class constructor variable that they do not have access to.
Because of this we explicitly target es2020 in our Angular DevTools builds.
PR Close#50086
DevMode is when the ng debug object is available. `Optimization:true` is responsible for treeshaking everything behind `ngDevMode`.
Fixes#48968
PR Close#48970
`RouterTestingModule` is not needed as of v16. Instead, TestBed
automatically provides `MockPlatformLocation` in order to help test
navigations in the application. The location mocks in the
RouterTestingModule aren't necessary anymore.
There doesn't appear to be any real documentation around
`RouterTestingModule` other than the API docs.
PR Close#49427
With this commit, Sets are displayed with the label Set(#) where # is the size of the set. They are not expandable/editable though.
Partial fix for #49312
PR Close#49316
`entryComponents` have been deprecated since version 9, because with Ivy they weren't necessary. These changes remove any remaining references.
BREAKING CHANGE:
* `entryComponents` has been deleted from the `@NgModule` and `@Component` public APIs. Any usages can be removed since they weren't doing anyting.
* `ANALYZE_FOR_ENTRY_COMPONENTS` injection token has been deleted. Any references can be removed.
PR Close#49484
Previously the DevTools demo app and browser app had duplicated styles in their respective styles.scss files.
This commit creates a global styles.scss that is imported with sass @use into the demo and browser app styles.scss files. This will prevent any issues where css changes to one are missed in the other. Also reduces duplication of material css theme definitions by consolidating it inone place. The respective styles.scss files for the demo app and browser app continue to exist incase those need environment specific css. For example the browser app requires that height: 100% is set on a document in order to render properly in a browsers devtools tab.
PR Close#49001
In the #48216 Material deps were updated to v15,
but the components and modules in DevTools were not
updated to MDC nor replaced with the legacy definitions.
PR Close#48420
On Firefox, Angular DevTools was breaking the XML display because of the script injected
Based on contentType, we won't inject that script anymore
Fixes#48017
PR Close#48021
Previously we built DevTools for all browsers with version 2 of the manifest file format.
This commit includes a number of refactors and API additions that will enable us to build DevTools with version 3 of the manifest file format.
The manifest v3 build of Angular DevTools has been tested on Chrome, Edge, and Safari.
Notably, the Firefox version of Angular DevTools remains as a manifest v2 build. Firefox does not yet support manifest v3 in it's latest stable release. When Firefox makes this transition, a follow up PR will update the Firefox manifest file to version 3.
Because Firefox still needs v2, we need to keep some old v2 APIs around in our background page (service worker in v3) that will execute conditionally based on if the extension was built for v2 or v3. This is determined with the chrome.runtime.getManifest().manifest_version API.
PR Close#47575
Previously, you could inspect the source code of a component but not a directive. This commit adds functionality to inspect source code for directives as well. Now you will see the inspect icon on the header component of each directive on a selected element.
PR Close#47334
With the introduction of standalone components, it is no longer guaranteed that getAllAngularRootElements will be available on the global object. This PR removes the dependency on this function so that DevTools can continue to work for Angular applications that use `bootstrapApplication`.
PR Close#45983
Add support to material design icons in offline mode for Angular Devtools. Self hosting the web font so icons are loaded regardless of network connection.
Bring the font file as well as its corresponding css file from third_party repo through bazel into shell-browser directory while building.
PR Close#45743
Uses `createEsbuildAngularOptimizePlugin` from dev-infra-private and passes in `GLOBAL_DEFS_FOR_TERSER_WITH_AOT` into a new esbuild prod configuration. Notably, this removes references to `ngDevMode` from the final build and enables minification.
PR Close#45886
In Angular v12 we introduced debugging APIs sufficient for DevTools.
Prior to that Angular DevTools accesses the logical data structures of
Ivy directly, which sometimes produces suboptimal results and skips
dynamically inserted content.
With the end of v11's LTS, we'll support only Angular v12 and up.
PR Close#45883
Adds support for TypeScript 4.7. Changes include:
* Bumping the TS version as well as some Bazel dependencies to include https://github.com/bazelbuild/rules_nodejs/pull/3420.
* Adding a backwards-compatibility layer for calls to `updateTypeParameterDeclaration`.
* Making `LView` generic in order to make it easier to type the context based on the usage. Currently the context can be 4 different types which coupled with stricter type checking would required a lot of extra casting all over `core`.
* Fixing a bunch of miscellaneous type errors.
* Removing assertions of `ReferenceEntry.isDefinition` in a few of the language service tests. The field isn't returned by TS anymore and we weren't using it for anything.
* Resolving in error in the language service that was caused by TS attempting to parse HTML files when we try to open them. Previous TS was silently setting them as `ScriptKind.Unknown` and ignoring the errors, but now it throws. I've worked around it by setting them as `ScriptKind.JSX`.
PR Close#45749
The menus weren't using the `mat-menu` component correctly which had led to some inconsistent spacing and the need for style overrides. These changes correctly wrap the menu content in `mat-menu-item` which has the added benefit of having keyboard support. I had to keep some of the overrides in order to preserve the dense layout of the menus.
I've also cleaned up the component by:
* Removing some unnecessary styles.
* Switching single-class usages of `ngClass` to `class.` bindings.
* Not using `br` tags for spacing.
PR Close#45665
* Added `flag_browser` to toggle between different browser builds chrome and firefox
* Updated build command to support new flag configuration
PR Close#44952
* Updating build to support both browsers firefox & chrome.
* Added new `config_setting` to support build.
* Added new genrule `copy_manifest` to `prodapp` pkg_web.
PR Close#44952
As part of the devtools migration, we copied the custom http server/
dev-server from the `angular/components` repo. This server implementation
has now moved to the shared dev-infra code, and we can clean up the
copy in this repository now.
PR Close#45452
