Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesigned the Symfony Profiler #15523

Closed
wants to merge 42 commits into from

Conversation

Projects
None yet
@javiereguiluz
Copy link
Member

commented Aug 12, 2015

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). 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

Request panel

  • Renamed Request panel to Request / Response
  • Divided contents into tabs: Request, Response, Session, etc. (this prevents ultra long pages)

profiler-request

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

Twig panel

  • Just a minor update to highlight the important metrics. The rest of the contents remain the same.

profiler-twig

Exception panel

  • Just minor design tweaks.

profiler-exception

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

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

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

Routing panel

  • Just a minor redesign and highlighted some information.

profiler-routing

Forms panel

  • Not redesigned yet.

Translation panel

  • Highlighted the important metrics.
  • Replaced the old selector by the new tabbed navigation.

profiler-translation

Security panel

  • Just a minor redesign and highlighted some information.

profiler-security

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

Here you can see what happens when you click on the "Show runnable query" and "Explain query" links:

profiler-doctrine-detail

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

Search results

Results with response status different from 2xx now are highlighted:

profiler-search-results

Other design elements

The page title now changes for each section:

Before

page-title-before

After

page-title-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.

profiler-empty-element

Besides, when the entire panel doesn't have any content, its menu label looks disabled:

sidebar-menu

Long pages have been break down using a tabs-based navigation:

tabbed-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:

summary-back-to-application

Besides, the summary background color changes according to the response HTTP status code:

profiler-summary

Above the main menu we now display two shortcuts to common operations: "display the 10 most recent profiles" and "search profiles":

sidebar-shortcuts

The search form in the sidebar has been collapsed and it's revealed when clicking on the "Search" shortcut button:

search-form-reveal


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!

@mykiwi

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2015

👏 👍

@DZunke

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2015

it seems to be far more accessible then the old version. so ... vote 👍 for this.

great work! 👏

@ogizanagi

This comment has been minimized.

Copy link
Member

commented Aug 12, 2015

Big 👍 👏 👏 !
Fantastic job !

@deguif

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2015

I really like the new design.
But from the screenshots, there's only one thing that appears confused to me with the new design.
In the Exception panel, the line causing the exception seems to not being highlighted any more in the stack trace. Is there any reason ? ping @javiereguiluz


