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

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

Browse source 
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
1 changed files with 8 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
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());
}
}
}
}