Skip to content

Commit 2a5148b

Browse files
fabpotfabpot
committed
bug #47811 [WebProfilerBundle] Profiler design fixes (javiereguiluz)
This PR was squashed before being merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Profiler design fixes | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | yes | New feature? | no | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - This contains some minor tweaks and fixes for the new Profiler design introduced in #47148. I found some of them while upgrading the Doctrine Migrations Bundle panel (doctrine/DoctrineMigrationsBundle#480). Commits ------- 117789b [WebProfilerBundle] Profiler design fixes
2 parents c2af1fd + 117789b commit 2a5148b

File tree

6 files changed

+64
-60
lines changed

6 files changed

+64
-60
lines changed

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

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -34,58 +34,56 @@
3434
{% endif %}
3535

3636
<div class="status {{ css_class }}">
37-
<div class="container">
38-
{% if status_code > 399 %}
39-
<p class="status-error-details">
40-
<span class="icon">{{ source('@WebProfiler/Icon/alert-circle.svg') }}</span>
41-
<span class="status-response-status-code">Error {{ status_code }}</span>
42-
<span class="status-response-status-text">{{ request_collector.statusText }}</span>
43-
</p>
37+
{% if status_code > 399 %}
38+
<p class="status-error-details">
39+
<span class="icon">{{ source('@WebProfiler/Icon/alert-circle.svg') }}</span>
40+
<span class="status-response-status-code">Error {{ status_code }}</span>
41+
<span class="status-response-status-text">{{ request_collector.statusText }}</span>
42+
</p>
43+
{% endif %}
44+
45+
<h2>
46+
<span class="status-request-method">
47+
{{ profile.method|upper }}
48+
</span>
49+
50+
{% set profile_title = profile.url|length < 160 ? profile.url : profile.url[:160] ~ '…' %}
51+
{% if profile.method|upper in ['GET', 'HEAD'] %}
52+
<a href="{{ profile.url }}">{{ profile_title }}</a>
53+
{% else %}
54+
{{ profile_title }}
4455
{% endif %}
56+
</h2>
4557

46-
<h2>
47-
<span class="status-request-method">
48-
{{ profile.method|upper }}
49-
</span>
50-
51-
{% set profile_title = profile.url|length < 160 ? profile.url : profile.url[:160] ~ '…' %}
52-
{% if profile.method|upper in ['GET', 'HEAD'] %}
53-
<a href="{{ profile.url }}">{{ profile_title }}</a>
54-
{% else %}
55-
{{ profile_title }}
56-
{% endif %}
57-
</h2>
58-
59-
<dl class="metadata">
60-
{% if status_code < 400 %}
61-
<dt>Response</dt>
62-
<dd>
63-
<span class="status-response-status-code">{{ status_code }}</span>
64-
<span class="status-response-status-text">{{ request_collector.statusText }}</span>
65-
</dd>
66-
{% endif %}
67-
68-
{% set referer = request_collector ? request_collector.requestheaders.get('referer') : null %}
69-
{% if referer %}
70-
<dt></dt>
71-
<dd>
72-
<span class="icon icon-referer">{{ source('@WebProfiler/Icon/referrer.svg') }}</span>
73-
<a href="{{ referer }}" class="referer">Browse referrer URL</a>
74-
</dd>
75-
{% endif %}
58+
<dl class="metadata">
59+
{% if status_code < 400 %}
60+
<dt>Response</dt>
61+
<dd>
62+
<span class="status-response-status-code">{{ status_code }}</span>
63+
<span class="status-response-status-text">{{ request_collector.statusText }}</span>
64+
</dd>
65+
{% endif %}
7666

77-
<dt>IP</dt>
67+
{% set referer = request_collector ? request_collector.requestheaders.get('referer') : null %}
68+
{% if referer %}
69+
<dt></dt>
7870
<dd>
79-
<a href="{{ path('_profiler_search_results', { token: token, limit: 10, ip: profile.ip }) }}">{{ profile.ip }}</a>
71+
<span class="icon icon-referer">{{ source('@WebProfiler/Icon/referrer.svg') }}</span>
72+
<a href="{{ referer }}" class="referer">Browse referrer URL</a>
8073
</dd>
74+
{% endif %}
8175

82-
<dt>Profiled on</dt>
83-
<dd><time datetime="{{ profile.time|date('c') }}">{{ profile.time|date('r') }}</time></dd>
76+
<dt>IP</dt>
77+
<dd>
78+
<a href="{{ path('_profiler_search_results', { token: token, limit: 10, ip: profile.ip }) }}">{{ profile.ip }}</a>
79+
</dd>
8480

85-
<dt>Token</dt>
86-
<dd>{{ profile.token }}</dd>
87-
</dl>
88-
</div>
81+
<dt>Profiled on</dt>
82+
<dd><time datetime="{{ profile.time|date('c') }}">{{ profile.time|date('r') }}</time></dd>
83+
84+
<dt>Token</dt>
85+
<dd>{{ profile.token }}</dd>
86+
</dl>
8987
</div>
9088

