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.

3 files changed, 31 insertions, 6 deletions

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