a2eebe8128
This PR was squashed before being merged into the 2.8 branch (closes #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:
### Request panel
* Renamed `Request` panel to `Request / Response`
* Divided contents into tabs: Request, Response, Session, etc. (this prevents ultra long pages)
### 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.
### Twig panel
* Just a minor update to highlight the important metrics. The rest of the contents remain the same.
### Exception panel
* Just minor design tweaks.
### 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)
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".
### 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)
### Routing panel
* Just a minor redesign and highlighted some information.
### Forms panel
* Not redesigned yet.
### Translation panel
* Highlighted the important metrics.
* Replaced the old selector by the new tabbed navigation.
### Security panel
* Just a minor redesign and highlighted some information.
### 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")
Here you can see what happens when you click on the "Show runnable query" and "Explain query" links:
### 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.
### Search results
Results with response status different from 2xx now are highlighted:
### Other design elements
The page title now changes for each section:
**Before**
**After**
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.
Besides, when the entire panel doesn't have any content, its menu label looks disabled:
Long pages have been break down using a tabs-based navigation:
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:
Besides, the summary background color changes according to the response HTTP status code:
Above the main menu we now display two shortcuts to common operations: "display the 10 most recent profiles" and "search profiles":
The search form in the sidebar has been collapsed and it's revealed when clicking on the "Search" shortcut button:
-----
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
-------
|
||
|---|---|---|
| .. | ||
| Symfony | ||
