diff --git a/Libraries/LibDevTools/Actors/PageStyleActor.cpp b/Libraries/LibDevTools/Actors/PageStyleActor.cpp index 9adf529aa68..6600cc120b9 100644 --- a/Libraries/LibDevTools/Actors/PageStyleActor.cpp +++ b/Libraries/LibDevTools/Actors/PageStyleActor.cpp @@ -14,47 +14,47 @@ namespace DevTools { -static void received_layout(JsonObject& response, JsonObject const& computed_style, JsonObject const& node_box_sizing) +static void received_layout(JsonObject& response, JsonObject const& node_box_sizing) { response.set("autoMargins"sv, JsonObject {}); - auto pixel_value = [&](auto const& object, auto key) { - return object.get_double_with_precision_loss(key).value_or(0); + auto pixel_value = [&](auto key) { + return node_box_sizing.get_double_with_precision_loss(key).value_or(0); }; - auto set_pixel_value_from = [&](auto const& object, auto object_key, auto message_key) { - response.set(message_key, MUST(String::formatted("{}px", pixel_value(object, object_key)))); + auto set_pixel_value = [&](auto key) { + response.set(key, MUST(String::formatted("{}px", pixel_value(key)))); }; - auto set_computed_value_from = [&](auto const& object, auto key) { - response.set(key, object.get_string(key).value_or(String {})); + auto set_computed_value = [&](auto key) { + response.set(key, node_box_sizing.get_string(key).value_or(String {})); }; - response.set("width"sv, pixel_value(node_box_sizing, "content_width"sv)); - response.set("height"sv, pixel_value(node_box_sizing, "content_height"sv)); - // FIXME: This response should also contain "top", "right", "bottom", and "left", but our box model metrics in // WebContent do not provide this information. - set_pixel_value_from(node_box_sizing, "border_top"sv, "border-top-width"sv); - set_pixel_value_from(node_box_sizing, "border_right"sv, "border-right-width"sv); - set_pixel_value_from(node_box_sizing, "border_bottom"sv, "border-bottom-width"sv); - set_pixel_value_from(node_box_sizing, "border_left"sv, "border-left-width"sv); + set_computed_value("width"sv); + set_computed_value("height"sv); - set_pixel_value_from(node_box_sizing, "margin_top"sv, "margin-top"sv); - set_pixel_value_from(node_box_sizing, "margin_right"sv, "margin-right"sv); - set_pixel_value_from(node_box_sizing, "margin_bottom"sv, "margin-bottom"sv); - set_pixel_value_from(node_box_sizing, "margin_left"sv, "margin-left"sv); + set_pixel_value("border-top-width"sv); + set_pixel_value("border-right-width"sv); + set_pixel_value("border-bottom-width"sv); + set_pixel_value("border-left-width"sv); - set_pixel_value_from(node_box_sizing, "padding_top"sv, "padding-top"sv); - set_pixel_value_from(node_box_sizing, "padding_right"sv, "padding-right"sv); - set_pixel_value_from(node_box_sizing, "padding_bottom"sv, "padding-bottom"sv); - set_pixel_value_from(node_box_sizing, "padding_left"sv, "padding-left"sv); + set_pixel_value("margin-top"sv); + set_pixel_value("margin-right"sv); + set_pixel_value("margin-bottom"sv); + set_pixel_value("margin-left"sv); - set_computed_value_from(computed_style, "box-sizing"sv); - set_computed_value_from(computed_style, "display"sv); - set_computed_value_from(computed_style, "float"sv); - set_computed_value_from(computed_style, "line-height"sv); - set_computed_value_from(computed_style, "position"sv); - set_computed_value_from(computed_style, "z-index"sv); + set_pixel_value("padding-top"sv); + set_pixel_value("padding-right"sv); + set_pixel_value("padding-bottom"sv); + set_pixel_value("padding-left"sv); + + set_computed_value("box-sizing"sv); + set_computed_value("display"sv); + set_computed_value("float"sv); + set_computed_value("line-height"sv); + set_computed_value("position"sv); + set_computed_value("z-index"sv); } static void received_computed_style(JsonObject& response, JsonObject const& computed_style) @@ -151,7 +151,7 @@ void PageStyleActor::handle_message(Message const& message) return; inspect_dom_node(message, *node, [](auto& response, auto const& properties) { - received_layout(response, properties.computed_style, properties.node_box_sizing); + received_layout(response, properties.node_box_sizing); }); return; diff --git a/Services/WebContent/ConnectionFromClient.cpp b/Services/WebContent/ConnectionFromClient.cpp index f8c1a510acb..ab1ca3ec574 100644 --- a/Services/WebContent/ConnectionFromClient.cpp +++ b/Services/WebContent/ConnectionFromClient.cpp @@ -504,28 +504,38 @@ void ConnectionFromClient::inspect_dom_node(u64 page_id, Web::UniqueNodeID node_ return MUST(builder.to_string()); }; - auto serialize_node_box_sizing_json = [](Web::Layout::Node const* layout_node) { + auto serialize_node_box_sizing_json = [](Web::Layout::Node const* layout_node, GC::Ptr properties) { if (!layout_node || !layout_node->is_box() || !layout_node->first_paintable() || !layout_node->first_paintable()->is_paintable_box()) { return "{}"_string; } auto const& paintable_box = as(*layout_node->first_paintable()); auto const& box_model = paintable_box.box_model(); StringBuilder builder; + auto serializer = MUST(JsonObjectSerializer<>::try_create(builder)); - MUST(serializer.add("padding_top"sv, box_model.padding.top.to_double())); - MUST(serializer.add("padding_right"sv, box_model.padding.right.to_double())); - MUST(serializer.add("padding_bottom"sv, box_model.padding.bottom.to_double())); - MUST(serializer.add("padding_left"sv, box_model.padding.left.to_double())); - MUST(serializer.add("margin_top"sv, box_model.margin.top.to_double())); - MUST(serializer.add("margin_right"sv, box_model.margin.right.to_double())); - MUST(serializer.add("margin_bottom"sv, box_model.margin.bottom.to_double())); - MUST(serializer.add("margin_left"sv, box_model.margin.left.to_double())); - MUST(serializer.add("border_top"sv, box_model.border.top.to_double())); - MUST(serializer.add("border_right"sv, box_model.border.right.to_double())); - MUST(serializer.add("border_bottom"sv, box_model.border.bottom.to_double())); - MUST(serializer.add("border_left"sv, box_model.border.left.to_double())); - MUST(serializer.add("content_width"sv, paintable_box.content_width().to_double())); - MUST(serializer.add("content_height"sv, paintable_box.content_height().to_double())); + MUST(serializer.add("width"sv, paintable_box.content_width().to_double())); + MUST(serializer.add("height"sv, paintable_box.content_height().to_double())); + MUST(serializer.add("padding-top"sv, box_model.padding.top.to_double())); + MUST(serializer.add("padding-right"sv, box_model.padding.right.to_double())); + MUST(serializer.add("padding-bottom"sv, box_model.padding.bottom.to_double())); + MUST(serializer.add("padding-left"sv, box_model.padding.left.to_double())); + MUST(serializer.add("margin-top"sv, box_model.margin.top.to_double())); + MUST(serializer.add("margin-right"sv, box_model.margin.right.to_double())); + MUST(serializer.add("margin-bottom"sv, box_model.margin.bottom.to_double())); + MUST(serializer.add("margin-left"sv, box_model.margin.left.to_double())); + MUST(serializer.add("border-top-width"sv, box_model.border.top.to_double())); + MUST(serializer.add("border-right-width"sv, box_model.border.right.to_double())); + MUST(serializer.add("border-bottom-width"sv, box_model.border.bottom.to_double())); + MUST(serializer.add("border-left-width"sv, box_model.border.left.to_double())); + + if (properties) { + MUST(serializer.add("box-sizing"sv, properties->property(Web::CSS::PropertyID::BoxSizing).to_string(Web::CSS::CSSStyleValue::SerializationMode::Normal))); + MUST(serializer.add("display"sv, properties->property(Web::CSS::PropertyID::Display).to_string(Web::CSS::CSSStyleValue::SerializationMode::Normal))); + MUST(serializer.add("float"sv, properties->property(Web::CSS::PropertyID::Float).to_string(Web::CSS::CSSStyleValue::SerializationMode::Normal))); + MUST(serializer.add("line-height"sv, properties->property(Web::CSS::PropertyID::LineHeight).to_string(Web::CSS::CSSStyleValue::SerializationMode::Normal))); + MUST(serializer.add("position"sv, properties->property(Web::CSS::PropertyID::Position).to_string(Web::CSS::CSSStyleValue::SerializationMode::Normal))); + MUST(serializer.add("z-index"sv, properties->property(Web::CSS::PropertyID::ZIndex).to_string(Web::CSS::CSSStyleValue::SerializationMode::Normal))); + } MUST(serializer.finish()); return MUST(builder.to_string()); @@ -584,7 +594,7 @@ void ConnectionFromClient::inspect_dom_node(u64 page_id, Web::UniqueNodeID node_ } auto custom_properties_json = serialize_custom_properties_json(element, pseudo_element); - auto node_box_sizing_json = serialize_node_box_sizing_json(pseudo_element_node.ptr()); + auto node_box_sizing_json = serialize_node_box_sizing_json(pseudo_element_node.ptr(), pseudo_element_style); async_did_inspect_dom_node(page_id, true, computed_values, resolved_values, custom_properties_json, node_box_sizing_json, "{}"_string, fonts_json); return; } @@ -592,7 +602,7 @@ void ConnectionFromClient::inspect_dom_node(u64 page_id, Web::UniqueNodeID node_ auto computed_values = serialize_json(*element.computed_properties()); auto resolved_values = serialize_json(element.resolved_css_values()); auto custom_properties_json = serialize_custom_properties_json(element, {}); - auto node_box_sizing_json = serialize_node_box_sizing_json(element.layout_node()); + auto node_box_sizing_json = serialize_node_box_sizing_json(element.layout_node(), element.computed_properties()); auto aria_properties_state_json = serialize_aria_properties_state_json(element); auto fonts_json = serialize_fonts_json(*element.computed_properties());