Skip to content

Commit cca60b4

Browse files
fabpotfabpot
committed
feature #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 #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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy