Support nesting tabs in profiler pages

SamFleming · SamFleming · commit 9cdcf0b6592b · 2018-10-19T22:02:48.000+01:00
Only selecting direct `.tab` and `.tab-navigation` children of `.sf-tabs` allows us to support nesting tabs within tabs. For example: <div class="sf-tabs"> <div class="tab"> <h3 class="tab-title">Example Parent</h3> <div class="tab-content"> <h4>This section will have it's own tabs</h4> <div class="sf-tabs"> <div class="tab"> <h3 class="tab-title">First nested</h3> <div class="tab-content"> First tab of nested content </div> </div> </div> </div> </div> <div class="tab"> <h3 class="tab-title">Second tab</h3> <div class="tab-content"> <h4>Standard tab</h4> <p> Lorem ipsum... </p> </div> </div> </div> Without this scoping nested tabs are treated as part of the original tab list causing multiple issues. Unfortunately browser support is limited for `:scope` (https://developer.mozilla.org/en-US/docs/Web/CSS/:scope#Browser_compatibility) – maybe an alternative method of scoping should be looked into?
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
@@ -552,7 +552,7 @@
 
                 /* create the tab navigation for each group of tabs */
                 for (var i = 0; i < tabGroups.length; i++) {
-                    var tabs = tabGroups[i].querySelectorAll('.tab');
+                    var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
                     var tabNavigation = document.createElement('ul');
                     tabNavigation.className = 'tab-navigation';
 
@@ -578,7 +578,7 @@
 
                 /* display the active tab and add the 'click' event listeners */
                 for (i = 0; i < tabGroups.length; i++) {
-                    tabNavigation = tabGroups[i].querySelectorAll('.tab-navigation li');
+                    tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation li');
 
                     for (j = 0; j < tabNavigation.length; j++) {
                         tabId = tabNavigation[j].getAttribute('data-tab-id');
