LibHTML: Paint a magenta rectangle around the currently inspected node

Document now tracks one "inspected" node, set by set_inspected_node()
which is called by Browser's DOM inspector view on_selection callback.

Applications/Browser/main.cpp

@@ -141,6 +141,10 @@ int main(int argc, char** argv)
             dom_inspector_window->set_rect(100, 100, 300, 500);
             dom_inspector_window->set_title("DOM inspector");
             dom_tree_view = GTreeView::construct(nullptr);
+            dom_tree_view->on_selection = [](auto& index) {
+                auto* node = static_cast<Node*>(index.internal_data());
+                node->document().set_inspected_node(node);
+            };
             dom_inspector_window->set_main_widget(dom_tree_view);
         }
         if (html_widget->document())

Libraries/LibHTML/DOM/Document.cpp

@@ -244,6 +244,20 @@ LayoutDocument* Document::layout_node()
     return static_cast<LayoutDocument*>(Node::layout_node());
 }
 
+void Document::set_inspected_node(Node* node)
+{
+    if (m_inspected_node == node)
+        return;
+
+    if (m_inspected_node && m_inspected_node->layout_node())
+        m_inspected_node->layout_node()->set_needs_display();
+
+    m_inspected_node = node;
+
+    if (m_inspected_node && m_inspected_node->layout_node())
+        m_inspected_node->layout_node()->set_needs_display();
+}
+
 void Document::set_hovered_node(Node* node)
 {
     if (m_hovered_node == node)

Libraries/LibHTML/DOM/Document.h

@@ -44,6 +44,10 @@ public:
     Node* hovered_node() { return m_hovered_node; }
     const Node* hovered_node() const { return m_hovered_node; }
 
+    void set_inspected_node(Node*);
+    Node* inspected_node() { return m_inspected_node; }
+    const Node* inspected_node() const { return m_inspected_node; }
+
     const HTMLHtmlElement* document_element() const;
     const HTMLHeadElement* head() const;
     const HTMLBodyElement* body() const;
@@ -91,6 +95,7 @@ private:
     OwnPtr<StyleResolver> m_style_resolver;
     NonnullRefPtrVector<StyleSheet> m_sheets;
     RefPtr<Node> m_hovered_node;
+    RefPtr<Node> m_inspected_node;
     WeakPtr<Frame> m_frame;
     URL m_url;
 

Libraries/LibHTML/Layout/LayoutBox.cpp

@@ -21,6 +21,9 @@ void LayoutBox::render(RenderingContext& context)
         context.painter().draw_rect(m_rect, Color::Red);
 #endif
 
+    if (node() && document().inspected_node() == node())
+        context.painter().draw_rect(m_rect, Color::Magenta);
+
     Rect padded_rect;
     padded_rect.set_x(x() - box_model().padding().left.to_px());
     padded_rect.set_width(width() + box_model().padding().left.to_px() + box_model().padding().right.to_px());

Libraries/LibHTML/Layout/LayoutText.cpp

@@ -3,6 +3,7 @@
 #include <LibCore/CDirIterator.h>
 #include <LibDraw/Font.h>
 #include <LibGUI/GPainter.h>
+#include <LibHTML/DOM/Document.h>
 #include <LibHTML/Layout/LayoutBlock.h>
 #include <LibHTML/Layout/LayoutText.h>
 #include <ctype.h>
@@ -44,6 +45,9 @@ void LayoutText::render_fragment(RenderingContext& context, const LineBoxFragmen
     auto color = style().color_or_fallback(CSS::PropertyID::Color, document(), Color::Black);
     auto text_decoration = style().string_or_fallback(CSS::PropertyID::TextDecoration, "none");
 
+    if (document().inspected_node() == &node())
+        context.painter().draw_rect(enclosing_int_rect(fragment.rect()), Color::Magenta);
+
     bool is_underline = text_decoration == "underline";
     if (is_underline)
         painter.draw_line(enclosing_int_rect(fragment.rect()).bottom_left().translated(0, -1), enclosing_int_rect(fragment.rect()).bottom_right().translated(0, -1), color);