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.

1 files 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<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());
+                }
             }
         }
     }