Finished the Ajax panel redesign

javiereguiluz · javiereguiluz · commit acee052b6864 · 2015-07-30T09:29:42.000+02:00
diff --git 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') }}
         <span class="sf-toolbar-value sf-toolbar-ajax-requests">0</span>
-        <span class="sf-toolbar-label">ajax</span>
     {% endset %}
+
     {% set text %}
         <div class="sf-toolbar-info-piece">
-            <b>AJAX requests</b>
-            <span class="sf-toolbar-ajax-info"></span>
+            <b class="sf-toolbar-ajax-info"></b>
         </div>
         <div class="sf-toolbar-info-piece">
             <table class="sf-toolbar-ajax-requests">
@@ -24,5 +24,6 @@
             </table>
         </div>
     {% 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
@@ -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 %}<a href="#" onclick="window.location='{{link|e('js')}}';window.event.stopPropagation();return false;">{% endif %}
+
+            <span class="sf-toolbar-info-class">
+                {{ collector.controller.class|abbr_class }}
+            </span>
+
             {% if collector.controller.method %}
-                <span class="sf-toolbar-info-class sf-toolbar-info-with-next-pointer">{{ collector.controller.class|abbr_class }}</span>
-                <span class="sf-toolbar-info-method"{% if link %} onclick="window.location='{{link|e('js')}}';window.event.stopPropagation();return false;"{% endif %}>
+                <span class="sf-toolbar-info-method">
                     {{ collector.controller.method }}
                 </span>
-            {% else %}
-                <span class="sf-toolbar-info-class"{% if link %} onclick="window.location='{{link|e('js')}}';window.event.stopPropagation();return false;"{% endif %}>{{ collector.controller.class|abbr_class }}</span>
             {% endif %}
+
+            {% if link %}</a>{% endif %}
         {% else %}
             <span class="sf-toolbar-info-class">{{ collector.controller }}</span>
         {% 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
@@ -4,7 +4,7 @@
     {% set time = collector.templatecount ? '%0.0f'|format(collector.time) : 'n/a' %}
     {% set icon %}
         <span>
-            <img height="28" alt="Twig" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAcCAYAAACOGPReAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAbElEQVRIx2NgGAXUBowMDAwMaWlp/6ll4KxZsxhZYJy0tDRqGMjAwMDAwEQL77OgCxSXlJBsSG9PDwqfJi6lj/fRvTJ4XYocUTBXE4q8oRtRRBnKwsw8RFw6fA0lKkd1dnYOIpfCCthRMIIAAI0IFu9Hxh7ZAAAAAElFTkSuQmCC" />
+            {{ include('@WebProfiler/Icon/twig.html.twig') }}
             <span class="sf-toolbar-value">{{ time }}</span>
             <span class="sf-toolbar-label">ms</span>
         </span>
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
@@ -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';
+                requestCounter[0].className = className;
+
+                var ajaxToolbarPanel = document.querySelectorAll('.sf-toolbar-block-ajax');
                 if (state == 'ok') {
-                    className += ' sf-toolbar-status-green';
+                    ajaxToolbarPanel.className = 'sf-toolbar-status-green';
                 } else if (state == 'error') {
-                    className += ' sf-toolbar-status-red';
+                    ajaxToolbarPanel.className = 'sf-toolbar-status-red';
                 } else {
-                    className += ' sf-ajax-request-loading';
+                    ajaxToolbarPanel.className = 'sf-ajax-request-loading';
                 }
-
-                requestCounter[0].className = className;
             };
 
         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
@@ -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,21 +329,39 @@
     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;
     line-height: 9px;
     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;
 }
