Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Redesigned the web debug toolbar #15160
In my opinion, the design of the current Web Debug Toolbar suffers from two problems: it looks outdated and it lacks polishing on some parts. Symfony has always introduced a big update in this toolbar for each big release, so I propose to do the same for Symfony 3.
Let's see the new proposed toolbar in action:
This is the default toolbar (click on the image to enlarge it)
As you can see, if some panel doesn't provide any information, we don't show it (e.g. 0 queries, 0 forms, 0 logs, 0 ajax requests).
Let's compare some panels in detail:
When needed, more panels are displayed, such as the SQL information: (click on the image to enlarge it)
As you can see, the new toolbar provides more information than the old one and it takes less space.
Some of the new panels include more information in the extended info, such as the Doctrine one showing that the second level cache is disabled:
Errors and warnings now stand out more clearly because all the panel background is changed.
For example, if there are i18n errors: (click on the image to enlarge it)
If the page is loading too slowly: (click on the image to enlarge it)
If Symfony version is deprecated: (click on the image to enlarge it)
HTTP Errors also stand out more clearly: (click on the image to enlarge it)
Some questions that you may be wondering:
How would it look on smaller screens ? currently, we keep only the icons, but you dropped them. So I think it may still be hard
However, I like the idea. I have 1 request though: please make it easy for third-party bundles to provide toolbar integrations compatible with both 2.x and 3.x, otherwise most bundles will provide a crappy integration on some versions (these bundles will need to keep supporting the 2.7 and 2.8 LTS for a while).
There is another weird thing: you have removed some icons, but not all of them.
looks like you actually agree with me @javiereguiluz as you submitted it to 2.8
@jrobeson please open a separate issue about the CSP compatibility. It is not related to a redesign.
A thousand times
I like the black background, this seems to be the industry standard for toolbars (see WordPress, Drupal, StackOverflow, etc.).
However, white text on a black background is harder to read than black text on a white background. I think we can improve UI of the toolbar by making the text some pixels bigger (at least the white text). Some text (like "anon.") a hard to read.
@javiereguiluz also, there is a WIP to make the Profiler a standalone component: does this WIP have an impact on your redesign ?
I mean, maybe we can have a new component in 2.8, which introduce a new design.
I'm not sure we need to break the actual HTML in order to make a new UI, what do you think ?
Last question: in the database panel, when we read "3sql/XXms" is it to add the information on the actual database engine used ? For example, what is the behavior if I use mongoDB ?
There are some BC breaks in the menu that are not in the update file:
The error displayed by Travis for PHP 5.3 is unrelated to this PR: