Add: Resource timing

eustia/getFileName.js

@@ -0,0 +1,10 @@
+_('last trim');
+
+function exports(url)
+{
+    var ret = last(url.split('/'));
+
+    if (ret.indexOf('?') > -1) ret = trim(ret.split('?')[0]);
+
+    return ret === '' ? 'unknown' : ret;
+}

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();
-        });
+        }).on('click', '.eruda-request', function ()
-
-        $el.on('click', '.eruda-request', function ()
         {
             var id = util.$(this).data('id'),
                 data = self._requests[id];
 
             if (!data.done) return;
 
-            var sources = parent.get('sources');
+            showSources('http', {
-
-            if (!sources) return;
-
-            sources.set('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">
+{{#if entries}}
-    {{#each requests}}
+    <ul class="eruda-entries">
-        <li class="eruda-request" data-id="{{@key}}">
+        {{#each entries}}
-            <span>{{name}}</span>
+            <li class="eruda-entry" data-idx="{{@index}}">
-            <span>{{status}}</span>
+                <span>{{name}}</span>
-            <span>{{method}}</span>
+                <span>{{initiatorType}}</span>
-            <span>{{subType}}</span>
+                <span>{{displayTime}}</span>
-            <span>{{size}}</span>
+                <span class="eruda-blue">{{url}}</span>
-            <span>{{displayTime}}</span>
+            </li>
-            <span class="eruda-blue">{{url}}</span>
+        {{/each}}
-        </li>
+    </ul>
-    {{/each}}
+{{/if}}
-</ul>
+
+{{#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';

src/Sources/Sources.es6

@@ -79,8 +79,13 @@ export default class Sources extends Tool
 
             return this._render();
         }
+
+        if (this._isGettingHtml) return;
+        this._isGettingHtml = true;
+
         util.get(location.href, (err, data) =>
         {
+            this._isGettingHtml = false;
             if (err) return;
 
             this._html = data;

src/lib/util.js

@@ -1367,42 +1367,6 @@ module.exports = (function ()
          * |methods|object  |Public methods                   |
          * |statics|object  |Static methods                   |
          * |return |function|Function used to create instances|
-         *
-         * ```javascript
-         * var People = Class({
-         *     initialize: function (name, age)
-         *     {
-         *         this.name = name;
-         *         this.age = age;
-         *     },
-         *     introduce: function ()
-         *     {
-         *         return 'I am ' + this.name + ', ' + this.age + ' years old.'.
-         *     }
-         * });
-         *
-         * var Student = People.extend({
-         *     initialize: function (name, age, school)
-         *     {
-         *         this.callSuper('initialize', name, age);
-         *
-         *         this.school = school.
-         *     },
-         *     introduce: function ()
-         *     {
-         *         return this.callSuper('introduce') + '\n I study at ' + this.school + '.'.
-         *     }
-         * }, {
-         *     is: function (obj)
-         *     {
-         *         return obj instanceof Student;
-          *    }
-         * });
-         *
-         * var a = new Student('allen', 17, 'Hogwarts');
-         * a.introduce(); // -> 'I am allen, 17 years old. \n I study at Hogwarts.'
-         * Student.is(a); // -> true
-         * ```
          */
 
         var regCallSuper = /callSuper/;
@@ -2480,6 +2444,53 @@ module.exports = (function ()
         return exports;
     })({});
 
+    /* ------------------------------ trim ------------------------------ */
+
+    var trim = _.trim = (function (exports)
+    {
+        /* Remove chars or white-spaces from beginning end of string.
+         *
+         * |Name  |Type         |Desc                  |
+         * |-------------------------------------------|
+         * |str   |string       |The string to trim    |
+         * |chars |string\|array|The characters to trim|
+         * |return|string       |The trimmed string    |
+         *
+         * ```javascript
+         * trim(' abc  '); // -> 'abc'
+         * trim('_abc_', '_'); // -> 'abc'
+         * trim('_abc_', ['a', 'c', '_']); // -> 'b'
+         * ```
+         */
+
+        var regSpace = /^\s+|\s+$/g;
+
+        exports = function (str, chars)
+        {
+            if (chars == null) return str.replace(regSpace, '');
+
+            return ltrim(rtrim(str, chars), chars);
+        };
+
+        return exports;
+    })({});
+
+    /* ------------------------------ getFileName ------------------------------ */
+
+    var getFileName = _.getFileName = (function (exports)
+    {
+        function exports(url)
+        {
+            var ret = last(url.split('/'));
+
+            if (ret.indexOf('?') > -1) ret = trim(ret.split('?')[0]);
+
+            return ret === '' ? 'unknown' : ret;
+        }
+
+        return exports;
+    })({});
+
     /* ------------------------------ startWith ------------------------------ */
 
     var startWith = _.startWith = (function (exports)
@@ -2532,37 +2543,6 @@ module.exports = (function ()
         return exports;
     })({});
 
-    /* ------------------------------ trim ------------------------------ */
-
-    var trim = _.trim = (function (exports)
-    {
-        /* Remove chars or white-spaces from beginning end of string.
-         *
-         * |Name  |Type         |Desc                  |
-         * |-------------------------------------------|
-         * |str   |string       |The string to trim    |
-         * |chars |string\|array|The characters to trim|
-         * |return|string       |The trimmed string    |
-         *
-         * ```javascript
-         * trim(' abc  '); // -> 'abc'
-         * trim('_abc_', '_'); // -> 'abc'
-         * trim('_abc_', ['a', 'c', '_']); // -> 'b'
-         * ```
-         */
-
-        var regSpace = /^\s+|\s+$/g;
-
-        exports = function (str, chars)
-        {
-            if (chars == null) return str.replace(regSpace, '');
-
-            return ltrim(rtrim(str, chars), chars);
-        };
-
-        return exports;
-    })({});
-
     /* ------------------------------ uniqId ------------------------------ */
 
     var uniqId = _.uniqId = (function (exports)

test/index.html

@@ -55,7 +55,7 @@
                 xhr.open('GET', url);
                 xhr.send();
             }
-            setTimeout(function ()
+            /*setTimeout(function ()
             {
                 req('http://localhost:3000/test/style.css');
             }, 1000);
@@ -66,7 +66,7 @@
             setTimeout(function ()
             {
                 req('http://localhost:3000/test/empty.json');
-            }, 3000);
+            }, 3000);*/
         </script>
     </div>
 </body>