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.

4 files changed, 26 insertions, 0 deletions

diff --git a/Libraries/LibHTML/DOM/Document.cpp b/Libraries/LibHTML/DOM/Document.cpp
index 14d5c56f24..5276c1804b 100644
--- a/Libraries/LibHTML/DOM/Document.cpp
+++ b/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)
diff --git a/Libraries/LibHTML/DOM/Document.h b/Libraries/LibHTML/DOM/Document.h
index e75c2d9066..85595e43eb 100644
--- a/Libraries/LibHTML/DOM/Document.h
+++ b/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;
 
diff --git a/Libraries/LibHTML/Layout/LayoutBox.cpp b/Libraries/LibHTML/Layout/LayoutBox.cpp
index cf3039287f..d0a6497da1 100644
--- a/Libraries/LibHTML/Layout/LayoutBox.cpp
+++ b/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());
diff --git a/Libraries/LibHTML/Layout/LayoutText.cpp b/Libraries/LibHTML/Layout/LayoutText.cpp
index 0c10be7ddb..bdf3c5e1c0 100644
--- a/Libraries/LibHTML/Layout/LayoutText.cpp
+++ b/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);