The Symfony Web Debug Toolbar is one of the most recognizable elements of Symfony applications. Displayed millions of times every day around the world, it greatly increases the productivity of Symfony developers.

Symfony pioneered this kind of toolbar back in 2005 for symfony 1 applications. At that time, the toolbar looked as follows:

Symfony 1 Web Debug Toolbar

The release of Symfony 2.0 introduced a new design that included much more information and a fully-featured profiler:

Symfony 2.0 Web Debug Toolbar

Since we're approaching the Symfony 3.0 release, the biggest launch in Symfony history, we decided it was the right moment to introduce a toolbar redesign:

Symfony 2.8 Web debug toolbar

From a design point of view, the toolbar is radically different: dark vs light, flat vs textured, straight vs organic/curved:

Symfony 2.8 Toolbar design differences

Moreover, the new toolbar takes much less space than the previous one, which is great when you use third-party bundles that include their own toolbar panels:

Symfony 2.8 toolbar space differences

The first contributors for this space reduction are the request and config panels. The request panel now displays the route name instead of the whole controller name (usually a class + method name):

Symfony 2.8 toolbar request panel

Meanwhile, the config panel just displays the Symfony version and all the other related information is moved to the floating panel:

Symfony 2.8 toolbar config panel

The other main contributor to the space reduction is that panels which don't include any information are no longer displayed. If your page doesn't contain forms, Ajax requests or database queries, you won't see those panels.

Another important difference is the way errors and warnings are displayed. Previously we displayed just a small green/yellow/red icon, whereas now we change the entire panel background to easily spot when some error happens:

Symfony 2.8 toolbar errors and warnings

The new toolbar would have not have been possible without the awesome Symfony community. The related pull request got almost 150 comments and reviews made by 28 participants. In total, 44 commits were needed to tweak the final design, comprising 1,200 changed lines across 31 files.

The redesigned toolbar is already available for any Symfony 2.8-dev or 3.0-dev application. Please test it in your own applications and report any error before Symfony 3.0 is released on November 2015.

Published in #Living on the edge