8000 feature #15523 Redesigned the Symfony Profiler (javiereguiluz) · ostrolucky/symfony@2612fc4 · GitHub 8000
[go: up one dir, main page]
Skip to content

Commit 2612fc4

Browse files
fabpotfabpot
committed
feature symfony#15523 Redesigned the Symfony Profiler (javiereguiluz)
This PR was squashed before being merged into the 2.8 branch (closes symfony#15523). Discussion ---------- Redesigned the Symfony Profiler | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | - | License | MIT | Doc PR | - ### Context Recently, we redesigned the web debug toolbar ([read announcement](http://symfony.com/blog/new-in-symfony-2-8-redesigned-web-debug-toolbar)). We maintained "the spirit" of the original toolbar, but its visual appearance was completely changed. Now it's the turn of the Symfony Profiler. We want to update it to match the new toolbar design and to give it a more modern look and feel. ### The redesign Most of the redesign is focused on updating just the visual appearance, but we've seized this opportunity to make some minor functional changes as well. Testing this pull request in your own applications may be difficult, so we'll provide below a complete walkthrough of the redesign. (Click on the images to see them in full resolution) ### Overview This is the new general structure of the profiler pages: ![profiler-structure](https://cloud.githubusercontent.com/assets/73419/9226162/c1bf71f0-410d-11e5-8a7b-5c690b7c8c8a.png) ### Request panel * Renamed `Request` panel to `Request / Response` * Divided contents into tabs: Request, Response, Session, etc. (this prevents ultra long pages) ![profiler-request](https://cloud.githubusercontent.com/assets/73419/9226172/cb7f7938-410d-11e5-8ffd-cea8264446dd.png) ### Timeline panel * Renamed `Timeline` panel to `Performance` * Highlighted the most important metrics * Added "Peak Memory Usage" to those metrics * The timeline graph is now easier to read (font size is slightly larger, updated the color palette, made the canvas wider, etc.) * If there is only one request, the page doesn't distract you with the "Master Request" heading. If there are several sub-requests, headings are now bigger and graphs are more separated. ![profiler-performance](https://cloud.githubusercontent.com/assets/73419/9226178/d1335782-410d-11e5-9f9a-5ace45b0dfa0.png) ### Twig panel * Just a minor update to highlight the important metrics. The rest of the contents remain the same. ![profiler-twig](https://cloud.githubusercontent.com/assets/73419/9226180/d5bd6ff4-410d-11e5-86c8-beba426516c1.png) ### Exception panel * Just minor design tweaks. ![profiler-exception](https://cloud.githubusercontent.com/assets/73419/9226182/da0dfd9e-410d-11e5-965c-e980f7144541.png) ### Events panel When the `framework.ide` config option is set: * The listeners are now displayed as more evident clickable links. * Bellow the listener we show its full class namespace (if you don't need this information, it doesn't distract you much; if you need it, you don't have to wait for the `<abbr>` tooltip to show it) ![profiler-events-links-enabled](https://cloud.githubusercontent.com/assets/73419/9226188/e403ae48-410d-11e5-8c86-5d28fed940e7.png) When the `framework.ide` config option is NOT set: * In this case the developer cannot click on the listener name to go to that file and line. Therefore, we think it's important to display that information (full class namespace + full file path + line number). At first it may seem that it contains too much information ... but this panel should be more "useful" than "beautiful". ![profiler-events-links-disabled](https://cloud.githubusercontent.com/assets/73419/9226198/eb9f3bae-410d-11e5-8bbe-95c148809387.png) ### Logs panel * Logs are now grouped in: "Info. & Errors" (this is the panel that you need most of the times); "Deprecations" (separated from the normal logs because they are specific to the process of updating your Symfony version); and "Debug" (which are all those messages that you almost never need) * We now show the channel for the log messages (for built-in Symfony channels it may be redundant, but your application can define custom channels) ![profiler-logger](https://cloud.githubusercontent.com/assets/73419/9226203/f345163a-410d-11e5-85e6-cf9fceb885fc.png) ### Routing panel * Just a minor redesign and highlighted some information. ![profiler-routing](https://cloud.githubusercontent.com/assets/73419/9226213/00e99130-410e-11e5-90c0-dda9394dabd7.png) ### Forms panel * Not redesigned yet. ### Translation panel * Highlighted the important metrics. * Replaced the old selector by the new tabbed navigation. ![profiler-translation](https://cloud.githubusercontent.com/assets/73419/9226215/06036c40-410e-11e5-90c9-fe3b43dd6156.png) ### Security panel * Just a minor redesign and highlighted some information. ![profiler-security](https://cloud.githubusercontent.com/assets/73419/9226217/0a92fbcc-410e-11e5-9438-e9e230a7865b.png) ### E-mails panel * Not redesigned yet. ### Doctrine panel * Queries are no longer displayed "shrinked". We display the full query without parameters by default. * The three old actions ("expand", "runnable" and "explain") have been reduced to two actions ("runnable" and "explain") ![profiler-doctrine](https://cloud.githubusercontent.com/assets/73419/9226225/13e0b5d4-410e-11e5-96ce-1eb67f99df49.png) Here you can see what happens when you click on the "Show runnable query" and "Explain query" links: ![profiler-doctrine-detail](https://cloud.githubusercontent.com/assets/73419/9226247/33b47918-410e-11e5-9657-e1351787657a.png) ### Debug panel * Not redesigned yet. ### Config panel * This was probably the "ugliest" panel in the old profiler, because of the two first tables. * We now display the information of those tables highlighted in a different way. ![profiler-config](https://cloud.githubusercontent.com/assets/73419/9226257/3d728850-410e-11e5-86d8-da807f6a1217.png) ### Search results Results with response status different from 2xx now are highlighted: ![profiler-search-results](https://cloud.githubusercontent.com/assets/73419/9226279/44bacd8e-410e-11e5-8daf-e77d2be7e3c6.png) ### Other design elements The page title now changes for each section: **Before** ![page-title-before](https://cloud.githubusercontent.com/assets/73419/9226312/6301b9c4-410e-11e5-8ef7-001be222ac53.png) **After** ![page-title-after](https://cloud.githubusercontent.com/assets/73419/9226316/693bce42-410e-11e5-897a-c5e4413bc638.png) Empty elements now display a dashed border. This allows to make design more consistent between different section. Besides, once you are used to the new design, your brain will immediately associate that design to an empty element, so you'll no longer need to read the inner text content. ![profiler-empty-element](https://cloud.githubusercontent.com/assets/73419/9226400/c9ffe06a-410e-11e5-9859-f095e444d9af.png) Besides, when the entire panel doesn't have 8000 any content, its menu label looks disabled: ![sidebar-menu](https://cloud.githubusercontent.com/assets/73419/9226405/cf4ee5e8-410e-11e5-9501-523cd6b3413e.png) Long pages have been break down using a tabs-based navigation: ![tabbed-navigation](https://cloud.githubusercontent.com/assets/73419/9226409/d918dba6-410e-11e5-9cd4-516a082950de.gif) Below the page header we display a "summary section" which displays the profiled URL and some useful profiling information. The big URL is the natural way to "go back to application" from the profiler: ![summary-back-to-application](https://cloud.githubusercontent.com/assets/73419/9226414/df1abb00-410e-11e5-88ff-59dbd35b584f.gif) Besides, the summary background color changes according to the response HTTP status code: ![profiler-summary](https://cloud.githubusercontent.com/assets/73419/9226423/e5b03850-410e-11e5-9163-2f2153c5d1de.png) Above the main menu we now display two shortcuts to common operations: "display the 10 most recent profiles" and "search profiles": ![sidebar-shortcuts](https://cloud.githubusercontent.com/assets/73419/9226427/eaea4586-410e-11e5-8ff4-f6141723996a.png) The search form in the sidebar has been collapsed and it's revealed when clicking on the "Search" shortcut button: ![search-form-reveal](https://cloud.githubusercontent.com/assets/73419/9226435/ef907fec-410e-11e5-9627-37cb2a241f86.gif) ----- And that's all! Please tell us what you think about this redesign. **Don't hesitate to criticize anything you don't like or think it's wrong or it's worse than in the previous profiler.** Let's work together to make the new profiler a reality! Thanks! Commits ------- 05773c2 Redesigned the Symfony Profiler
2 parents 4b404b5 + d426b65 commit 2612fc4

35 files changed

+2371
-1651
lines changed

‎Controller/ProfilerController.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ public function panelAction(Request $request, $token)
112112
'request' => $request,
113113
'templates' => $this->getTemplateManager()->getTemplates($profile),
114114
'is_ajax' => $request->isXmlHttpRequest(),
115+
'profiler_markup_version' => 2, // 1 = original profiler, 2 = Symfony 2.8+ profiler
115116
)), 200, array('Content-Type' => 'text/html'));
116117
}
117118

