DevTools Control Lookup Improvements

[stevemonaco]

Is your feature request related to a problem? Please describe.

The errors that Avalonia logs regarding failed bindings are inadequate to directly locate the control. As an example:

An error occurred binding 'BorderBrush' to 'TemplateBinding: BorderThickness': 'Could not convert '0,0,0,0' (Avalonia.Thickness) to 'Avalonia.Media.IBrush'.' (Border #PART_RootBorder)

PARTs typically have repetitive names across the code base, so locating the problematic instance is difficult by inspection, even if the developer is fully familiar with their code base and their theme's code base.

Describe the solution you'd like

• Always Log the Control Hash (ie. GetHashCode())
• Optionally, Log the Visual Tree Hierarchy
• Lookup Control by Hash in the DevTools Visual Tree Tab

Describe alternatives you've considered

Making this separately available as a third-party component similar to DevTools.

Control lookup UX in DevTools might be improved by capturing log output, but it's a lot of extra work. The integration also nearly guarantees that future changes to the logged message structure become a breaking change, too.

Additional context

There is already a prototype at https://github.com/stevemonaco/AvaloniaDemos/tree/master/Debugging which has some showcase videos.

I would integrate and PR the acceptable features into DevTools. This requires modification to TraceLogSink. There is probably some perf impact to logging the visual tree hierarchy, especially on verbose.

Example of Logging with Visual Tree Hierarchy

[Binding]An error occurred binding 'Command' to 'BadBinding' at 'BadBinding': 'Could not find a matching property accessor for 'BadBinding' on 'Debugging.ViewModels.MainWindowViewModel'.' (Button #36936550 #badButton Visual Tree: Grid -> StackPanel -> Button)

Each control in the hierarchy could also have their Name included.