Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core: Render yellow rectangular highlight on keyboard focus #15717

Merged
merged 5 commits into from Apr 1, 2024

Conversation

kjarosh
Copy link
Contributor

@kjarosh kjarosh commented Mar 22, 2024

Related to #5443.

This patch implements rendering of the yellow rectangle around a focused element after pressing Tab.

output 01_highlight_under expected output 02_highlight_over expected
image image

@kjarosh
Copy link
Contributor Author

kjarosh commented Mar 22, 2024

It seems that I accidentally improved Ruffle compatibility regarding the visual/shumway_acid_tests/acid test, which... made it fail.

Look at its left eye 🧐 (other differences result from the fact that elements are animated and I picked a random frame)

FP Ruffle before Ruffle after

@torokati44
Copy link
Member

Plus the little rectangle on the bottom left is now rotated as it should be. The little block under its chin looks more different though... 🤔

@kjarosh
Copy link
Contributor Author

kjarosh commented Mar 22, 2024

Plus the little rectangle on the bottom left is now rotated as it should be. The little block under its chin looks more different though... 🤔

Ohh you shouldn't really look at that. Those elements are animated and I picked a random frame (I should've mentioned that!)

Regarding the pixel-perfect first-frame render:

Before After Difference

@torokati44
Copy link
Member

Ah, I see! Then perhaps we should compare more frames, to also test the animation? Now that there is support for that... :) Not in scope of this PR of course.

@kjarosh kjarosh force-pushed the tab-ordering-highlight branch 5 times, most recently from bae7965 to 46df652 Compare March 27, 2024 12:27
@kjarosh kjarosh marked this pull request as ready for review March 27, 2024 12:28
@kjarosh kjarosh force-pushed the tab-ordering-highlight branch 2 times, most recently from 8fd032e to 97398a2 Compare March 27, 2024 15:34
@danielhjacobs danielhjacobs added the waiting-on-review Waiting on review from a Ruffle team member label Mar 28, 2024
}

let bounds = focus.world_bounds().grow(-Self::HIGHLIGHT_WIDTH / 2);
let mut drawing = Drawing::new();
Copy link
Contributor

@Dinnerbone Dinnerbone Apr 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using Drawing for this is going to be a little expensive on the rendering side, but realistically this isn't going to be hit enough to be noticed (I hope?)
Ideally we have a draw command that's "draw box outline" later, and let the render backend optimise that. It can make it screen-pixel perfect too, which would be nice.

Not something you need to change for this PR - just a comment!

Copy link
Contributor

@Dinnerbone Dinnerbone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks cool! Thank you!

This patch implements rendering of the yellow rectangle around
a focused element after pressing Tab. Focus tracker which is responsible
for keeping track of the current focus is now also responsible
for keeping track of the highlight and rendering thereof.
@torokati44 torokati44 merged commit a150fb3 into ruffle-rs:master Apr 1, 2024
17 checks passed
@kjarosh kjarosh deleted the tab-ordering-highlight branch April 1, 2024 21:40
@Lord-McSweeney Lord-McSweeney removed the waiting-on-review Waiting on review from a Ruffle team member label Apr 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

None yet

5 participants