‎Resources/views/Collector/config.html.twig

Lines changed: 130 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,22 @@
1919
{% endif %}
2020

2121
{% set icon %}
22-
{% if collector.symfonyState is defined %}
22+
{% if collector.applicationname %}
23+
<span class="sf-toolbar-label">{{ collector.applicationname }}</span>
24+
<span class="sf-toolbar-value">{{ collector.applicationversion }}</span>
25+
{% elseif collector.symfonyState is defined %}
2326
<span class="sf-toolbar-label">
2427
{{ include('@WebProfiler/Icon/symfony.svg') }}
2528
</span>
2629
<span class="sf-toolbar-value">{{ collector.symfonyversion }}</span>
27-
{% elseif collector.applicationname %}
28-
<span class="sf-toolbar-label">{{ collector.applicationname }}</span>
29-
<span class="sf-toolbar-value">{{ collector.applicationversion }}</span>
3030
{% endif %}
3131
{% endset %}
3232

3333
{% set text %}
3434
{% if collector.applicationname %}
3535
<div class="sf-toolbar-info-piece">
36-
{{ collector.applicationname }} <b>{{ collector.applicationversion }}</b>
36+
<b>{{ collector.applicationname }}</b>
37+
<span>{{ collector.applicationversion }}</span>
3738
</div>
3839
{% endif %}
3940

