bug #59292 [WebProfilerBundle] Fix event delegation on links inside t…

…oggles (MatTheCat)

This PR was merged into the 6.4 branch.

Discussion
----------

[WebProfilerBundle] Fix event delegation on links inside toggles

| Q             | A
| ------------- | ---
| Branch?       | 6.4
| Bug fix?      | yes
| New feature?  | no
| Deprecations? | no
| Issues        | N/A
| License       | MIT

In #57525, the security panel’s authenticator tab got updated with dumps in toggles. Issue is, we currently call `stopPropagation` when link are clicked to avoid closing the toggle, but dumps handle links click using event delegation. That means when you click on a `sf-dump-toggle`, the event cannot reach the `sf-dump` because its propagation is stopped.

This PR handles this case by checking if a link is present in the DOM between the toggle and the element which was clicked.

It also leverages the `currentTarget` property to get the clicked toggle.

Commits
-------

241597d2d47 [WebProfilerBundle] Fix event delegation on links inside toggles

Resources/assets/js/exception.js

@@ -145,19 +145,17 @@
             }
 
             addEventListener(toggles[i], 'click', function(e) {
-                e.preventDefault();
+                var toggle = e.currentTarget;
 
-                if ('' !== window.getSelection().toString()) {
-                    /* Don't do anything on text selection */
+                if (e.target.closest('a, span[data-clipboard-text], .sf-toggle') !== toggle) {
                     return;
                 }
 
-                var toggle = e.target || e.srcElement;
+                e.preventDefault();
 
-                /* needed because when the toggle contains HTML contents, user can click */
-                /* on any of those elements instead of their parent '.sf-toggle' element */
-                while (!hasClass(toggle, 'sf-toggle')) {
-                    toggle = toggle.parentNode;
+                if ('' !== window.getSelection().toString()) {
+                    /* Don't do anything on text selection */
+                    return;
                 }
 
                 var element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
@@ -182,22 +180,6 @@
                 toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
             });
 
-            /* Prevents from disallowing clicks on links inside toggles */
-            var toggleLinks = toggles[i].querySelectorAll('a');
-            for (var j = 0; j < toggleLinks.length; j++) {
-                addEventListener(toggleLinks[j], 'click', function(e) {
-                    e.stopPropagation();
-                });
-            }
-
-            /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
-            var copyToClipboardElements = toggles[i].querySelectorAll('span[data-clipboard-text]');
-            for (var k = 0; k < copyToClipboardElements.length; k++) {
-                addEventListener(copyToClipboardElements[k], 'click', function(e) {
-                    e.stopPropagation();
-                });
-            }
-
             toggles[i].setAttribute('data-processed', 'true');
         }
     })();