0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

LibWeb: Draw the margin and padding boxes around the inspected node

Browse source 
When highlighting a node in the inspector, we now paint three overlays:

- The content box (magenta)
- The padding box (cyan)
- The margin box (yellow)

This makes it a lot easier to debug layout issues.
This commit is contained in:
Andreas Kling 2020-06-25 15:15:01 +02:00
parent 8f92ed957b
commit b2f54be514
Notes: sideshowbarker 2024-07-19 05:23:29 +09:00
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Libraries/LibWeb/Layout/LayoutBox.cpp
View file

@ -208,8 +208,20 @@ void LayoutBox::paint(PaintContext& context, PaintPhase phase)
LayoutNodeWithStyleAndBoxModelMetrics::paint(context, phase);
if (phase == PaintPhase::Overlay && node() && document().inspected_node() == node())
context.painter().draw_rect(enclosing_int_rect(absolute_rect()), Color::Magenta);
if (phase == PaintPhase::Overlay && node() && document().inspected_node() == node()) {
auto content_rect = absolute_rect();
auto margin_box = box_model().margin_box(*this);
Gfx::FloatRect margin_rect;
margin_rect.set_x(absolute_x() - margin_box.left);
margin_rect.set_width(width() + margin_box.left + margin_box.right);
margin_rect.set_y(absolute_y() - margin_box.top);
margin_rect.set_height(height() + margin_box.top + margin_box.bottom);
context.painter().draw_rect(enclosing_int_rect(margin_rect), Color::Yellow);
context.painter().draw_rect(enclosing_int_rect(padded_rect), Color::Cyan);
context.painter().draw_rect(enclosing_int_rect(content_rect), Color::Magenta);
}
}
HitTestResult LayoutBox::hit_test(const Gfx::IntPoint& position) const