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 web debug toolbar #15160

Merged
merged 44 commits into from Jul 31, 2015

Conversation

Projects
None yet
@javiereguiluz
Member

javiereguiluz commented Jul 1, 2015

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)

default

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

symfony-old-panel symfony-new-panel

Request Panel

request-old-panel request-new-panel


When needed, more panels are displayed, such as the SQL information: (click on the image to enlarge it)

sql_panel

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:

sql_old_panel sql_new_panel


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)

i18n_panel_error

If the page is loading too slowly: (click on the image to enlarge it)

slow_page

If Symfony version is deprecated: (click on the image to enlarge it)

deprecated_symfony


HTTP Errors also stand out more clearly: (click on the image to enlarge it)

error_404

error_500


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

This comment has been minimized.

Show comment
Hide comment
@aderuwe

aderuwe Jul 1, 2015

Contributor

Very nice, I like it!

Contributor

aderuwe commented Jul 1, 2015

Very nice, I like it!

@stof

This comment has been minimized.

Show comment
Hide comment
@stof

stof Jul 1, 2015

Member

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).
and btw, should we include it in 3.0 only ? I would vote to have it in 2.8 instead if we can make it BC for bundles providing panels.

Member

stof commented Jul 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).
and btw, should we include it in 3.0 only ? I would vote to have it in 2.8 instead if we can make it BC for bundles providing panels.

@kashike

This comment has been minimized.

Show comment
Hide comment
@kashike

kashike Jul 1, 2015

This looks wonderful, good job!

kashike commented Jul 1, 2015

This looks wonderful, good job!

@jrobeson

This comment has been minimized.

Show comment
Hide comment
@jrobeson

jrobeson Jul 1, 2015

Contributor

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.

Contributor

jrobeson commented Jul 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

This comment has been minimized.

Show comment
Hide comment
@stof

stof Jul 1, 2015

Member

There is another weird thing: you have removed some icons, but not all of them.

and btw, should we include it in 3.0 only ? I would vote to have it in 2.8 instead if we can make it BC for bundles providing panels.

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.

Member

stof commented Jul 1, 2015

There is another weird thing: you have removed some icons, but not all of them.

and btw, should we include it in 3.0 only ? I would vote to have it in 2.8 instead if we can make it BC for bundles providing panels.

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.

@jrobeson

This comment has been minimized.

Show comment
Hide comment
@jrobeson

jrobeson Jul 1, 2015

Contributor

yeah i was just about to retract my comment. This PR didn't make the situation worse.

Contributor

jrobeson commented Jul 1, 2015

yeah i was just about to retract my comment. This PR didn't make the situation worse.

@javiereguiluz

This comment has been minimized.

Show comment
Hide comment
@javiereguiluz

javiereguiluz Jul 1, 2015

Member

@stof if this proposal is approved, I'm going to reintroduce all icons to display them in smaller screens.

Member

javiereguiluz commented Jul 1, 2015

@stof if this proposal is approved, I'm going to reintroduce all icons to display them in smaller screens.

@xavierleune

This comment has been minimized.

Show comment
Hide comment
@xavierleune

xavierleune Jul 1, 2015

Contributor

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.

Contributor

xavierleune commented Jul 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

This comment has been minimized.

Show comment
Hide comment
@Pierstoval

Pierstoval Jul 1, 2015

Contributor

👍 for any Symfony version, it looks awesome and reminds me the look of all SensioLabs related websites 👍

Contributor

Pierstoval commented Jul 1, 2015

👍 for any Symfony version, it looks awesome and reminds me the look of all SensioLabs related websites 👍

@wouterj

This comment has been minimized.

Show comment
Hide comment
@wouterj

wouterj Jul 1, 2015

Member

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.
Also, the close icon seems to be very large, compared to other icons/text. I think it should be smaller than or the same as the rest of the icons.

Member

wouterj commented Jul 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.
Also, the close icon seems to be very large, compared to other icons/text. I think it should be smaller than or the same as the rest of the icons.

@Green-Cat

This comment has been minimized.

Show comment
Hide comment
@Green-Cat

Green-Cat commented Jul 1, 2015

👍

@Baachi

This comment has been minimized.

Show comment
Hide comment
@Baachi

Baachi Jul 1, 2015

Contributor

Big 👍 for this. Love it ❤️

Contributor

Baachi commented Jul 1, 2015

Big 👍 for this. Love it ❤️

@wouterj

This comment has been minimized.

