LibWeb: Allow focusing individual (focusable) elements with Tab key

You can now cycle through focusable elements (currently only hyperlinks
are focusable) with the Tab key.

The focus outline is rendered in a new FocusOutline paint phase.

Libraries/LibWeb/Layout/LayoutBlock.cpp

@@ -715,6 +715,23 @@ void LayoutBlock::paint(PaintContext& context, PaintPhase phase)
             }
         }
     }
+
+    if (phase == PaintPhase::FocusOutline) {
+        if (children_are_inline()) {
+            for (auto& line_box : m_line_boxes) {
+                for (auto& fragment : line_box.fragments()) {
+                    auto* node = fragment.layout_node().node();
+                    if (!node)
+                        continue;
+                    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());
+                }
+            }
+        }
+    }
 }
 
 HitTestResult LayoutBlock::hit_test(const Gfx::IntPoint& position, HitTestType type) const

Libraries/LibWeb/Layout/LayoutBox.cpp

@@ -27,9 +27,9 @@
 #include <LibGUI/Painter.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/HTML/HTMLBodyElement.h>
-#include <LibWeb/Page/Frame.h>
 #include <LibWeb/Layout/LayoutBlock.h>
 #include <LibWeb/Layout/LayoutBox.h>
+#include <LibWeb/Page/Frame.h>
 
 namespace Web {
 
@@ -222,6 +222,10 @@ void LayoutBox::paint(PaintContext& context, PaintPhase phase)
         context.painter().draw_rect(enclosing_int_rect(padded_rect), Color::Cyan);
         context.painter().draw_rect(enclosing_int_rect(content_rect), Color::Magenta);
     }
+
+    if (phase == PaintPhase::FocusOutline && node() && node()->is_element() && downcast<DOM::Element>(*node()).is_focused()) {
+        context.painter().draw_rect(enclosing_int_rect(absolute_rect()), context.palette().focus_outline());
+    }
 }
 
 HitTestResult LayoutBox::hit_test(const Gfx::IntPoint& position, HitTestType type) const

Libraries/LibWeb/Layout/LayoutDocument.cpp

@@ -105,6 +105,7 @@ void LayoutDocument::paint_all_phases(PaintContext& context)
     paint(context, PaintPhase::Background);
     paint(context, PaintPhase::Border);
     paint(context, PaintPhase::Foreground);
+    paint(context, PaintPhase::FocusOutline);
     paint(context, PaintPhase::Overlay);
 }
 

Libraries/LibWeb/Layout/LayoutNode.h

@@ -103,6 +103,7 @@ public:
         Background,
         Border,
         Foreground,
+        FocusOutline,
         Overlay,
     };
     virtual void paint(PaintContext&, PaintPhase);