@@ -88,118 +89,149 @@
8889
<span>{{ collector.sapiName }}</span>
8990
</div>
9091

92+
9193
{% if collector.symfonyversion is defined %}
9294
<div class="sf-toolbar-info-piece">
9395
<b>Resources</b>
9496
<span>
95-
<a href="https://symfony.com/doc/{{ collector.symfonyversion }}/index.html" rel="help">
96-
Read Symfony {{ collector.symfonyversion }} Docs
97-
</a>
97+
{% if 'Silex' == collector.applicationname %}
98+
<a href="http://silex.sensiolabs.org/documentation" rel="help">
99+
Read Silex Docs
100+
</a>
101+
{% else %}
102+
<a href="https://symfony.com/doc/{{ collector.symfonyversion }}/index.html" rel="help">
103+
Read Symfony {{ collector.symfonyversion }} Docs
104+
</a>
105+
{% endif %}
98106
</span>
99107
</div>
100108
{% endif %}
101109
{% endset %}
102110

103-
{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: false, status: block_status }) }}
111+
{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: true, name: 'config', status: block_status }) }}
104112
{% endblock %}
105113

106114
{% block menu %}
107-
<span class="label">
108-
<span class="icon"><svg width="21" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 21 28" enable-background="new 0 0 21 28" xml:space="preserve"><g><path fill="#3F3F3F" d="M5 17H1c-0.5 0-1-0.4-1-1V9c0-0.5 0.4-1 1-1h4c0.5 0 1 0.4 1 1v7C6 16.6 5.6 17 5 17z"/><path fill="#3F3F3F" d="M19 17h-4c-0.5 0-1-0.4-1-1V9c0-0.5 0.4-1 1-1h4c0.5 0 1 0.4 1 1v7C20 16.6 19.6 17 19 17z"/><path fill="#3F3F3F" d="M12.1 20h-4c-0.5 0-1-0.4-1-1v-7c0-0.5 0.4-1 1-1h4c0.5 0 1 0.4 1 1v7C13.1 19.5 12.6 20 12.1 20z"/><rect x="9.1" y="5.8" fill="#3F3F3F" width="2" height="4.5"/><rect x="16" y="17.7" fill="#3F3F3F" width="2" height="4.5"/><rect x="2.1" y="17.7" fill="#3F3F3F" width="2" height="4.5"/><rect x="9.1" y="20.7" fill="#3F3F3F" width="2" height="1.5"/><rect x="2.1" y="5.7" fill="#3F3F3F" width="2" height="1.5"/><rect x="16.1" y="5.7" fill="#3F3F3F" width="2" height="1.5"/></g></svg></span>
109-
<strong>Config</strong>
110-
</span>
115+
<span class="label label-status-{{ collector.symfonyState == 'eol' ? 'red' : collector.symfonyState in ['eom', 'dev'] ? 'yellow' : '' }}">
116+
<span class="icon">{{ include('@WebProfiler/Icon/config.svg') }}</span>
117+
<strong>Configuration</strong>
118+
</span>
111119
{% endblock %}
112120

