aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/devel/webprofiler/templates/Collector/performance_timing.html.twig

   1 {% block toolbar %}
   2     {% set icon %}
   3     <a href="{{ url("webprofiler.dashboard", {profile: token}, {fragment: 'performance_timing'}) }}"
   4        title="{{ 'Performance Timing'|t }}">
   5         <img width="20" height="28" alt="{{ 'Performance Timing'|t }}"
   6              src="data:image/png;base64,{{ collector.icon }}"/>
   7         <span id="wp--frontend__toolbar"></span>
   8     </a>
   9     {% endset %}
  10     {% set text %}
  11
  12     <div class="sf-toolbar-info-piece">
  13         <b>{{ 'DNS lookup'|t }}</b>
  14         <span id="wp--frontend__dns"></span>
  15     </div>
  16     <div class="sf-toolbar-info-piece">
  17         <b>{{ 'TCP handshake'|t }}</b>
  18         <span id="wp--frontend__tcp"></span>
  19     </div>
  20     <div class="sf-toolbar-info-piece">
  21         <b>{{ 'TTFB' }}</b>
  22         <span id="wp--frontend__ttfb"></span>
  23     </div>
  24     <div class="sf-toolbar-info-piece">
  25         <b>{{ 'Data download'|t }}</b>
  26         <span id="wp--frontend__data"></span>
  27     </div>
  28     <div class="sf-toolbar-info-piece">
  29         <b>{{ 'DOM building'|t }}</b>
  30         <span id="wp--frontend__dom"></span>
  31     </div>
  32     {% endset %}
  33
  34     <div class="sf-toolbar-block">
  35         <div class="sf-toolbar-icon">{{ icon|default('') }}</div>
  36         <div class="sf-toolbar-info">{{ text|default('') }}</div>
  37     </div>
  38
  39     <script>
  40         var perf = performance.timing,
  41                 dns = parseInt(perf.domainLookupEnd - perf.domainLookupStart),
  42                 tcp = parseInt(perf.connectEnd - perf.connectStart),
  43                 ttfb = parseInt(perf.responseStart - perf.connectEnd),
  44                 data = parseInt(perf.responseEnd - perf.responseStart),
  45                 dom = parseInt(perf.loadEventStart - perf.responseEnd);
  46
  47         Webprofiler.ajax('{{ url("webprofiler.frontend.save", {profile: token}) }}', false, JSON.stringify(perf));
  48
  49         document.getElementById('wp--frontend__toolbar').innerHTML = ttfb + ' ms';
  50         document.getElementById('wp--frontend__dns').innerHTML = dns + ' ms';
  51         document.getElementById('wp--frontend__tcp').innerHTML = tcp + ' ms';
  52         document.getElementById('wp--frontend__ttfb').innerHTML = ttfb + ' ms';
  53         document.getElementById('wp--frontend__data').innerHTML = data + ' ms';
  54         document.getElementById('wp--frontend__dom').innerHTML = dom + ' ms';
  55     </script>
  56 {% endblock %}
  57
  58 {% block panel %}
  59     <script id="performance_timing" type="text/template">
  60         <h2 class="panel__title">{{ 'Performance timing'|t }}</h2>
  61         <div class="panel__container">
  62             <% if(data.performance && data.performance.computed) { %>
  63                 <table class="table--duo">
  64                     <% _.each( data.performance.computed, function( item, key ){ %>
  65                     <tr>
  66                         <th><%- key %></th>
  67                         <td><%- Drupal.webprofiler.helpers.printTime(item) %></td>
  68                     </tr>
  69                     <% }); %>
  70                 </table>
  71             <% } else { %>
  72                 <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>
  73             <% } %>
  74         </div>
  75     </script>
  76 {% endblock %}