Skip to content

Commit 01d089f

Browse files
fabpotfabpot
committed
feature #47148 [WebProfilerBundle] Profiler redesign (javiereguiluz)
This PR was squashed before being merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Profiler redesign | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | no | New feature? | yes | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - This PR updates the design of the toolbar + profiler. The goal is to keep everything the same, but improve it to (1) make it look more modern; (2) improve accessibility (e.g. more contrast in some places); (3) make the design more efficient (rearranging some elements). **How to test it in your projects** ``` # clone this repository branch locally $ git clone -b update_profiler https://github.com/javiereguiluz/symfony symfony-profiler $ cd symfony-profiler/ # make your project use the code of this PR php link /path/to/your/symfony/6.x/project ``` The `link` command changes the Symfony dependencies in the `vendor/` dir of your project to create symlinks pointing to the code of this PR. See https://symfony.com/doc/current/contributing/code/pull_requests.html#use-your-branch-in-an-existing-project **Some comments to reviewers**: * Please, ignore the exception panel in the profiler and the exception page for now. I'll tackle those in a separate future PR. * Try to review more thoroughly the panels which I don't use much: forms, serializer, messenger. * I'll make a PR to Doctrine bundle repository to update the icons and other things in Doctrine panels. ----- In this Twitter thread we explained the reasons behind some of these changes: https://twitter.com/symfony_en/status/1553998433760993280 For reference purposes, I'm posting here some selected screenshots too: ## Before / After in light mode ![profiler-example-comparison-light-mode](https://user-images.githubusercontent.com/73419/182310784-117ca50f-10d8-4efd-a541-a89f6fdfb33f.jpg) ## Before / After in dark mode ![profiler-example-comparison-dark-mode](https://user-images.githubusercontent.com/73419/182310798-01573750-3175-40ef-9601-29b56ec8c6f9.jpg) ### Header ![profiler-before-after-1](https://user-images.githubusercontent.com/73419/182310843-7cb4bb0a-d633-47f6-8c2b-c9fd577dbd39.jpg) ![profiler-before-after-2](https://user-images.githubusercontent.com/73419/182310854-55cff37a-74c1-458a-9f1f-fb0c24e627b4.jpg) ### Sidebar menu ![profiler-before-after-3](https://user-images.githubusercontent.com/73419/182310894-f1f4ef35-9ff0-4897-99fb-0209bc789e4b.jpg) The icons are from this project: https://github.com/tabler/tabler-icons. There are MIT licensed so I added their license as a file inside the icon directory. ### Design efficiency ![profiler-before-after-4](https://user-images.githubusercontent.com/73419/182310976-2e417734-737e-4541-b935-cd0e8ae92802.jpg) ![profiler-before-after-5](https://user-images.githubusercontent.com/73419/182311733-9d538ed0-57dc-44cf-b8aa-c68e54d7ddeb.jpg) ### File source viewer ![profiler-before-after-6](https://user-images.githubusercontent.com/73419/182311042-6efe111f-22e4-4364-b8e9-db6401c15294.jpg) ### Toolbar ![profiler-before-after-7](https://user-images.githubusercontent.com/73419/182311073-5ecc886b-7284-44e3-8895-080ae81acc7d.jpg) Commits ------- 45c15f6 [WebProfilerBundle] Profiler redesign
2 parents 1cb6d0c + 45c15f6 commit 01d089f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+2517
-1234
lines changed

‎src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/icon.svg‎

Lines changed: 9 additions & 1 deletion
Loading

‎src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/icon.svg‎

Lines changed: 5 additions & 1 deletion
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ public function panelAction(Request $request, string $token): Response
113113
'request' => $request,
114114
'templates' => $this->getTemplateManager()->getNames($profile),
115115
'is_ajax' => $request->isXmlHttpRequest(),
116-
'profiler_markup_version' => 2, // 1 = original profiler, 2 = Symfony 2.8+ profiler
116+
'profiler_markup_version' => 3, // 1 = original profiler, 2 = Symfony 2.8+ profiler, 3 = Symfony 6.2+ profiler
117117
]);
118118
}
119119

@@ -157,7 +157,7 @@ public function toolbarAction(Request $request, string $token = null): Response
157157
'templates' => $this->getTemplateManager()->getNames($profile),
158158
'profiler_url' => $url,
159159
'token' => $token,
160-
'profiler_markup_version' => 2, // 1 = original toolbar, 2 = Symfony 2.8+ toolbar
160+
'profiler_markup_version' => 3, // 1 = original toolbar, 2 = Symfony 2.8+ profiler, 3 = Symfony 6.2+ profiler
161161
]);
162162
}
163163

@@ -205,6 +205,7 @@ public function searchBarAction(Request $request): Response
205205
'end' => $end,
206206
'limit' => $limit,
207207
'request' => $request,
208+
'render_hidden_by_default' => false,
208209
]),
209210
200,
210211
['Content-Type' => 'text/html']
@@ -360,7 +361,7 @@ public function openAction(Request $request): Response
360361
}
361362

