From da39e01eb9ce3bcc083006c1baf8eadc4cf146a7 Mon Sep 17 00:00:00 2001
From: Roland Franssen <franssen.roland@gmail.com>
Date: Fri, 9 Feb 2018 15:45:43 +0100
Subject: [PATCH] [TwigBundle][WebProfilerBundle] Fix JS collision

---
 .../Resources/views/base_js.html.twig         | 22 +++++++++++--------
 .../views/Profiler/base_js.html.twig          | 22 +++++++++++--------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/base_js.html.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/base_js.html.twig
index 0ac832ee0610d..1bc9ccf14c06d 100644
--- a/src/Symfony/Bundle/TwigBundle/Resources/views/base_js.html.twig
+++ b/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');
                 }
             }
         };
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
index 7b26275ca8907..5c2be8c74c030 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
+++ b/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');
                 }
             }
         };