Skip to content

Navigation Menu

Sign in
Appearance settings

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 7402279

Browse filesBrowse files
fabpotfabpot
committed
minor #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 #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
Copy full SHA for 7402279

File tree

5 files changed

+164
-26
lines changed
Filter options

5 files changed

+164
-26
lines changed

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

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

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/header.html.twig
-15Lines 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

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

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