113121
{% block panel %}
114-
<h2>Project Configuration</h2>
115-
<table>
116-
<tr>
117-
<th>Key</th>
118-
<th>Value</th>
119-
</tr>
120-
<tr>
121-
{% if collector.applicationname %}
122-
<th>Application</th>
123-
<td>{{ collector.applicationname }} {{ collector.applicationversion }} (on Symfony {{ collector.symfonyversion }})</td>
124-
{% else %}
125-
<th>Symfony version</th>
126-
<td>{{ collector.symfonyversion }}</td>
122+
{% if collector.applicationname %}
123+
{# this application is not the Symfony framework #}
124+
<h2>Project Configuration</h2>
125+
126+
<div class="metrics">
127+
<div class="metric">
128+
<span class="value">{{ collector.applicationname }}</span>
129+
<span class="label">Application name</span>
130+
</div>
131+
132+
<div class="metric">
133+
<span class="value">{{ collector.applicationversion }}</span>
134+
<span class="label">Application version</span>
135+
</div>
136+
</div>
137+
138+
<p>
139+
Based on <a class="text-bold" href="https://symfony.com">Symfony {{ collector.symfonyversion }}</a>
140+
</p>
141+
{% else %}
142+
<h2>Symfony Configuration</h2>
143+
144+
<div class="metrics">
145+
<div class="metric">
146+
<span class="value">{{ collector.symfonyversion }}</span>
147+
<span class="label">Symfony version</span>
148+
</div>
149+
150+
{% if 'n/a' != collector.appname %}
151+
<div class="metric">
152+
<span class="value">{{ collector.appname }}</span>
153+
<span class="label">Application name</span>
154+
</div>
127155
{% endif %}
128-
</tr>
129-
{% if 'n/a' != collector.appname %}
130-
<tr>
131-
<th>Application name</th>
132-
<td>{{ collector.appname }}</td>
133-
</tr>
134-
{% endif %}
135-
{% if 'n/a' != collector.env %}
136-
<tr>
137-
<th>Environment</th>
138-
<td>{{ collector.env }}</td>
139-
</tr>
140-
{% endif %}
141-
{% if 'n/a' != collector.debug %}
142-
<tr>
143-
<th>Debug</th>
144-
<td>{{ collector.debug ? 'enabled' : 'disabled' }}</td>
145-
</tr>
146-
{% endif %}
147-
</table>
148-
149-
<h2>PHP configuration</h2>
150-
<table>
151-
<tr>
152-
<th>Key</th>
153-
<th>Value</th>
154-
</tr>
155-
<tr>
156-
<th>PHP version</th>
157-
<td>{{ collector.phpversion }}</td>
158-
</tr>
159-
<tr>
160-
<th>Xdebug</th>
161-
<td>{{ collector.hasxdebug ? 'enabled' : 'disabled' }}</td>
162-
</tr>
163-
<tr>
164-
<th>PHP acceleration</th>
165-
<td>{{ collector.hasaccelerator ? 'enabled' : 'disabled' }}</td>
166-
</tr>
167-
<tr>
168-
<th>XCache</th>
169-
<td>{{ collector.hasxcache ? 'enabled' : 'disabled' }}</td>
170-
</tr>
171-
<tr>
172-
<th>APC</th>
173-
<td>{{ collector.hasapc ? 'enabled' : 'disabled' }}</td>
174-
</tr>
175-
<tr>
176-
<th>Zend OPcache</th>
177-
<td>{{ collector.haszendopcache ? 'enabled' : 'disabled' }}</td>
178-
</tr>
179-
<tr>
180-
<th>EAccelerator</th>
181-
<td>{{ collector.haseaccelerator ? 'enabled' : 'disabled' }}</td>
182-
</tr>
183-
<tr>
184-
<th>Full PHP configuration</th>
185-
<td><a href="{{ path('_profiler_phpinfo') }}"><code>phpinfo</code></a></td>
186-
</tr>
187-
</table>
156+
157+
{% if 'n/a' != collector.env %}
158+
<div class="metric">
159+
<span class="value">{{ collector.env }}</span>
160+
<span class="label">Environment</span>
161+
</div>
162+
{% endif %}
163+
164+
{% if 'n/a' != collector.debug %}
165+
<div class="metric">
166+
<span class="value">{{ collector.debug ? 'enabled' : 'disabled' }}</span>
167+
<span class="label">Debug</span>
168+
</div>
169+
{% endif %}
170+
</div>
171+
{% endif %}
172+
173+
<h2>PHP Configuration</h2>
174+
175+
<div class="metrics">
176+
<div class="metric">
177+
<span class="value">{{ collector.phpversion }}</span>
178+
<span class="label">PHP version</span>
179+
</div>
180+
181+
<div class="metric">
182+
<span class="value">{{ include('@WebProfiler/Icon/' ~ (collector.hasaccelerator ? 'yes' : 'no') ~ '.svg') }}</span>
183+
<span class="label">PHP acceleration</span>
184+
</div>
185+
186+
<div class="metric">
187+
<span class="value">{{ include('@WebProfiler/Icon/' ~ (collector.hasxdebug ? 'yes' : 'no') ~ '.svg') }}</span>
188+
<span class="label">Xdebug</span>
189+
</div>
190+
</div>
191+
192+
<div class="metrics metrics-horizontal">
193+
<div class="metric">
194+
<span class="value">{{ include('@WebProfiler/Icon/' ~ (collector.haszendopcache ? 'yes' : 'no') ~ '.svg') }}</span>
195+
<span class="label">OPcache</span>
196+
</div>
197+
198+
<div class="metric">
199+
<span class="value">{{ include('@WebProfiler/Icon/' ~ (collector.hasapc ? 'yes' : 'no') ~ '.svg') }}</span>
200+
<span class="label">APC</span>
201+
</div>
202+
203+
<div class="metric">
204+
<span class="value">{{ include('@WebProfiler/Icon/' ~ (collector.hasxcache ? 'yes' : 'no') ~ '.svg') }}</span>
205+
<span class="label">XCache</span>
206+
</div>
207+
208+
<div class="metric">
209+
<span class="value">{{ include('@WebProfiler/Icon/' ~ (collector.haseaccelerator ? 'yes' : 'no') ~ '.svg') }}</span>
210+
<span class="label">EAccelerator</span>
211+
</div>
212+
</div>
213+
214+
<p>
215+
<a href="{{ path('_profiler_phpinfo') }}">View full PHP configuration</a>
216+
</p>
188217

189218
{% if collector.bundles %}
190-
<h2>Active bundles</h2>
219+
<h2>Enabled Bundles <small>({{ collector.bundles|length }})</small></h2>
191220
<table>
192-
<tr>
193-
<th>Name</th>
194-
<th>Path</th>
195-
</tr>
196-
{% set bundles = collector.bundles %}
197-
{% for name in bundles|keys|sort %}
198-
<tr>
199-
<th>{{ name }}</th>
200-
<td>{{ bundles[name] }}</td>
201-
</tr>
202-
{% endfor %}
221+
<thead>
222+
<tr>
223+
<th class="key">Name</th>
224+
<th>Path</th>
225+
</tr>
226+
</thead>
227+
<tbody>
228+
{% for name in collector.bundles|keys|sort %}
229+
<tr>
230+
<th scope="row" class="font-normal">{{ name }}</th>
231+
<td class="font-normal">{{ collector.bundles[name] }}</td>
232+
</tr>
233+
{% endfor %}
234+
</tbody>
203235
</table>
204236
{% endif %}
205237
{% endblock %}

0 commit comments

Comments
 (0)
0