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);
+}