From 1a202901ba78be6cad5a6370d691b039930d053b Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Tue, 27 Aug 2024 09:56:23 -0400
Subject: [PATCH] LibWebView: Auto-select subtext when editing DOM
 nodes/attributes

This adds the following behavior for the DOM node/attribute editor in
the Inspector:

* If the user double clicks on an attribute name, the name is selected.
* If the user double clicks on an attribute value, the value text (sans
  the surrounding quotes) is selected.
* Otherwise, double clicks select the entire text range.

(cherry picked from commit 7fff00972d667e7c83ed0336dc8e7f8ddbd91298)
---
 Base/res/ladybird/inspector.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/Base/res/ladybird/inspector.js b/Base/res/ladybird/inspector.js
index 8d9093064380f6..f33dae5bba9fb9 100644
--- a/Base/res/ladybird/inspector.js
+++ b/Base/res/ladybird/inspector.js
@@ -126,7 +126,14 @@ inspector.loadDOMTree = tree => {
 
     for (let domNode of domNodes) {
         domNode.addEventListener("dblclick", event => {
-            editDOMNode(domNode);
+            const type = domNode.dataset.nodeType;
+            const text = event.target.innerText;
+
+            if (type === "attribute" && event.target.classList.contains("attribute-value")) {
+                text = text.substring(1, text.length - 1);
+            }
+
+            editDOMNode(domNode, text);
             event.preventDefault();
         });
     }
@@ -329,9 +336,6 @@ const createDOMEditor = (onHandleChange, onCancelChange) => {
 
     setTimeout(() => {
         input.focus();
-
-        // FIXME: Invoke `select` when it isn't just stubbed out.
-        // input.select();
     });
 
     return input;
@@ -344,7 +348,7 @@ const parseDOMAttributes = value => {
     return element.children[0].attributes;
 };
 
-const editDOMNode = domNode => {
+const editDOMNode = (domNode, textToSelect) => {
     if (selectedDOMNode === null) {
         return;
     }
@@ -382,6 +386,18 @@ const editDOMNode = domNode => {
         editor.value = domNode.innerText;
     }
 
+    setTimeout(() => {
+        if (typeof textToSelect !== "undefined") {
+            const index = editor.value.indexOf(textToSelect);
+            if (index !== -1) {
+                editor.setSelectionRange(index, index + textToSelect.length);
+                return;
+            }
+        }
+
+        editor.select();
+    });
+
     domNode.parentNode.replaceChild(editor, domNode);
 };