RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-31 17:02:45 +00:00
Code Issues Activity Actions

LibHTML: Paint a magenta rectangle around the currently inspected node

Browse source 
Document now tracks one "inspected" node, set by set_inspected_node()
which is called by Browser's DOM inspector view on_selection callback.
This commit is contained in:
Andreas Kling 2019-11-09 11:58:50 +01:00
parent 7fcb21c935
commit 70a4678d77
5 changed files with 30 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Applications/Browser/main.cpp
View file

@ -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())

14
Libraries/LibHTML/DOM/Document.cpp
View file

@ -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)

5
Libraries/LibHTML/DOM/Document.h
View file

@ -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;

3
Libraries/LibHTML/Layout/LayoutBox.cpp
View file

@ -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());

4
Libraries/LibHTML/Layout/LayoutText.cpp
View file

@ -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);