diff --git a/UPGRADE-2.8.md b/UPGRADE-2.8.md index 966f1f4711..04792dee87 100644 --- a/UPGRADE-2.8.md +++ b/UPGRADE-2.8.md @@ -136,3 +136,64 @@ DependencyInjection ``` + +Web Development Toolbar +----------------------- + +The web development toolbar has been completely redesigned. This update has +introduced some changes in the HTML markup of the toolbar items. + +Before: + +Information was wrapped with simple `` elements: + +```twig +{% block toolbar %} + {% set icon %} + + + {{ '%.1f'|format(collector.memory / 1024 / 1024) }} MB + + {% endset %} +{% endblock %} +``` + +After: + +Information is now semantically divided into values and labels according to +the `class` attribute of each `` element: + +```twig +{% block toolbar %} + {% set icon %} + + + {{ '%.1f'|format(collector.memory / 1024 / 1024) }} + + MB + {% endset %} +{% endblock %} +``` + +Most of the blocks designed for the previous toolbar will still be displayed +correctly. However, if you want to support both the old and the new toolbar, +it's better to make use of the new `profiler_markup_version` variable passed +to the toolbar templates: + +```twig +{% block toolbar %} + {% set profiler_markup_version = profiler_markup_version|default(1) %} + + {% set icon %} + {% if profiler_markup_version == 1 %} + + {# code for the original toolbar #} + + {% else %} + + {# code for the new toolbar (Symfony 2.8+) #} + + {% endif %} + {% endset %} +{% endblock %} +``` diff --git a/src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/dump.html.twig b/src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/dump.html.twig index e7a8245fb3..7f23547469 100644 --- a/src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/dump.html.twig +++ b/src/Symfony/Bundle/DebugBundle/Resources/views/Profiler/dump.html.twig @@ -5,17 +5,17 @@ {% if dumps_count %} {% set icon %} - - {{ dumps_count }} + + + + + {{ dumps_count }} {% endset %} {% set text %} -
- dump() -
{% for dump in collector.getDumps('html') %}
- in + {% if dump.file %} {% set link = dump.file|file_link(dump.line) %} {% if link %} @@ -26,14 +26,15 @@ {% else %} {{ dump.name }} {% endif %} - line {{ dump.line }}: + + line {{ dump.line }} {{ dump.data|raw }}
{% endfor %} {% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': true } %} + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { 'link': true }) }} {% endif %} {% endblock %} diff --git a/src/Symfony/Bundle/FrameworkBundle/Resources/config/collectors.xml b/src/Symfony/Bundle/FrameworkBundle/Resources/config/collectors.xml index 3e049c0f2c..01a271797a 100644 --- a/src/Symfony/Bundle/FrameworkBundle/Resources/config/collectors.xml +++ b/src/Symfony/Bundle/FrameworkBundle/Resources/config/collectors.xml @@ -17,17 +17,17 @@ - + - + - + @@ -46,13 +46,13 @@ - + - + diff --git a/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig b/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig index a495829d3e..6c5b85356d 100644 --- a/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig +++ b/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig @@ -2,39 +2,47 @@ {% block toolbar %} {% if collector.tokenClass %} - {% set color_code = (collector.enabled and collector.authenticated) ? 'green' : 'yellow' %} - {% set authentication_color_code = (collector.enabled and collector.authenticated) ? 'green' : 'red' %} - {% set authentication_color_text = (collector.enabled and collector.authenticated) ? 'Yes' : 'No' %} + {% set is_authenticated = collector.enabled and collector.authenticated %} + {% set color_code = is_authenticated ? '' : 'yellow' %} {% else %} - {% set color_code = collector.enabled ? 'red' : 'black' %} + {% set color_code = collector.enabled ? 'red' : '' %} {% endif %} + + {% set icon %} + + + + {{ collector.user|default('n/a') }} + {% endset %} + {% set text %} {% if collector.tokenClass %}
Logged in as - {{ collector.user }} + {{ collector.user }}
Authenticated - {{ authentication_color_text }} + {{ is_authenticated ? 'Yes' : 'No' }}
{% if collector.tokenClass != null %}
Token class - {{ collector.tokenClass|abbr_class }} + {{ collector.tokenClass|abbr_class }}
{% endif %} {% elseif collector.enabled %} - You are not authenticated. +
+ You are not authenticated. +
{% else %} - The security is disabled. +
+ The security is disabled. +
{% endif %} {% endset %} - {% set icon %} - - {{ collector.user }} - {% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: profiler_url, status: color_code }) }} {% endblock %} {% block menu %} diff --git a/src/Symfony/Bundle/TwigBundle/Resources/config/twig.xml b/src/Symfony/Bundle/TwigBundle/Resources/config/twig.xml index c06a82f06e..bb871f440a 100644 --- a/src/Symfony/Bundle/TwigBundle/Resources/config/twig.xml +++ b/src/Symfony/Bundle/TwigBundle/Resources/config/twig.xml @@ -79,7 +79,7 @@ - + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php b/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php index cada4ee6ca..261d0afcb9 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php +++ b/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php @@ -11,13 +11,13 @@ namespace Symfony\Bundle\WebProfilerBundle\Controller; -use Symfony\Component\HttpFoundation\Response; +use Symfony\Bundle\WebProfilerBundle\Profiler\TemplateManager; use Symfony\Component\HttpFoundation\RedirectResponse; +use Symfony\Component\HttpFoundation\Request; +use Symfony\Component\HttpFoundation\Response; +use Symfony\Component\HttpFoundation\Session\Flash\AutoExpireFlashBag; use Symfony\Component\HttpKernel\Exception\NotFoundHttpException; use Symfony\Component\HttpKernel\Profiler\Profiler; -use Symfony\Component\HttpFoundation\Session\Flash\AutoExpireFlashBag; -use Symfony\Component\HttpFoundation\Request; -use Symfony\Bundle\WebProfilerBundle\Profiler\TemplateManager; use Symfony\Component\Routing\Generator\UrlGeneratorInterface; /** @@ -207,6 +207,7 @@ class ProfilerController 'templates' => $this->getTemplateManager()->getTemplates($profile), 'profiler_url' => $url, 'token' => $token, + 'profiler_markup_version' => 2, // 1 = original toolbar, 2 = Symfony 2.8+ toolbar )), 200, array('Content-Type' => 'text/html')); } diff --git a/src/Symfony/Bundle/WebProfilerBundle/Profiler/TemplateManager.php b/src/Symfony/Bundle/WebProfilerBundle/Profiler/TemplateManager.php index 5d0fd277c5..44a3ba79d7 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Profiler/TemplateManager.php +++ b/src/Symfony/Bundle/WebProfilerBundle/Profiler/TemplateManager.php @@ -72,6 +72,7 @@ class TemplateManager public function getTemplates(Profile $profile) { $templates = $this->getNames($profile); + foreach ($templates as $name => $template) { $templates[$name] = $this->twig->loadTemplate($template); } diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/ajax.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/ajax.html.twig index d557629d18..fe73b662bd 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/ajax.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/ajax.html.twig @@ -2,15 +2,13 @@ {% block toolbar %} {% set icon %} - - - 0 - + {{ include('@WebProfiler/Icon/ajax.svg') }} + 0 {% endset %} + {% set text %}
- AJAX requests - +
@@ -26,5 +24,6 @@
{% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': false } %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: false }) }} {% endblock %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig index 485cb57c9b..7379beaae8 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig @@ -1,115 +1,106 @@ {% extends '@WebProfiler/Profiler/layout.html.twig' %} {% block toolbar %} - {# Symfony Logo #} + {% if 'unknown' == collector.symfonyState %} + {% set block_status = '' %} + {% set symfony_version_status = 'Unable to retrieve information about the Symfony version.' %} + {% elseif 'eol' == collector.symfonyState %} + {% set block_status = 'red' %} + {% set symfony_version_status = 'This Symfony version will no longer receive security fixes.' %} + {% elseif 'eom' == collector.symfonyState %} + {% set block_status = 'yellow' %} + {% set symfony_version_status = 'This Symfony version will only receive security fixes.' %} + {% elseif 'dev' == collector.symfonyState %} + {% set block_status = 'yellow' %} + {% set symfony_version_status = 'This Symfony version is still in the development phase.' %} + {% else %} + {% set block_status = '' %} + {% set symfony_version_status = '' %} + {% endif %} + {% set icon %} - - - - {% if collector.applicationname %} - {{ collector.applicationname }} {{ collector.applicationversion }} - {% elseif collector.symfonyState is defined %} - {% if 'unknown' == collector.symfonyState -%} - - {%- elseif 'eol' == collector.symfonyState -%} - - {%- elseif 'eom' == collector.symfonyState -%} - - {%- elseif 'dev' == collector.symfonyState -%} - - {%- else -%} - - {%- endif -%} - {{ collector.symfonyversion }} - {% endif %} + {% if collector.symfonyState is defined %} + + {{ include('@WebProfiler/Icon/symfony.svg') }} - + {{ collector.symfonyversion }} + {% elseif collector.applicationname %} + {{ collector.applicationname }} + {{ collector.applicationversion }} + {% endif %} {% endset %} + {% set text %} {% if collector.applicationname %}
{{ collector.applicationname }} {{ collector.applicationversion }}
{% endif %} -
- Symfony {{ collector.symfonyversion }} -
-
- Symfony Documentation -
- {% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': false } %} - {# PHP Information #} - {% set icon %} - - - - {% endset %} - {% set text %} - {% spaceless %} -
- PHP - {{ collector.phpversion }} -
-
- PHP Extensions - xdebug - accel -
-
- PHP SAPI - {{ collector.sapiName }} -
- {% endspaceless %} - {% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': false } %} - - {# Environment #} - {% set debug_status_class %}sf-toolbar-status sf-toolbar-status-{{ collector.debug ? 'green' : 'red' }}{% endset %} - {% set icon %} - - {{ token }} - {% if 'n/a' != collector.appname or 'n/a' != collector.env %} - - {{ collector.appname }} - {{ collector.env }} +
+ Profiler token + + {% if profiler_url %} + {{ collector.token }} + {% else %} + {{ collector.token }} + {% endif %} - {% endif %} - {% endset %} - {% set text %} - {% spaceless %} - {% if 'n/a' != collector.appname %} -
- Name - {{ collector.appname }} -
- {% endif %} - {% if 'n/a' != collector.env %} -
- Environment - {{ collector.env }} -
- {% endif %} - {% if 'n/a' != collector.debug %} -
- Debug - {{ collector.debug ? 'en' : 'dis' }}abled -
- {% endif %} +
+ + {% if 'n/a' != collector.appname %}
- Token + Kernel name + {{ collector.appname }} +
+ {% endif %} + + {% if 'n/a' != collector.env %} +
+ Environment + {{ collector.env }} +
+ {% endif %} + + {% if 'n/a' != collector.debug %} +
+ Debug + {{ collector.debug ? 'enabled' : 'disabled' }} +
+ {% endif %} + +
+ PHP version + + {{ collector.phpversion }} +   View phpinfo() + +
+ +
+ PHP Extensions + xdebug + accel +
+ +
+ PHP SAPI + {{ collector.sapiName }} +
+ + {% if collector.symfonyversion is defined %} +
+ Resources - {% if profiler_url %} - {{ collector.token }} - {% else %} - {{ collector.token }} - {% endif %} + + Read Symfony {{ collector.symfonyversion }} Docs +
- {% endspaceless %} + {% endif %} {% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: false, status: block_status }) }} {% endblock %} {% block menu %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig index f4342df72b..f226e644af 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig @@ -3,13 +3,31 @@ {% from _self import form_tree_entry, form_tree_details %} {% block toolbar %} - {% if collector.data|length %} + {% if collector.data.nb_errors > 0 or collector.data.forms|length %} + {% set status_color = collector.data.nb_errors ? 'red' : '' %} {% set icon %} - - {% if collector.data.nb_errors %}{{ collector.data.nb_errors }}{% else %}{{ collector.data.forms|length }}{% endif %} + {{ include('@WebProfiler/Icon/form.svg') }} + + {% if collector.data.nb_errors %} + {{ collector.data.nb_errors }} + {% else %} + {{ collector.data.forms|length }} + {% endif %} + {% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %} + {% set text %} +
+ Number of forms + {{ collector.data.forms|length }} +
+
+ Number of errors + {{ collector.data.nb_errors }} +
+ {% endset %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: profiler_url, status: status_color }) }} {% endif %} {% endblock %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig index a6707da12d..5053657e2b 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig @@ -5,36 +5,30 @@ {% block toolbar %} {% if collector.counterrors or collector.countdeprecations or collector.countscreams %} {% set icon %} - - {% if collector.counterrors %} - {% set status_color = "red" %} - {% elseif collector.countdeprecations %} - {% set status_color = "yellow" %} - {% endif %} + {% set status_color = collector.counterrors ? 'red' : collector.countdeprecations ? 'yellow' : '' %} {% set error_count = collector.counterrors + collector.countdeprecations + collector.countscreams %} - {{ error_count }} + {{ include('@WebProfiler/Icon/logger.svg') }} + {{ error_count }} {% endset %} + {% set text %} - {% if collector.counterrors %} -
- Errors - {{ collector.counterrors }} -
- {% endif %} - {% if collector.countdeprecations %} -
- Deprecated Calls - {{ collector.countdeprecations }} -
- {% endif %} - {% if collector.countscreams %} -
- Silenced Errors - {{ collector.countscreams }} -
- {% endif %} +
+ Errors + {{ collector.counterrors|default(0) }} +
+ +
+ Deprecated Calls + {{ collector.countdeprecations|default(0) }} +
+ +
+ Silenced Errors + {{ collector.countscreams|default(0) }} +
{% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: profiler_url, status: status_color }) }} {% endif %} {% endblock %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/memory.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/memory.html.twig index 397b5e8305..702b4df365 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/memory.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/memory.html.twig @@ -2,16 +2,23 @@ {% block toolbar %} {% set icon %} - - - {{ '%.1f'|format(collector.memory / 1024 / 1024) }} MB - + {% set status_color = (collector.memory / 1024 / 1024) > 50 ? 'yellow' : '' %} + {{ include('@WebProfiler/Icon/memory.svg') }} + {{ '%.1f'|format(collector.memory / 1024 / 1024) }} + MB {% endset %} + {% set text %}
- Memory usage - {{ '%.1f'|format(collector.memory / 1024 / 1024) }} / {{ collector.memoryLimit == -1 ? '∞' : '%.1f'|format(collector.memoryLimit / 1024 / 1024)|escape }} MB + Peak memory usage + {{ '%.1f'|format(collector.memory / 1024 / 1024) }} MB +
+ +
+ PHP memory limit + {{ collector.memoryLimit == -1 ? '∞' : '%.0f'|format(collector.memoryLimit / 1024 / 1024)|escape }} MB
{% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': false } %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: false, status: status_color }) }} {% endblock %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig index 4d00a07d5f..ad799c6b23 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig @@ -1,41 +1,54 @@ {% extends '@WebProfiler/Profiler/layout.html.twig' %} {% block toolbar %} + + {% set request_handler %} {% if collector.controller.class is defined %} {% set link = collector.controller.file|file_link(collector.controller.line) %} - {% if collector.controller.method %} - {{ collector.controller.class|abbr_class }} - - {{ collector.controller.method }} - - {% else %} - {{ collector.controller.class|abbr_class }} - {% endif %} + {% if link %}{% else %}{% endif %} + + {{ collector.controller.class|abbr_class|striptags }} + + {%- if collector.controller.method -%} +  :: {{ collector.controller.method }} + {%- endif -%} + + {% if link %}{% else %}{% endif %} {% else %} - {{ collector.controller }} + {{ collector.controller }} {% endif %} {% endset %} - {% set request_status_code_color = (400 > collector.statuscode) ? ((200 == collector.statuscode) ? 'green' : 'yellow') : 'red'%} - {% set request_route = collector.route ? collector.route : 'NONE' %} + + {% set request_status_code_color = (400 > collector.statuscode) ? ((200 == collector.statuscode) ? 'green' : 'yellow') : 'red' %} + {% set icon %} - - {{ collector.statuscode }} - {{ request_handler }} + {{ collector.statuscode }} + {% if collector.route %} + @ + {{ collector.route }} + {% endif %} {% endset %} + {% set text %} {% spaceless %}
- Status - {{ collector.statuscode }} {{ collector.statustext }} + HTTP status + {{ collector.statuscode }} {{ collector.statustext }}
Controller - {{ request_handler }} + {{ request_handler }}
+ {% if collector.controller.class is defined %} +
+ Controller class + {{ collector.controller.class }} +
+ {% endif %}
Route name - {{ request_route }} + {{ collector.route|default('NONE') }}
Has session @@ -43,7 +56,8 @@
{% endspaceless %} {% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: profiler_url }) }} {% endblock %} {% block menu %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig index db807a7211..39f8f62abd 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig @@ -16,18 +16,28 @@ {% endif %} {% block toolbar %} - {% set duration = collector.events|length ? '%.0f ms'|format(collector.duration) : 'n/a' %} + {% set total_time = collector.events|length ? '%.0f'|format(collector.duration) : 'n/a' %} + {% set initialization_time = collector.events|length ? '%.0f'|format(collector.inittime) : 'n/a' %} + {% set status_color = collector.events|length and collector.duration > 1000 ? 'yellow' : '' %} + {% set icon %} - - {{ duration }} + {{ include('@WebProfiler/Icon/time.svg') }} + {{ total_time }} + ms {% endset %} + {% set text %}
Total time - {{ duration }} + {{ total_time }} ms +
+
+ Initialization time + {{ initialization_time }} ms
{% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: profiler_url, status: status_color }) }} {% endblock %} {% block menu %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig index 840e7cd1ac..3d75c46768 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig @@ -5,36 +5,34 @@ {% block toolbar %} {% if collector.messages|length %} {% set icon %} - - {% if collector.countMissings %} - {% set status_color = "red" %} - {% elseif collector.countFallbacks %} - {% set status_color = "yellow" %} - {% endif %} + {{ include('@WebProfiler/Icon/translation.svg') }} + {% set status_color = collector.countMissings ? 'red' : collector.countFallbacks ? 'yellow' : '' %} {% set error_count = collector.countMissings + collector.countFallbacks %} - {{ error_count ?: collector.countdefines }} + {{ error_count ?: collector.countdefines }} {% endset %} + {% set text %} - {% if collector.countMissings %} -
- Missing messages - {{ collector.countMissings }} -
- {% endif %} - {% if collector.countFallbacks %} -
- Fallback messages - {{ collector.countFallbacks }} -
- {% endif %} - {% if collector.countdefines %} -
- Defined messages - {{ collector.countdefines }} -
- {% endif %} +
+ Missing messages + + {{ collector.countMissings }} + +
+ +
+ Fallback messages + + {{ collector.countFallbacks }} + +
+ +
+ Defined messages + {{ collector.countdefines }} +
{% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: profiler_url, status: status_color }) }} {% endif %} {% endblock %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/twig.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/twig.html.twig index 0ecd469bd0..95713b93db 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/twig.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/twig.html.twig @@ -1,30 +1,33 @@ {% extends '@WebProfiler/Profiler/layout.html.twig' %} {% block toolbar %} - {% set time = collector.templatecount ? '%0.0f ms'|format(collector.time) : 'n/a' %} + {% set time = collector.templatecount ? '%0.0f'|format(collector.time) : 'n/a' %} {% set icon %} - Twig - {{ time }} + {{ include('@WebProfiler/Icon/twig.svg') }} + {{ time }} + ms {% endset %} + {% set text %}
Render Time - {{ time }} + {{ time }} ms
Template Calls - {{ collector.templatecount }} + {{ collector.templatecount }}
Block Calls - {{ collector.blockcount }} + {{ collector.blockcount }}
Macro Calls - {{ collector.macrocount }} + {{ collector.macrocount }}
{% endset %} - {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %} + + {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: profiler_url }) }} {% endblock %} {% block menu %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/ajax.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/ajax.svg new file mode 100644 index 0000000000..d8cad847d4 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/ajax.svg @@ -0,0 +1,6 @@ + + + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/close.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/close.svg new file mode 100644 index 0000000000..49a75fc165 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/close.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/form.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/form.svg new file mode 100644 index 0000000000..18bdb6e793 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/form.svg @@ -0,0 +1,6 @@ + + + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/logger.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/logger.svg new file mode 100644 index 0000000000..3270a33618 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/logger.svg @@ -0,0 +1,7 @@ + + + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/memory.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/memory.svg new file mode 100644 index 0000000000..5cd2fc4d84 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/memory.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg new file mode 100644 index 0000000000..8d0ab1417f --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg @@ -0,0 +1,12 @@ + + + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/time.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/time.svg new file mode 100644 index 0000000000..ec280a59a6 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/time.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/translation.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/translation.svg new file mode 100644 index 0000000000..93d42327ed --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/translation.svg @@ -0,0 +1,13 @@ + + + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/twig.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/twig.svg new file mode 100644 index 0000000000..21d81ea216 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/twig.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig index e313380e51..2b1eeff3c0 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig @@ -86,6 +86,7 @@ return; } + var ajaxToolbarPanel = document.querySelector('.sf-toolbar-block-ajax'); var tbodies = document.querySelectorAll('.sf-toolbar-ajax-request-list'); var state = 'ok'; if (tbodies.length) { @@ -165,31 +166,24 @@ tbody.appendChild(rows); if (infoSpan) { - var text = requestStack.length + ' call' + (requestStack.length > 1 ? 's' : ''); + var text = requestStack.length + ' AJAX request' + (requestStack.length > 1 ? 's' : ''); infoSpan.textContent = text; } } else { - var cell = document.createElement('td'); - cell.setAttribute('colspan', '4'); - cell.textContent = "No AJAX requests yet."; - var row = document.createElement('tr'); - row.appendChild(cell); - tbody.appendChild(row); + ajaxToolbarPanel.style.display = 'none'; } } requestCounter[0].textContent = requestStack.length; - var className = 'sf-toolbar-ajax-requests sf-toolbar-status'; - if (state == 'ok') { - className += ' sf-toolbar-status-green'; - } else if (state == 'error') { - className += ' sf-toolbar-status-red'; - } else { - className += ' sf-ajax-request-loading'; - } - + var className = 'sf-toolbar-ajax-requests sf-toolbar-value'; requestCounter[0].className = className; + + if (state == 'error') { + Sfjs.addClass(ajaxToolbarPanel, 'sf-toolbar-status-red'); + } else { + Sfjs.addClass(ajaxToolbarPanel, 'sf-ajax-request-loading'); + } }; var addEventListener; diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig index fd32565347..3e453b0a21 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig @@ -179,7 +179,7 @@ pre, code { width: 250px; margin-left: -100%; } -table td { +#collector-content table td { background-color: white; } h1 { @@ -273,15 +273,15 @@ ul.alt li { ul.alt li.even { background: #f1f7e2; } -ul.alt li.error, tr.error td { +ul.alt li.error { background-color: #f66; margin-bottom: 1px; } -ul.alt li.warning, tr.warning td { +ul.alt li.warning { background-color: #ffcc00; margin-bottom: 1px; } -ul.alt li.scream, ul.alt li.scream strong, tr.scream td, tr.scream strong { +ul.alt li.scream, ul.alt li.scream strong { color: gray; } ul.sf-call-stack li { diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig index 8d736a716d..6d07bc4e0b 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig @@ -1,21 +1,12 @@ .sf-minitoolbar { - display: none; - - position: fixed; + background-color: #222; bottom: 0; + display: none; + height: 36px; + padding: 5px 6px 0; + position: fixed; right: 0; - - padding: 5px 5px 0; - - background-color: #f7f7f7; - background-image: -moz-linear-gradient(top, #e4e4e4, #ffffff); - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4e4e4), to(#ffffff)); - background-image: -o-linear-gradient(top, #e4e4e4, #ffffff); - background: linear-gradient(top, #e4e4e4, #ffffff); - - border-radius: 16px 0 0 0; - - z-index: 6000000; + z-index: 99999; } .sf-toolbarreset * { @@ -26,127 +17,135 @@ } .sf-toolbarreset { - position: fixed; - background-color: #f7f7f7; - left: 0; - right: 0; - margin: 0; - padding: 0 40px 0 0; - z-index: 6000000; - font: 11px Verdana, Arial, sans-serif; - text-align: left; - color: #2f2f2f; - - background-image: -moz-linear-gradient(top, #e4e4e4, #ffffff); - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4e4e4), to(#ffffff)); - background-image: -o-linear-gradient(top, #e4e4e4, #ffffff); - background: linear-gradient(top, #e4e4e4, #ffffff); - + background-color: #222; bottom: 0; - border-top: 1px solid #bbb; + box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.2); + color: #EEE; + font: 11px Arial, sans-serif; + left: 0; + margin: 0; + padding: 0 36px 0 0; + position: fixed; + right: 0; + text-align: left; + z-index: 99999; } .sf-toolbarreset abbr { - border-bottom: 1px dotted #000000; - cursor: help; -} -.sf-toolbarreset span, -.sf-toolbarreset div, -.sf-toolbarreset td, -.sf-toolbarreset th { - font-size: 11px; + border: dashed #777; + border-width: 0 0 1px; } +.sf-toolbarreset svg, .sf-toolbarreset img { - width: auto; - display: inline; -} -.sf-toolbarreset table { - border-collapse: collapse; - border-spacing: 0; - background-color: #000; - margin: 0; - padding: 0; - border: 0; - width: 100%; - table-layout: auto; + max-height: 20px; } + .sf-toolbarreset .hide-button { + background: #444; + cursor: pointer; display: block; position: absolute; top: 0; right: 0; - width: 40px; - height: 40px; + width: 36px; + height: 36px; cursor: pointer; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAMAAAAMCGV4AAAAllBMVEXDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PExMTPz8/Q0NDR0dHT09Pb29vc3Nzf39/h4eHi4uLj4+P6+vr7+/v8/Pz9/f3///+Nh2QuAAAAIXRSTlMABgwPGBswMzk8QktRV4SKjZOWmaKlq7TAxszb3urt+fy1vNEpAAAAiklEQVQIHUXBBxKCQBREwRFzDqjoGh+C2YV//8u5Sll2S0E/dof1tKdKM6GyqCto7PjZRJIS/mbSELgXOSd/BzpKIH1ZefVWpDDTHsi8mZVnwImPi5ndCLbaAZk3M58Bay0h9VbeSvMpjDUAHj4jL55AW1rxN5fU2PLjIgVRzNdxVFOlGzvnJi0Fb1XNGBHA9uQOAAAAAElFTkSuQmCC'); - background-repeat: no-repeat; - background-position: 13px 11px; + text-align: center; +} +.sf-toolbarreset .hide-button svg { + max-height: 18px; + padding-top: 10px; } .sf-toolbar-block { - white-space: nowrap; - color: #2f2f2f; - display: block; - min-height: 28px; - border-bottom: 1px solid #e4e4e4; - border-right: 1px solid #e4e4e4; - padding: 0; - float: left; cursor: default; + display: block; + float: left; + height: 36px; + margin-right: 0; + white-space: nowrap; +} +.sf-toolbar-block > a, +.sf-toolbar-block > a:hover { + display: block; + text-decoration: none; } .sf-toolbar-block span { display: inline-block; } +.sf-toolbar-block .sf-toolbar-value { + color: #F5F5F5; + font-size: 13px; + line-height: 36px; + padding: 0; +} +.sf-toolbar-block .sf-toolbar-label, +.sf-toolbar-block .sf-toolbar-class-separator { + color: #AAA; + font-size: 12px; +} +.sf-toolbar-block .sf-toolbar-info { + border-collapse: collapse; + display: table; + z-index: 100000; +} +.sf-toolbar-block hr { + border-top: 1px solid #777; + margin: 4px 0; + padding-top: 4px; +} .sf-toolbar-block .sf-toolbar-info-piece { - line-height: 19px; - margin-bottom: 5px; + /* this 'border-bottom' trick is needed because 'margin-bottom' doesn't work for table rows */ + border-bottom: solid transparent 3px; + display: table-row; +} +.sf-toolbar-block .sf-toolbar-info-piece-additional, +.sf-toolbar-block .sf-toolbar-info-piece-additional-detail { + display: none; } .sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status { - padding: 0px 5px; - border-radius: 5px; + padding: 2px 5px; margin-bottom: 0px; - vertical-align: top; +} +.sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status + .sf-toolbar-status { + margin-left: 4px; } .sf-toolbar-block .sf-toolbar-info-piece:last-child { margin-bottom: 0; } -.sf-toolbar-block .sf-toolbar-info-piece a, -.sf-toolbar-block .sf-toolbar-info-piece abbr { - color: #2f2f2f; +.sf-toolbar-block .sf-toolbar-info-piece a { + color: #99CDD8; + text-decoration: underline; +} +.sf-toolbar-block .sf-toolbar-info-piece a:hover { + text-decoration: none; } .sf-toolbar-block .sf-toolbar-info-piece b { - display: inline-block; - min-width: 110px; - vertical-align: top; + color: #AAA; + display: table-cell; + font-size: 11px; + padding: 4px 8px 4px 0; } +.sf-toolbar-block .sf-toolbar-info-piece span { -.sf-toolbar-block .sf-toolbar-info-with-next-pointer:after { - content: ' :: '; - color: #999; } - -.sf-toolbar-block .sf-toolbar-info-with-delimiter { - border-right: 1px solid #999; - padding-right: 5px; +.sf-toolbar-block .sf-toolbar-info-piece span { + color: #F5F5F5; + font-size: 12px; } .sf-toolbar-block .sf-toolbar-info { + background-color: #444; + bottom: 36px; + color: #F5F5F5; display: none; - position: absolute; - background-color: #fff; - border: 1px solid #bbb; padding: 9px 0; - margin-left: -1px; - - bottom: 38px; - border-bottom-width: 0; - border-bottom: 1px solid #bbb; - border-radius: 4px 4px 0 0; + position: absolute; } .sf-toolbar-block .sf-toolbar-info:empty { @@ -155,154 +154,131 @@ .sf-toolbar-block .sf-toolbar-status { display: inline-block; - color: #fff; + color: #FFF; background-color: #666; padding: 3px 6px; - border-radius: 3px; margin-bottom: 2px; vertical-align: middle; min-width: 6px; min-height: 13px; } -.sf-toolbar-block .sf-toolbar-status abbr { - color: #fff; - border-bottom: 1px dotted black; -} - .sf-toolbar-block .sf-toolbar-status-green { - background-color: #759e1a; + background-color: rgba(117, 158, 43, 0.8); } - .sf-toolbar-block .sf-toolbar-status-red { - background-color: #a33; + background-color: rgba(200, 43, 43, 0.8); } - .sf-toolbar-block .sf-toolbar-status-yellow { - background-color: #ffcc00; - color: #000; + background-color: rgb(189, 132, 0); } -.sf-toolbar-block .sf-toolbar-status-black { - background-color: #000; +.sf-toolbar-block.sf-toolbar-status-green { + background-color: rgba(117, 158, 43, 0.8); + color: #FFF; +} +.sf-toolbar-block.sf-toolbar-status-red { + background-color: rgba(200, 43, 43, 0.8); + color: #FFF; +} +.sf-toolbar-block.sf-toolbar-status-yellow { + background-color: rgb(189, 132, 0); + color: #FFF; +} + +.sf-toolbar-block-request .sf-toolbar-status { + color: #FFF; + display: inline-block; + font-size: 14px; + height: 36px; + line-height: 36px; + padding: 0 10px; +} +.sf-toolbar-block-request .sf-toolbar-info-piece a { + text-decoration: none; +} +.sf-toolbar-block-request .sf-toolbar-info-piece a:hover { + text-decoration: underline; +} + +.sf-toolbar-status-green .sf-toolbar-label, +.sf-toolbar-status-yellow .sf-toolbar-label, +.sf-toolbar-status-red .sf-toolbar-label { + color: #FFF; +} +.sf-toolbar-status-green svg path, +.sf-toolbar-status-red svg path, +.sf-toolbar-status-yellow svg path { + fill: #FFF; +} +.sf-toolbar-block-config svg path { + fill: #FFF; } .sf-toolbar-block .sf-toolbar-icon { display: block; + height: 36px; + padding: 0 7px; +} +.sf-toolbar-block-request .sf-toolbar-icon { + padding-left: 0; + padding-right: 0; } -.sf-toolbar-block .sf-toolbar-icon > a, -.sf-toolbar-block .sf-toolbar-icon > span { - display: block; - font-weight: normal; - text-decoration: none; - margin: 0; - padding: 5px 8px; - min-width: 20px; - text-align: center; - vertical-align: middle; -} - -.sf-toolbar-block .sf-toolbar-icon > a, -.sf-toolbar-block .sf-toolbar-icon > a:link -.sf-toolbar-block .sf-toolbar-icon > a:hover { - color: black !important; -} - -.sf-toolbar-block .sf-toolbar-icon > a[href]:after { - content: ""; -} - -.sf-toolbar-block .sf-toolbar-icon img, .sf-toolbar-block .sf-toolbar-icon svg { +.sf-toolbar-block .sf-toolbar-icon img, +.sf-toolbar-block .sf-toolbar-icon svg { border-width: 0; - vertical-align: middle; + position: relative; + top: 8px; } -.sf-toolbar-block .sf-toolbar-icon img + span, .sf-toolbar-block .sf-toolbar-icon svg + span { - margin-left: 5px; - margin-top: 2px; +.sf-toolbar-block .sf-toolbar-icon img + span, +.sf-toolbar-block .sf-toolbar-icon svg + span { + margin-left: 4px; } - -.sf-toolbar-block .sf-toolbar-icon .sf-toolbar-status { - border-radius: 12px; - border-bottom-left-radius: 0; - margin-top: 0; -} - -.sf-toolbar-block .sf-toolbar-info-method { - border-bottom: 1px dashed #ccc; - cursor: help; -} - -.sf-toolbar-block .sf-toolbar-info-method[onclick=""] { - border-bottom: none; - cursor: inherit; -} - -.sf-toolbar-info-php {} -.sf-toolbar-info-php-ext {} - -.sf-toolbar-info-php-ext .sf-toolbar-status { - margin-left: 2px; -} - -.sf-toolbar-info-php-ext .sf-toolbar-status:first-child { - margin-left: 0; -} - -.sf-toolbar-block a .sf-toolbar-info-piece-additional, -.sf-toolbar-block a .sf-toolbar-info-piece-additional-detail { - display: inline-block; -} - -.sf-toolbar-block a .sf-toolbar-info-piece-additional:empty, -.sf-toolbar-block a .sf-toolbar-info-piece-additional-detail:empty { - display: none; -} - -.sf-toolbarreset:hover { - box-shadow: rgba(0, 0, 0, 0.3) 0 0 50px; +.sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-value { + margin-left: 4px; } .sf-toolbar-block:hover { - box-shadow: rgba(0, 0, 0, 0.35) 0 0 5px; - border-right: none; - margin-right: 1px; position: relative; } - .sf-toolbar-block:hover .sf-toolbar-icon { - background-color: #fff; - border-top: 1px dotted #DDD; + background-color: #444; position: relative; - margin-top: -1px; z-index: 10002; } - .sf-toolbar-block:hover .sf-toolbar-info { display: block; - min-width: -webkit-calc(100% + 2px); - min-width: calc(100% + 2px); - z-index: 10001; - box-sizing: border-box; - padding: 9px; - line-height: 19px; - + padding: 10px; max-width: 480px; max-height: 480px; word-wrap: break-word; overflow: hidden; overflow-y: auto; } - -.sf-toolbar-ajax-requests th, .sf-toolbar-ajax-requests td { - border-bottom: 1px solid #ddd; - padding: 0 4px; - color: #2f2f2f; - background-color: #fff; +.sf-toolbar-info-piece b.sf-toolbar-ajax-info { + color: #F5F5F5; +} +.sf-toolbar-ajax-requests { + width: 100%; +} +.sf-toolbar-ajax-requests td { + background-color: #444; + border-bottom: 1px solid #777; + color: #F5F5F5; + font-size: 12px; + padding: 4px; +} +.sf-toolbar-ajax-requests tr:last-child td { + border-bottom: 0; } .sf-toolbar-ajax-requests th { - background-color: #eee; + background-color: #222; + border-bottom: 0; + color: #AAA; + font-size: 11px; + padding: 4px; } .sf-ajax-request-url { max-width: 300px; @@ -310,12 +286,15 @@ overflow: hidden; text-overflow: ellipsis; } +.sf-toolbar-ajax-requests .sf-ajax-request-url a { + text-decoration: none; +} +.sf-toolbar-ajax-requests .sf-ajax-request-url a:hover { + text-decoration: underline; +} .sf-ajax-request-duration { text-align: right; } -.sf-ajax-request-error { - color: #a33 !important; -} .sf-ajax-request-loading { -webkit-animation: sf-blink .5s ease-in-out infinite; -o-animation: sf-blink .5s ease-in-out infinite; @@ -323,121 +302,155 @@ animation: sf-blink .5s ease-in-out infinite; } @-webkit-keyframes sf-blink { - 0% { color: black; } - 50% { color: #bbb; } - 100% { color: black; } + 0% { background: #222; } + 50% { background: #444; } + 100% { background: #222; } } @-moz-keyframes sf-blink { - 0% { color: black; } - 50% { color: #bbb; } - 100% { color: black; } -} -@-o-keyframes sf-blink { - 0% { color: black; } - 50% { color: #bbb; } - 100% { color: black; } + 0% { background: #222; } + 50% { background: #444; } + 100% { background: #222; } } @keyframes sf-blink { - 0% { color: black; } - 50% { color: #bbb; } - 100% { color: black; } + 0% { background: #222; } + 50% { background: #444; } + 100% { background: #222; } } -/***** Override the setting when the toolbar is on the top *****/ +.sf-toolbar-block-dump pre.sf-dump { + background-color: #222; + border-color: #777; + border-radius: 0; + margin: 6px 0 12px 0; + width: 200px; +} +.sf-toolbar-block-dump pre.sf-dump:last-child { + margin-bottom: 0; +} +.sf-toolbar-block-dump .sf-toolbar-info-piece .sf-toolbar-file-line { + color: #AAA; + margin-left: 4px; +} +.sf-toolbar-block-dump .sf-toolbar-info img { + display: none; +} + +/* Override the setting when the toolbar is on the top */ {% if position == 'top' %} .sf-minitoolbar { - top: 0; bottom: auto; right: 0; - - background-color: #f7f7f7; - - background-image: -moz-linear-gradient(225deg, #e4e4e4, #ffffff); - background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#e4e4e4), to(#ffffff)); - background-image: -o-linear-gradient(135deg, #e4e4e4, #ffffff); - background: linear-gradient(225deg, #e4e4e4, #ffffff); - - border-radius: 0 0 0 16px; + top: 0; } .sf-toolbarreset { - background-image: -moz-linear-gradient(225deg, #e4e4e4, #ffffff); - background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#e4e4e4), to(#ffffff)); - background-image: -o-linear-gradient(135deg, #e4e4e4, #ffffff); - background: linear-gradient(225deg, #e4e4e4, #ffffff); - - top: 0; bottom: auto; - border-bottom: 1px solid #bbb; + box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2); + top: 0; } .sf-toolbar-block .sf-toolbar-info { - top: 39px; bottom: auto; - border-top-width: 0; - border-radius: 0 0 4px 4px; - } - - .sf-toolbar-block:hover .sf-toolbar-icon { - border-top: none; - border-bottom: 1px dotted #DDD; - margin-top: 0; - margin-bottom: -1px; + top: 36px; } {% endif %} {% if not floatable %} .sf-toolbarreset { position: static; - background: #cbcbcb; - - background-image: -moz-linear-gradient(90deg, #cbcbcb, #e8e8e8) !important; - background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#cbcbcb), to(#e8e8e8)) !important; - background-image: -o-linear-gradient(180deg, #cbcbcb, #e8e8e8) !important; - background: linear-gradient(90deg, #cbcbcb, #e8e8e8) !important; } {% endif %} -/***** Media query *****/ -@media screen and (max-width: 779px) { - .sf-toolbar-block .sf-toolbar-icon > * > :first-child ~ * { - display: none; +/* Responsive Design */ +.sf-toolbar-icon .sf-toolbar-label, +.sf-toolbar-icon .sf-toolbar-value { + display: none; +} +.sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-label { + display: inline-block; +} + +/* Legacy Design - these styles are maintained to make old panels look + a bit better on the new toolbar */ +.sf-toolbar-block .sf-toolbar-info-piece-additional-detail { + color: #AAA; + font-size: 12px; +} +.sf-toolbar-status-green .sf-toolbar-info-piece-additional-detail, +.sf-toolbar-status-yellow .sf-toolbar-info-piece-additional-detail, +.sf-toolbar-status-red .sf-toolbar-info-piece-additional-detail { + color: #FFF; +} + +@media (min-width: 768px) { + + .sf-toolbar-icon .sf-toolbar-label, + .sf-toolbar-icon .sf-toolbar-value { + display: inline; } - .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional, - .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail { - display: none !important; + .sf-toolbar-block .sf-toolbar-icon img, + .sf-toolbar-block .sf-toolbar-icon svg { + top: 6px; + } + .sf-toolbar-block-config:hover .sf-toolbar-info { + right: 0; + } + .sf-toolbar-block-time .sf-toolbar-icon svg, + .sf-toolbar-block-memory .sf-toolbar-icon svg { + display: none; + } + .sf-toolbar-block-time .sf-toolbar-icon svg + span, + .sf-toolbar-block-memory .sf-toolbar-icon svg + span { + margin-left: 0; + } + + .sf-toolbar-block .sf-toolbar-icon { + padding: 0 10px; + } + .sf-toolbar-block-time .sf-toolbar-icon { + padding-right: 5px; + } + .sf-toolbar-block-memory .sf-toolbar-icon { + padding-left: 5px; + } + .sf-toolbar-block-request .sf-toolbar-icon { + padding-left: 0; + padding-right: 0; + } + .sf-toolbar-block-request .sf-toolbar-status + .sf-toolbar-label { + margin-left: 4px; + } + .sf-toolbar-block-request .sf-toolbar-label + .sf-toolbar-value { + margin-right: 10px; + } + + .sf-toolbar-block-request:hover .sf-toolbar-info { + max-width: none; + } + + .sf-toolbar-block .sf-toolbar-info-piece b { + font-size: 12px; + } + .sf-toolbar-block .sf-toolbar-info-piece span { + font-size: 13px; + } + + .sf-toolbar-block-config { + float: right; + margin-left: 0; + margin-right: 0; } } -@media screen and (min-width: 880px) { - .sf-toolbar-block .sf-toolbar-icon a[href$="config"] .sf-toolbar-info-piece-additional { +@media (min-width: 1024px) { + .sf-toolbar-block .sf-toolbar-info-piece-additional, + .sf-toolbar-block .sf-toolbar-info-piece-additional-detail { display: inline-block; } -} -@media screen and (min-width: 980px) { - .sf-toolbar-block .sf-toolbar-icon a[href$="security"] .sf-toolbar-info-piece-additional { - display: inline-block; - } -} - -@media screen and (max-width: 1179px) { - .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional { + .sf-toolbar-block .sf-toolbar-info-piece-additional:empty, + .sf-toolbar-block .sf-toolbar-info-piece-additional-detail:empty { display: none; } } - -@media screen and (max-width: 1439px) { - .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail { - display: none; - } -} - -/***** Media query print: Do not print the Toolbar. *****/ -@media print { - .sf-toolbar { - display: none; - visibility: hidden; - } -} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig index dbe3d0cdbf..e4fea4b00b 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig @@ -15,11 +15,11 @@ Sfjs.setPreference('toolbar/displayState', 'block'); "> - + {{ include('@WebProfiler/Icon/symfony.svg') }}
{% endif %} @@ -30,7 +30,8 @@ 'collector': profile.getcollector(name), 'profiler_url': profiler_url, 'token': profile.token, - 'name': name + 'name': name, + 'profiler_markup_version': profiler_markup_version }) }} {% endfor %} @@ -42,7 +43,9 @@ (p.previousElementSibling || p.previousSibling).style.display = 'none'; document.getElementById('sfMiniToolbar-{{ token }}').style.display = 'block'; Sfjs.setPreference('toolbar/displayState', 'none'); - "> + "> + {{ include('@WebProfiler/Icon/close.svg') }} + {% endif %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_item.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_item.html.twig index 42bbfea576..2f30e05c9a 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_item.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_item.html.twig @@ -1,9 +1,6 @@ -{% if link %} - {% set icon %} - {{ icon }} - {% endset %} -{% endif %} -
-
{{ icon|default('') }}
-
{{ text|default('') }}
+
+ {% if link %}{% endif %} +
{{ icon|default('') }}
+ {% if link %}{% endif %} +
{{ text|default('') }}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig index 91ad9ad10e..1eadef3e96 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig @@ -46,12 +46,15 @@ toolbarInfo.style.right = ''; toolbarInfo.style.left = ''; - if (leftValue > 0 && rightValue > 0) { + if (elementWidth > pageWidth) { + toolbarInfo.style.left = 0; + } + else if (leftValue > 0 && rightValue > 0) { toolbarInfo.style.right = (rightValue * -1) + 'px'; } else if (leftValue < 0) { toolbarInfo.style.left = 0; } else { - toolbarInfo.style.right = '-1px'; + toolbarInfo.style.right = '0px'; } }; }