Browser+LibWeb: Add an Element size preview widget to inspector

This Adds an element size preview widget to the inspector widget
in a new tab. This functions similar to chrome and firefox and
shows the margin, border, padding, and content size of the selected
element in the inspector.

The colors for the size preview widget are taken from the chrome
browser.

14 files changed, 234 insertions, 18 deletions

diff --git a/Userland/Applications/Browser/CMakeLists.txt b/Userland/Applications/Browser/CMakeLists.txt
index 47f1ce133a..42a91864eb 100644
--- a/Userland/Applications/Browser/CMakeLists.txt
+++ b/Userland/Applications/Browser/CMakeLists.txt
@@ -21,6 +21,7 @@ set(SOURCES
     CookiesTabGML.h
     DownloadWidget.cpp
     EditBookmarkGML.h
+    ElementSizePreviewWidget.cpp
     History.cpp
     IconBag.cpp
     InspectorWidget.cpp
diff --git a/Userland/Applications/Browser/ElementSizePreviewWidget.cpp b/Userland/Applications/Browser/ElementSizePreviewWidget.cpp
new file mode 100644
index 0000000000..c8c628af18
--- /dev/null
+++ b/Userland/Applications/Browser/ElementSizePreviewWidget.cpp
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2022, Michiel Vrins
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "ElementSizePreviewWidget.h"
+#include <LibGUI/Painter.h>
+
+namespace Browser {
+
+void ElementSizePreviewWidget::paint_event(GUI::PaintEvent& event)
+{
+    GUI::Frame::paint_event(event);
+    GUI::Painter painter(*this);
+    painter.fill_rect(frame_inner_rect(), Color::White);
+
+    int outer_margin = 10;
+    int text_width_padding = 4;
+    int text_height_padding = 4;
+    int inner_content_width = 100;
+    int inner_content_height = max(15, font().glyph_height() + 2 * text_height_padding);
+
+    auto format_size_text = [&](float size) {
+        return String::formatted("{:.4f}", size);
+    };
+
+    auto compute_text_string_width = [&](float size) {
+        return font().width(format_size_text(size)) + 2 * text_width_padding;
+    };
+
+    int margin_left_width = max(25, compute_text_string_width(m_node_box_sizing.margin.left));
+    int margin_right_width = max(25, compute_text_string_width(m_node_box_sizing.margin.right));
+
+    int border_left_width = max(25, compute_text_string_width(m_node_box_sizing.border.left));
+    int border_right_width = max(25, compute_text_string_width(m_node_box_sizing.border.right));
+
+    int padding_left_width = max(25, compute_text_string_width(m_node_box_sizing.padding.left));
+    int padding_right_width = max(25, compute_text_string_width(m_node_box_sizing.padding.right));
+
+    // outer rect
+    auto margin_rect = to_widget_rect({ outer_margin,
+        outer_margin,
+        inner_content_width + border_left_width + border_right_width + margin_left_width + margin_right_width + padding_left_width + padding_right_width,
+        inner_content_height * 7 });
+
+    Gfx::IntSize content_size { margin_rect.width() + 2 * outer_margin, margin_rect.height() + 2 * outer_margin };
+    set_content_size(content_size);
+    auto border_rect = margin_rect;
+    border_rect.take_from_left(margin_left_width);
+    border_rect.take_from_right(margin_right_width);
+    border_rect.shrink({ 0, inner_content_height * 2 });
+    auto padding_rect = border_rect;
+    padding_rect.take_from_left(border_left_width);
+    padding_rect.take_from_right(border_right_width);
+    padding_rect.shrink({ 0, inner_content_height * 2 });
+    auto content_rect = padding_rect;
+    content_rect.take_from_left(padding_left_width);
+    content_rect.take_from_right(padding_right_width);
+    content_rect.shrink({ 0, inner_content_height * 2 });
+
+    auto draw_borders = [&](Gfx::IntRect rect, Color color) {
+        painter.fill_rect(rect.take_from_top(1), color);
+        painter.fill_rect(rect.take_from_right(1), color);
+        painter.fill_rect(rect.take_from_bottom(1), color);
+        painter.fill_rect(rect.take_from_left(1), color);
+    };
+
+    auto draw_size_texts = [&](Gfx::IntRect rect, Color color, Web::Layout::PixelBox box) {
+        painter.draw_text(rect, format_size_text(box.top), font(), Gfx::TextAlignment::TopCenter, color);
+        painter.draw_text(rect, format_size_text(box.right), font(), Gfx::TextAlignment::CenterRight, color);
+        painter.draw_text(rect, format_size_text(box.bottom), font(), Gfx::TextAlignment::BottomCenter, color);
+        painter.draw_text(rect, format_size_text(box.left), font(), Gfx::TextAlignment::CenterLeft, color);
+    };
+
+    // paint margin box
+    painter.fill_rect(margin_rect, Color(249, 204, 157));
+    draw_borders(margin_rect, Color::Black);
+    margin_rect.shrink(1, 1, 1, 1);
+    margin_rect.shrink(text_height_padding, text_width_padding, text_height_padding, text_width_padding);
+    painter.draw_text(margin_rect, "margin", font(), Gfx::TextAlignment::TopLeft, Color::Black);
+    draw_size_texts(margin_rect, Color::Black, m_node_box_sizing.margin);
+
+    // paint border box
+    painter.fill_rect(border_rect, Color(253, 221, 155));
+    draw_borders(border_rect, Color::Black);
+    border_rect.shrink(1, 1, 1, 1);
+    border_rect.shrink(text_height_padding, text_width_padding, text_height_padding, text_width_padding);
+    painter.draw_text(border_rect, "border", font(), Gfx::TextAlignment::TopLeft, Color::Black);
+    draw_size_texts(border_rect, Color::Black, m_node_box_sizing.border);
+
+    // paint padding box
+    painter.fill_rect(padding_rect, Color(195, 208, 139));
+    draw_borders(padding_rect, Color::Black);
+    padding_rect.shrink(1, 1, 1, 1);
+    padding_rect.shrink(text_height_padding, text_width_padding, text_height_padding, text_width_padding);
+    painter.draw_text(padding_rect, "padding", font(), Gfx::TextAlignment::TopLeft, Color::Black);
+    draw_size_texts(padding_rect, Color::Black, m_node_box_sizing.padding);
+
+    // paint content box
+    auto content_size_text = String::formatted("{}x{}", m_node_content_width, m_node_content_height);
+    painter.fill_rect(content_rect, Color(140, 182, 192));
+    draw_borders(content_rect, Color::Black);
+    content_rect.shrink(1, 1, 1, 1);
+    painter.draw_text(content_rect, content_size_text, font(), Gfx::TextAlignment::Center, Color::Black);
+}
+
+}
diff --git a/Userland/Applications/Browser/ElementSizePreviewWidget.h b/Userland/Applications/Browser/ElementSizePreviewWidget.h
new file mode 100644
index 0000000000..691aaf00a7
--- /dev/null
+++ b/Userland/Applications/Browser/ElementSizePreviewWidget.h
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2022, Michiel Vrins
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibGUI/AbstractScrollableWidget.h>
+#include <LibGUI/Frame.h>
+#include <LibGfx/Rect.h>
+#include <LibWeb/Layout/BoxModelMetrics.h>
+
+namespace Browser {
+
+class ElementSizePreviewWidget final : public GUI::AbstractScrollableWidget {
+    C_OBJECT(ElementSizePreviewWidget)
+
+public:
+    void set_box_model(Web::Layout::BoxModelMetrics box_model) { m_node_box_sizing = box_model; };
+    void set_node_content_height(float height) { m_node_content_height = height; };
+    void set_node_content_width(float width) { m_node_content_width = width; };
+
+private:
+    virtual void paint_event(GUI::PaintEvent&) override;
+    Web::Layout::BoxModelMetrics m_node_box_sizing;
+    float m_node_content_height = 0;
+    float m_node_content_width = 0;
+};
+
+}
diff --git a/Userland/Applications/Browser/InspectorWidget.cpp b/Userland/Applications/Browser/InspectorWidget.cpp
index a2d72b3687..cea07ab32d 100644
--- a/Userland/Applications/Browser/InspectorWidget.cpp
+++ b/Userland/Applications/Browser/InspectorWidget.cpp
@@ -7,6 +7,7 @@
  */
 
 #include "InspectorWidget.h"
+#include "ElementSizePreviewWidget.h"
 #include <LibGUI/BoxLayout.h>
 #include <LibGUI/Splitter.h>
 #include <LibGUI/TabWidget.h>
@@ -52,6 +53,7 @@ void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
     if (maybe_inspected_node_properties.has_value()) {
         auto inspected_node_properties = maybe_inspected_node_properties.value();
         load_style_json(inspected_node_properties.specified_values_json, inspected_node_properties.computed_values_json, inspected_node_properties.custom_properties_json);
+        update_node_box_model(inspected_node_properties.node_box_sizing_json);
     } else {
         clear_style_json();
     }
@@ -93,6 +95,12 @@ InspectorWidget::InspectorWidget()
     custom_properties_table_container.layout()->set_margins({ 4, 4, 4, 4 });
     m_custom_properties_table_view = custom_properties_table_container.add<GUI::TableView>();
 
+    auto& element_size = bottom_tab_widget.add_tab<GUI::Widget>("Element");
+    element_size.set_layout<GUI::VerticalBoxLayout>();
+    element_size.layout()->set_margins({ 4, 4, 4, 4 });
+    m_element_size_view = element_size.add<ElementSizePreviewWidget>();
+    m_element_size_view->set_should_hide_unnecessary_scrollbars(true);
+
     m_dom_tree_view->set_focus(true);
 }
 
