Add tab for inspecting the state of package:provider

[rrousselGit]

No description provided.

[jacob314]

how much functionality are you using from riverpod? Unless it is extensive it could make sense to avoid the dependency for now.

[rrousselGit]

It's used extensively
With it, the implementation of the instance viewer is fully declarative, and it takes care of the process of canceling pending evaluations whenever possible.

[jacob314]

Interesting. Can you point to the pattern that ensures evaluations are cancelled?

[rrousselGit]

It's the "autoDispose" functionality on providers (which package:provider sadly cannot support)
https://riverpod.dev/docs/concepts/modifiers/auto_dispose

It keeps track of the number of listeners on the associated provider (be it widgets or other providers (such as when chaining providers)). And when all listeners are removed, the provider state will automatically be destroyed.

Then providers can add a dispose method to cancel pending requests. That's the "Disposable" object which all providers use:

AutoDisposeProvider((ref) {
  final isAlive = Disposable();
  // tell Riverpod to dispose the "Disposable" object when the provider is disposed
  ref.onDispose(isAlive.dispose);
  
  
  // when the provider is destroyed, `isAlive` will be disposed, canceling the pending requests.
  await eval.eval('...', isAlive: isAlive);
})

This combines nicely with the collapse functionality too.
All object properties are associated with a unique provider. So when collapsing a property, its listener is removed, its state destroyed and pending requests canceled.

[rrousselGit]

This architecture also automatically deals with loading and error handling.

It relies on the fact that using await throws when the awaited future fails, purposefully letting the exception bubble. Then the provider will catch the exception, and use a union-type to force the UI to deal with loading/errors (or the application otherwise will not compile)

That's the when(loading: ..., error: ..., data: ...) you can see inside widgets.

[jacob314]

Can you attach an updated screenshot to the CL?
I'm interested in seeing how this widget looks as part of the UI.

[rrousselGit]

[jacob314]

Can you expand out a list and a map in the screenshot and show a screenshot where the hashcodes are fixed or omitted if they are -1.
Hashcodes should also be truncated 5 char hex to match what Flutter does in its debug print.

[jacob314]

I don't see the split border in the screenshot. I would have expected to see a border that was the focus color.

[rrousselGit]

The split border is the thin grey border

But maybe focusColor is not the correct variable to use

[rrousselGit]

[rrousselGit]

Should I skip goldens? Since they generate 0.01% diff, probably due to environment differences.

[rrousselGit]

Hum interesting that this time they passed

[kenzieschmoll]

coming in kind of late here but I thought we agreed to not use package:freezed because that isn't a package we want to have rolled into g3 (the preferred solution in g3 is using built_value)? yet I'm still seeing .freezed files throughout this PR? @jacob314 @rrousselGit

[rrousselGit]

After discussing with @jacob314 , we agreed to remove the dependency and commit the generated file

Those @freezed are fake annotations, defined as const freezed = Object().
They exist to easily re-generate the files

[kenzieschmoll]

Will the .freezed files ever need to be regenerated? Perhaps we could include a comment at the top of the .freezed files that describes how to regenerate these files if necessary

[rrousselGit]

There is one here:

devtools/packages/devtools_app/lib/src/provider/instance_viewer/instance_details.dart

Line 16 in 5e81d82

// real annotation package, then execute `pub run build_runner build`.

[kenzieschmoll]

can we sort the list of providers alphabetically? If you are looking for a specific provider, it can be challenging to find what you are looking for at first glance

[kenzieschmoll]

can we get rid of these spinners? It looks like there is a single spinner for the whole container, and then there is a spinner for each row. It created a kind of strange multi-spinner effect that we probably don't want:

[rrousselGit]

Should be good now

[kenzieschmoll]

Looking good! a few UI requests and then LGTM

[kenzieschmoll]

feel free to change the icon - not sure if this once was listed in the conditional screens example by default.

[rrousselGit]

Done, switched to attach_file

[jacob314]

once the few polish comments @kenzieschmoll mentioned are addressed.

[jacob314]

As soon as the tests pass lets land this.

[rrousselGit]

This should be good to go now