[IMP] devtools: copy component name to clipboard

This commit allows the user to simply click on the selected component of
the details window to copy its name to the clipboard.

Author: juliusc2066

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml

@@ -4,7 +4,13 @@
     <div class="panel-top d-flex align-items-center">
       <div class="ms-1 p-1 text-truncate" style="width: 100%;">
         <span t-if="store.activeComponent.path.length > 1">&lt;</span>
-        <b style="color: var(--component-color); cursor: pointer;" t-on-mouseover.stop="() => this.store.highlightComponent(this.store.activeComponent.path)" t-on-click.stop="() => this.store.focusSelectedComponent()" t-on-contextmenu.prevent="openMenu" t-esc="store.activeComponent.name"/>
+        <b 
+          style="color: var(--component-color); cursor: pointer;"
+          t-on-mouseover.stop="() => this.store.highlightComponent(this.store.activeComponent.path)"
+          t-on-click.stop="() => this.store.onActiveComponentClick()"
+          t-on-contextmenu.prevent="openMenu"
+          t-esc="store.activeComponent.name"
+        />
         <span t-if="store.activeComponent.path.length > 1">&gt;</span>
         <span class="version" t-else="">owl=<t t-esc="store.activeComponent.version"/></span>
       </div>

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