8000 Support nesting tabs in profiler pages · symfony/symfony@9cdcf0b · GitHub
[go: up one dir, main page]
Skip to content

Commit 9cdcf0b

Browse files
SamFlemingSamFleming
committed
Support nesting tabs in profiler pages
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?
1 parent 0acf9e1 commit 9cdcf0b

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -552,7 +552,7 @@
552552
553553
/* create the tab navigation for each group of tabs */
554554
for (var i = 0; i < tabGroups.length; i++) {
555-
var tabs = tabGroups[i].querySelectorAll('.tab');
555+
var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
556556
var tabNavigation = document.createElement('ul');
557557
tabNavigation.className = 'tab-navigation';
558558
@@ -578,7 +578,7 @@
578578
579579
/* display the active tab and add the 'click' event listeners */
580580
for (i = 0; i < tabGroups.length; i++) {
581-
tabNavigation = tabGroups[i].querySelectorAll('.tab-navigation li');
581+
tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation li');
582582
583583
for (j = 0; j < tabNavigation.length; j++) {
584584
tabId = tabNavigation[j].getAttribute('data-tab-id');

0 commit comments

Comments
 (0)
0