From 55ec1cbfb519cc88efcf56b4594cd5b4b02975be Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Sat, 9 Dec 2023 17:32:10 -0500
Subject: [PATCH] LibWebView: Allow editing empty DOM text nodes in the
 Inspector

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.
---
 Base/res/ladybird/inspector.js                  | 10 +++++++---
 .../Libraries/LibWebView/InspectorClient.cpp    | 17 ++++++++---------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/Base/res/ladybird/inspector.js b/Base/res/ladybird/inspector.js
index 9124056002..5e8e210b04 100644
--- a/Base/res/ladybird/inspector.js
+++ b/Base/res/ladybird/inspector.js
@@ -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);
 };
diff --git a/Userland/Libraries/LibWebView/InspectorClient.cpp b/Userland/Libraries/LibWebView/InspectorClient.cpp
index bcb5172a84..6ee8728b61 100644
--- a/Userland/Libraries/LibWebView/InspectorClient.cpp
+++ b/Userland/Libraries/LibWebView/InspectorClient.cpp
@@ -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;
         }