New UiDebugOverlay features

[ickshonpe]

Objective

• Allow setting the UI debug outline options for individual nodes.
• Add options to render outlines for the padding-box, content-box and scrollbar regions of UI nodes.
• Add an option to ignore border radius and render the node outlines without curved corners.

Solution

• Expand UiDebugOptions to include fields to control the new features:

pub struct UiDebugOptions {
    /// Set to true to enable the UI debug overlay
    pub enabled: bool,
    /// Show outlines for the border boxes of UI nodes
    pub outline_border_box: bool,
    /// Show outlines for the padding boxes of UI nodes
    pub outline_padding_box: bool,
    /// Show outlines for the content boxes of UI nodes
    pub outline_content_box: bool,
    /// Show outlines for the scrollbar regions of UI nodes
    pub outline_scrollbars: bool,
    /// Width of the overlay's lines in logical pixels
    pub line_width: f32,
    /// Show outlines for non-visible UI nodes
    pub show_hidden: bool,
    /// Show outlines for clipped sections of UI nodes
    pub show_clipped: bool,
    /// Draw outlines without curved corners
    pub ignore_border_radius: bool,
}

By default, only outline_border_box is enabled, matching the original behaviour before this PR.

• Update extract_debug_overlay to add rendering for the new features.
• Derive Component for UiDebugOptions, as well as Resource. As a Resource it sets the options globally. As a Component it overrides the resource, to control the options locally for an individual UiNode.

Testing

Added debug outlines to the scroll example to display the scrollbar bounds for the vertically scrolling list on the left when debug outlines are enabled, run with:

cargo run --example scroll --features="bevy_ui_debug"

---

Showcase