beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-21 15:10:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWebView: Display layouting information in devtools

Browse source 
Specifically, you can now see whether an element is visible,
scrollable or creates a stacking context in the devtools.
This commit is contained in:
Psychpsyo 2024-11-19 18:19:04 +01:00
parent c47d19d05a
commit ff2b49235d
2 changed files with 57 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Libraries/LibWeb/DOM/Node.cpp
View file

@ -1409,6 +1409,18 @@ void Node::serialize_tree_as_json(JsonObjectSerializer<StringBuilder>& 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"));

27
Libraries/LibWebView/InspectorClient.cpp
View file

@ -629,10 +629,7 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
if (type != "element"sv) {
builder.appendff("<span class=\"hoverable internal\" {}>", data_attributes.string_view());
builder.appendff(name);
builder.append("</span>"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;
@ -659,6 +656,28 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
}
builder.append("<span>&gt;</span>"sv);
}
// display miscellaneous extra bits of info about the element
Vector<String> 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(" <span>("sv);
builder.append(extra[0]);
for (size_t i = 1; i < extra.size(); i++) {
builder.appendff(", {}", extra[i]);
}
builder.append(")</span>"sv);
}
builder.append("</span>"sv);
});