362363
return $this->renderWithCspNonces($request, '@WebProfiler/Profiler/open.html.twig', [
363-
'filename' => $filename,
364+
'file_info' => new \SplFileInfo($filename),
364365
'file' => $file,
365366
'line' => $line,
366367
]);

‎src/Symfony/Bundle/WebProfilerBundle/EventListener/WebDebugToolbarListener.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ public function onKernelResponse(ResponseEvent $event)
113113
$session->getFlashBag()->setAll($session->getFlashBag()->peekAll());
114114
}
115115

116-
$response->setContent($this->twig->render('@WebProfiler/Profiler/toolbar_redirect.html.twig', ['location' => $response->headers->get('Location')]));
116+
$response->setContent($this->twig->render('@WebProfiler/Profiler/toolbar_redirect.html.twig', ['location' => $response->headers->get('Location'), 'host' => $request->getSchemeAndHttpHost()]));
117117
$response->setStatusCode(200);
118118
$response->headers->remove('Location');
119119
}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/cache.html.twig‎

Lines changed: 76 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -47,52 +47,17 @@
4747
<h2>Cache</h2>
4848

4949
{% if collector.totals.calls == 0 %}
50-
<div class="empty">
50+
<div class="empty empty-panel">
5151
<p>No cache calls were made.</p>
5252
</div>
5353
{% else %}
54-
<div class="metrics">
55-
<div class="metric">
56-
<span class="value">{{ collector.totals.calls }}</span>
57-
<span class="label">Total calls</span>
58-
</div>
59-
<div class="metric">
60-
<span class="value">{{ '%0.2f'|format(collector.totals.time * 1000) }} <span class="unit">ms</span></span>
61-
<span class="label">Total time</span>
62-
</div>
63-
<div class="metric-divider"></div>
64-
<div class="metric">
65-
<span class="value">{{ collector.totals.reads }}</span>
66-
<span class="label">Total reads</span>
67-
</div>
68-
<div class="metric">
69-
<span class="value">{{ collector.totals.writes }}</span>
70-
<span class="label">Total writes</span>
71-
</div>
72-
<div class="metric">
73-
<span class="value">{{ collector.totals.deletes }}</span>
74-
<span class="label">Total deletes</span>
75-
</div>
76-
<div class="metric-divider"></div>
77-
<div class="metric">
78-
<span class="value">{{ collector.totals.hits }}</span>
79-
<span class="label">Total hits</span>
80-
</div>
81-
<div class="metric">
82-
<span class="value">{{ collector.totals.misses }}</span>
83-
<span class="label">Total misses</span>
84-
</div>
85-
<div class="metric">
86-
<span class="value">
87-
{{ collector.totals.hit_read_ratio ?? 0 }} <span class="unit">%</span>
88-
</span>
89-
<span class="label">Hits/reads</span>
90-
</div>
91-
</div>
54+
{{ _self.render_metrics(collector.totals, true) }}
9255

