separate border colors

[robtfm]

Objective

allow specifying the left/top/right/bottom border colors separately for ui elements

fixes #14773

Solution

• change BorderColor to

pub struct BorderColor {
    pub left: Color,
    pub top: Color,
    pub right: Color,
    pub bottom: Color,
}

• generate one ui node per distinct border color, set flags for the active borders
• render only the active borders

i chose to do this rather than adding multiple colors to the ExtractedUiNode in order to minimize the impact for the common case where all border colors are the same.

Testing

modified the borders example to use separate colors:

the behaviour is a bit weird but it mirrors html/css border behaviour.

---

Migration:

To keep the existing behaviour, just change BorderColor(color) into BorderColor::all(color).

[IceSentry]

LGTM (assuming CI is fixed)

[github-actions]

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

Please review the instructions for writing migration guides, then expand or revise the content in the migration guides directory to reflect your changes.

[ickshonpe]

I think this is good for an initial implementation.
It's unpleasant how BorderColor stores four colours even though most of the time it will only be using one of them, but other options like having separate components for multi-colored borders or something seem worse.
Drawing the border in multiple passes seems fine. Adding an extra phase item + extracted uinode though for each additional border color is a bit bad, but it doesn't matter for the common single color border case so it should be fine for now.

[ickshonpe]

Thought about it again while trying to go to sleep and this seems pretty simple:

        if let Some(border_color) = maybe_border_color {
                let border_colors = [
                    border_color.left.to_linear(),
                    border_color.top.to_linear(),
                    border_color.right.to_linear(),
                    border_color.bottom.to_linear(),
                ];

                let mut completed_flags = 0;
                for (i, &color) in border_colors.iter().enumerate() {
                    if color.is_fully_transparent() {
                        continue;
                    }

                   let mut border_flags = BORDER_FLAGS[i];

                    if completed_flags & border_flags != 0 {
                        continue;
                    }
                    
                    for j in i + 1..4 {
                        if color == border_colors[j] {
                            border_flags |= BORDER_FLAGS[j];
                        }
                    }
                    completed_flags |= border_flags;

with

const BORDER_FLAGS: [u32; 4] = [
    shader_flags::BORDER_LEFT,
    shader_flags::BORDER_TOP,
    shader_flags::BORDER_RIGHT,
    shader_flags::BORDER_BOTTOM,
];

[robtfm]

yes fair enough. has the benefit of predictable ordering too.