Finished the Ajax panel redesign

This commit is contained in:
Javier Eguiluz 2015-07-08 17:40:13 +02:00
parent fac5391dab
commit acee052b68
5 changed files with 54 additions and 39 deletions

View File

@ -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 %}

View File

@ -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 %}

View File

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

View File

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

View File

@ -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;
}