From 642491fc74c90ea11be4bef385a328f82ecd8efa Mon Sep 17 00:00:00 2001 From: Linus Groh Date: Sat, 26 Mar 2022 00:52:17 +0000 Subject: [PATCH] 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. --- Userland/Libraries/LibWeb/Painting/PaintableBox.cpp | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp index 8b3814a305..e8e085aa25 100644 --- a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp +++ b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp @@ -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(*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()); + } } } }