9356
<h2>Pools</h2>
9457
<div class="sf-tabs">
95-
{% for name, calls in collector.calls %}
58+
{# the empty merge is needed to turn the iterator into an array #}
59+
{% set cache_pools_with_calls = collector.calls|filter(calls => calls|length > 0)|merge([]) %}
60+
{% for name, calls in cache_pools_with_calls %}
9661
<div class="tab {{ calls|length == 0 ? 'disabled' }}">
9762
<h3 class="tab-title">{{ name }} <span class="badge">{{ collector.statistics[name].calls }}</span></h3>
9863

@@ -111,25 +76,7 @@
11176
</div>
11277
{% else %}
11378
<h4>Metrics</h4>
114-
<div class="metrics">
115-
{% for key, value in collector.statistics[name] %}
116-
<div class="metric">
117-
<span class="value">
118-
{% if key == 'time' %}
119-
{{ '%0.2f'|format(1000 * value) }} <span class="unit">ms</span>
120-
{% elseif key == 'hit_read_ratio' %}
121-
{{ value ?? 0 }} <span class="unit">%</span>
122-
{% else %}
123-
{{ value }}
124-
{% endif %}
125-
</span>
126-
<span class="label">{{ key == 'hit_read_ratio' ? 'Hits/reads' : key|capitalize }}</span>
127-
</div>
128-
{% if key == 'time' or key == 'deletes' %}
129-
<div class="metric-divider"></div>
130-
{% endif %}
131-
{% endfor %}
132-
</div>
79+
{{ _self.render_metrics(collector.statistics[name]) }}
13380

13481
<h4>Calls</h4>
13582
<table>
@@ -155,7 +102,77 @@
155102
{% endif %}
156103
</div>
157104
</div>
105+
106+
{% if loop.last %}
107+
<div class="tab">
108+
<h3 class="tab-title">Pools without calls <span class="badge">{{ collector.calls|filter(calls => 0 == calls|length)|length }}</span></h3>
109+
110+
<div class="tab-content">
111+
<table>
112+
<thead>
113+
<tr>
114+
<th>Cache pools that received no calls</th>
115+
</tr>
116+
</thead>
117+
<tbody>
118+
{% for cache_pool in collector.calls|filter(calls => 0 == calls|length)|keys|sort %}
119+
<tr><td>{{ cache_pool }}</td></tr>
120+
{% endfor %}
121+
</tbody>
122+
</table>
123+
</div>
124+
</div>
125+
{% endif %}
158126
{% endfor %}
159127
</div>
160128
{% endif %}
161129
{% endblock %}
130+
131+
{% macro render_metrics(pool, is_total = false) %}
132+
<div class="metrics">
133+
<div class="metric">
134+
<span class="value">{{ pool.calls }}</span>
135+
<span class="label">{{ is_total ? 'Total calls' : 'Calls' }}</span>
136+
</div>
137+
<div class="metric">
138+
<span class="value">{{ '%0.2f'|format(pool.time * 1000) }} <span class="unit">ms</span></span>
139+
<span class="label">{{ is_total ? 'Total time' : 'Time' }}</span>
140+
</div>
141+
142+
<div class="metric-divider"></div>
143+
144+
<div class="metric-group">
145+
<div class="metric">
146+
<span class="value">{{ pool.reads }}</span>
147+
<span class="label">{{ is_total ? 'Total reads' : 'Reads' }}</span>
148+
</div>
149+
<div class="metric">
150+
<span class="value">{{ pool.writes }}</span>
151+
<span class="label">{{ is_total ? 'Total writes' : 'Writes' }}</span>
152+
</div>
153+
<div class="metric">
154+
<span class="value">{{ pool.deletes }}</span>
155+
<span class="label">{{ is_total ? 'Total deletes' : 'Deletes' }}</span>
156+
</div>
157+
</div>
158+
159+
<div class="metric-divider"></div>
160+
161+
<div class="metric-group">
162+
<div class="metric">
163+
<span class="value">{{ pool.hits }}</span>
164+
<span class="label">{{ is_total ? 'Total hits' : 'Hits' }}</span>
165+
</div>
166+
<div class="metric">
167+
<span class="value">{{ pool.misses }}</span>
168+
<span class="label">{{ is_total ? 'Total misses' : 'Misses' }}</span>
169+
</div>
170+
<div class="metric">
171+
<span class="value">
172+
{{ pool.hit_read_ratio ?? 0 }} <span class="unit">%</span>
173+
</span>
174+
<span class="label">Hits/reads</span>
175+
</div>
176+
</div>
177+
</div>
178+
{% endmacro %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -190,19 +190,21 @@
190190
</div>
191191

192192
<div class="metrics">
193-
<div class="metric">
194-
<span class="value">{{ source('@WebProfiler/Icon/' ~ (collector.haszendopcache ? 'yes' : 'no') ~ '.svg') }}</span>
195-
<span class="label">OPcache</span>
196-
</div>
193+
<div class="metric-group">
194+
<div class="metric">
195+
<span class="value value-is-icon {{ not collector.haszendopcache ? 'value-shows-no-color' }}">{{ source('@WebProfiler/Icon/' ~ (collector.haszendopcache ? 'yes' : 'no') ~ '.svg') }}</span>
196+
<span class="label">OPcache</span>
197+
</div>
197198

198-
<div class="metric">
199-
<span class="value">{{ source('@WebProfiler/Icon/' ~ (collector.hasapcu ? 'yes' : 'no-gray') ~ '.svg') }}</span>
200-
<span class="label">APCu</span>
201-
</div>
199+
<div class="metric">
200+
<span class="value value-is-icon {{ not collector.hasapcu ? 'value-shows-no-color' }}">{{ source('@WebProfiler/Icon/' ~ (collector.hasapcu ? 'yes' : 'no') ~ '.svg') }}</span>
201+
<span class="label">APCu</span>
202+
</div>
202203

203-
<div class="metric">
204-
<span class="value">{{ source('@WebProfiler/Icon/' ~ (collector.hasxdebug ? 'yes' : 'no-gray') ~ '.svg') }}</span>
205-
<span class="label">Xdebug</span>
204+
<div class="metric">
205+
<span class="value value-is-icon {{ not collector.hasxdebug ? 'value-shows-no-color' }}">{{ source('@WebProfiler/Icon/' ~ (collector.hasxdebug ? 'yes' : 'no') ~ '.svg') }}</span>
206+
<span class="label">Xdebug</span>
207+
</div>
206208
</div>
207209
</div>
208210

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/events.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<h2>Event Dispatcher</h2>
1414

1515
{% if collector.calledlisteners is empty %}
16-
<div class="empty">
16+
<div class="empty empty-panel">
1717
<p>No events have been recorded. Check that debugging is enabled in the kernel.</p>
1818
</div>
1919
{% else %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<h2>Exceptions</h2>
2727

2828
{% if not collector.hasexception %}
29-
<div class="empty">
29+
<div class="empty empty-panel">
3030
<p>No exception was thrown and caught during the request.</p>
3131
</div>
3232
{% else %}

0 commit comments

Comments
 (0)