Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9.7k
Redesigned the web debug toolbar#15160
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Conversation
aderuwe commentedJul 1, 2015
Very nice, I like it! |
stof commentedJul 1, 2015
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). |
kashike commentedJul 1, 2015
This looks wonderful, good job! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
is it expected to have this opening span here ? I cannot see where you close it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
this should indeed be removed. It's now also causing the close button to not work properly anymore.
ghost commentedJul 1, 2015
One of the problems with the current web debug toolbar is that it is almost actively hostile to Content Security Policy. I'm not suggesting that you put in any effort to work with it, but It'd be nice if you could make sure to keep any twig related logic out of the javascript code, so it's at least easier to override. |
stof commentedJul 1, 2015
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. |
ghost commentedJul 1, 2015
yeah i was just about to retract my comment. This PR didn't make the situation worse. |
javiereguiluz commentedJul 1, 2015
@stof if this proposal is approved, I'm going to reintroduce all icons to display them in smaller screens. |
xavierleune commentedJul 1, 2015
Hi, This is a very good idea. The new look & feel is prettier but I find it harder to read. If icons are back, like you suggest it in your previous comment, that will be just fine. So that's a 👍 for symfony 3.0 for me. |
Pierstoval commentedJul 1, 2015
👍 for any Symfony version, it looks awesome and reminds me the look of all SensioLabs related websites 👍 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
This code is for adding the translation profiler (see#14993 ), is there a reason to remove it or just by mistake ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
It's a mistake. I'm sorry. If this proposal is approved I'll review each panel very carefully. Thanks.
wouterj commentedJul 1, 2015
A thousand times 👍. Improving it's UI has been on my create-an-issue-about-it list for a long time :) 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. |
Green-Cat commentedJul 1, 2015
👍 |
Baachi commentedJul 1, 2015
Big 👍 for this. Love it ❤️ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
typo? toolVar
wouterj commentedJul 1, 2015
Btw, nothing in the bar now indicates that's a toolbar from Symfony. I would prefer if the symfony logo was added somewhere in the bar (right/left), just like in the old toolbar. Also, when hiding the toolbar, I think the color of the symfony logo is too white. |
mickaelandrieu commentedJul 1, 2015
👍 and I (also) agree this can be part of Symfony 2.8 |
linaori commentedJul 2, 2015
You have my vote, this looks a lot more user-friendly to me! 👍 |
mykiwi commentedJul 2, 2015
I'm 👍 with it even if I'm not really fan of the new redesign. There is a small bug: When I want to hide the web debug toolbar (on the symfony demo app): |
javiereguiluz commentedJul 2, 2015
Thank you all for your comments! So far the feedback from the communty has been mostly positive. Next steps:
|
aitboudad commentedJul 2, 2015
I'm 👍 |
linaori commentedJul 2, 2015
@javiereguiluz maybe it's more about the details, but the "invalid entities" green rounded corner square is not in style with the rest anymore. Is it an idea to just make the "0" green or the "N" red instead? |
fabpot commentedJul 2, 2015
I'm also interested in seeing what we can come up with by redesigning the toolbar. |
xabbuh commentedJul 2, 2015
Looks good so far. |
mickaelandrieu commentedJul 2, 2015
@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 was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
don't forget to remove this CSS block.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
the toolbar info should have a higher zindex than the toolbar itself to place it properly when the toolbar spans on 2 lines (ensuring that the info does not get partially hidden by the first row of the toolbar)
javiereguiluz commentedJul 31, 2015
@wouterj I can't reproduce this:
Panels without icons (svg or img) look OK. |
wouterj commentedJul 31, 2015
Hmm, indeed. Must have been something else than that broke SonataBlockBundle's toolbar block |
javiereguiluz commentedJul 31, 2015
Update:
The error displayed by Travis for PHP 5.3 is unrelated to this PR:
|
wouterj commentedJul 31, 2015
👍 Imo, it's better to merge this PR now. We have 3 months to improve the current toolbar in further PRs. Btw, should we create a list with popular bundles that needs an update? Apart from the doctrine bundles and sonata block, I don't know any other. |
fabpot commentedJul 31, 2015
Thank you@javiereguiluz. |
This PR was merged into the 2.8 branch.Discussion----------Redesigned the web debug toolbar| Q | A| ------------- | ---| Bug fix? | no| New feature? | yes| BC breaks? | no| Deprecations? | no| Tests pass? | yes| Fixed tickets | -| License | MIT| Doc PR | -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:**Symfony Panel** **Request Panel** -----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: * **Why use a dark toolbar instead of maintaining the light toolbar?** Because a dark toolbar stands out more from most of the web designs. It's more probable that your applications display a light background than a dark background, so the Symfony Toolbar stands out more if it's designed in dark. * **What about the profiler?** If this proposal is approved I'll also update the design of the profiler to match this new dark and modern look-and-feel. * **What about smaller screens?** This is a proposal, so I haven't finished it. Tweaking the design for smaller screens will be the next step. Anyway, as you can see the new toolbar already takes much less space than the current one, so it won't be hard to adapt it.Commits-------5a571b6 Reordered the toolbar elements via service prioritiesf237ff1 Increased the z-index of .sf-toolbar-infob3ad83d Removed an unused media queryb438ee5 Redesigned "abbr" elements7d92cb8 Restored the old behavior for toolbars with lots of elements597637e Tweaks and bug fixes9df0f8b Added some upgrade notes about the new toolbar design22f6bc5 Removed an useless CSS class and added styles for <hr>5070861 Added a new profiler_markup_version to improve BC of the new toolbar2fb3319 Removed an unused import7ec1cd4 Reverted the feature to display different toolbar versions084cca6 Minor JavaScript optimizations972a92e Misc. tweaks and improvementsebb44e4 Added some styles to make old panels look better in the new design1847285 Pass the toolbar version number from the controller, to ease transition and keep BCa0e03f6 Minor tweaks002dda5 Fixed toolbar issues when displaying it inside the profilere94a6a0 Smaller font sizes for smartphones, fixed request status padding issue and make too long panels always be displayed at the leftmost part of browser window9b585b9 Made the close icon a bit smaller3ab2e20 fixed all vertical aligning issues and tweaked iconsf087ac0 More vertical aligning fixes9e38a8a Minor CSS tweaks and made font sizes bigger0dfcb60 Fixed an issue with the Config panel in the Profiler viewcd53210 Fixed another z-index issuee28f895 A very high z-index value is required to avoid issues in the profiler view23dc884 Fixed a potential issue in the request panel7c35d25 Fixed another insignificant syntax issuee14fb6d Fixed a minor syntax issue9d89841 Finished the toolbar redesignb25b6dd Finished "dump" panel and other minor tweaks2bccdd4 Minor CSS fixesc0bee9b Tweaked the Twig panel77d522a Tweaked the translation panel041d424 Improved the Security toolbar panelaf3dcb2 Minor Ajax tweaksacee052 Finished the Ajax panel redesignfac5391 Lots of minor improvementsef53850 More fixes and tweaks51a79c9 Reorder toolbar panels2735346 Fixed a minor markup error that broke the toolbar64b8f38 A new batch of updates4eee931 Restored all the code removed by mistakeb6f413f First batch of fixesc2fcadc Redesigned the web debug toolbar
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
@javiereguiluz I would even suggest leaving holes between the priorities used in Symfony to make it easier to inject things between them
peshi commentedAug 3, 2015
@javiereguiluz The close toolbar "X" is misaligned in OS X Safari. |
javiereguiluz commentedAug 3, 2015
…viereguiluz)This PR was squashed before being merged into the 1.6.x-dev branch (closes#445).Discussion----------Update collector template for the new toolbar designSymfony is redesigning its toolbar for 2.8+ versions (seesymfony/symfony#15160). We need to update Doctrine toolbar panel too.@stof told me to not change the current HTML markup, so that's why I include two different contents depending on the Symfony version.Commits-------0a0d67e Update collector template for the new toolbar design
… (javiereguiluz)This PR was squashed before being merged into the 2.3-dev branch (closes#109).Discussion----------Update the toolbar and panel for the new profiler designThis PR adds support for the new Symfony Toolbar (seesymfony/symfony#15160) and it uses the same trick validated by@stof for the DoctrineBundle (seedoctrine/DoctrineBundle#445).Commits-------4cfc35f Update the toolbar and panel for the new profiler design
tacman commentedDec 31, 2015
This is great. My Propel 1.7 SQL statements are now showing with the HTML tags though, is there a |raw that is missing somewhere? Or a setting I can use?
|
sstok commentedJan 1, 2016
@tacman This should be reported to thehttps://github.com/propelorm/PropelBundle (if not done already). |
hrazaka commentedJul 13, 2016
I have some problem. |
… in the WDT (tucksaun)This PR was merged into the 4.4 branch.Discussion----------[WebProfilerBundle] Fix AJAX requests info are truncated in the WDT| Q | A| ------------- | ---| Branch? | 4.4| Bug fix? | yes| New feature? | no| Deprecations? | no| Tickets |Fix#45741?, replaces#46495 ?| License | MIT| Doc PR | n/aAt some point (I guess during the WDT redesign,#15160), something changed making the AJAX request table in the WDT just a little bit larger.This causes the requests to be truncated when the URL is too long:<img width="824" alt="Screenshot 2022-05-30 at 10 21 51" src="https://user-images.githubusercontent.com/870118/171017432-8eeec54d-1342-427d-b885-a590db978458.png">This PR fixes this by increasing the max-width of the WDT info panel to 525px:<img width="866" alt="Screenshot 2022-05-30 at 10 22 20" src="https://user-images.githubusercontent.com/870118/171018191-9370c1e0-9ecb-487f-ad1c-300b831ae2d6.png">We could reduce the width of the request table to fit in, but 525px seems reasonable enough nowadays and provides more information about the URL.Commits-------a5c2e1d [WebProfilerBundle] Fix AJAX requests info are truncated in the WDT
…viereguiluz)This PR was squashed before being merged into the 1.6.x-dev branch (closes #445).Discussion----------Update collector template for the new toolbar designSymfony is redesigning its toolbar for 2.8+ versions (seesymfony/symfony#15160). We need to update Doctrine toolbar panel too.@stof told me to not change the current HTML markup, so that's why I include two different contents depending on the Symfony version.Commits-------0a0d67e Update collector template for the new toolbar design
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:
Symfony Panel
Request Panel
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: