Previously `DefaultIterableDiffer` was able to infer the type of it's generic by reading the type contract defined by the user defined trackBy function. This was because `TrackByFunction` can be specified with a generic that is used to type its second argument. If this generic is not provided, like in this case, typescript infers this type from the function contract directly. In this case this inferred type was `FlatNode`. This inference is then propagated to `DefaultIterableDiffer`, which is why we were not seeing this error previously.
A change in the framework made it so the second argument of `TrackByFunction` is typed as a generic that extends the generic passed into `TrackByFunction`. Since we had not previously passed in this generic to `TrackByFunction`, this type was inferred as an extension of `unknown`, causing a type error when passed as an argument to the `DefaultIterableDiffer` constructor.
Now the functions being used are typed directly as `TrackByFunction<FlatNode>`
For clarity, the `DefaultIterableDiffer` generic is now also typed as `FlatNode`.
See https://github.com/angular/angular/pull/41995 for the framework change.
After PR rangle/angular-devtools#618, an invisible gutter was introduced to increase the draggable area of the split pane gutter. The gutter size being used in the calculation for the split area flex-basis still referenced the size of the now invisible gutter, causing split areas to be smaller than they should be. This is most noticable in the the input/output/state expandable panels in the property explorer tab.
Now the visible gutter size is used in the flex-basis calculation instead of the invisible one.
Previously we were using sass import rules to bring in material and other styling.
Now we are using the use rule and have switched over to the new angular material theming API
Previously, the property view header component had mat button styling nested in an ng-deep selector. This broke some styling in the info popup whenever an item was selected in the component explorer (because the existence of a selected component causes the property view header tab to render and thus brings in the leaky component css).
Now the leaky styling has been removed, and the component css has been cleaned up.
Fixrangle/angular-devtools#791
Build the render tree starting from the root node of the application.
This fix is applicable only for v12+ apps that are using the latest
debugging APIs.
Fixrangle/angular-devtools#786
With this PR now we consider not only the property name but also the
value of properties in the differ comparison.
The change also contains e2e and unit tests.
* fix(backend): skip node if there is no associated TViewData
The code was assuming that the TViewData item at the same index as the node
in LView would contain a data entry. This value can be `null` (which is the
case in our app), which causes a catastrophic failure in the dev tool. By
checking for null, the node is skipped because it cannot determine the
associated component or directive and the dev tool does not die.
fixes issue rangle/angular-devtools#801
* chore: style tweak - add early return to avoid nesting
