diff --git a/Applications/Browser/main.cpp b/Applications/Browser/main.cpp index b17894207c..623a4ca929 100644 --- a/Applications/Browser/main.cpp +++ b/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(index.internal_data()); + node->document().set_inspected_node(node); + }; dom_inspector_window->set_main_widget(dom_tree_view); } if (html_widget->document()) 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(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 m_style_resolver; NonnullRefPtrVector m_sheets; RefPtr m_hovered_node; + RefPtr m_inspected_node; WeakPtr 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 #include #include +#include #include #include #include @@ -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);