Show comment
Hide comment
@wouterj

wouterj Jul 1, 2015

Member

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.

Member

wouterj commented Jul 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

This comment has been minimized.

Show comment
Hide comment
@mickaelandrieu

mickaelandrieu Jul 1, 2015

Contributor

👍 and I (also) agree this can be part of Symfony 2.8

Contributor

mickaelandrieu commented Jul 1, 2015

👍 and I (also) agree this can be part of Symfony 2.8

@iltar

This comment has been minimized.

Show comment
Hide comment
@iltar

iltar Jul 2, 2015

Contributor

You have my vote, this looks a lot more user-friendly to me! 👍

Contributor

iltar commented Jul 2, 2015

You have my vote, this looks a lot more user-friendly to me! 👍

@mykiwi

This comment has been minimized.

Show comment
Hide comment
@mykiwi

mykiwi Jul 2, 2015

Contributor

I'm 👍 with it even if I'm not really fan of the new redesign.

There is a small bug:
capture d ecran 2015-07-02 09 49 21

When I want to hide the web debug toolbar (on the symfony demo app):
capture d ecran 2015-07-02 09 49 29

Contributor

mykiwi commented Jul 2, 2015

I'm 👍 with it even if I'm not really fan of the new redesign.

There is a small bug:
capture d ecran 2015-07-02 09 49 21

When I want to hide the web debug toolbar (on the symfony demo app):
capture d ecran 2015-07-02 09 49 29

@javiereguiluz

This comment has been minimized.

Show comment
Hide comment
@javiereguiluz

javiereguiluz Jul 2, 2015

Member

Thank you all for your comments! So far the feedback from the communty has been mostly positive. Next steps:

  1. Let's wait a few hours/days for the Symfony Deciders to vote on this proposal.
  2. If approved, I'll finish it, fix all the reported issues, etc.
Member

javiereguiluz commented Jul 2, 2015

Thank you all for your comments! So far the feedback from the communty has been mostly positive. Next steps:

  1. Let's wait a few hours/days for the Symfony Deciders to vote on this proposal.
  2. If approved, I'll finish it, fix all the reported issues, etc.
@aitboudad

This comment has been minimized.

Show comment
Hide comment
@aitboudad

aitboudad Jul 2, 2015

Contributor

I'm 👍

Contributor

aitboudad commented Jul 2, 2015

I'm 👍

@iltar

This comment has been minimized.

Show comment
Hide comment
@iltar

iltar Jul 2, 2015

Contributor

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

Contributor

iltar commented Jul 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

This comment has been minimized.

Show comment
Hide comment
@fabpot

fabpot Jul 2, 2015

Member

I'm also interested in seeing what we can come up with by redesigning the toolbar.

Member

fabpot commented Jul 2, 2015

I'm also interested in seeing what we can come up with by redesigning the toolbar.

@xabbuh

This comment has been minimized.

Show comment
Hide comment
@xabbuh

xabbuh Jul 2, 2015

Member

Looks good so far.

Member

xabbuh commented Jul 2, 2015

Looks good so far.

@mickaelandrieu

This comment has been minimized.

Show comment
Hide comment
@mickaelandrieu

mickaelandrieu Jul 2, 2015

Contributor

@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.
Also, is there a way to make a nice redesign without remove any html but by adding a new css file and add some new informations ?

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 ?

Contributor

mickaelandrieu commented Jul 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.
Also, is there a way to make a nice redesign without remove any html but by adding a new css file and add some new informations ?

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 ?

Restored the old behavior for toolbars with lots of elements
If a toolbar includes lots of elements, some of them may
span to a new line, increasing the height of the toolbar
@wouterj

This comment has been minimized.

Show comment
Hide comment
@wouterj

wouterj Jul 31, 2015

Member

There are some BC breaks in the menu that are not in the update file:

  • <div class="sf-toolbar-icon"> now has to live inside the <a> (which is incorrect btw, but is supported by browsers), whereas the other way around was supported previously (well, SonataBlockBundle did it this way, so I think it was supported)
  • Toolbars now have to have an icon (or at least an <img> element), otherwise .sf-toolbar-value/label aren't styled correctly.
Member

wouterj commented Jul 31, 2015

There are some BC breaks in the menu that are not in the update file:

  • <div class="sf-toolbar-icon"> now has to live inside the <a> (which is incorrect btw, but is supported by browsers), whereas the other way around was supported previously (well, SonataBlockBundle did it this way, so I think it was supported)
  • Toolbars now have to have an icon (or at least an <img> element), otherwise .sf-toolbar-value/label aren't styled correctly.
