From acee052b686403ee84904c8ade376e9304304f22 Mon Sep 17 00:00:00 2001 From: Javier Eguiluz Date: Wed, 8 Jul 2015 17:40:13 +0200 Subject: [PATCH] Finished the Ajax panel redesign --- .../Resources/views/Collector/ajax.html.twig | 9 ++-- .../views/Collector/request.html.twig | 13 +++-- .../Resources/views/Collector/twig.html.twig | 2 +- .../views/Profiler/base_js.html.twig | 19 +++---- .../Resources/views/Profiler/toolbar.css.twig | 50 +++++++++++-------- 5 files changed, 54 insertions(+), 39 deletions(-) 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 3c7b99b028..fd9ee91c56 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/ajax.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/ajax.html.twig @@ -2,13 +2,13 @@ {% block toolbar %} {% set icon %} + {{ include('@WebProfiler/Icon/ajax.svg.twig') }} 0 - ajax {% endset %} + {% set text %}
- AJAX requests - +
@@ -24,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/request.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig index 68a1d025f9..1d0d805c43 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig @@ -4,14 +4,19 @@ {% set request_handler %} {% if collector.controller.class is defined %} {% set link = collector.controller.file|file_link(collector.controller.line) %} + {% if link %}{% endif %} + + + {{ collector.controller.class|abbr_class }} + + {% if collector.controller.method %} - {{ collector.controller.class|abbr_class }} - + {{ collector.controller.method }} - {% else %} - {{ collector.controller.class|abbr_class }} {% endif %} + + {% if link %}{% endif %} {% else %} {{ collector.controller }} {% endif %} 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 629d06cf11..959295a87e 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/twig.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/twig.html.twig @@ -4,7 +4,7 @@ {% set time = collector.templatecount ? '%0.0f'|format(collector.time) : 'n/a' %} {% set icon %} - Twig + {{ include('@WebProfiler/Icon/twig.html.twig') }} {{ time }} ms 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 29b1d5b363..cdf6818897 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 @@ -165,7 +165,7 @@ 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 { @@ -181,15 +181,16 @@ requestCounter[0].textContent = requestStack.length; var className = 'sf-toolbar-ajax-requests sf-toolbar-value'; - if (state == 'ok') { - className += ' sf-toolbar-status-green'; - } else if (state == 'error') { - className += ' sf-toolbar-status-red'; - } else { - className += ' sf-ajax-request-loading'; - } - requestCounter[0].className = className; + + var ajaxToolbarPanel = document.querySelectorAll('.sf-toolbar-block-ajax'); + if (state == 'ok') { + ajaxToolbarPanel.className = 'sf-toolbar-status-green'; + } else if (state == 'error') { + ajaxToolbarPanel.className = 'sf-toolbar-status-red'; + } else { + ajaxToolbarPanel.className = 'sf-ajax-request-loading'; + } }; var addEventListener; 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 255a9b02d0..77447e2f9c 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig @@ -92,12 +92,6 @@ .sf-toolbar-block-config svg { padding-right: 4px; } -.sf-toolbar-block-time { - margin-right: 0; -} -.sf-toolbar-block-ajax { - display: none; -} .sf-toolbar-block span { display: inline-block; @@ -140,7 +134,7 @@ } .sf-toolbar-block .sf-toolbar-info-piece a { - color: #75D1EA; + color: #99CDD8; text-decoration: underline; } .sf-toolbar-block .sf-toolbar-info-piece a:hover { @@ -288,17 +282,13 @@ margin-top: 0; } -.sf-toolbar-block .sf-toolbar-info-method { +.sf-toolbar-block-time .sf-toolbar-icon { + padding-right: 5px; } - -.sf-toolbar-block .sf-toolbar-info-method[onclick=""] { - border-bottom: none; - cursor: inherit; +.sf-toolbar-block-memory .sf-toolbar-icon { + padding-left: 5px; } -.sf-toolbar-info-php {} -.sf-toolbar-info-php-ext {} - .sf-toolbar-info-php-ext .sf-toolbar-status + .sf-toolbar-status { margin-left: 4px; } @@ -339,14 +329,26 @@ 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 th { - background-color: #eee; + background-color: #222; + border-bottom: 0; + color: #AAA; + font-size: 11px; + padding: 4px; } .sf-ajax-request-url { max-width: 300px; @@ -354,6 +356,12 @@ 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; }