Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 21a0396

Browse files
javiereguiluzjaviereguiluz
committed
Update the HTML structure of tabs
1 parent 883cd87 commit 21a0396

12 files changed

+46
-39
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/cache.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
{{ _self.render_metrics(collector.totals, true) }}
5555

5656
<h2>Pools</h2>
57-
<div class="sf-tabs" role="tablist">
57+
<div class="sf-tabs">
5858
{# the empty merge is needed to turn the iterator into an array #}
5959
{% set cache_pools_with_calls = collector.calls|filter(calls => calls|length > 0)|merge([]) %}
6060
{% for name, calls in cache_pools_with_calls %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/events.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<p>No events have been recorded. Check that debugging is enabled in the kernel.</p>
1616
</div>
1717
{% else %}
18-
<div class="sf-tabs" role="tablist">
18+
<div class="sf-tabs">
1919
<div class="tab">
2020
<h3 class="tab-title">Called Listeners <span class="badge">{{ collector.calledlisteners|length }}</span></h3>
2121

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -453,7 +453,7 @@
453453
{% endif %}
454454

455455
{% set form_has_errors = data.errors ?? [] is not empty %}
456-
<div class="sf-tabs" role="tablist">
456+
<div class="sf-tabs">
457457
<div class="tab {{ form_has_errors ? 'active' : 'disabled' }}">
458458
<h3 class="tab-title">Errors</h3>
459459

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/http_client.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
</div>
5454
</div>
5555
<h2>Clients</h2>
56-
<div class="sf-tabs" role="tablist">
56+
<div class="sf-tabs">
5757
{% for name, client in collector.clients %}
5858
<div class="tab {{ client.traces|length == 0 ? 'disabled' }}">
5959
<h3 class="tab-title">{{ name }} <span class="badge">{{ client.traces|length }}</span></h3>

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,27 +55,27 @@
5555
{% set filters = collector.filters %}
5656
<div class="log-filters">
5757
<div id="log-filter-type" class="log-filter">
58-
<ul class="tab-navigation">
59-
<li class="{{ not has_error_logs and not has_deprecation_logs ? 'active' }}">
58+
<ul class="tab-navigation" role="tablist">
59+
<button role="tab" class="tab-control {{ not has_error_logs and not has_deprecation_logs ? 'active' }}">
6060
<input {{ not has_error_logs and not has_deprecation_logs ? 'checked' }} type="radio" id="filter-log-type-all" name="filter-log-type" value="all">
6161
<label for="filter-log-type-all">All messages</label>
62-
</li>
62+
</button>
6363

64-
<li class="{{ has_error_logs ? 'active' }}">
64+
<button role="tab" class="tab-control {{ has_error_logs ? 'active' }}">
6565
<input {{ has_error_logs ? 'checked' }} type="radio" id="filter-log-type-error" name="filter-log-type" value="error">
6666
<label for="filter-log-type-error">
6767
Errors
6868
<span class="badge status-{{ collector.counterrors ? 'error' }}">{{ collector.counterrors|default(0) }}</span>
6969
</label>
70-
</li>
70+
</button>
7171

72-
<li class="{{ not has_error_logs and has_deprecation_logs ? 'active' }}">
72+
<button role="tab" class="tab-control {{ not has_error_logs and has_deprecation_logs ? 'active' }}">
7373
<input {{ not has_error_logs and has_deprecation_logs ? 'checked' }} type="radio" id="filter-log-type-deprecation" name="filter-log-type" value="deprecation">
7474
<label for="filter-log-type-deprecation">
7575
Deprecations
7676
<span class="badge status-{{ collector.countdeprecations ? 'warning' }}">{{ collector.countdeprecations|default(0) }}</span>
7777
</label>
78-
</li>
78+
</button>
7979
</ul>
8080
</div>
8181

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@
131131

132132
<pre class="prewrap" style="max-height: 600px; margin-left: 5px">{{ message.toString() }}</pre>
133133
{% else %}
134-
<div class="sf-tabs" role="tablist">
134+
<div class="sf-tabs">
135135
<div class="tab">
136136
<h3 class="tab-title">Email contents</h3>
137137
<div class="tab-content">
@@ -179,7 +179,7 @@
179179

180180
{% if message.htmlBody or message.textBody %}
181181
<div class="card-block">
182-
<div class="sf-tabs sf-tabs-sm" role="tablist">
182+
<div class="sf-tabs sf-tabs-sm">
183183
{% if message.htmlBody %}
184184
{% set htmlBody = message.htmlBody() %}
185185
<div class="tab">

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/messenger.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
<p class="text-muted">Ordered list of dispatched messages across all your buses</p>
7070
{{ _self.render_bus_messages(collector.messages, true) }}
7171
{% else %}
72-
<div class="sf-tabs message-bus" role="tablist">
72+
<div class="sf-tabs message-bus">
7373
<div class="tab">
7474
{% set messages = collector.messages %}
7575
{% set exceptionsCount = collector.exceptionsCount %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/notifier.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
<h3>{{ transport }}</h3>
104104

105105
<div class="card-block">
106-
<div class="sf-tabs sf-tabs-sm" role="tablist">
106+
<div class="sf-tabs sf-tabs-sm">
107107
{% for event in events.events(transport) %}
108108
{% set message = event.message %}
109109
<div class="tab">
@@ -127,7 +127,7 @@
127127
</div>
128128
{% endif %}
129129
<div class="card-block">
130-
<div class="sf-tabs sf-tabs-sm" role="tablist">
130+
<div class="sf-tabs sf-tabs-sm">
131131
{% if message.getNotification is defined %}
132132
<div class="tab">
133133
<h3 class="tab-title">Notification</h3>

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
{{ 'n/a' in controller_name ? 'Request / Response' : controller_name }}
110110
</h2>
111111

112-
<div class="sf-tabs" role="tablist">
112+
<div class="sf-tabs">
113113
<div class="tab">
114114
<h3 class="tab-title">Request</h3>
115115

@@ -182,7 +182,7 @@
182182
<p>Request content not available (it was retrieved as a resource).</p>
183183
</div>
184184
{% elseif collector.content %}
185-
<div class="sf-tabs" role="tablist">
185+
<div class="sf-tabs">
186186
{% set prettyJson = collector.isJsonRequest ? collector.prettyJson : null %}
187187
{% if prettyJson is not null %}
188188
<div class="tab">

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
{% endif %}
8989
{% endfor %}
9090

91-
<div class="sf-tabs" role="tablist">
91+
<div class="sf-tabs">
9292
<div class="tab {{ collector.countMissings == 0 ? 'active' }}">
9393
<h3 class="tab-title">Defined <span class="badge">{{ collector.countDefines }}</span></h3>
9494

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -670,17 +670,20 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
670670
/* create the tab navigation for each group of tabs */
671671
for (var i = 0; i < tabGroups.length; i++) {
672672
var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
673-
var tabNavigation = document.createElement('ul');
673+
var tabNavigation = document.createElement('div');
674674
tabNavigation.className = 'tab-navigation';
675+
tabNavigation.setAttribute('role', 'tablist');
675676
676677
var selectedTabId = 'tab-' + i + '-0'; /* select the first tab by default */
677678
for (var j = 0; j < tabs.length; j++) {
678679
var tabId = 'tab-' + i + '-' + j;
679680
var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;
680681
681-
var tabNavigationItem = document.createElement('li');
682+
var tabNavigationItem = document.createElement('button');
683+
tabNavigationItem.classList.add('tab-control');
682684
tabNavigationItem.setAttribute('data-tab-id', tabId);
683685
tabNavigationItem.setAttribute('role', 'tab');
686+
tabNavigationItem.setAttribute('aria-controls', tabId);
684687
if (hasClass(tabs[j], 'active')) { selectedTabId = tabId; }
685688
if (hasClass(tabs[j], 'disabled')) {
686689
addClass(tabNavigationItem, 'disabled');
@@ -698,15 +701,14 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
698701
699702
/* display the active tab and add the 'click' event listeners */
700703
for (i = 0; i < tabGroups.length; i++) {
701-
tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation li');
704+
tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation .tab-control');
702705
703706
for (j = 0; j < tabNavigation.length; j++) {
704707
tabId = tabNavigation[j].getAttribute('data-tab-id');
705708
const tabPanel = document.getElementById(tabId);
706709
tabPanel.setAttribute('role', 'tabpanel');
707710
tabPanel.setAttribute('aria-labelledby', tabId);
708711
tabPanel.querySelector('.tab-title').className = 'hidden';
709-
tabNavigation[j].setAttribute('aria-controls', tabId);
710712
711713
if (hasClass(tabNavigation[j], 'active')) {
712714
tabPanel.className = 'block';
@@ -722,8 +724,8 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
722724
var activeTab = e.target || e.srcElement;
723725
724726
/* needed because when the tab contains HTML contents, user can click */
725-
/* on any of those elements instead of their parent '<li>' element */
726-
while (activeTab.tagName.toLowerCase() !== 'li') {
727+
/* on any of those elements instead of their parent '<button>' element */
728+
while (activeTab.tagName.toLowerCase() !== 'button') {
727729
activeTab = activeTab.parentNode;
728730
}
729731
@@ -911,7 +913,7 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
911913
document.querySelector('#log-filter-channel .filter-active-num').innerText = (channels.length === selectedChannels.length) ? 'All' : selectedChannels.length;
912914
913915
/* update the currently selected "log type" tab */
914-
document.querySelectorAll('#log-filter-type li').forEach((tab) => tab.classList.remove('active'));
916+
document.querySelectorAll('#log-filter-type .tab-control').forEach((tab) => tab.classList.remove('active'));
915917
document.querySelector(`#log-filter-type input[value="${selectedType}"]`).parentElement.classList.add('active');
916918
},
917919
};

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1545,23 +1545,26 @@ tr.status-warning td {
15451545
box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 4px var(--page-background);
15461546
margin: 0 0 10px;
15471547
}
1548-
.tab-navigation li {
1548+
.tab-navigation .tab-control {
1549+
background: transparent;
1550+
border: 0;
15491551
box-shadow: none;
15501552
transition: box-shadow .05s ease-in, background-color .05s ease-in;
15511553
cursor: pointer;
1554+
font-size: 14px;
15521555
font-weight: 500;
1553-
list-style: none;
1556+
line-height: 1.4;
15541557
margin: 0;
15551558
padding: 4px 14px;
15561559
position: relative;
15571560
text-align: center;
15581561
z-index: 1;
15591562
}
1560-
.sf-tabs-sm .tab-navigation li {
1563+
.sf-tabs-sm .tab-navigation .tab-control {
15611564
font-size: 13px;
15621565
padding: 2.5px 10px;
15631566
}
1564-
.tab-navigation li:before {
1567+
.tab-navigation .tab-control:before {
15651568
background: var(--tab-border-color);
15661569
bottom: 15%;
15671570
content: "";
@@ -1570,10 +1573,12 @@ tr.status-warning td {
15701573
top: 15%;
15711574
width: 1px;
15721575
}
1573-
.tab-navigation li:first-child:before, .tab-navigation li.active + li:before, .tab-navigation li.active:before {
1576+
.tab-navigation .tab-control:first-child:before,
1577+
.tab-navigation .tab-control.active + .tab-control:before,
1578+
.tab-navigation .tab-control.active:before {
15741579
width: 0;
15751580
}
1576-
.tab-navigation li .badge {
1581+
.tab-navigation .tab-control .badge {
15771582
background: var(--selected-badge-background);
15781583
box-shadow: var(--selected-badge-shadow);
15791584
color: var(--selected-badge-color);
@@ -1587,29 +1592,29 @@ tr.status-warning td {
15871592
text-align: center;
15881593
white-space: nowrap;
15891594
}
1590-
.tab-navigation li.disabled {
1595+
.tab-navigation .tab-control.disabled {
15911596
color: var(--tab-disabled-color);
15921597
}
1593-
.tab-navigation li.active {
1598+
.tab-navigation .tab-control.active {
15941599
background-color: var(--tab-active-background);
15951600
border-radius: 6px;
15961601
box-shadow: inset 0 0 0 1.5px var(--tab-active-border-color);
15971602
color: var(--tab-active-color);
15981603
position: relative;
15991604
z-index: 1;
16001605
}
1601-
.theme-dark .tab-navigation li.active {
1606+
.theme-dark .tab-navigation .tab-control.active {
16021607
box-shadow: inset 0 0 0 1px var(--tab-border-color);
16031608
}
16041609
.tab-content > *:first-child {
16051610
margin-top: 0;
16061611
}
1607-
.tab-navigation li .badge.status-warning {
1612+
.tab-navigation .tab-control .badge.status-warning {
16081613
background: var(--selected-badge-warning-background);
16091614
box-shadow: var(--selected-badge-warning-shadow);
16101615
color: var(--selected-badge-warning-color);
16111616
}
1612-
.tab-navigation li .badge.status-error {
1617+
.tab-navigation .tab-control .badge.status-error {
16131618
background: var(--selected-badge-danger-background);
16141619
box-shadow: var(--selected-badge-danger-shadow);
16151620
color: var(--selected-badge-danger-color);
@@ -1783,10 +1788,10 @@ tr.status-warning td {
17831788
font-weight: bold;
17841789
padding: 0 1px;
17851790
}
1786-
.log-filter .tab-navigation li input {
1791+
.log-filter .tab-navigation .tab-control input {
17871792
display: none;
17881793
}
1789-
.log-filter .tab-navigation li label {
1794+
.log-filter .tab-navigation .tab-control label {
17901795
cursor: pointer;
17911796
}
17921797
.log-filters .log-filter .log-filter-content {

0 commit comments

Comments
 (0)