Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
Redesigned the Symfony Profiler #15523
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.
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)
This is the new general structure of the profiler pages:
Here you can see what happens when you click on the "Show runnable query" and "Explain query" links:
Results with response status different from 2xx now are highlighted:
Other design elements
The page title now changes for each section:
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!
I really like the new design.
@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).
In general: Perfect!
In more detail: I would change some things :) Some thoughts after playing with it for some minutes:
@wouterj thanks for your review. I've made some tweaks:
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:
@javiereguiluz : I prefer the first screenshot, but it's right some of the tables/informations deserve more space (timeline for instance).
For smaller screens, the search input would be hidden.
I really love the new design, just a few smaller remarks:
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:
In a808fa5 I've made some changes for Silex 1 and 2. Let's review the changes:
New toolbar detail
All profiler panels are exactly the same as Symfony, except the following changes:
Logger panel (there is no channel)
Events panel (there is no priority)
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
The new toolbar looks the same, but it suffers the same shortcomings of the old toolbar:
As I said, the
Does that mean that this code was obsolete?
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