system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-23 02:55:15 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

LibWebView: Allow editing empty DOM text nodes in the Inspector

Browse source 
When a DOM text node is empty, we currently render the node name (which
is "#text") in the Inspector. This is just to prevent displaying nothing
at all, which looks a bit off. However, the patch to allow editing text
fields neglected to allow editing these empty fields.

This patch attaches the original text data as a data attribute, much
like we do for DOM attributes. That is used as the editable text in the
inspector, and the empty text fields are now wrapped in an editable
span.
This commit is contained in:
Timothy Flynn 2023-12-09 17:32:10 -05:00 committed by Andreas Kling
parent 6595e76fef
commit 55ec1cbfb5
2 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
Base/res/ladybird/inspector.js
View file

@ -262,10 +262,9 @@ const editDOMNode = domNode => {
}
const domNodeID = selectedDOMNode.dataset.id;
const type = domNode.dataset.nodeType;
const handleChange = value => {
const type = domNode.dataset.nodeType;
if (type === "text" || type === "comment") {
inspector.setDOMNodeText(domNodeID, value);
} else if (type === "tag") {
@ -282,7 +281,12 @@ const editDOMNode = domNode => {
};
let editor = createDOMEditor(handleChange, cancelChange);
editor.value = domNode.innerText;
if (type === "text") {
editor.value = domNode.dataset.text;
} else {
editor.value = domNode.innerText;
}
domNode.parentNode.replaceChild(editor, domNode);
};

17
Userland/Libraries/LibWebView/InspectorClient.cpp
View file

@ -484,16 +484,15 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
auto deprecated_text = node.get_deprecated_string("text"sv).release_value();
deprecated_text = escape_html_entities(deprecated_text);
if (auto text = MUST(Web::Infra::strip_and_collapse_whitespace(deprecated_text)); text.is_empty()) {
builder.appendff("<span class=\"hoverable internal\" {}>", data_attributes.string_view());
builder.append(name);
builder.append("</span>"sv);
} else {
builder.appendff("<span data-node-type=\"text\" class=\"hoverable editable\" {}>", data_attributes.string_view());
builder.append(text);
builder.append("</span>"sv);
}
auto text = MUST(Web::Infra::strip_and_collapse_whitespace(deprecated_text));
builder.appendff("<span data-node-type=\"text\" data-text=\"{}\" class=\"hoverable editable\" {}>", text, data_attributes.string_view());
if (text.is_empty())
builder.appendff("<span class=\"internal\">{}</span>", name);
else
builder.append(text);
builder.append("</span>"sv);
return;
}