Add: Catch ajax request

src/Network/Network.es6

@@ -1,4 +1,5 @@
 import Tool from '../DevTools/Tool.es6'
+import Request from './Request.es6'
 import util from '../lib/util'
 
 require('./Network.scss');
@@ -10,6 +11,7 @@ export default class Network extends Tool
         super();
         this.name = 'network';
         this._performanceTimingData = [];
+        this._requests = {};
 
         this._tpl = require('./Network.hbs');
     }
@@ -18,6 +20,7 @@ export default class Network extends Tool
         super.init($el);
 
         this._bindEvent();
+        this.overrideXhr();
     }
     show()
     {
@@ -25,6 +28,66 @@ export default class Network extends Tool
 
         this._getPerformanceTimingData();
     }
+    overrideXhr()
+    {
+        var winXhrProto = window.XMLHttpRequest.prototype;
+
+        var origSend = winXhrProto.send,
+            origOpen = winXhrProto.open;
+
+        var self = this;
+
+        winXhrProto.open = function (method, url)
+        {
+            var xhr = this;
+
+            var req = xhr.erudaRequest = new Request(xhr, method, url);
+
+            req.on('send', (id, data) => self._addReq(id, data));
+
+            xhr.addEventListener('readystatechange', function ()
+            {
+                switch (xhr.readyState)
+                {
+                    case 2: return req.handleHeadersReceived();
+                    case 3: return req.handleLoading();
+                    case 4: return req.handleDone();
+                }
+            });
+
+            origOpen.apply(this, arguments);
+        };
+
+        winXhrProto.send = function ()
+        {
+            var req = this.erudaRequest;
+            if (req) req.handleSend();
+
+            origSend.apply(this, arguments);
+        };
+    }
+    _addReq(id, data)
+    {
+        util.defaults(data, {
+            name: 'unknown',
+            status: 'pending',
+            type: 'unknown',
+            size: 0,
+            startTime: util.now()
+        });
+
+        this._requests[id] = data;
+
+        this._render();
+    }
+    _updateReq(id, data)
+    {
+        if (!this._requests[id]) return;
+
+        util.extend(this._requests[id], data);
+
+        this._render();
+    }
     _bindEvent()
     {
         var $el = this._$el;
@@ -132,7 +195,8 @@ export default class Network extends Tool
     {
         this._$el.html(this._tpl({
             data: this._performanceTimingData,
-            timing: this._performanceTiming
+            timing: this._performanceTiming,
+            requests: this._requests
         }));
     }
 }

src/Network/Network.hbs

@@ -26,4 +26,12 @@
             {{/each}}
         </tbody>
     </table>
-</div>
+</div>
+
+<ul class="eruda-request">
+    {{#each requests}}
+        <li>
+            <span>{{name}}</span>
+        </li>
+    {{/each}}
+</ul>

src/Network/Network.scss

@@ -57,5 +57,18 @@
                 }
             }
         }
+        .request {
+            background: #fff;
+            li {
+                border-top: 1px solid $gray;
+                overflow-y: auto;
+                -webkit-overflow-scrolling: touch;
+                span {
+                    display: block;
+                    float: left;
+                    padding: 5px 10px;
+                }
+            }
+        }
     }
 } }

src/Network/Request.es6

@@ -0,0 +1,37 @@
+import util from '../lib/util'
+
+export default class Request extends util.Emitter
+{
+    constructor(xhr, method, url)
+    {
+        super();
+
+        this._xhr = xhr;
+        this._method = method;
+        this._url = url;
+        this._id = util.uniqId('request');
+    }
+    handleSend()
+    {
+        this.emit('send', this._id, {
+            name: getFileName(this._url)
+        });
+    }
+    handleHeadersReceived()
+    {
+
+    }
+    handleLoading()
+    {
+
+    }
+    handleDone()
+    {
+
+    }
+};
+
+function getFileName(url)
+{
+    return util.last(url.split('/'));
+}

src/lib/util.js

@@ -2489,6 +2489,34 @@ module.exports = (function ()
         return exports;
     })({});
 
+    /* ------------------------------ uniqId ------------------------------ */
+
+    var uniqId = _.uniqId = (function (exports)
+    {
+        /* Generate a globally-unique id.
+         *
+         * |Name  |Type  |Desc              |
+         * |--------------------------------|
+         * |prefix|string|Id prefix         |
+         * |return|string|Globally-unique id|
+         *
+         * ```javascript
+         * uniqueId('eusita_'); // -> 'eustia_xxx'
+         * ```
+         */
+
+        var idCounter = 0;
+
+        exports = function (prefix)
+        {
+            var id = ++idCounter + '';
+
+            return prefix ? prefix + id : id;
+        };
+
+        return exports;
+    })({});
+
     /* ------------------------------ unique ------------------------------ */
 
     var unique = _.unique = (function (exports)