Finished the Ajax panel redesign
This commit is contained in:
parent
fac5391dab
commit
acee052b68
@ -2,13 +2,13 @@
|
|||||||
|
|
||||||
{% block toolbar %}
|
{% block toolbar %}
|
||||||
{% set icon %}
|
{% set icon %}
|
||||||
|
{{ include('@WebProfiler/Icon/ajax.svg.twig') }}
|
||||||
<span class="sf-toolbar-value sf-toolbar-ajax-requests">0</span>
|
<span class="sf-toolbar-value sf-toolbar-ajax-requests">0</span>
|
||||||
<span class="sf-toolbar-label">ajax</span>
|
|
||||||
{% endset %}
|
{% endset %}
|
||||||
|
|
||||||
{% set text %}
|
{% set text %}
|
||||||
<div class="sf-toolbar-info-piece">
|
<div class="sf-toolbar-info-piece">
|
||||||
<b>AJAX requests</b>
|
<b class="sf-toolbar-ajax-info"></b>
|
||||||
<span class="sf-toolbar-ajax-info"></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="sf-toolbar-info-piece">
|
<div class="sf-toolbar-info-piece">
|
||||||
<table class="sf-toolbar-ajax-requests">
|
<table class="sf-toolbar-ajax-requests">
|
||||||
@ -24,5 +24,6 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
{% endset %}
|
{% endset %}
|
||||||
{% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': false } %}
|
|
||||||
|
{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: false }) }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
@ -4,14 +4,19 @@
|
|||||||
{% set request_handler %}
|
{% set request_handler %}
|
||||||
{% if collector.controller.class is defined %}
|
{% if collector.controller.class is defined %}
|
||||||
{% set link = collector.controller.file|file_link(collector.controller.line) %}
|
{% 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 %}
|
{% 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">
|
||||||
<span class="sf-toolbar-info-method"{% if link %} onclick="window.location='{{link|e('js')}}';window.event.stopPropagation();return false;"{% endif %}>
|
|
||||||
{{ collector.controller.method }}
|
{{ collector.controller.method }}
|
||||||
</span>
|
</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 %}
|
{% endif %}
|
||||||
|
|
||||||
|
{% if link %}</a>{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="sf-toolbar-info-class">{{ collector.controller }}</span>
|
<span class="sf-toolbar-info-class">{{ collector.controller }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
{% set time = collector.templatecount ? '%0.0f'|format(collector.time) : 'n/a' %}
|
{% set time = collector.templatecount ? '%0.0f'|format(collector.time) : 'n/a' %}
|
||||||
{% set icon %}
|
{% set icon %}
|
||||||
<span>
|
<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-value">{{ time }}</span>
|
||||||
<span class="sf-toolbar-label">ms</span>
|
<span class="sf-toolbar-label">ms</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -165,7 +165,7 @@
|
|||||||
tbody.appendChild(rows);
|
tbody.appendChild(rows);
|
||||||
|
|
||||||
if (infoSpan) {
|
if (infoSpan) {
|
||||||
var text = requestStack.length + ' call' + (requestStack.length > 1 ? 's' : '');
|
var text = requestStack.length + ' AJAX request' + (requestStack.length > 1 ? 's' : '');
|
||||||
infoSpan.textContent = text;
|
infoSpan.textContent = text;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
@ -181,15 +181,16 @@
|
|||||||
requestCounter[0].textContent = requestStack.length;
|
requestCounter[0].textContent = requestStack.length;
|
||||||
|
|
||||||
var className = 'sf-toolbar-ajax-requests sf-toolbar-value';
|
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;
|
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;
|
var addEventListener;
|
||||||
|
@ -92,12 +92,6 @@
|
|||||||
.sf-toolbar-block-config svg {
|
.sf-toolbar-block-config svg {
|
||||||
padding-right: 4px;
|
padding-right: 4px;
|
||||||
}
|
}
|
||||||
.sf-toolbar-block-time {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.sf-toolbar-block-ajax {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sf-toolbar-block span {
|
.sf-toolbar-block span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -140,7 +134,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sf-toolbar-block .sf-toolbar-info-piece a {
|
.sf-toolbar-block .sf-toolbar-info-piece a {
|
||||||
color: #75D1EA;
|
color: #99CDD8;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.sf-toolbar-block .sf-toolbar-info-piece a:hover {
|
.sf-toolbar-block .sf-toolbar-info-piece a:hover {
|
||||||
@ -288,17 +282,13 @@
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sf-toolbar-block .sf-toolbar-info-method {
|
.sf-toolbar-block-time .sf-toolbar-icon {
|
||||||
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
.sf-toolbar-block-memory .sf-toolbar-icon {
|
||||||
.sf-toolbar-block .sf-toolbar-info-method[onclick=""] {
|
padding-left: 5px;
|
||||||
border-bottom: none;
|
|
||||||
cursor: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sf-toolbar-info-php {}
|
|
||||||
.sf-toolbar-info-php-ext {}
|
|
||||||
|
|
||||||
.sf-toolbar-info-php-ext .sf-toolbar-status + .sf-toolbar-status {
|
.sf-toolbar-info-php-ext .sf-toolbar-status + .sf-toolbar-status {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
@ -339,14 +329,26 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sf-toolbar-ajax-requests th, .sf-toolbar-ajax-requests td {
|
.sf-toolbar-info-piece b.sf-toolbar-ajax-info {
|
||||||
border-bottom: 1px solid #ddd;
|
color: #F5F5F5;
|
||||||
padding: 0 4px;
|
}
|
||||||
color: #2f2f2f;
|
.sf-toolbar-ajax-requests {
|
||||||
background-color: #fff;
|
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 {
|
.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 {
|
.sf-ajax-request-url {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
@ -354,6 +356,12 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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 {
|
.sf-ajax-request-duration {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user