@@ -129,7 +137,7 @@ void InspectorWidget::clear_dom_json()
     clear_style_json();
 }
 
-void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json)
+void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json, String node_box_sizing_json)
 {
     if (node_id != m_inspected_node_id) {
         dbgln("Got data for the wrong node id! Wanted {}, got {}", m_inspected_node_id, node_id);
@@ -137,6 +145,7 @@ void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified
     }
 
     load_style_json(specified_values_json, computed_values_json, custom_properties_json);
+    update_node_box_model(node_box_sizing_json);
 }
 
 void InspectorWidget::load_style_json(String specified_values_json, String computed_values_json, String custom_properties_json)
@@ -151,6 +160,36 @@ void InspectorWidget::load_style_json(String specified_values_json, String compu
     m_custom_properties_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_custom_properties_json.value().view()));
 }
 
+void InspectorWidget::update_node_box_model(Optional<String> node_box_sizing_json)
+{
+    if (!node_box_sizing_json.has_value()) {
+        return;
+    }
+    auto json_or_error = JsonValue::from_string(node_box_sizing_json.value());
+    if (json_or_error.is_error() || !json_or_error.value().is_object()) {
+        return;
+    }
+    auto json_value = json_or_error.release_value();
+    const auto& json_object = json_value.as_object();
+
+    m_node_box_sizing.margin.top = json_object.get("margin_top").to_float();
+    m_node_box_sizing.margin.right = json_object.get("margin_right").to_float();
+    m_node_box_sizing.margin.bottom = json_object.get("margin_bottom").to_float();
+    m_node_box_sizing.margin.left = json_object.get("margin_left").to_float();
+    m_node_box_sizing.padding.top = json_object.get("padding_top").to_float();
+    m_node_box_sizing.padding.right = json_object.get("padding_right").to_float();
+    m_node_box_sizing.padding.bottom = json_object.get("padding_bottom").to_float();
+    m_node_box_sizing.padding.left = json_object.get("padding_left").to_float();
+    m_node_box_sizing.border.top = json_object.get("border_top").to_float();
+    m_node_box_sizing.border.right = json_object.get("border_right").to_float();
+    m_node_box_sizing.border.bottom = json_object.get("border_bottom").to_float();
+    m_node_box_sizing.border.left = json_object.get("border_left").to_float();
+
+    m_element_size_view->set_node_content_width(json_object.get("content_width").to_float());
+    m_element_size_view->set_node_content_height(json_object.get("content_height").to_float());
+    m_element_size_view->set_box_model(m_node_box_sizing);
+}
+
 void InspectorWidget::clear_style_json()
 {
     m_inspected_node_specified_values_json.clear();
@@ -161,6 +200,10 @@ void InspectorWidget::clear_style_json()
 
     m_inspected_node_custom_properties_json.clear();
     m_custom_properties_table_view->set_model(nullptr);
+
+    m_element_size_view->set_box_model({});
+    m_element_size_view->set_node_content_width(0);
+    m_element_size_view->set_node_content_height(0);
 }
 
 }
diff --git a/Userland/Applications/Browser/InspectorWidget.h b/Userland/Applications/Browser/InspectorWidget.h
index cd02355150..3d7afe5001 100644
--- a/Userland/Applications/Browser/InspectorWidget.h
+++ b/Userland/Applications/Browser/InspectorWidget.h
@@ -8,8 +8,10 @@
 
 #pragma once
 
+#include "ElementSizePreviewWidget.h"
 #include <LibGUI/Widget.h>
 #include <LibWeb/Forward.h>
+#include <LibWeb/Layout/BoxModelMetrics.h>
 
 namespace Browser {
 
@@ -21,7 +23,7 @@ public:
     void set_web_view(NonnullRefPtr<Web::OutOfProcessWebView> web_view) { m_web_view = web_view; }
     void set_dom_json(String);
     void clear_dom_json();
-    void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json);
+    void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json, String node_box_sizing_json);
 
     void set_inspected_node(i32 node_id);
     void select_default_node();
@@ -31,6 +33,7 @@ private:
 
     void set_inspected_node(GUI::ModelIndex);
     void load_style_json(String specified_values_json, String computed_values_json, String custom_properties_json);
+    void update_node_box_model(Optional<String> node_box_sizing_json);
     void clear_style_json();
 
     RefPtr<Web::OutOfProcessWebView> m_web_view;
