Add: Resource timing

src/Network/Network.es6

@@ -13,6 +13,9 @@ export default class Network extends Tool
 
         this.name = 'network';
         this._performanceTimingData = [];
+        this._performanceTiming = {};
+        this._resourceTimingData = [];
+        this._performance = window.webkitPerformance || window.performance;
         this._requests = {};
 
         this._tpl = require('./Network.hbs');
@@ -126,33 +129,44 @@ export default class Network extends Tool
         $el.on('click', '.eruda-performance-timing', function ()
         {
             $el.find('.eruda-performance-timing-data').show();
-        });
-
-        $el.on('click', '.eruda-request', function ()
+        }).on('click', '.eruda-request', function ()
         {
             var id = util.$(this).data('id'),
                 data = self._requests[id];
 
             if (!data.done) return;
 
-            var sources = parent.get('sources');
-
-            if (!sources) return;
-
-            sources.set('http', {
+            showSources('http', {
                 url: data.url,
                 resTxt: data.resTxt,
                 type: data.type,
                 subType: data.subType,
                 resHeaders: data.resHeaders
             });
+        }).on('click', '.eruda-entry', function ()
+        {
+            var idx = util.$(this).data('idx'),
+                data = self._resourceTimingData[Number(idx)];
+
+            if (data.initiatorType === 'img')
+            {
+                showSources('img', data.url);
+            }
+        });
+
+        function showSources(type, data)
+        {
+            var sources = parent.get('sources');
+            if (!sources) return;
+
+            sources.set(type, data);
 
             parent.showTool('sources');
-        });
+        }
     }
     _getPerformanceTimingData()
     {
-        var performance = window.webkitPerformance || window.performance;
+        var performance = this._performance;
 
         if (!performance) return;
 
@@ -244,12 +258,37 @@ export default class Network extends Tool
         });
         this._performanceTiming = performanceTiming;
     }
+    _getResourceTimingData()
+    {
+        var performance = this._performance;
+        if (!performance || !util.isFn(performance.getEntries)) return;
+
+        var entries = performance.getEntries();
+
+        var data = [];
+
+        var hideXhr = this.config.get('hideXhrResource');
+        entries.forEach(entry =>
+        {
+            if (hideXhr && entry.initiatorType === 'xmlhttprequest') return;
+
+            data.push({
+                name: util.getFileName(entry.name),
+                displayTime: formatTime(entry.duration),
+                url: entry.name,
+                initiatorType: entry.initiatorType
+            });
+        });
+
+        this._resourceTimingData = data;
+    }
     _initConfig()
     {
         var cfg = this.config = config.create('eruda-network');
 
         cfg.set(util.defaults(cfg.get(), {
             disablePerformance: false,
+            hideXhrResource: true,
             overrideXhr: true
         }));
 
@@ -265,7 +304,8 @@ export default class Network extends Tool
 
         var settings = this._parent.get('settings');
         settings.text('Network')
-                .add(cfg, 'overrideXhr', 'Catch Ajax Requests')
+                .add(cfg, 'overrideXhr', 'Catch Xhr Requests')
+                .add(cfg, 'hideXhrResource', 'Hide Xhr Resource Timing')
                 .add(cfg, 'disablePerformance', 'Disable Performance Timing')
                 .separator();
     }
@@ -273,7 +313,14 @@ export default class Network extends Tool
     {
         if (!this.active) return;
 
-        var renderData = {requests: this._requests};
+        this._getResourceTimingData();
+
+        var renderData = {entries: this._resourceTimingData};
+
+        if (util.keys(this._requests).length > 0)
+        {
+            renderData.requests = this._requests;
+        }
 
         if (!this.config.get('disablePerformance'))
         {
@@ -294,6 +341,8 @@ export default class Network extends Tool
 
 function formatTime(time)
 {
+    time = Math.round(time);
+
     if (time < 1000) return time + 'ms';
 
     return (time / 1000).toFixed(1) + 's';

src/Network/Network.hbs

@@ -29,16 +29,31 @@
     </div>
 {{/if}}
 
-<ul class="eruda-requests">
-    {{#each requests}}
-        <li class="eruda-request" data-id="{{@key}}">
-            <span>{{name}}</span>
-            <span>{{status}}</span>
-            <span>{{method}}</span>
-            <span>{{subType}}</span>
-            <span>{{size}}</span>
-            <span>{{displayTime}}</span>
-            <span class="eruda-blue">{{url}}</span>
-        </li>
-    {{/each}}
-</ul>
+{{#if entries}}
+    <ul class="eruda-entries">
+        {{#each entries}}
+            <li class="eruda-entry" data-idx="{{@index}}">
+                <span>{{name}}</span>
+                <span>{{initiatorType}}</span>
+                <span>{{displayTime}}</span>
+                <span class="eruda-blue">{{url}}</span>
+            </li>
+        {{/each}}
+    </ul>
+{{/if}}
+
+{{#if requests}}
+    <ul class="eruda-requests">
+        {{#each requests}}
+            <li class="eruda-request" data-id="{{@key}}">
+                <span>{{name}}</span>
+                <span>{{status}}</span>
+                <span>{{method}}</span>
+                <span>{{subType}}</span>
+                <span>{{size}}</span>
+                <span>{{displayTime}}</span>
+                <span class="eruda-blue">{{url}}</span>
+            </li>
+        {{/each}}
+    </ul>
+{{/if}}

src/Network/Network.scss

@@ -46,9 +46,10 @@
                 }
             }
         }
-        .requests {
+        .requests, .entries {
             background: #fff;
             border-bottom: 1px solid $gray;
+            margin-bottom: 10px;
             li {
                 border-top: 1px solid $gray;
                 overflow: auto;

src/Network/Request.es6

@@ -14,7 +14,7 @@ export default class Request extends util.Emitter
     handleSend()
     {
         this.emit('send', this._id, {
-            name: getFileName(this._url),
+            name: util.getFileName(this._url),
             url: this._url,
             method: this._method,
             xhr: this._xhr
@@ -69,15 +69,6 @@ function getHeaders(xhr)
     return ret;
 }
 
-function getFileName(url)
-{
-    var ret = util.last(url.split('/'));
-
-    if (ret.indexOf('?') > -1) ret = ret.split('?')[0].trim();
-
-    return ret === '' ? 'unknown' : ret;
-}
-
 function getType(contentType)
 {
     if (!contentType) return 'unknown';