9189
{% if request_collector and request_collector.forwardtoken -%}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
border-radius: 6px;
1010
margin: 0 30px 45px 0;
1111
max-width: 960px;
12-
padding: 15px 10px;
12+
padding: 15px 20px;
1313
}
1414
.width-full #source {
1515
max-width: unset;
@@ -24,7 +24,7 @@
2424
border-bottom: 1px solid var(--table-border-color);
2525
font-size: 18px;
2626
font-weight: 500;
27-
margin: 0 15px;
27+
margin: 0 0 15px 0;
2828
padding: 0 0 15px;
2929
}
3030
#source .source-file-name small {
@@ -34,10 +34,12 @@
3434
#source .source-content {
3535
overflow-x: auto;
3636
}
37+
#source .source-content ol {
38+
margin: 0;
39+
}
3740
#source .source-content ol li {
3841
margin: 0 0 2px 0;
3942
padding-left: 5px;
40-
width: max-content;
4143
}
4244
#source .source-content ol li::marker {
4345
color: var(--color-muted);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
{% set file_size_in_kb = file_info.size / 1024 %}
3939
{% set file_num_lines = source|split("\n")|length - 1 %}
4040
<dd>
41-
{{ file_size_in_kb < 1 ? file_info.size : file_size_in_kb|number_format(0) }} KB
41+
{{ file_size_in_kb < 1 ? file_info.size ~ ' bytes' : file_size_in_kb|number_format(0) ~ ' KB' }}
4242
/ {{ file_num_lines }} lines
4343
</dd>
4444
</dl>

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
99
--font-family-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1010
--font-family-monospace: "Ubuntu Mono", "JetBrains Mono", ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace;
1111

12+
--summary-status-border-width: 6px;
13+
1214
--white: #fff;
1315
--black: #000;
1416
--gray-50: #fafafa;
@@ -981,7 +983,7 @@ tr.status-warning td {
981983
margin-right: 2px;
982984
}
983985
#header .search input {
984-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23d4d4d4' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
986+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23737373' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
985987
background-repeat: no-repeat;
986988
background-size: 16px;
987989
background-position: 5px;
@@ -990,7 +992,7 @@ tr.status-warning td {
990992
width: 200px;
991993
}
992994
.theme-dark #header .search input {
993-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23737373' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
995+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23a3a3a3' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
994996
}
995997

996998
{# Summary
@@ -1005,7 +1007,7 @@ tr.status-warning td {
10051007
background: var(--header-background);
10061008
border-radius: 6px;
10071009
color: var(--header-metadata-value);
1008-
padding: 15px;
1010+
padding: calc(15px + var(--summary-status-border-width)) 15px 15px;
10091011
position: relative;
10101012
}
10111013
#summary .status:before {
@@ -1016,7 +1018,7 @@ tr.status-warning td {
10161018
top: 0;
10171019
left: 0;
10181020
width: 100%;
1019-
height: 6px;
1021+
height: var(--summary-status-border-width);
10201022
}
10211023
#summary .status-compact {
10221024
padding: 13px 15px 10px;
@@ -1459,6 +1461,9 @@ tr.status-warning td {
14591461
font-size: 12px;
14601462
line-height: 1.5em;
14611463
}
1464+
.sf-profiler-timeline .legends button {
1465+
color: var(--color-text);
1466+
}
14621467
.sf-profiler-timeline + p.help {
14631468
margin-top: 0;
14641469
}
@@ -2290,6 +2295,10 @@ pre.sf-dump, pre.sf-dump .sf-dump-default {
22902295
}
22912296

22922297
@media (max-width: 768px) {
2298+
#summary .status {
2299+
padding: calc(10px + var(--summary-status-border-width)) 10px 10px;
2300+
}
2301+
22932302
#sidebar {
22942303
flex-basis: 50px;
22952304
overflow-x: hidden;

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@
1010

1111
{% block summary %}
1212
<div class="status">
13-
<div class="container">
14-
<h2>Profile Search</h2>
15-
</div>
13+
<h2>Profile Search</h2>
1614
</div>
1715
{% endblock %}
1816

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,12 @@
8181
display: none;
8282
}
8383

84-
.sf-toolbarreset * {
84+
.sf-toolbarreset *:not(svg rect) {
8585
box-sizing: content-box;
8686
vertical-align: baseline;
8787
letter-spacing: normal;
8888
width: auto;
8989
}
90-
.sf-toolbarreset svg rect {
91-
width: inherit;
92-
}
9390

9491
.sf-toolbarreset {
9592
background-color: var(--sf-toolbar-gray-800);

0 commit comments

Comments
 (0)