@@ -39,6 +42,9 @@ private:
     RefPtr<GUI::TableView> m_style_table_view;
     RefPtr<GUI::TableView> m_computed_style_table_view;
     RefPtr<GUI::TableView> m_custom_properties_table_view;
+    RefPtr<ElementSizePreviewWidget> m_element_size_view;
+
+    Web::Layout::BoxModelMetrics m_node_box_sizing;
 
     // Multi-process mode
     Optional<i32> m_pending_inspect_node_id;
diff --git a/Userland/Applications/Browser/Tab.cpp b/Userland/Applications/Browser/Tab.cpp
index 36f596cfc8..1799010089 100644
--- a/Userland/Applications/Browser/Tab.cpp
+++ b/Userland/Applications/Browser/Tab.cpp
@@ -292,8 +292,8 @@ Tab::Tab(BrowserWindow& window)
             m_dom_inspector_widget->set_dom_json(dom_tree);
     };
 
-    hooks().on_get_dom_node_properties = [this](auto node_id, auto& specified, auto& computed, auto& custom_properties) {
-        m_dom_inspector_widget->set_dom_node_properties_json(node_id, specified, computed, custom_properties);
+    hooks().on_get_dom_node_properties = [this](auto node_id, auto& specified, auto& computed, auto& custom_properties, auto& node_box_sizing) {
+        m_dom_inspector_widget->set_dom_node_properties_json(node_id, specified, computed, custom_properties, node_box_sizing);
     };
 
     hooks().on_js_console_new_message = [this](auto message_index) {
diff --git a/Userland/Libraries/LibWeb/OutOfProcessWebView.cpp b/Userland/Libraries/LibWeb/OutOfProcessWebView.cpp
index a05bc72b6a..88c56d4180 100644
--- a/Userland/Libraries/LibWeb/OutOfProcessWebView.cpp
+++ b/Userland/Libraries/LibWeb/OutOfProcessWebView.cpp
@@ -354,10 +354,10 @@ void OutOfProcessWebView::notify_server_did_get_dom_tree(const String& dom_tree)
         on_get_dom_tree(dom_tree);
 }
 
-void OutOfProcessWebView::notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties)
+void OutOfProcessWebView::notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing)
 {
     if (on_get_dom_node_properties)
-        on_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties);
+        on_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties, node_box_sizing);
 }
 
 void OutOfProcessWebView::notify_server_did_output_js_console_message(i32 message_index)
@@ -441,7 +441,8 @@ Optional<OutOfProcessWebView::DOMNodeProperties> OutOfProcessWebView::inspect_do
     return DOMNodeProperties {
         .specified_values_json = response.specified_style(),
         .computed_values_json = response.computed_style(),
-        .custom_properties_json = response.custom_properties()
+        .custom_properties_json = response.custom_properties(),
+        .node_box_sizing_json = response.node_box_sizing()
     };
 }
 
diff --git a/Userland/Libraries/LibWeb/OutOfProcessWebView.h b/Userland/Libraries/LibWeb/OutOfProcessWebView.h
index 1f89dccbf8..8a4a430ad6 100644
--- a/Userland/Libraries/LibWeb/OutOfProcessWebView.h
+++ b/Userland/Libraries/LibWeb/OutOfProcessWebView.h
@@ -38,6 +38,7 @@ public:
         String specified_values_json;
         String computed_values_json;
         String custom_properties_json;
+        String node_box_sizing_json;
     };
     Optional<DOMNodeProperties> inspect_dom_node(i32 node_id);
     void clear_inspected_dom_node();
@@ -81,7 +82,7 @@ public:
     String notify_server_did_request_prompt(Badge<WebContentClient>, const String& message, const String& default_);
     void notify_server_did_get_source(const AK::URL& url, const String& source);
     void notify_server_did_get_dom_tree(const String& dom_tree);
-    void notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties);
+    void notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing);
     void notify_server_did_output_js_console_message(i32 message_index);
     void notify_server_did_get_js_console_messages(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages);
     void notify_server_did_change_favicon(const Gfx::Bitmap& favicon);
diff --git a/Userland/Libraries/LibWeb/WebContentClient.cpp b/Userland/Libraries/LibWeb/WebContentClient.cpp
index 9220a61775..1787e94c09 100644
--- a/Userland/Libraries/LibWeb/WebContentClient.cpp
+++ b/Userland/Libraries/LibWeb/WebContentClient.cpp
@@ -146,9 +146,9 @@ void WebContentClient::did_get_dom_tree(String const& dom_tree)
     m_view.notify_server_did_get_dom_tree(dom_tree);
 }
 
-void WebContentClient::did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties)
+void WebContentClient::did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing)
 {
-    m_view.notify_server_did_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties);
+    m_view.notify_server_did_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties, node_box_sizing);
 }
 
 void WebContentClient::did_output_js_console_message(i32 message_index)
diff --git a/Userland/Libraries/LibWeb/WebContentClient.h b/Userland/Libraries/LibWeb/WebContentClient.h
index cea2774b96..8c7ac2ed89 100644
--- a/Userland/Libraries/LibWeb/WebContentClient.h
+++ b/Userland/Libraries/LibWeb/WebContentClient.h
@@ -51,7 +51,7 @@ private:
     virtual void did_request_image_context_menu(Gfx::IntPoint const&, AK::URL const&, String const&, unsigned, Gfx::ShareableBitmap const&) override;
     virtual void did_get_source(AK::URL const&, String const&) override;
     virtual void did_get_dom_tree(String const&) override;
-    virtual void did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties) override;
+    virtual void did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing) override;
     virtual void did_output_js_console_message(i32 message_index) override;
     virtual void did_get_js_console_messages(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages) override;
     virtual void did_change_favicon(Gfx::ShareableBitmap const&) override;
diff --git a/Userland/Libraries/LibWeb/WebViewHooks.h b/Userland/Libraries/LibWeb/WebViewHooks.h
index c83afd34af..0a9630b78b 100644
--- a/Userland/Libraries/LibWeb/WebViewHooks.h
+++ b/Userland/Libraries/LibWeb/WebViewHooks.h
@@ -29,7 +29,7 @@ public:
     Function<void(DOM::Document*)> on_set_document;
     Function<void(const AK::URL&, const String&)> on_get_source;
     Function<void(const String&)> on_get_dom_tree;
-    Function<void(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties)> on_get_dom_node_properties;
+    Function<void(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing)> on_get_dom_node_properties;
     Function<void(i32 message_id)> on_js_console_new_message;
     Function<void(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages)> on_get_js_console_messages;
     Function<String(const AK::URL& url, Cookie::Source source)> on_get_cookie;
diff --git a/Userland/Services/WebContent/ConnectionFromClient.cpp b/Userland/Services/WebContent/ConnectionFromClient.cpp
index ecdeecaa63..e40e1054f5 100644
--- a/Userland/Services/WebContent/ConnectionFromClient.cpp
+++ b/Userland/Services/WebContent/ConnectionFromClient.cpp
@@ -258,7 +258,7 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
 
     Web::DOM::Node* node = Web::DOM::Node::from_id(node_id);
     if (!node) {
-        return { false, "", "", "" };
+        return { false, "", "", "", "" };
     }
 
     node->document().set_inspected_node(node);
@@ -266,7 +266,7 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
     if (node->is_element()) {
         auto& element = verify_cast<Web::DOM::Element>(*node);
         if (!element.specified_css_values())
-            return { false, "", "", "" };
+            return { false, "", "", "", "" };
 
         auto serialize_json = [](Web::CSS::StyleProperties const& properties) -> String {
             StringBuilder builder;
@@ -301,14 +301,39 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
 
             return builder.to_string();
         };
+        auto serialize_node_box_sizing_json = [](Web::DOM::Element const& element) -> String {
+            if (!element.layout_node()) {
+                return "";
+            }
+            auto box_model = static_cast<Web::Layout::Box const&>(*element.layout_node()).box_model();
+            StringBuilder builder;
+            auto serializer = MUST(JsonObjectSerializer<>::try_create(builder));
+            MUST(serializer.add("padding_top", box_model.padding.top));
+            MUST(serializer.add("padding_right", box_model.padding.right));
+            MUST(serializer.add("padding_bottom", box_model.padding.bottom));
+            MUST(serializer.add("padding_left", box_model.padding.left));
+            MUST(serializer.add("margin_top", box_model.margin.top));
+            MUST(serializer.add("margin_right", box_model.margin.top));
+            MUST(serializer.add("margin_bottom", box_model.margin.top));
+            MUST(serializer.add("margin_left", box_model.margin.top));
+            MUST(serializer.add("border_top", box_model.border.top));
+            MUST(serializer.add("border_right", box_model.border.right));
+            MUST(serializer.add("border_bottom", box_model.border.bottom));
+            MUST(serializer.add("border_left", box_model.border.left));
+            MUST(serializer.add("content_width", static_cast<Web::Layout::Box const&>(*element.layout_node()).content_width()));
+            MUST(serializer.add("content_height", static_cast<Web::Layout::Box const&>(*element.layout_node()).content_height()));
 
+            MUST(serializer.finish());
+            return builder.to_string();
+        };
         String specified_values_json = serialize_json(*element.specified_css_values());
         String computed_values_json = serialize_json(element.computed_style());
         String custom_properties_json = serialize_custom_properties_json(element);
-        return { true, specified_values_json, computed_values_json, custom_properties_json };
+        String node_box_sizing_json = serialize_node_box_sizing_json(element);
+        return { true, specified_values_json, computed_values_json, custom_properties_json, node_box_sizing_json };
     }
 
-    return { false, "", "", "" };
+    return { false, "", "", "", "" };
 }
 
 Messages::WebContentServer::GetHoveredNodeIdResponse ConnectionFromClient::get_hovered_node_id()
diff --git a/Userland/Services/WebContent/WebContentClient.ipc b/Userland/Services/WebContent/WebContentClient.ipc
index 82f90abae8..04ab5c4ecf 100644
--- a/Userland/Services/WebContent/WebContentClient.ipc
+++ b/Userland/Services/WebContent/WebContentClient.ipc
@@ -29,7 +29,7 @@ endpoint WebContentClient
     did_request_prompt(String message, String default_) => (String response)
     did_get_source(URL url, String source) =|
     did_get_dom_tree(String dom_tree) =|
-    did_get_dom_node_properties(i32 node_id, String specified_style, String computed_style, String custom_properties) =|
+    did_get_dom_node_properties(i32 node_id, String specified_style, String computed_style, String custom_properties, String node_box_sizing_json) =|
     did_change_favicon(Gfx::ShareableBitmap favicon) =|
     did_request_cookie(URL url, u8 source) => (String cookie)
     did_set_cookie(URL url, Web::Cookie::ParsedCookie cookie, u8 source) =|
diff --git a/Userland/Services/WebContent/WebContentServer.ipc b/Userland/Services/WebContent/WebContentServer.ipc
index dbe200512b..5c8988a39c 100644
--- a/Userland/Services/WebContent/WebContentServer.ipc
+++ b/Userland/Services/WebContent/WebContentServer.ipc
@@ -29,7 +29,7 @@ endpoint WebContentServer
     debug_request(String request, String argument) =|
     get_source() =|
     inspect_dom_tree() =|
-    inspect_dom_node(i32 node_id) => (bool has_style, String specified_style, String computed_style, String custom_properties)
+    inspect_dom_node(i32 node_id) => (bool has_style, String specified_style, String computed_style, String custom_properties, String node_box_sizing)
     get_hovered_node_id() => (i32 node_id)
     js_console_input(String js_source) =|
     js_console_request_messages(i32 start_index) =|