diff --git a/Libraries/LibWeb/DOM/Node.cpp b/Libraries/LibWeb/DOM/Node.cpp index 051dd37c8b9..93138ee3912 100644 --- a/Libraries/LibWeb/DOM/Node.cpp +++ b/Libraries/LibWeb/DOM/Node.cpp @@ -1409,6 +1409,18 @@ void Node::serialize_tree_as_json(JsonObjectSerializer& object) c MUST(children.finish()); } } + + if (paintable_box()) { + if (paintable_box()->is_scrollable()) { + MUST(object.add("scrollable"sv, true)); + } + if (!paintable_box()->is_visible()) { + MUST(object.add("invisible"sv, true)); + } + if (paintable_box()->has_stacking_context()) { + MUST(object.add("stackingContext"sv, true)); + } + } } else if (is_text()) { MUST(object.add("type"sv, "text")); diff --git a/Libraries/LibWebView/InspectorClient.cpp b/Libraries/LibWebView/InspectorClient.cpp index 52d463695b4..ccc3da4a3de 100644 --- a/Libraries/LibWebView/InspectorClient.cpp +++ b/Libraries/LibWebView/InspectorClient.cpp @@ -629,36 +629,55 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree) if (type != "element"sv) { builder.appendff("", data_attributes.string_view()); builder.appendff(name); - builder.append(""sv); - return; + } else { + if (name.equals_ignoring_ascii_case("BODY"sv) || name.equals_ignoring_ascii_case("FRAMESET"sv)) + m_body_or_frameset_node_id = node_id; + + auto tag = name.to_lowercase(); + + builder.appendff("", data_attributes.string_view()); + builder.append("<"sv); + builder.appendff("{0}", tag); + + if (auto attributes = node.get_object("attributes"sv); attributes.has_value()) { + attributes->for_each_member([&](auto const& name, auto const& value) { + auto& dom_node_attributes = m_dom_node_attributes.ensure(node_id); + auto value_string = value.as_string(); + + builder.append(" "sv); + builder.appendff("", tag, dom_node_attributes.size()); + builder.appendff("{}", escape_html_entities(name)); + builder.append('='); + builder.appendff("\"{}\"", escape_html_entities(value_string)); + builder.append(""sv); + + dom_node_attributes.empend(MUST(String::from_byte_string(name)), MUST(String::from_byte_string(value_string))); + }); + } + + builder.append(">"sv); } - if (name.equals_ignoring_ascii_case("BODY"sv) || name.equals_ignoring_ascii_case("FRAMESET"sv)) - m_body_or_frameset_node_id = node_id; - - auto tag = name.to_lowercase(); - - builder.appendff("", data_attributes.string_view()); - builder.append("<"sv); - builder.appendff("{0}", tag); - - if (auto attributes = node.get_object("attributes"sv); attributes.has_value()) { - attributes->for_each_member([&](auto const& name, auto const& value) { - auto& dom_node_attributes = m_dom_node_attributes.ensure(node_id); - auto value_string = value.as_string(); - - builder.append(" "sv); - builder.appendff("", tag, dom_node_attributes.size()); - builder.appendff("{}", escape_html_entities(name)); - builder.append('='); - builder.appendff("\"{}\"", escape_html_entities(value_string)); - builder.append(""sv); - - dom_node_attributes.empend(MUST(String::from_byte_string(name)), MUST(String::from_byte_string(value_string))); - }); + // display miscellaneous extra bits of info about the element + Vector extra; + if (node.get_bool("scrollable"sv).value_or(false)) { + extra.append("scrollable"_string); + } + if (node.get_bool("invisible"sv).value_or(false)) { + extra.append("invisible"_string); + } + if (node.get_bool("stackingContext"sv).value_or(false)) { + extra.append("stacking context"_string); + } + if (!extra.is_empty()) { + builder.append(" ("sv); + builder.append(extra[0]); + for (size_t i = 1; i < extra.size(); i++) { + builder.appendff(", {}", extra[i]); + } + builder.append(")"sv); } - builder.append(">"sv); builder.append(""sv); });