Add a tree freeze or snapshot to DevTools

[stevemonaco]

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

I'm working with adorners which dynamically add controls based on mouse position. I cannot both position the mouse in-app and manipulate DevTools with the mouse at the same time.

Take the following snippet:

<Button HorizontalAlignment="Center" Content="Testing">
    <Button.Styles>
        <Style Selector="Button:pointerover">
            <Setter Property="(AdornerLayer.Adorner)">
                <Template>
                    <Border
                        Width="200"
                        Height="200"
                        AdornerLayer.IsClipEnabled="False"
                        Background="Orange"
                        IsHitTestVisible="False" />
                </Template>
            </Setter>
        </Style>
    </Button.Styles>
</Button>

When I move the mouse away from the Button to attempt to inspect the adorner in DevTools, the Border will no longer be present in the AdornerLayer.

Describe the solution you'd like

Either:

1. Add a feature to freeze the current tree representation from being updated.
2. Add a feature to copy the current tree state and add it as a new tab / view.

I assume both of these require a full fetch of the tree state which might be expensive.

Describe alternatives you've considered

Alt+tab into DevTools, keep the mouse over the Button, and use keyboard navigation for everything. This does work. However, I'm testing drag-and-drop adorners, so I need to keep the mouse button held down to keep the drag active. I can alt+tab in this scenario, but keyboard navigation doesn't work while pressed in this scenario.

Additional context

This could also be useful for controls that have conditional styling for realtime data. DevTools currently supports snapshots for value frames (styles), but this doesn't allow for broader inspection of state.