performance_timing.html.twig in Devel 4.x
{% block toolbar %}
{% set icon %}
<a href="{{ url("webprofiler.dashboard", {profile: token}, {fragment: 'performance_timing'}) }}"
title="{{ 'Performance Timing'|t }}">
<img width="20" height="28" alt="{{ 'Performance Timing'|t }}"
src="data:image/png;base64,{{ collector.icon }}"/>
<span id="wp--frontend__toolbar"></span>
</a>
{% endset %}
{% set text %}
<div class="sf-toolbar-info-piece">
<b>{{ 'DNS lookup'|t }}</b>
<span id="wp--frontend__dns"></span>
</div>
<div class="sf-toolbar-info-piece">
<b>{{ 'TCP handshake'|t }}</b>
<span id="wp--frontend__tcp"></span>
</div>
<div class="sf-toolbar-info-piece">
<b>{{ 'TTFB' }}</b>
<span id="wp--frontend__ttfb"></span>
</div>
<div class="sf-toolbar-info-piece">
<b>{{ 'Data download'|t }}</b>
<span id="wp--frontend__data"></span>
</div>
<div class="sf-toolbar-info-piece">
<b>{{ 'DOM building'|t }}</b>
<span id="wp--frontend__dom"></span>
</div>
{% endset %}
<div class="sf-toolbar-block">
<div class="sf-toolbar-icon">{{ icon|default('') }}</div>
<div class="sf-toolbar-info">{{ text|default('') }}</div>
</div>
<script>
var perf = performance.timing,
dns = parseInt(perf.domainLookupEnd - perf.domainLookupStart),
tcp = parseInt(perf.connectEnd - perf.connectStart),
ttfb = parseInt(perf.responseStart - perf.connectEnd),
data = parseInt(perf.responseEnd - perf.responseStart),
dom = parseInt(perf.loadEventStart - perf.responseEnd);
Webprofiler.ajax('{{ url("webprofiler.frontend.save", {profile: token}) }}', false, JSON.stringify(perf));
document.getElementById('wp--frontend__toolbar').innerHTML = ttfb + ' ms';
document.getElementById('wp--frontend__dns').innerHTML = dns + ' ms';
document.getElementById('wp--frontend__tcp').innerHTML = tcp + ' ms';
document.getElementById('wp--frontend__ttfb').innerHTML = ttfb + ' ms';
document.getElementById('wp--frontend__data').innerHTML = data + ' ms';
document.getElementById('wp--frontend__dom').innerHTML = dom + ' ms';
</script>
{% endblock %}
{% block panel %}
<script id="performance_timing" type="text/template">
<h2 class="panel__title">{{ 'Performance timing'|t }}</h2>
<div class="panel__container">
<% if(data.performance && data.performance.computed) { %>
<table class="table--duo">
<% _.each( data.performance.computed, function( item, key ){ %>
<tr>
<th><%- key %></th>
<td><%- Drupal.webprofiler.helpers.printTime(item) %></td>
</tr>
<% }); %>
</table>
<% } else { %>
<p>{{ 'No collected data, maybe this profile hasn\'t been generated by a browser GET o has been generated by an unsupported browser.'|t }}</p>
<% } %>
</div>
</script>
{% endblock %}
File
webprofiler/templates/Collector/performance_timing.html.twig
View source
- {% block toolbar %}
- {% set icon %}
- <a href="{{ url("webprofiler.dashboard", {profile: token}, {fragment: 'performance_timing'}) }}"
- title="{{ 'Performance Timing'|t }}">
- <img width="20" height="28" alt="{{ 'Performance Timing'|t }}"
- src="data:image/png;base64,{{ collector.icon }}"/>
- <span id="wp--frontend__toolbar"></span>
- </a>
- {% endset %}
- {% set text %}
-
- <div class="sf-toolbar-info-piece">
- <b>{{ 'DNS lookup'|t }}</b>
- <span id="wp--frontend__dns"></span>
- </div>
- <div class="sf-toolbar-info-piece">
- <b>{{ 'TCP handshake'|t }}</b>
- <span id="wp--frontend__tcp"></span>
- </div>
- <div class="sf-toolbar-info-piece">
- <b>{{ 'TTFB' }}</b>
- <span id="wp--frontend__ttfb"></span>
- </div>
- <div class="sf-toolbar-info-piece">
- <b>{{ 'Data download'|t }}</b>
- <span id="wp--frontend__data"></span>
- </div>
- <div class="sf-toolbar-info-piece">
- <b>{{ 'DOM building'|t }}</b>
- <span id="wp--frontend__dom"></span>
- </div>
- {% endset %}
-
- <div class="sf-toolbar-block">
- <div class="sf-toolbar-icon">{{ icon|default('') }}</div>
- <div class="sf-toolbar-info">{{ text|default('') }}</div>
- </div>
-
- <script>
- var perf = performance.timing,
- dns = parseInt(perf.domainLookupEnd - perf.domainLookupStart),
- tcp = parseInt(perf.connectEnd - perf.connectStart),
- ttfb = parseInt(perf.responseStart - perf.connectEnd),
- data = parseInt(perf.responseEnd - perf.responseStart),
- dom = parseInt(perf.loadEventStart - perf.responseEnd);
-
- Webprofiler.ajax('{{ url("webprofiler.frontend.save", {profile: token}) }}', false, JSON.stringify(perf));
-
- document.getElementById('wp--frontend__toolbar').innerHTML = ttfb + ' ms';
- document.getElementById('wp--frontend__dns').innerHTML = dns + ' ms';
- document.getElementById('wp--frontend__tcp').innerHTML = tcp + ' ms';
- document.getElementById('wp--frontend__ttfb').innerHTML = ttfb + ' ms';
- document.getElementById('wp--frontend__data').innerHTML = data + ' ms';
- document.getElementById('wp--frontend__dom').innerHTML = dom + ' ms';
- </script>
- {% endblock %}
-
- {% block panel %}
- <script id="performance_timing" type="text/template">
- <h2 class="panel__title">{{ 'Performance timing'|t }}</h2>
- <div class="panel__container">
- <% if(data.performance && data.performance.computed) { %>
- <table class="table--duo">
- <% _.each( data.performance.computed, function( item, key ){ %>
- <tr>
- <th><%- key %></th>
- <td><%- Drupal.webprofiler.helpers.printTime(item) %></td>
- </tr>
- <% }); %>
- </table>
- <% } else { %>
- <p>{{ 'No collected data, maybe this profile hasn\'t been generated by a browser GET o has been generated by an unsupported browser.'|t }}</p>
- <% } %>
- </div>
- </script>
- {% endblock %}