From b2f54be5147de518007ff45cb0a9c279d05bf574 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Thu, 25 Jun 2020 15:15:01 +0200 Subject: [PATCH] LibWeb: Draw the margin and padding boxes around the inspected node 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. --- Libraries/LibWeb/Layout/LayoutBox.cpp | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/Libraries/LibWeb/Layout/LayoutBox.cpp b/Libraries/LibWeb/Layout/LayoutBox.cpp index 6507f5220b..cfddbf21bd 100644 --- a/Libraries/LibWeb/Layout/LayoutBox.cpp +++ b/Libraries/LibWeb/Layout/LayoutBox.cpp @@ -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