eruda-timing / src /template.hbs
soiz1's picture
Update src/template.hbs
b9ccd1b verified
{{#if timing}}
<div class="eruda-performance-timing">
<div class="eruda-inner-wrapper">
{{#each data}}
<div class="eruda-bar">
<span style="position:relative;left:{{start}}%;width:{{len}}%">{{name}}({{duration}}ms)</span>
</div>
{{/each}}
</div>
</div>
{{#if showPerformanceDetail}}
<div class="eruda-performance-timing-data">
<table>
<thead>
<tr>
<th>Name</th>
<th>Time(ms)</th>
</tr>
</thead>
<tbody>
{{#each timing}}
<tr>
<td>{{@key}}</td>
<td>{{this}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/if}}
{{/if}}
{{#if entries}}
<div class="eruda-title">
ResourceTiming
<div class="eruda-btn eruda-refresh-resource-timing">
<span class="eruda-icon-refresh"></span>
</div>
</div>
<div class="eruda-entries">
<table>
<tbody>
{{#each entries}}
<tr class="eruda-entry" data-idx="{{@key}}">
<td>{{name}}</td>
<td>{{#if initiatorType}}<span>{{initiatorType}}</span>{{/if}}</td>
<td class="eruda-right">{{displayTime}}</td>
<td class="eruda-blue">{{url}}</td>
</tr>
<tr>
<td class="eruda-timeline" colspan="4">
<span style="border-left: 1px solid #707d8b; background: #707d8b; margin-left: {{timeline.left}}%; width: {{timeline.connection}}%;"></span>
<span style="background: #009688; width: {{timeline.ttfb}}%"></span>
<span style="background: #2196f3; width: {{timeline.response}}%"></span>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/if}}
{{#if notSupported}}
<div class="eruda-not-supported">
このブラウザではサポートされていません。
</div>
{{/if}}