Skip to content

Commit

Permalink
LibWebView: Auto-select subtext when editing DOM nodes/attributes
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
trflynn89 authored and nico committed Nov 12, 2024
1 parent 1402fe9 commit 1a20290
Showing 1 changed file with 21 additions and 5 deletions.
26 changes: 21 additions & 5 deletions Base/res/ladybird/inspector.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
}
Expand Down Expand Up @@ -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;
Expand All @@ -344,7 +348,7 @@ const parseDOMAttributes = value => {
return element.children[0].attributes;
};

const editDOMNode = domNode => {
const editDOMNode = (domNode, textToSelect) => {
if (selectedDOMNode === null) {
return;
}
Expand Down Expand Up @@ -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);
};

Expand Down

0 comments on commit 1a20290

Please sign in to comment.