diff --git a/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml b/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml index 5933efcd2..e3ea303a0 100644 --- a/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml +++ b/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml @@ -4,7 +4,13 @@
< - + > owl=
diff --git a/tools/devtools/src/devtools_app/store/store.js b/tools/devtools/src/devtools_app/store/store.js index a06ae2538..83589e7a1 100644 --- a/tools/devtools/src/devtools_app/store/store.js +++ b/tools/devtools/src/devtools_app/store/store.js @@ -608,8 +608,9 @@ export const store = reactive({ }, // Center the view around the currently selected component - focusSelectedComponent() { + onActiveComponentClick() { this.selectedElement.scrollIntoView({ block: "center", behavior: "smooth" }); + copyToClipboard(this.activeComponent.name); }, // Toggle the recording of events in the page @@ -1055,3 +1056,21 @@ async function evalInWindow(code, frameUrl = "top") { } }); } + +function copyToClipboard(text) { + // This is crappy but it seems like document.execCommand is the only remaining way to + // copy text to clipboard in a devtools extension (even though it is marked as deprecated) + // since navigator.clipboard.writeText has permission issues inside iframes (and the devtools + // panel is mounted inside an iframe) + const textarea = document.createElement("textarea"); + textarea.value = text; + textarea.style.opacity = "0"; + document.body.appendChild(textarea); + textarea.select(); + try { + document.execCommand("copy"); + } catch (err) { + console.error("Copy failed", err); + } + document.body.removeChild(textarea); +}