[WebProfilerBundle] Fix Copy as Curl

Author: HypeMC

Resources/views/Profiler/base_js.html.twig

@@ -13,6 +13,7 @@
         constructor() {
             this.#createTabs();
             this.#createToggles();
+            this.#createCopyToClipboard();
             this.#convertDateTimesToUserTimezone();
         }
 
@@ -161,18 +162,41 @@
                     });
                 });
 
-                /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
-                const copyToClipboardElements = toggle.querySelectorAll('span[data-clipboard-text]');
-                copyToClipboardElements.forEach((copyToClipboardElement) => {
-                    copyToClipboardElement.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                    });
-                });
-
                 toggle.setAttribute('data-processed', 'true');
             });
         }
 
+        #createCopyToClipboard() {
+            if (!navigator.clipboard) {
+                return;
+            }
+
+            const copyToClipboardElements = document.querySelectorAll('[data-clipboard-text]');
+
+            copyToClipboardElements.forEach((copyToClipboardElement) => {
+                copyToClipboardElement.classList.remove('hidden');
+
+                copyToClipboardElement.addEventListener('click', (e) => {
+                    /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
+                    e.stopPropagation();
+
+                    navigator.clipboard.writeText(copyToClipboardElement.getAttribute('data-clipboard-text'));
+
+                    let oldContent = copyToClipboardElement.textContent;
+
+                    copyToClipboardElement.textContent = `✅ Copied!`;
+                    copyToClipboardElement.disabled = true;
+                    copyToClipboardElement.classList.add('status-success');
+
+                    setTimeout(() => {
+                        copyToClipboardElement.textContent = oldContent;
+                        copyToClipboardElement.disabled = false;
+                        copyToClipboardElement.classList.remove('status-success');
+                    }, 7000);
+                });
+            });
+        }
+
         #convertDateTimesToUserTimezone() {
             const userTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
 

Resources/views/Profiler/toolbar_js.html.twig

@@ -50,33 +50,6 @@
                 };
             }
 
-            if (navigator.clipboard) {
-                document.addEventListener('readystatechange', () => {
-                    if (document.readyState !== 'complete') {
-                        return;
-                    }
-
-                    document.querySelectorAll('[data-clipboard-text]').forEach(function (element) {
-                        removeClass(element, 'hidden');
-                        element.addEventListener('click', function () {
-                            navigator.clipboard.writeText(element.getAttribute('data-clipboard-text'));
-
-                            if (element.classList.contains("label")) {
-                                let oldContent = element.textContent;
-
-                                element.textContent = "✅ Copied!";
-                                element.classList.add("status-success");
-
-                                setTimeout(() => {
-                                    element.textContent = oldContent;
-                                    element.classList.remove("status-success");
-                                }, 7000);
-                            }
-                        });
-                    });
-                });
-            }
-
             var request = function(url, onSuccess, onError, payload, options, tries) {
                 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
                 options = options || {};