Version 1
[yaffs-website] / web / modules / contrib / devel / webprofiler / templates / Collector / performance_timing.html.twig
diff --git a/web/modules/contrib/devel/webprofiler/templates/Collector/performance_timing.html.twig b/web/modules/contrib/devel/webprofiler/templates/Collector/performance_timing.html.twig
new file mode 100644 (file)
index 0000000..5e8cf41
--- /dev/null
@@ -0,0 +1,76 @@
+{% 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 %}
\ No newline at end of file