Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 9cdcf0b

Browse filesBrowse files
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
Copy full SHA for 9cdcf0b

File tree

1 file changed

+2
-2
lines changed
Filter options

1 file changed

+2
-2
lines changed

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
+2-2Lines 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)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.