Skip to content

Commit cca60b4

Browse files
fabpotfabpot
committed
feature symfony#58380 [WebProfilerBundle] Update the logic that minimizes the toolbar (javiereguiluz)
This PR was squashed before being merged into the 7.3 branch. Discussion ---------- [WebProfilerBundle] Update the logic that minimizes the toolbar | Q | A | ------------- | --- | Branch? | 7.2 | Bug fix? | no | New feature? | yes | Deprecations? | no | Issues | - | License | MIT While working on fixing the accessibility issues of the toolbar (see symfony#58366) I saw the following error reported: ``` Accesskey "D" is used more than once ``` This prevents the feature from working properly. So, in this PR I changed everything about how the toolbar is minimized: * Remove the "mini toolbar" (which is the button displayed when the toolbar is minimized) * Remove the `.sf-toolbar-clearer` element which is no longer needed * Transform the "hide" button into a "toggle" button to show/hide the toolbar * Update the show/hied logic to use CSS classes instead of just `style: none/block` For end users nothing changes. It looks the same as before. #SymfonyHackday Commits ------- 06ed516 [WebProfilerBundle] Update the logic that minimizes the toolbar
2 parents 2f9677b + 06ed516 commit cca60b4

File tree

3 files changed

+50
-92
lines changed

3 files changed

+50
-92
lines changed

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

Lines changed: 32 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -46,45 +46,11 @@
4646
--sf-toolbar-green-900: #030404;
4747
}
4848

49-
.sf-minitoolbar {
50-
--sf-toolbar-gray-800: #262626;
51-
52-
background-color: var(--sf-toolbar-gray-800);
53-
border-top-left-radius: 4px;
54-
bottom: 0;
55-
box-sizing: border-box;
56-
display: none;
57-
height: 36px;
58-
padding: 6px;
59-
position: fixed;
60-
right: 0;
61-
z-index: 99999;
62-
}
63-
64-
.sf-minitoolbar button {
65-
background-color: transparent;
66-
padding: 0;
67-
border: none;
68-
}
69-
.sf-minitoolbar svg,
70-
.sf-minitoolbar img {
71-
--sf-toolbar-gray-200: #e5e5e5;
72-
73-
color: var(--sf-toolbar-gray-200);
74-
max-height: 24px;
75-
max-width: 24px;
76-
display: inline;
77-
}
78-
7949
.sf-toolbar-clearer {
8050
clear: both;
8151
height: 36px;
8252
}
8353

84-
.sf-display-none {
85-
display: none;
86-
}
87-
8854
.sf-toolbarreset *:not(svg rect) {
8955
box-sizing: content-box;
9056
vertical-align: baseline;
@@ -127,27 +93,52 @@
12793
color: var(--sf-toolbar-gray-700);
12894
}
12995

