1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 15:17:36 +00:00

LibWeb: Paint the focus outline actually *outside* the element

Instead of using the absolute_rect(), use absolute_border_box_rect() -
at least for PaintableBox - and inflate it by 2px on each side.

This looks much nicer for text input elements, especially when they have
padding, which would be applied outside the focus rect previously.
This commit is contained in:
Linus Groh 2022-03-26 00:52:17 +00:00
parent faf7331999
commit 642491fc74

View file

@ -154,7 +154,9 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
}
if (phase == PaintPhase::FocusOutline && layout_box().dom_node() && layout_box().dom_node()->is_element() && verify_cast<DOM::Element>(*layout_box().dom_node()).is_focused()) {
context.painter().draw_rect(enclosing_int_rect(absolute_rect()), context.palette().focus_outline());
// FIXME: Implement this as `outline` using :focus-visible in the default UA stylesheet to make it possible to override/disable.
auto focus_outline_rect = enclosing_int_rect(absolute_border_box_rect()).inflated(4, 4);
context.painter().draw_rect(focus_outline_rect, context.palette().focus_outline());
}
}
@ -463,8 +465,11 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
auto* parent = node->parent_element();
if (!parent)
continue;
if (parent->is_focused())
context.painter().draw_rect(enclosing_int_rect(fragment.absolute_rect()), context.palette().focus_outline());
if (parent->is_focused()) {
// FIXME: Implement this as `outline` using :focus-visible in the default UA stylesheet to make it possible to override/disable.
auto focus_outline_rect = enclosing_int_rect(fragment.absolute_rect()).inflated(4, 4);
context.painter().draw_rect(focus_outline_rect, context.palette().focus_outline());
}
}
}
}