@stof

This comment has been minimized.

Show comment
Hide comment
@stof

stof Jul 31, 2015

Member

@wouterj a div inside a a is not invalid anymore in the HTML5 spec (it was indeed invalid in the HTML4 spec, while supported by browsers)

Member

stof commented Jul 31, 2015

@wouterj a div inside a a is not invalid anymore in the HTML5 spec (it was indeed invalid in the HTML4 spec, while supported by browsers)

right: 0;
}
.sf-toolbar-block-time .sf-toolbar-icon svg,
.sf-toolbar-block-memory .sf-toolbar-icon svg {

This comment has been minimized.

@stof

stof Jul 31, 2015

Member

rather than hardcoding this handling for the time and memory panel, it would be better to use an agnostic class which could be opted in by any panel wanting a similar behavior (and this behavior would be used by the time and memory ones of course)

@stof

stof Jul 31, 2015

Member

rather than hardcoding this handling for the time and memory panel, it would be better to use an agnostic class which could be opted in by any panel wanting a similar behavior (and this behavior would be used by the time and memory ones of course)

This comment has been minimized.

@stof

stof Jul 31, 2015

Member

the more we can avoid panel-specific styles in the stylesheet, the more our toolbar will be extendable. and given it is meant to be fully extendable, it is a good goal.

@stof

stof Jul 31, 2015

Member

the more we can avoid panel-specific styles in the stylesheet, the more our toolbar will be extendable. and given it is meant to be fully extendable, it is a good goal.

This comment has been minimized.

@javiereguiluz

javiereguiluz Jul 31, 2015

Member

For now I prefer to not make these changes. The reason is that design of the time + memory panels is custom and totally different from the other panels. Why? Because I think that time+memory should be in fact one single panel called "performance". All these CSS twekas are defined to make these panels look like one single panel.

@javiereguiluz

javiereguiluz Jul 31, 2015

Member

For now I prefer to not make these changes. The reason is that design of the time + memory panels is custom and totally different from the other panels. Why? Because I think that time+memory should be in fact one single panel called "performance". All these CSS twekas are defined to make these panels look like one single panel.

This comment has been minimized.

@stof

stof Jul 31, 2015

Member

yeah, and the memory section does not even have a panel in the profiler right ? It is only in the toolbar

@stof

stof Jul 31, 2015

Member

yeah, and the memory section does not even have a panel in the profiler right ? It is only in the toolbar

@javiereguiluz

This comment has been minimized.

Show comment
Hide comment
@javiereguiluz

javiereguiluz Jul 31, 2015

Member

@wouterj I can't reproduce this:

Toolbars now have to have an icon (or at least an element), otherwise .sf-toolbar-value/label aren't styled correctly.

Panels without icons (svg or img) look OK.

Member

javiereguiluz commented Jul 31, 2015

@wouterj I can't reproduce this:

Toolbars now have to have an icon (or at least an element), otherwise .sf-toolbar-value/label aren't styled correctly.

Panels without icons (svg or img) look OK.

@wouterj wouterj referenced this pull request Jul 31, 2015

Merged

Prepare for new toolbar #217

@wouterj

This comment has been minimized.

Show comment
Hide comment
@wouterj

wouterj Jul 31, 2015

Member

Hmm, indeed. Must have been something else than that broke SonataBlockBundle's toolbar block

Member

wouterj commented Jul 31, 2015

Hmm, indeed. Must have been something else than that broke SonataBlockBundle's toolbar block

@javiereguiluz

This comment has been minimized.

Show comment
Hide comment
@javiereguiluz

javiereguiluz Jul 31, 2015

Member

Update:

  • All reported errors have been fixed.
  • All proposed changes have been implemented.

The error displayed by Travis for PHP 5.3 is unrelated to this PR:

  1. Symfony\Component\Console\Tests\Helper\ProgressBarTest::testAnsiColorsAndEmojis
    Failed asserting that two strings are equal.
Member

javiereguiluz commented Jul 31, 2015

Update:

  • All reported errors have been fixed.
  • All proposed changes have been implemented.

The error displayed by Travis for PHP 5.3 is unrelated to this PR:

  1. Symfony\Component\Console\Tests\Helper\ProgressBarTest::testAnsiColorsAndEmojis
    Failed asserting that two strings are equal.
@wouterj

This comment has been minimized.

Show comment
Hide comment
@wouterj

wouterj Jul 31, 2015

Member

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

Member

wouterj commented Jul 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

This comment has been minimized.

Show comment
Hide comment
@fabpot

fabpot Jul 31, 2015

Member

Thank you @javiereguiluz.

Member

fabpot commented Jul 31, 2015

Thank you @javiereguiluz.

@fabpot fabpot merged commit 5a571b6 into symfony:2.8 Jul 31, 2015

1 of 2 checks passed

continuous-integration/travis-ci/pr The Travis CI build failed
Details
fabbot.io Your code looks good.
Details

fabpot added a commit that referenced this pull request Jul 31, 2015

feature #15160 Redesigned the web debug toolbar (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)

![default](https://cloud.githubusercontent.com/assets/73419/8449444/cb4be4ea-1fd1-11e5-9358-332449375531.png)

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**

![symfony-old-panel](https://cloud.githubusercontent.com/assets/73419/8449504/407302b2-1fd2-11e5-80da-a49dc99e68f5.png) ![symfony-new-panel](https://cloud.githubusercontent.com/assets/73419/8449505/41698e20-1fd2-11e5-8ced-e2717716c2d3.png)

**Request Panel**

![request-old-panel](https://cloud.githubusercontent.com/assets/73419/8449531/7d6888ea-1fd2-11e5-829e-93c9e50b7b64.png) ![request-new-panel](https://cloud.githubusercontent.com/assets/73419/8449532/7e359da8-1fd2-11e5-87e6-f194d824254c.png)

-----

When needed, more panels are displayed, such as the SQL information:  (click on the image to enlarge it)

![sql_panel](https://cloud.githubusercontent.com/assets/73419/8449554/b6abc1d0-1fd2-11e5-8450-13eae5bc3c50.png)

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:

![sql_old_panel](https://cloud.githubusercontent.com/assets/73419/8449573/fc288aae-1fd2-11e5-9823-46b33fa9d998.png) ![sql_new_panel](https://cloud.githubusercontent.com/assets/73419/8449572/fab6244c-1fd2-11e5-9e14-28045de0b143.png)

-----

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

![i18n_panel_error](https://cloud.githubusercontent.com/assets/73419/8449590/20708786-1fd3-11e5-8ad7-6bd3b3f4b933.png)

If the page is loading too slowly: (click on the image to enlarge it)

![slow_page](https://cloud.githubusercontent.com/assets/73419/8449597/2bc0c6e6-1fd3-11e5-9a9e-55bfe07ac170.png)

If Symfony version is deprecated: (click on the image to enlarge it)

![deprecated_symfony](https://cloud.githubusercontent.com/assets/73419/8449605/3cfa9860-1fd3-11e5-8dbd-9915597970f4.png)

-----

HTTP Errors also stand out more clearly: (click on the image to enlarge it)

![error_404](https://cloud.githubusercontent.com/assets/73419/8449617/56a4ccb8-1fd3-11e5-9638-322f1840937c.png)

![error_500](https://cloud.githubusercontent.com/assets/73419/8449618/57a79294-1fd3-11e5-8383-2598dee73fc6.png)

-----

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 priorities
f237ff1 Increased the z-index of .sf-toolbar-info
b3ad83d Removed an unused media query
b438ee5 Redesigned "abbr" elements
7d92cb8 Restored the old behavior for toolbars with lots of elements
597637e Tweaks and bug fixes
9df0f8b Added some upgrade notes about the new toolbar design
22f6bc5 Removed an useless CSS class and added styles for <hr>
5070861 Added a new profiler_markup_version to improve BC of the new toolbar
2fb3319 Removed an unused import
7ec1cd4 Reverted the feature to display different toolbar versions
084cca6 Minor JavaScript optimizations
972a92e Misc. tweaks and improvements
ebb44e4 Added some styles to make old panels look better in the new design
1847285 Pass the toolbar version number from the controller, to ease transition and keep BC
a0e03f6 Minor tweaks
002dda5 Fixed toolbar issues when displaying it inside the profiler
e94a6a0 Smaller font sizes for smartphones, fixed request status padding issue and make too long panels always be displayed at the leftmost part of browser window
9b585b9 Made the close icon a bit smaller
3ab2e20 fixed all vertical aligning issues and tweaked icons
f087ac0 More vertical aligning fixes
9e38a8a Minor CSS tweaks and made font sizes bigger
0dfcb60 Fixed an issue with the Config panel in the Profiler view
cd53210 Fixed another z-index issue
e28f895 A very high z-index value is required to avoid issues in the profiler view
23dc884 Fixed a potential issue in the request panel
7c35d25 Fixed another insignificant syntax issue
e14fb6d Fixed a minor syntax issue
9d89841 Finished the toolbar redesign
b25b6dd Finished "dump" panel and other minor tweaks
2bccdd4 Minor CSS fixes
c0bee9b Tweaked the Twig panel
77d522a Tweaked the translation panel
041d424 Improved the Security toolbar panel
af3dcb2 Minor Ajax tweaks
acee052 Finished the Ajax panel redesign
fac5391 Lots of minor improvements
ef53850 More fixes and tweaks
51a79c9 Reorder toolbar panels
2735346 Fixed a minor markup error that broke the toolbar
64b8f38 A new batch of updates
4eee931 Restored all the code removed by mistake
b6f413f First batch of fixes
c2fcadc Redesigned the web debug toolbar
<call method="setKernel"><argument type="service" id="kernel" on-invalid="ignore" /></call>
</service>
<service id="data_collector.request" class="%data_collector.request.class%">
<tag name="kernel.event_subscriber" />
<tag name="data_collector" template="@WebProfiler/Collector/request.html.twig" id="request" priority="255" />
<tag name="data_collector" template="@WebProfiler/Collector/request.html.twig" id="request" priority="260" />

This comment has been minimized.

@stof

stof Aug 1, 2015

Member

@javiereguiluz I would even suggest leaving holes between the priorities used in Symfony to make it easier to inject things between them

@stof

stof Aug 1, 2015

Member

@javiereguiluz I would even suggest leaving holes between the priorities used in Symfony to make it easier to inject things between them

@peshi

This comment has been minimized.

Show comment
Hide comment
@peshi

peshi Aug 3, 2015

@javiereguiluz The close toolbar "X" is misaligned in OS X Safari.

peshi commented Aug 3, 2015

@javiereguiluz The close toolbar "X" is misaligned in OS X Safari.

@javiereguiluz javiereguiluz referenced this pull request Aug 3, 2015

Closed

Improving the Symfony Web Debug Toolbar and Profiler #15439

5 of 8 tasks complete
@javiereguiluz

This comment has been minimized.

Show comment
Hide comment
@javiereguiluz

javiereguiluz Aug 3, 2015

Member

@peshi thanks! I've created a meta-issue to collect all the issues/bugs related to the redesign: #15439

Member

javiereguiluz commented Aug 3, 2015

@peshi thanks! I've created a meta-issue to collect all the issues/bugs related to the redesign: #15439

stof added a commit to doctrine/DoctrineBundle that referenced this pull request Aug 12, 2015

feature #445 Update collector template for the new toolbar design (ja…
…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 design

Symfony is redesigning its toolbar for 2.8+ versions (see symfony/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

fabpot added a commit to symfony/swiftmailer-bundle that referenced this pull request Sep 28, 2015

feature #109 Update the toolbar and panel for the new profiler 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 design

This PR adds support for the new Symfony Toolbar (see symfony/symfony#15160) and it uses the same trick validated by @stof for the DoctrineBundle (see doctrine/DoctrineBundle#445).

Commits
-------

4cfc35f Update the toolbar and panel for the new profiler design

@fabpot fabpot referenced this pull request Nov 16, 2015

Merged

Release v2.8.0-BETA1 #16550

@tacman

This comment has been minimized.

Show comment
Hide comment
@tacman

tacman Dec 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?

image

tacman commented Dec 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?

image

@sstok

This comment has been minimized.

Show comment
Hide comment
@sstok

sstok Jan 1, 2016

Contributor

@tacman This should be reported to the https://github.com/propelorm/PropelBundle (if not done already).

Contributor

sstok commented Jan 1, 2016

@tacman This should be reported to the https://github.com/propelorm/PropelBundle (if not done already).

@hrazaka

This comment has been minimized.

Show comment
Hide comment
@hrazaka

hrazaka Jul 13, 2016

I have some problem.
I have double click on sf toolbar and it becomes full screen.
I am not able to view my page. I always see sf toolbar full screen.
Please help to reduce the sf toolbar size

hrazaka commented Jul 13, 2016

I have some problem.
I have double click on sf toolbar and it becomes full screen.
I am not able to view my page. I always see sf toolbar full screen.
Please help to reduce the sf toolbar size

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment