Skip to content

Commit 7402279

Browse files
fabpotfabpot
committed
minor symfony#52138 [WebProfilerBundle] UI tweaks for the command profiler (javiereguiluz)
This PR was squashed before being merged into the 6.4 branch. Discussion ---------- [WebProfilerBundle] UI tweaks for the command profiler | Q | A | ------------- | --- | Branch? | 6.4 | Bug fix? | no | New feature? | no | Deprecations? | no | Tickets | - | License | MIT This PR proposes some minor UI tweaks for the amazing feature contributed by `@HeahDude` in symfony#47416. ## First change I propose to not display the `HTTP / Commands` toggle in the header of all pages. I don't think this should be an option with quick permanent access from all profiler pages. My proposal is to move the toggle to the search sidebar: ![search-before-after](https://github.com/symfony/symfony/assets/73419/417cc200-5f56-41a8-b177-8124e6bed2f3) And here in action: ![http-commands-toggle](https://github.com/symfony/symfony/assets/73419/ced6dae1-2de9-4e42-ad5b-48e752513ec3) ## Second change In my opinion, the current header of command profiles looks too similar to HTTP profiles: ### Before / Light ![command-profile-before-light](https://github.com/symfony/symfony/assets/73419/b623e582-7a67-414c-9d5f-51d1ceee83d7) ### Before / Dark ![command-profile-before-dark](https://github.com/symfony/symfony/assets/73419/884fa8db-d915-439b-8fe0-12e5d7a49a41) ----- I propose to differentiate them a bit more and use the well-known "fake terminals" used on Symfony website and docs: ### After / Light ![command-profile-after-light](https://github.com/symfony/symfony/assets/73419/670cdb13-35fc-42ad-9b42-7d83bb75c1d0) ### After / Dark ![command-profile-after-dark](https://github.com/symfony/symfony/assets/73419/6899926d-0831-4241-8132-75e2a180fa23) ----- The "fake terminals" look different depending on your OS. See this image (from top to bottom: macOS, Windows, Linux) ![terminal-os](https://github.com/symfony/symfony/assets/73419/04bea418-63df-45f2-9fa8-06afbfa8048f) Commits ------- 041480f [WebProfilerBundle] UI tweaks for the command profiler
2 parents 737613c + 041480f commit 7402279

File tree

5 files changed

+164
-26
lines changed

5 files changed

+164
-26
lines changed

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

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,32 @@
22
{% set interrupted = command_collector is same as false ? null : command_collector.interruptedBySignal %}
33
{% set css_class = status_code == 113 or interrupted is not null ? 'status-warning' : status_code > 0 ? 'status-error' : 'status-success' %}
44

5-
<div class="status {{ css_class }}">
5+
<div class="terminal status {{ css_class }}">
66
<div class="container">
7-
{% if status_code > 0 %}
8-
<p class="status-error-details">
9-
<span class="icon">{{ source('@WebProfiler/Icon/alert-circle.svg') }}</span>
10-
<span class="status-response-status-code">Error ({{ status_code }})</span>
11-
</p>
12-
{% endif %}
13-
147
<h2>
158
<span class="status-request-method">
169
{{ profile.method|upper }}
1710
</span>
1811

19-
{{ profile.url|length < 160 ? profile.url : profile.url[:160] ~ '…' }}
12+
<span class="status-command">
13+
{{ profile.url }}
14+
</span>
2015
</h2>
2116

2217
<dl class="metadata">
23-
{% if status_code == 0 or interrupted %}
24-
<span class="status-response-status-code">{{ interrupted is null ? 'Success' : 'Interrupted by signal: ' ~ interrupted }}</span>
18+
{% if interrupted %}
19+
<span class="status-response-status-code">Interrupted</span>
20+
<dt>Signal</dt>
21+
<dd class="status-response-status-text">{{ interrupted }}</dd>
22+
23+
<dt>Exit code</dt>
24+
<dd class="status-response-status-text">{{ status_code }}</dd>
25+
{% elseif status_code == 0 %}
26+
<span class="status-response-status-code">Success</span>
27+
{% elseif status_code > 0 %}
28+
<span class="status-response-status-code">Error</span>
29+
<dt>Exit code</dt>
30+
<dd class="status-response-status-text"><span class="status-response-status-code">{{ status_code }}</span></dd>
2531
{% endif %}
2632

2733
{% if request_collector.requestserver.has('SYMFONY_CLI_BINARY_NAME') %}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@
3636
}
3737
3838
document.body.classList.add(localStorage.getItem('symfony/profiler/width') || 'width-normal');
39+
40+
document.body.classList.add(
41+
(navigator.appVersion.indexOf('Win') !== -1) ? 'windows' : (navigator.appVersion.indexOf('Mac') !== -1) ? 'macos' : 'linux'
42+
);
3943
</script>
4044

4145
{% block body '' %}

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

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,6 @@
11
<div id="header">
22
<h1><a href="{{ path('_profiler_home') }}">{{ source('@WebProfiler/Icon/symfony.svg') }} Symfony Profiler</a></h1>
33

4-
<div class="sf-tabs" data-processed="true">
5-
<div class="tab-navigation">
6-
<span class="tab-control{{ 'request' == profile_type ? ' active' }}">
7-
<a href="{{ path('_profiler_search_results', {token: 'empty', limit: 10}) }}">
8-
HTTP Requests
9-
</a>
10-
</span>
11-
<span class="tab-control{{ 'command' == profile_type ? ' active' }}">
12-
<a href="{{ path('_profiler_search_results', {token: 'empty', limit: 10, type: 'command'}) }}">
13-
Console Commands
14-
</a>
15-
</span>
16-
</div>
17-
</div>
18-
194
<div class="search">
205
<form method="get" action="https://symfony.com/search" target="_blank">
216
<div class="form-row">

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,12 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
167167
--shadow: 0px 0px 1px rgba(128, 128, 128, .2);
168168
--border: 1px solid #e0e0e0;
169169
--background-error: var(--color-error);
170+
--terminal-bg: var(--gray-800);
171+
--terminal-border-color: var(--gray-600);
172+
--terminal-warning-color: var(--yellow-300);
173+
--terminal-warning-bg: var(--yellow-300);
174+
--terminal-error-color: #fb6a89;
175+
--terminal-error-bg: #fb6a89;
170176

171177
--highlight-variable: #e36209;
172178
--highlight-string: #22863a;
@@ -303,6 +309,13 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
303309
--shadow: 0px 0px 1px rgba(32, 32, 32, .2);
304310
--border: 1px solid #666;
305311
--background-error: #b0413e;
312+
--terminal-bg: var(--gray-800);
313+
--terminal-border-color: var(--gray-600);
314+
--terminal-warning-color: var(--yellow-400);
315+
--terminal-warning-bg: var(--yellow-500);
316+
--terminal-error-color: var(--red-400);
317+
--terminal-error-bg: var(--red-400);
318+
306319
--highlight-variable: #ffa657;
307320
--highlight-string: #7ee787;
308321
--highlight-comment: #8b949e;
@@ -1258,6 +1271,107 @@ tr.status-warning td {
12581271
margin: 0 1.5em 0 0;
12591272
}
12601273

1274+
#summary .terminal {
1275+
--header-status-request-method-color: var(--gray-400);
1276+
--header-metadata-key: var(--gray-400);
1277+
--header-metadata-value: var(--gray-300);
1278+
1279+
background: var(--terminal-bg);
1280+
border: solid var(--terminal-border-color);
1281+
border-width: 30px 4px 4px 4px;
1282+
border-radius: 3px 3px 0 0;
1283+
box-shadow: none;
1284+
color: var(--gray-100);
1285+
padding: 10px 15px;
1286+
position: relative;
1287+
}
1288+
#summary .terminal .status-request-method {
1289+
font-size: 13px;
1290+
transform: translateY(7px) !important;
1291+
margin-right: 10px;
1292+
}
1293+
#summary .terminal.status-success .status-command {
1294+
color: var(--gray-100);
1295+
}
1296+
#summary .terminal.status-success .status-response-status-code {
1297+
margin-right: 1.5em;
1298+
text-transform: uppercase;
1299+
}
1300+
#summary .terminal.status-warning,
1301+
#summary .terminal.status-warning .status-response-status-text {
1302+
color: var(--terminal-warning-color);
1303+
}
1304+
#summary .terminal.status-warning .status-response-status-code {
1305+
background: var(--terminal-warning-bg);
1306+
color: var(--black);
1307+
margin-right: 1.5em;
1308+
padding: 1px 5px;
1309+
text-transform: uppercase;
1310+
}
1311+
#summary .terminal.status-warning .status-command,
1312+
#summary .terminal.status-warning .status-response-status-text {
1313+
color: var(--terminal-warning-color);
1314+
}
1315+
#summary .terminal.status-error .status-command,
1316+
#summary .terminal.status-error .status-response-status-text {
1317+
color: var(--terminal-error-color);
1318+
}
1319+
#summary .terminal.status-error .status-response-status-code {
1320+
background: var(--terminal-error-bg);
1321+
color: var(--black);
1322+
margin-right: 1.5em;
1323+
padding: 1px 5px;
1324+
text-transform: uppercase;
1325+
}
1326+
#summary .terminal.status-error,
1327+
#summary .terminal.status-error .status-response-status-text {
1328+
color: var(--terminal-error-color);
1329+
}
1330+
.macos #summary .terminal::before {
1331+
background-color: rgba(255, 255, 255, 0.3);
1332+
border-radius: 50%;
1333+
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 20px 0 0 2px rgba(255, 255, 255, 0.3), 40px 0 0 2px rgba(255, 255, 255, 0.3);
1334+
content: '';
1335+
display: block;
1336+
height: 7px;
1337+
left: 8px;
1338+
position: absolute;
1339+
top: -18px;
1340+
width: 7px;
1341+
}
1342+
.windows #summary .terminal::before {
1343+
background-color: transparent;
1344+
background-image:
1345+
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M464 352H48c-26.5 0-48 21.5-48 48v32c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-32c0-26.5-21.5-48-48-48z"></path></svg>'),
1346+
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z"></path></svg>'),
1347+
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>');
1348+
background-repeat: no-repeat;
1349+
background-position: right 80px top 5px, right 44px top 8px, right 8px top 8px;
1350+
background-size: 14px, 14px, 14px;
1351+
content: '';
1352+
display: block;
1353+
height: 30px;
1354+
position: absolute;
1355+
top: -30px;
1356+
width: 100%;
1357+
}
1358+
.linux #summary .terminal::before {
1359+
background-color: transparent;
1360+
background-image:
1361+
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>'),
1362+
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"></path></svg>'),
1363+
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z"></path></svg>');
1364+
background-repeat: no-repeat;
1365+
background-position: left 8px top 8px, left 28px top 8px, left 48px top 8px;
1366+
background-size: 14px, 14px, 14px;
1367+
content: '';
1368+
display: block;
1369+
height: 30px;
1370+
position: absolute;
1371+
top: -30px;
1372+
width: 100%;
1373+
}
1374+
12611375
{# Sidebar
12621376
========================================================================= #}
12631377
#sidebar {
@@ -1281,6 +1395,9 @@ tr.status-warning td {
12811395
color: var(--gray-500);
12821396
padding: 10px 15px;
12831397
}
1398+
#sidebar #sidebar-shortcuts .sf-tabs .tab-navigation {
1399+
margin: 5px 0 15px;
1400+
}
12841401
#sidebar #sidebar-shortcuts .shortcuts {
12851402
display: flex;
12861403
align-items: center;
@@ -1490,6 +1607,13 @@ tr.status-warning td {
14901607
text-align: center;
14911608
z-index: 1;
14921609
}
1610+
.tab-navigation .tab-control a {
1611+
color: var(--page-color);
1612+
text-decoration: none;
1613+
}
1614+
.tab-navigation .tab-control.active a {
1615+
color: var(--tab-active-color);
1616+
}
14931617
.sf-tabs-sm .tab-navigation .tab-control {
14941618
font-size: 13px;
14951619
padding: 2.5px 10px;
@@ -1584,6 +1708,10 @@ tr.status-warning td {
15841708
background: var(--badge-warning-background);
15851709
color: var(--badge-warning-color);
15861710
}
1711+
.badge-danger {
1712+
background: var(--badge-danger-background);
1713+
color: var(--badge-danger-color);
1714+
}
15871715

15881716
{# Dumped contents (used in many different panels)
15891717
========================================================================= #}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,21 @@
3838
{% block sidebar_shortcuts_links %}{% endblock %}
3939

4040
{% block panel %}
41+
<div class="sf-tabs" data-processed="true">
42+
<div class="tab-navigation" role="tablist">
43+
<button class="tab-control {{ 'request' == profile_type ? 'active' }}" role="tab" {{ 'request' == profile_type ? 'aria-selected="true"' : 'tabindex="-1"' }} >
44+
<a href="{{ path('_profiler_search_results', {token: 'empty', limit: 10}) }}">
45+
HTTP Requests
46+
</a>
47+
</button>
48+
<button class="tab-control {{ 'command' == profile_type ? 'active' }}" role="tab" {{ 'command' == profile_type ? 'aria-selected="true"' : 'tabindex="-1"' }}>
49+
<a href="{{ path('_profiler_search_results', {token: 'empty', limit: 10, type: 'command'}) }}">
50+
Console Commands
51+
</a>
52+
</button>
53+
</div>
54+
</div>
55+
4156
<h2>{{ tokens ? tokens|length : 'No' }} results found</h2>
4257

4358
{% if tokens %}

0 commit comments

Comments
 (0)