[Zach Teutsch (zateutsch)]

What and why

When you hover a row in the DevTools window's Visual tree, the app draws a box around that element. That box was the same filled blue box that Select element (pick mode) draws, so hovering looked like pick mode had turned on, even though the toolbar button wasn't pressed (#1134). Pick mode was never actually armed. I checked the DevTools log and the overlay state live.

Now a tree-row hover draws a thin 1px outline with no fill. Clicking a row, picking in the app, and moving the pointer off the tree back to the current selection still draw the filled 2px box, so "previewing" and "selected" look different.

Fixes #1134

Before / after

I couldn't capture screenshots: the sample app's window was behind other windows on my machine during the test. This is what I saw in the DevTools log (WINAPP_DEVTOOLS_LOG=1) on samples\winui-unpackaged-app, hovering and clicking rows with winapp ui hover / winapp ui click:

Before: every adorner was the filled box. There was no hover/selection distinction.

After:

overlay.adorner ... rect=129,134,52,19 ... preview=1   <- hover "Button #CounterButton" row (thin outline)
overlay.adorner ... rect=129,134,52,19 ... preview=0   <- click "TextBlock #CounterText" row (filled box)
overlay.adorner ... rect=40,128,77,32  ... preview=1   <- hover another row (thin outline)
route1.hover pointer left the tree -> highlight back to selection ...   (filled box again)

UI Automation also reports the box's name: "Hovered element preview" while hovering, "Selected element highlight" for a selection. The AutomationId stays WinAppDevToolsHighlight.

Not tested / risks

• I didn't capture a pixel screenshot of the new outline (see above).
• I didn't run the test suites or native unit tests locally. CI runs them. The UI E2E check in scripts\test-devtools-binding-owners.ps1 matches the highlight by AutomationId, which is unchanged.

Checklist

• Tested locally on Windows

Notes for reviewers

Only the inspector window's hover asks for the preview style (Route1Highlight with select=false). The protocol Overlay.highlight command, focus tracking, and pick-mode hover keep the filled box. If the hovered element is already the selection, it stays filled. Layout tracking (TrackHighlight) redraws in whichever style is currently showing.

#1133 (pick mode staying on after a pick) is a separate issue and not changed here.

[Copilot]

🔵 Needs a closer look

No blocking defect was identified, but native build results and visual confirmation of the outline and selection transitions are still needed.

No open issues 🎉

What changed in this PR

This PR distinguishes DevTools visual-tree hover from selection for #1134. Hovering an unselected row draws a thin, unfilled outline instead of the filled selection box. Pick-mode behavior, including #1133, remains unchanged.

Changes:

• Adds a preview style and accessible name while preserving the highlight’s AutomationId.
• Applies preview styling only to inspector hover and preserves it during layout updates.

File	Description
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​xaml/​adorner.xaml	Parameterizes highlight name, thickness, and fill.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsTap.Route1Read.inc	Requests preview styling for tree-row hover.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsOverlay.State.inc	Builds preview or selection markup.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsOverlay.h	Adds the optional preview parameter.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsOverlay.Exports.inc	Passes preview styling through drawing paths, except for the selected element.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsOverlay.Build.inc	Stores and logs the current highlight style.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsOverlay.Anchoring.inc	Preserves the style when tracking layout changes.

_{Review effort: Balanced}

[github-actions]

Build Metrics Report

Validation passed. All required build and validation jobs succeeded.

Binary Sizes

Artifact	Baseline	Current	Delta
CLI (ARM64)	65.10 MB	65.10 MB	📈 +8.0 KB (+0.01%)
CLI (x64)	65.01 MB	65.02 MB	📈 +6.5 KB (+0.01%)
MSIX (ARM64)	26.94 MB	26.95 MB	📈 +3.9 KB (+0.01%)
MSIX (x64)	28.57 MB	28.57 MB	📈 +4.4 KB (+0.02%)
NPM Package	56.14 MB	56.15 MB	📈 +10.4 KB (+0.02%)
NuGet Package	56.30 MB	56.30 MB	📈 +5.4 KB (+0.01%)

.NET Test Results (TRX reports)

Other suites are reflected in the overall validation status above.

✅ 10669 passed, 43 skipped out of 10712 tests in 1631.5s (-422.8s vs. baseline)

Test Coverage

✅ 87.4% line coverage, 81.5% branch coverage · ✅ no change vs. baseline

CLI Startup Time

58ms median (x64, winapp --version) · 📉 -18ms vs. baseline

Try This Build

Installs the MSIX for your architecture, replacing any previously installed build. Needs the GitHub CLI — the command offers to install it and sign you in if it is missing.

& ([scriptblock]::Create((irm https://raw.githubusercontent.com/microsoft/winappCli/main/scripts/winapp-pr.ps1))) 1173

Switching between builds often?

Put the tool on your PATH once:

& ([scriptblock]::Create((irm https://raw.githubusercontent.com/microsoft/winappCli/main/scripts/winapp-pr.ps1))) -AddToPath

Then this build is just:

winapp-pr 1173

Run winapp-pr with no arguments to pick from a list of open PRs.

---

Updated 2026-10-23 23:08:26 UTC · commit db8caf2 · workflow run