Draw the UI debug overlay using the UI renderer

[ickshonpe]

Objective

Draw the UI debug overlay using the UI renderer.

Significantly simpler and easier to use than bevy_dev_tools::ui_debug_overlay which uses bevy_gizmos.

• Supports multiple windows and UI rendered to texture.
• Draws rounded debug rects for rounded UI nodes.

Fixes #16666

Solution

Removed the ui_debug_overlay module from bevy_dev_tools.

Added a bevy_ui_debug feature gate.

Draw the UI debug overlay using the UI renderer.
Adds a new module bevy_ui::render::debug_overlay.

The debug overlay extraction function queries for the existing UI layout and then adds a border around each UI node with u32::MAX / 2 added to each stack index so it's drawn on top.

There is a UiDebugOptions resource that can be used to enable or disable the debug overlay and set the line width.

Testing

The testbed_ui example has been changed to use the new debug overlay:

cargo run --example testbed_ui --features bevy_ui_debug

Press Space to toggle the debug overlay on and off.

---

Showcase

Migration Guide

The ui_debug_overlay module has been removed from bevy_dev_tools.
There is a new debug overlay implemented using the bevy_ui renderer. To use it, enable the bevy_ui_debug feature and set the enable field of the UiDebugOptions resource to true.

[JMS55]

Can we get a rounded node in the example to ensure we don't break this later?

[ickshonpe]

Can we get a rounded node in the example to ensure we don't break this later?

The rotated bevy logo in the bottom left has a rounded debug outline (the blue outline).

[JMS55]

Oh I missed that 😅

[github-actions]

It looks like your PR is a breaking change, but you didn't provide a migration guide.

Could you add some context on what users should update when this change get released in a new version of Bevy?
It will be used to help writing the migration guide for the version. Putting it after a ## Migration Guide will help it get automatically picked up by our tooling.

[alice-i-cecile]

This is a much simpler and more reliable way to do this: I really prefer it. That said, we should clean up and remove the old approach in this PR, and write a migration guide.

I don't feel strongly about "where should this live": bevy_dev_tools is in a weird spot currently, but if this lives in bevy_ui we should probably feature flag it.

[ickshonpe]

This is a much simpler and more reliable way to do this: I really prefer it. That said, we should clean up and remove the old approach in this PR, and write a migration guide.

I don't feel strongly about "where should this live": bevy_dev_tools is in a weird spot currently, but if this lives in bevy_ui we should probably feature flag it.

It seems to me that bevy_dev_tools should be more for more general profiling and testing features which are going to be useful for any Bevy application. The UI debug overlay is UI specific so it belongs in the UI crate imo.

[github-actions]

You added a new feature but didn't update the readme. Please run cargo run -p build-templated-pages -- update features to update it, and commit the file change.

[github-actions]

You added a new feature but didn't update the readme. Please run cargo run -p build-templated-pages -- update features to update it, and commit the file change.

[JeanMertz]

I backported and tested this on the 0.15 release. Works beautifully.

[alice-i-cecile]

@ickshonpe I'm going to count that as a second approval. Ping me when this is up to date with main please :)

[ickshonpe]

@alice-i-cecile should be ready now. We're just ignoring the failing check-advisories CI for the moment?

[alice-i-cecile]

Yeah, it's blocked on an upstream fix :(