.container {
min-width: 960px;
max-width: 1200px;

This comment has been minimized.

Copy link
@mykiwi

mykiwi Aug 12, 2015

Contributor

In your screenshots it renders perfectly, but why limit the width ?

Because on a big screen it's look like this:
capture d ecran 2015-08-12 a 17 21 58

@oyepez003

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2015

+10000

</div>
</div>
{% elseif profile is defined %}
{% set status_code = profile.getcollector('request').statuscode|default(0) %}

This comment has been minimized.

Copy link
@stof

stof Aug 12, 2015

Member

what if the request collector is not registered ? The template should account for it

@javiereguiluz

This comment has been minimized.

Copy link
Member Author

commented Aug 12, 2015

@romqin I've added the missing SVG icons. Thanks for reporting the error.

@deguif very nice catch! I totally forgot about that. The line is now highlighted again:

exception_line_highlight

@romainneutron the problem is that at some point, making the lines longer worsen readability instead of improving it. The classic limit in the print era was around 75 characters per line (including white spaces). The longest line in the current table has 96 chars (and the longest file path text contain up to 134 chars, but it's not an important element).

}


{% verbatim %}

This comment has been minimized.

Copy link
@stof

stof Aug 12, 2015

Member

is a verbatim tag actually needed here ? and why only on a small part of the template ?

This comment has been minimized.

Copy link
@javiereguiluz

javiereguiluz Aug 12, 2015

Author Member

Without the verbatim tag, the selector #tabs input[type=radio]:checked + label produces an error.

But don't worry about this. The problem is that I dreamed about creating a "pure CSS" design. The tabs and the search form toggle are implemented just with CSS. However, this requires some ugly CSS tricks so the dream turned into a nightmare. I'm going to update this to use JavaScript.

This comment has been minimized.

Copy link
@stof

stof Aug 13, 2015

Member

@javiereguiluz which error ? that look weird as I don't see anything looking like the beginning of a Twig block here. This may be a bug in the Twig regex

This comment has been minimized.

Copy link
@javiereguiluz

javiereguiluz Aug 13, 2015

Author Member

I've removed the verbatim tag and the error no longer appears 😲

@OskarStark

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2015

awesome!!!!

@OskarStark

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2015

the height of the input and the button is different, isn't it?

bildschirmfoto 2015-08-12 um 17 57 42

@linaori

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2015

@javiereguiluz I love the redesign, it's more functional and just looks awesome! One question though, is it by design the code from the exception will remain light themed?

@stof

This comment has been minimized.

Copy link
Member

commented Aug 12, 2015

@javiereguiluz can you also open the DoctrineBundle PR so that I can see what it implies for a bundle supporting both versions of the profiler ?

@wouterj

This comment has been minimized.

Copy link
Member

commented Aug 12, 2015

In general: Perfect!

In more detail: I would change some things :) Some thoughts after playing with it for some minutes:

  • The design now takes the full width, instead of the previous centered-fixed-width-box. However, the content still has this very small width. This looks very weird on a bigger screen. The most strange thing is the search box floating somewhere in the center of the page, while its look reveals it should be right aligned:

    sf-profiler-fixed-width

  • I like the color of the summary bar. However, I find it too big. What about merging the 2 lines into one? (or moving most of the information in the, almost empty, top bar?)

  • I don't like the new yellow highlight color, it's almost invisible.

  • I don't like it that "Symfony" after the Symfony logo in the top bar doesn't use the Symfony logo font, but some Helvetica/Arial.

  • Due to how a human eye handles colors, selected tabs look less big (as the fill color is darker than the border color) than not selected tabs. This doesn't feel very natural. I propose to make the border darker (#555) when a tab is selected.

  • In the menu, when hovering over menu items, the current menu items looses its focus. I like it more if the current menu item is always highlighted.

margin-bottom: 0;
}
#menu-profiler li:last-child {
bborder: 0;

This comment has been minimized.

Copy link
@wouterj

wouterj Aug 12, 2015

Member

typo?

width: 160px;
#tabs input[type=radio]:checked + label {
background: #666;
bbox-shadow: inset 1px 1px 2px #CCC;

This comment has been minimized.

Copy link
@wouterj

wouterj Aug 12, 2015

Member

typo?

width: 19%;
}
table tbody th {
bbackground-color: #FFF;

This comment has been minimized.

Copy link
@wouterj

wouterj Aug 12, 2015

Member

typo?

<span class="count">
<span>{{ collector.dumpsCount }}</span>
</span>
<span class="label {{ collector.dumpsCount ? '' : 'disabled' }}">

This comment has been minimized.

Copy link
@ogizanagi

ogizanagi Aug 12, 2015

Member

{{ collector.dumpsCount == 0 ? 'disabled' }}
?

@javiereguiluz

This comment has been minimized.

Copy link
Member Author

commented Aug 12, 2015

@wouterj thanks for your review. I've made some tweaks:

  • The selected menu item remains selected when "hovering" the mouse.
  • The selected navigation tab border color matches its background to aovid the 1px issue.
  • The shade of the .status-warning yellow is slightly darker
  • The "Symfony Profiler" title font will be tweaked once our designer returns from his summer holidays :)

Regarding the "summary section", for now we prefer to maintain it as it is. first, because this colored block balances the "too gray / too dark" feeling of the rest of the page. Second because the green/yellow/red background is a very useful visual clue (assuming the user doesn't have problems perceiving colors). Third, the URL looks very short in your example ... but most of the times is way longer (and sometimes very long and it spans two lines!)

Lastly, regarding the behavior with high resolution screens, here it is the comparison between maintaining it on the left or centering it. Let's do a quick poll to see what do people like:

wide-screen-left

wide-screen-center

<span class="icon"><svg width="42" height="30" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 42 30" enable-background="new 0 0 42 30" xml:space="preserve"><g><path fill="#3F3F3F" d="M16.1 15.3c0-0.5 0-0.8 0-1.2c0.2-0.1 0.6-0.8 0.7-1.4c0.2 0 0.4-0.2 0.5-0.8c0-0.4-0.1-0.5-0.2-0.6 c0.3-0.8 0.8-3.4-1.1-3.7C15.7 7.2 15.2 7 14.6 7c-2.6 0-2.9 2-2.4 4.2c-0.1 0.1-0.3 0.3-0.2 0.6c0.1 0.7 0.3 0.8 0.5 0.8 c0.1 0.6 0.5 1.3 0.7 1.4c0 0.4 0 0.8 0 1.2c-0.5 1.4-4 1-4.2 3.7h11.2C20.1 16.3 16.6 16.7 16.1 15.3z"/><path fill="#3F3F3F" d="M28.3 10.2c-0.2 0-0.5 0.1-0.7 0.2c-0.2 0.1-0.4 0.3-0.6 0.6c-0.2 0.3-0.4 0.6-0.5 1s-0.2 0.7-0.2 1.1 c0 0.5 0.1 0.9 0.4 1.2s0.5 0.4 0.8 0.4c0.2 0 0.4-0.1 0.7-0.2c0.2-0.1 0.5-0.3 0.7-0.6s0.4-0.6 0.5-1c0.1-0.4 0.2-0.8 0.2-1.2 c0-0.5-0.1-0.9-0.4-1.2C29 10.3 28.7 10.2 28.3 10.2z"/><path fill="#3F3F3F" d="M34 4H7C6.4 4 6 4.4 6 5v19c0 0.6 0.4 1 1 1h5v-1c-0.6 0-1-0.4-1-1c0-0.6 0.4-1 1-1h2c0.6 0 1 0.4 1 1 c0 0.6-0.4 1-1 1v1h13v-1c-0.6 0-1-0.4-1-1c0-0.6 0.4-1 1-1h2c0.6 0 1 0.4 1 1c0 0.6-0.4 1-1 1v1h5c0.6 0 1-0.4 1-1V5 C35 4.4 34.6 4 34 4z M21 19c0 0.6-0.4 1-1 1H9c-0.6 0-1-0.4-1-1V7c0-0.6 0.4-1 1-1h11c0.6 0 1 0.4 1 1V19z M32.9 16.6 c-0.5 0.4-1 0.7-1.7 1c-0.6 0.2-1.4 0.4-2.3 0.4c-0.8 0-1.6-0.1-2.3-0.3c-0.7-0.2-1.3-0.5-1.8-1c-0.5-0.4-0.9-0.9-1.1-1.5 c-0.3-0.7-0.5-1.5-0.5-2.3c0-0.9 0.2-1.8 0.6-2.6c0.5-1 1.1-1.8 2-2.4C26.5 7.3 27.6 7 28.8 7c0.9 0 1.8 0.2 2.5 0.6 c0.7 0.4 1.3 1 1.8 1.7c0.4 0.7 0.6 1.4 0.6 2.1c0 1.1-0.4 2.1-1.2 2.9c-0.7 0.8-1.4 1.2-2.3 1.2c-0.3 0-0.5 0-0.6-0.1 c-0.2-0.1-0.3-0.2-0.4-0.3c0-0.1-0.1-0.3-0.1-0.5c-0.2 0.3-0.5 0.5-0.8 0.7c-0.3 0.2-0.6 0.3-0.9 0.3c-0.3 0-0.7-0.1-1-0.3 c-0.3-0.2-0.6-0.5-0.8-0.9c-0.2-0.4-0.3-0.9-0.3-1.3c0-0.6 0.2-1.2 0.5-1.8c0.3-0.6 0.7-1.1 1.2-1.4c0.5-0.3 0.9-0.5 1.3-0.5 c0.3 0 0.6 0.1 0.9 0.3c0.3 0.2 0.6 0.4 0.8 0.8l0.2-0.9h1l-0.8 3.8c-0.1 0.5-0.2 0.8-0.2 0.9c0 0.1 0 0.2 0.1 0.3 c0.1 0.1 0.2 0.1 0.3 0.1c0.2 0 0.5-0.1 0.8-0.3c0.4-0.3 0.8-0.7 1-1.2c0.3-0.5 0.4-1 0.4-1.6c0-0.6-0.2-1.2-0.5-1.8 c-0.3-0.6-0.8-1-1.5-1.3s-1.4-0.5-2.1-0.5c-0.9 0-1.7 0.2-2.4 0.6c-0.7 0.4-1.3 1-1.7 1.8C24.2 11 24 11.9 24 12.7 c0 0.9 0.2 1.7 0.6 2.4c0.4 0.7 1 1.2 1.8 1.5c0.8 0.3 1.6 0.5 2.5 0.5c1 0 1.8-0.2 2.5-0.5c0.7-0.3 1.2-0.7 1.5-1.2h1 C33.7 15.8 33.4 16.2 32.9 16.6z"/></g></svg></span>
<strong>Security</strong>
</span>
<span class="label {{ collector.enabled ? '' : 'disabled' }}">

This comment has been minimized.

Copy link
@ogizanagi

ogizanagi Aug 12, 2015

Member

{{ not collector.enabled ? 'disabled' }}
?

@wouterj

This comment has been minimized.

Copy link
Member

commented Aug 12, 2015

I prefer the second screenshot (centered page).

@ogizanagi

This comment has been minimized.

Copy link
Member

commented Aug 12, 2015

@javiereguiluz : I prefer the first screenshot, but it's right some of the tables/informations deserve more space (timeline for instance).

Regarding the 2 heading bars, what do you think about merging them ? (note margins/paddings are not representative) :
7e34ba50-413d-11e5-977f-b3b4b656daf3 copie
And eventually making it smaller ?

screenshot 2015-08-13 a 22 49 53

For smaller screens, the search input would be hidden.

@hugohenrique

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2015

awesome! 👍

@mvhirsch

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2015

awesome, please add! 👍

@OskarStark

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2015

👍 for centered

@javiereguiluz

This comment has been minimized.

Copy link
Member Author

commented Aug 13, 2015

@wouterj @OskarStark the problem is that the layout wasn't designed to be displayed centered and it looks really bad 😢

@OskarStark

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2015

hmm, ok then i would leave it as it is und maybe fix the whole problem to center the page later in a separate PR

@apfelbox

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2015

I really love the new design, just a few smaller remarks:

  • How often is the Search on Symfony website” actually used?
  • We have a lot of “code” content, so probably we should use a monotype font more often? Practically every key-value table (like in the request tab) or especially things like the paths in the Routing panel or the context of the log messages.
  • I love the color coding of the header! It might be difficult for users with visual impairment, so we could imitate the HTTP Method head? So the line where currently just the URL is, could look like POST 500 http://...? Just a thought...
  • I like the tabbed content.
  • As @iltar already mentioned: I would probably choose a dark theme for the code lines in the exception panel.
  • Maybe a pretty-JSON formatter for the log context? We could make it expandable, like the doctrine queries are in the current (2.7) version.
  • The shade of green in the routing panel is very desaturized
  • Maybe we should show the Roles in the security panel as a list instead of inline JSON.
  • Search results: I love it
  • Empty elements with the dashed border: I also like it, although it looks a little bit like a drag & drop upload field.
@linaori

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2015

@apfelbox if it's the same search as the website, it will be "offline": http://symfony.com/search?q=form

@javiereguiluz javiereguiluz force-pushed the javiereguiluz:redesign_profiler branch from 0c9c9f6 to f971509 Sep 7, 2015

@pyrech

This comment has been minimized.

Copy link
Contributor

commented Sep 7, 2015

@javiereguiluz

This comment has been minimized.

Copy link
Member Author

commented Sep 7, 2015

This PR is now completely finished. We just need some thumbs up from Symfony deciders to merge it. Thanks!


The error reported by Travis seems unrelated:

Fatal error: Call to undefined method 
Symfony\Component\DependencyInjection\ContainerBuilder::addScope() in 
/home/travis/build/symfony/symfony/src/Symfony/Bundle/TwigBundle/vendor/symfony/
framework-bundle/FrameworkBundle.php on line 70

KO TwigBundle
</head>
<body>
<body id="{% block body_id %}{{ app.request.query.get('panel', '')|lower }}{% endblock %}">

This comment has been minimized.

Copy link
@fabpot

fabpot Sep 7, 2015

Member

We cannot use app.* in the web profiler to keep compatibility with Silex.

@fabpot

This comment has been minimized.

Copy link
Member

commented Sep 7, 2015

@javiereguiluz Can you test this redesign with Silex 1.x and 2.x, to validate that we do not break it?

@javiereguiluz

This comment has been minimized.

Copy link
Member Author

commented Sep 7, 2015

@fabpot absolutely! I'm going to do it right now.

@javiereguiluz

This comment has been minimized.

Copy link
Member Author

commented Sep 7, 2015

In a808fa5 I've made some changes for Silex 1 and 2. Let's review the changes:

Silex 2

Old toolbar

silex_2_before

New toolbar

silex_2_after

New toolbar detail

silex_2_after_detail

All profiler panels are exactly the same as Symfony, except the following changes:

Config panel

symfony_vs_silex_2_config

Logger panel (there is no channel)

symfony_vs_silex_2_logger

Events panel (there is no priority)

symfony_vs_silex_2_events

Silex 1

First, I cannot make the profiler work for a freshly installed Silex 1 app because of this issue. The solution is to add the following in src/app.php:

$app->register(new Silex\Provider\HttpFragmentServiceProvider());

The new toolbar looks the same, but it suffers the same shortcomings of the old toolbar:

  1. Instead of "Silex 2", you see the Symfony version:

silex_1_vs_2_toolbar

  1. The configuration panel also cannot display the Silex version:

silex_1_vs_2_config

  1. The log messages are slightly different:

silex_1_vs_2_logger

@hason

This comment has been minimized.

Copy link
Contributor

commented Sep 7, 2015

Perfect!
I would change some things:

  • add responsive design for smaller devices (reintroduce minimizing of menu and remove min-width),
  • add support to disable clickable links (show all logs, all events etc. - old behaviour),
  • enable the full width on a bigger screen (remove max-width).
@fabpot

This comment has been minimized.

As I said, the app.request call must be removed.

@javiereguiluz

This comment has been minimized.

Copy link
Member Author

commented Sep 7, 2015

@hason I'd prefer to have this PR merged as it is and then let people experience the new profiler before changing any of the things you mentioned :)

@fabpot

This comment has been minimized.

Does that mean that this code was obsolete?

This comment has been minimized.

Copy link
Owner Author

replied Sep 14, 2015

This was a new "feature" which wasn't present in the current profiler. But we can totally live without it. See https://github.com/symfony/symfony/blob/2.8/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig#L20

@fabpot

This comment has been minimized.

Copy link
Member

commented Sep 14, 2015

Thank you @javiereguiluz.

@fabpot fabpot closed this in a2eebe8 Sep 14, 2015

stof added a commit to doctrine/DoctrineBundle that referenced this pull request Sep 28, 2015

feature #452 Updated the profiler panel for the new version of the Sy…
…mfony Profiler (javiereguiluz)

This PR was squashed before being merged into the 1.6.x-dev branch (closes #452).

Discussion
----------

Updated the profiler panel for the new version of the Symfony Profiler

Refs symfony/symfony#15523

Commits
-------

4bbb4df Updated the profiler panel for the new version of the Symfony Profiler

@fabpot fabpot referenced this pull request Nov 16, 2015

Merged

Release v2.8.0-BETA1 #16550

ostrolucky pushed a commit to ostrolucky/symfony that referenced this pull request Mar 25, 2018

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 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.