bug #26119 [TwigBundle][WebProfilerBundle] Fix JS collision (ro0NL)

This PR was merged into the 3.4 branch.

Discussion
----------

[TwigBundle][WebProfilerBundle] Fix JS collision

| Q             | A
| ------------- | ---
| Branch?       | 3.4
| Bug fix?      | yes
| New feature?  | no
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes/no
| Fixed tickets | #25894
| License       | MIT
| Doc PR        | symfony/symfony-docs#... <!--highly recommended for new features-->

<!--
- Bug fixes must be submitted against the lowest branch where they apply
  (lowest branches are regularly merged to upper ones so they get the fixes too).
- Features and deprecations must be submitted against the master branch.
- Replace this comment by a description of what your PR is solving.
-->

Commits
-------

da39e01 [TwigBundle][WebProfilerBundle] Fix JS collision

src/Symfony/Bundle/TwigBundle/Resources/views/base_js.html.twig

@@ -37,7 +37,7 @@
             addEventListener: addEventListener,
 
             createTabs: function() {
-                var tabGroups = document.querySelectorAll('.sf-tabs');
+                var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
 
                 /* create the tab navigation for each group of tabs */
                 for (var i = 0; i < tabGroups.length; i++) {
@@ -99,11 +99,13 @@
                             document.getElementById(activeTabId).className = 'block';
                         });
                     }
+
+                    tabGroups[i].setAttribute('data-processed', 'true');
                 }
             },
 
             createToggles: function() {
-                var toggles = document.querySelectorAll('.sf-toggle');
+                var toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])');
 
                 for (var i = 0; i < toggles.length; i++) {
                     var elementSelector = toggles[i].getAttribute('data-toggle-selector');
@@ -156,14 +158,16 @@
                         var altContent = toggle.getAttribute('data-toggle-alt-content');
                         toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
                     });
-                }
 
-                /* Prevents from disallowing clicks on links inside toggles */
-                var toggleLinks = document.querySelectorAll('.sf-toggle a');
-                for (var i = 0; i < toggleLinks.length; i++) {
-                    addEventListener(toggleLinks[i], 'click', function(e) {
-                        e.stopPropagation();
-                    });
+                    /* 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();
+                        });
+                    }
+
+                    toggles[i].setAttribute('data-processed', 'true');
                 }
             }
         };

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig

@@ -393,7 +393,7 @@
             },
 
             createTabs: function() {
-                var tabGroups = document.querySelectorAll('.sf-tabs');
+                var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
 
                 /* create the tab navigation for each group of tabs */
                 for (var i = 0; i < tabGroups.length; i++) {
@@ -455,11 +455,13 @@
                             document.getElementById(activeTabId).className = 'block';
                         });
                     }
+
+                    tabGroups[i].setAttribute('data-processed', 'true');
                 }
             },
 
             createToggles: function() {
-                var toggles = document.querySelectorAll('.sf-toggle');
+                var toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])');
 
                 for (var i = 0; i < toggles.length; i++) {
                     var elementSelector = toggles[i].getAttribute('data-toggle-selector');
@@ -512,14 +514,16 @@
                         var altContent = toggle.getAttribute('data-toggle-alt-content');
                         toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
                     });
-                }
 
-                /* Prevents from disallowing clicks on links inside toggles */
-                var toggleLinks = document.querySelectorAll('.sf-toggle a');
-                for (var i = 0; i < toggleLinks.length; i++) {
-                    addEventListener(toggleLinks[i], 'click', function(e) {
-                        e.stopPropagation();
-                    });
+                    /* 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();
+                        });
+                    }
+
+                    toggles[i].setAttribute('data-processed', 'true');
                 }
             }
         };