beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-29 08:11:13 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWebView: Auto-select subtext when editing DOM nodes/attributes
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-22.04, Linux, Clang) (push) Waiting to run
Details
CI / Lagom (false, NO_FUZZ, macos-14, macOS, Clang) (push) Waiting to run
Details
CI / Lagom (false, NO_FUZZ, ubuntu-22.04, Linux, GNU) (push) Waiting to run
Details
CI / Lagom (true, NO_FUZZ, ubuntu-22.04, Linux, Clang) (push) Waiting to run
Details
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Details
Package the js repl as a binary artifact / build-and-package (ubuntu-22.04, Linux, Linux-x86_64) (push) Waiting to run
Details
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Details
Lint Code / lint (push) Waiting to run
Details
Push notes / build (push) Waiting to run
Details

Browse source 
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.
This commit is contained in:
Timothy Flynn 2024-08-27 09:56:23 -04:00 committed by Andreas Kling
parent 8fb2cc2be1
commit 7fff00972d
Notes: github-actions[bot] 2024-08-31 13:52:00 +00:00 
Author: https://github.com/trflynn89
Commit: https://github.com/LadybirdBrowser/ladybird/commit/7fff00972d6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1205
1 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -126,7 +126,14 @@ inspector.loadDOMTree = tree => {
for (let domNode of domNodes) { for (let domNode of domNodes) {
domNode.addEventListener("dblclick", event => { 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(); event.preventDefault();
}); });
} }
@ -329,9 +336,6 @@ const createDOMEditor = (onHandleChange, onCancelChange) => {
setTimeout(() => { setTimeout(() => {
input.focus(); input.focus();
// FIXME: Invoke `select` when it isn't just stubbed out.
// input.select();
}); });
return input; return input;
@ -344,7 +348,7 @@ const parseDOMAttributes = value => {
return element.children[0].attributes; return element.children[0].attributes;
}; };
const editDOMNode = domNode => { const editDOMNode = (domNode, textToSelect) => {
if (selectedDOMNode === null) { if (selectedDOMNode === null) {
return; return;
} }
@ -382,6 +386,18 @@ const editDOMNode = domNode => {
editor.value = domNode.innerText; 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); domNode.parentNode.replaceChild(editor, domNode);
}; };