mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-11 02:29:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

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
commit 642491fc74
Notes: sideshowbarker 2024-07-17 16:45:48 +09:00
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());
}
}
}
}