Redesigned the Symfony Profiler #15523

javiereguiluz · 2015-08-12T14:30:58Z

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:

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!

mykiwi · 2015-08-12T14:32:10Z

👏 👍

DZunke · 2015-08-12T14:36:56Z

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

great work! 👏

ogizanagi · 2015-08-12T14:47:08Z

Big 👍 👏 👏 !
Fantastic job !

deguif · 2015-08-12T14:58:51Z

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

mykiwi · 2015-08-12T15:21:43Z

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

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


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

Because on a big screen it's look like this:

oyepez003 · 2015-08-12T15:22:19Z

+10000

stof · 2015-08-12T15:37:16Z

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig

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


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

javiereguiluz · 2015-08-12T15:38:20Z

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

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

stof · 2015-08-12T15:39:29Z

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

+}
+
+
+{% verbatim %}


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

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.

@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

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

OskarStark · 2015-08-12T15:50:03Z

awesome!!!!

OskarStark · 2015-08-12T15:58:25Z

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

linaori · 2015-08-12T16:28:26Z

@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 · 2015-08-12T16:38:00Z

@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 · 2015-08-12T17:22:27Z

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

wouterj · 2015-08-12T17:22:52Z

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

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


javiereguiluz · 2015-08-12T20:00:45Z

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

ogizanagi · 2015-08-12T20:00:46Z

src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig

-    <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' }}">


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

wouterj · 2015-08-12T20:08:18Z

I prefer the second screenshot (centered page).

ogizanagi · 2015-08-12T20:17:52Z

@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) :

And eventually making it smaller ?

For smaller screens, the search input would be hidden.

hugohenrique · 2015-08-13T04:08:40Z

awesome! 👍

mvhirsch · 2015-08-13T06:41:06Z

awesome, please add! 👍

OskarStark · 2015-08-13T07:29:11Z

👍 for centered

javiereguiluz · 2015-08-13T07:30:52Z

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

OskarStark · 2015-08-13T07:43:59Z

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 · 2015-08-13T07:46:01Z

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 · 2015-08-13T07:49:48Z

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

…e titles

pyrech · 2015-09-07T07:45:44Z

The option 4 looks nicer 👍

javiereguiluz · 2015-09-07T07:59:08Z

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

fabpot · 2015-09-07T12:44:53Z

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig

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


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

fabpot · 2015-09-07T12:47:21Z

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

javiereguiluz · 2015-09-07T12:49:11Z

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

javiereguiluz · 2015-09-07T14:11:34Z

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

Silex 2

Old toolbar

New toolbar

New toolbar detail

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

Config panel

Logger panel (there is no channel)

Events panel (there is no priority)

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:

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

The configuration panel also cannot display the Silex version:

The log messages are slightly different:

hason · 2015-09-07T14:13:58Z

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

javiereguiluz · 2015-09-07T14:41:43Z

@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 · 2015-09-14T06:10:12Z

Thank you @javiereguiluz.

…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

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

carsonbot added the Status: Needs Review label Aug 12, 2015

mykiwi reviewed Aug 12, 2015
View reviewed changes

stof reviewed Aug 12, 2015
View reviewed changes

wouterj reviewed Aug 12, 2015
View reviewed changes

ogizanagi reviewed Aug 12, 2015
View reviewed changes

javiereguiluz added 11 commits September 7, 2015 08:27

Improved the timeline graphics and allowed panels to define their pag…

489fbd6

…e titles

Simplified the management of the profiler panel titles

437a67b

Added some metrics about sub-requests in the performance panel

72a64e3

Fixed some CSS issues in Firefox

f79894f

Allow to disable tabs, tweaked tables layout and other minor tweaks

2b55b9b

Display the listener priority in the events panel

79f7297

Add a check to avoid errors for special pages (exceptions for example)

50d5f59

Fixed some test for the TraceableEventDispatcher changes

14e725f

Sort uncalled events by priority

b254b69

Grouped listeners by event in the events panel

67ef234

Fixed an HTML markup issue for the new events panel

f971509

javiereguiluz force-pushed the redesign_profiler branch from 0c9c9f6 to f971509 Compare September 7, 2015 06:28

javiereguiluz added 2 commits September 7, 2015 08:47

Adjusted the logger panel after the grouping of related deprecations

ac6f79a

Tweaked the logger panel stack trace contents

ac63334

fabpot reviewed Sep 7, 2015
View reviewed changes

Tweaked the toolbar for Silex 2

a808fa5

Removed the app.request... call to make it compatible with Silex

73809a8

fabpot closed this in a2eebe8 Sep 14, 2015

fabpot mentioned this pull request Nov 16, 2015

Release v2.8.0-BETA1 #16550

Merged

Redesigned the Symfony Profiler #15523

Redesigned the Symfony Profiler #15523

Conversation

javiereguiluz commented Aug 12, 2015

Context

The redesign

Overview

Request panel

Timeline panel

Twig panel

Exception panel

Events panel

Logs panel

Routing panel

Forms panel

Translation panel

Security panel

E-mails panel

Doctrine panel

Debug panel

Config panel

Search results

Other design elements

mykiwi commented Aug 12, 2015

DZunke commented Aug 12, 2015

ogizanagi commented Aug 12, 2015

deguif commented Aug 12, 2015

Choose a reason for hiding this comment

oyepez003 commented Aug 12, 2015

Choose a reason for hiding this comment

javiereguiluz commented Aug 12, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OskarStark commented Aug 12, 2015

OskarStark commented Aug 12, 2015

linaori commented Aug 12, 2015

stof commented Aug 12, 2015

wouterj commented Aug 12, 2015

Choose a reason for hiding this comment

javiereguiluz commented Aug 12, 2015

Choose a reason for hiding this comment

wouterj commented Aug 12, 2015

ogizanagi commented Aug 12, 2015

hugohenrique commented Aug 13, 2015

mvhirsch commented Aug 13, 2015

OskarStark commented Aug 13, 2015

javiereguiluz commented Aug 13, 2015

OskarStark commented Aug 13, 2015

apfelbox commented Aug 13, 2015

linaori commented Aug 13, 2015

pyrech commented Sep 7, 2015 via email

javiereguiluz commented Sep 7, 2015

Choose a reason for hiding this comment

fabpot commented Sep 7, 2015

javiereguiluz commented Sep 7, 2015

javiereguiluz commented Sep 7, 2015

Silex 2

Silex 1

hason commented Sep 7, 2015

javiereguiluz commented Sep 7, 2015

fabpot commented Sep 14, 2015