130-
.sf-toolbarreset .hide-button {
96+
.sf-toolbarreset .sf-toolbar-toggle-button {
13197
background: var(--sf-toolbar-gray-800);
13298
color: var(--sf-toolbar-gray-300);
13399
display: block;
134100
position: absolute;
135-
top: 2px;
101+
top: 1px;
136102
right: 0;
137103
width: 36px;
138-
height: 34px;
104+
height: 35px;
139105
cursor: pointer;
140106
text-align: center;
141107
border: none;
142108
margin: 0;
143109
padding: 0;
110+
outline: none;
144111
}
145-
.sf-toolbarreset .hide-button:hover {
112+
.sf-toolbarreset .sf-toolbar-toggle-button:hover {
146113
background: var(--sf-toolbar-gray-700);
147114
}
148-
.sf-toolbarreset .hide-button svg {
149-
max-height: 18px;
150-
margin-top: 1px;
115+
116+
.sf-toolbar.sf-toolbar-closed .sf-toolbarreset .sf-toolbar-block {
117+
display: none;
118+
}
119+
.sf-toolbar.sf-toolbar-closed .sf-toolbarreset .sf-toolbar-toggle-button {
120+
top: -37px;
121+
}
122+
123+
.sf-toolbar .sf-toolbar-toggle-button i {
124+
display: block;
125+
height: 35px;
126+
place-content: center;
127+
}
128+
.sf-toolbar.sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-closed {
129+
display: none;
130+
}
131+
.sf-toolbar.sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-opened {
132+
display: block;
133+
}
134+
.sf-toolbar.sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-closed {
135+
display: block;
136+
}
137+
.sf-toolbar.sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-opened {
138+
display: none;
139+
}
140+
.sf-toolbar.sf-toolbar-closed .sf-toolbarreset .sf-toolbar-toggle-button {
141+
border-top: 2px solid var(--sf-toolbar-gray-800);
151142
}
152143

153144
.sf-toolbar-block {

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
<!-- START of Symfony Web Debug Toolbar -->
2-
<div id="sfMiniToolbar-{{ token }}" class="sf-minitoolbar" data-no-turbolink data-turbo="false">
3-
<button type="button" title="Show Symfony toolbar" id="sfToolbarMiniToggler-{{ token }}" accesskey="D" aria-expanded="false" aria-controls="sfToolbarMainContent-{{ token }}">
4-
{{ source('@WebProfiler/Icon/symfony.svg') }}
5-
</button>
6-
</div>
71
<div id="sfToolbarClearer-{{ token }}" class="sf-toolbar-clearer"></div>
8-
92
<div id="sfToolbarMainContent-{{ token }}" class="sf-toolbarreset notranslate clear-fix" data-no-turbolink data-turbo="false">
103
{% for name, template in templates %}
114
{% if block('toolbar', template) is defined %}
@@ -39,8 +32,8 @@
3932
</div>
4033
{% endif %}
4134

42-
<button class="hide-button" type="button" id="sfToolbarHideButton-{{ token }}" title="Close Toolbar" accesskey="D" aria-expanded="true" aria-controls="sfToolbarMainContent-{{ token }}">
43-
{{ source('@WebProfiler/Icon/close.svg') }}
35+
<button class="sf-toolbar-toggle-button" type="button" id="sfToolbarToggleButton-{{ token }}" title="Close Toolbar" accesskey="D" aria-expanded="true" aria-controls="sfToolbarMainContent-{{ token }}">
36+
<i class="sf-toolbar-icon-opened">{{ source('@WebProfiler/Icon/close.svg') }}</i>
37+
<i class="sf-toolbar-icon-closed">{{ source('@WebProfiler/Icon/symfony.svg') }}</i>
4438
</button>
4539
</div>
46-
<!-- END of Symfony Web Debug Toolbar -->

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

Lines changed: 15 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<div id="sfwdt{{ token }}" class="sf-toolbar sf-display-none" role="region" aria-label="Symfony Web Debug Toolbar">
1+
<!-- START of Symfony Web Debug Toolbar -->
2+
<div id="sfwdt{{ token }}" class="sf-toolbar sf-toolbar-opened" role="region" aria-label="Symfony Web Debug Toolbar">
23
{{ include('@WebProfiler/Profiler/toolbar.html.twig', {
34
templates: {
45
'request': '@WebProfiler/Profiler/cancel.html.twig'
@@ -453,60 +454,32 @@
453454
454455
showToolbar: function(token) {
455456
var sfwdt = this.getSfwdt(token);
456-
removeClass(sfwdt, 'sf-display-none');
457457
458-
if (getPreference('toolbar/displayState') == 'none') {
459-
document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
460-
document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
461-
document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
458+
if ('closed' === getPreference('toolbar/displayState')) {
459+
addClass(sfwdt, 'sf-toolbar-closed');
460+
removeClass(sfwdt, 'sf-toolbar-opened');
462461
} else {
463-
document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
464-
document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
465-
document.getElementById('sfMiniToolbar-' + token).style.display = 'none';
462+
addClass(sfwdt, 'sf-toolbar-opened');
463+
removeClass(sfwdt, 'sf-toolbar-closed');
466464
}
467465
},
468466
469467
hideToolbar: function(token) {
470468
var sfwdt = this.getSfwdt(token);
471-
addClass(sfwdt, 'sf-display-none');
469+
addClass(sfwdt, 'sf-toolbar-closed');
470+
removeClass(sfwdt, 'sf-toolbar-opened');
472471
},
473472
474473
initToolbar: function(token) {
475474
this.showToolbar(token);
476475
477-
var hideButton = document.getElementById('sfToolbarHideButton-' + token);
478-
var hideButtonSvg = hideButton.querySelector('svg');
479-
hideButtonSvg.setAttribute('aria-hidden', 'true');
480-
hideButtonSvg.setAttribute('focusable', 'false');
481-
addEventListener(hideButton, 'click', function (event) {
476+
var toggleButton = document.querySelector(`#sfToolbarToggleButton-${token}`);
477+
addEventListener(toggleButton, 'click', function (event) {
482478
event.preventDefault();
483479
484-
var p = this.parentNode;
485-
p.style.display = 'none';
486-
(p.previousElementSibling || p.previousSibling).style.display = 'none';
487-
document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
488-
setPreference('toolbar/displayState', 'none');
489-
});
490-
491-
var showButton = document.getElementById('sfToolbarMiniToggler-' + token);
492-
var showButtonSvg = showButton.querySelector('svg');
493-
showButtonSvg.setAttribute('aria-hidden', 'true');
494-
showButtonSvg.setAttribute('focusable', 'false');
495-
addEventListener(showButton, 'click', function (event) {
496-
event.preventDefault();
497-
498-
var elem = this.parentNode;
499-
if (elem.style.display == 'none') {
500-
document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
501-
document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
502-
elem.style.display = 'block';
503-
} else {
504-
document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
505-
document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
506-
elem.style.display = 'none'
507-
}
508-
509-
setPreference('toolbar/displayState', 'block');
480+
const newState = 'opened' === getPreference('toolbar/displayState') ? 'closed' : 'opened';
481+
setPreference('toolbar/displayState', newState);
482+
'opened' === newState ? Sfjs.showToolbar(token) : Sfjs.hideToolbar(token);
510483
});
511484
},
512485
@@ -655,3 +628,4 @@
655628
656629
Sfjs.loadToolbar('{{ token }}');
657630
/*]]>*/</script>
631+
<!-- END of Symfony Web Debug Toolbar -->

0 commit comments

Comments
 (0)