Skip to content

Navigation Menu

Sign in

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 cca60b4

Browse filesBrowse 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
Copy full SHA for cca60b4

File tree

3 files changed

+50
-92
lines changed
Filter options

3 files changed

+50
-92
lines changed

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
+32-41
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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig
+3-10
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

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