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)
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