Fix: Network display and content length

README.md

@@ -42,7 +42,7 @@ npm install eruda --save
 Add this script to your page.
 
 ```html
-<script src="node_modules/eruda/dist/eruda.min.js'"></script>
+<script src="node_modules/eruda/dist/eruda.min.js"></script>
 <script>eruda.init();</script>
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Console for Mobile Browsers",
   "main": "dist/eruda.js",
   "scripts": {

src/Network/Network.es6

@@ -113,6 +113,7 @@ export default class Network extends Tool
         util.extend(target, data);
 
         target.time = target.time - target.startTime;
+        target.displayTime = formatTime(target.time);
 
         this._render();
     }
@@ -272,4 +273,11 @@ export default class Network extends Tool
             requests: this._requests
         }));
     }
+}
+
+function formatTime(time)
+{
+    if (time < 1000) return time + 'ms';
+
+    return (time / 1000).toFixed(1) + 's';
 }

src/Network/Network.hbs

@@ -35,7 +35,7 @@
             <span>{{method}}</span>
             <span>{{subType}}</span>
             <span>{{size}}</span>
-            <span>{{time}}ms</span>
+            <span>{{displayTime}}</span>
             <span class="eruda-blue">{{url}}</span>
         </li>
     {{/each}}

src/Network/Network.scss

@@ -51,7 +51,8 @@
             border-bottom: 1px solid $gray;
             li {
                 border-top: 1px solid $gray;
-                overflow-x: auto;
+                overflow: auto;
+                height: 41px;
                 -webkit-overflow-scrolling: touch;
                 white-space: nowrap;
                 span {
@@ -60,6 +61,7 @@
                     height: 40px;
                     padding: 0 10px;
                     font-size: 14px;
+                    vertical-align: top;
                 }
                 &:nth-child(even) {
                     background: $gray-light;

src/Network/Request.es6

@@ -29,18 +29,21 @@ export default class Request extends util.Emitter
         this.emit('update', this._id, {
             type: type.type,
             subType: type.subType,
-            size: formatSize(xhr.getResponseHeader('Content-Length')),
+            size: getSize(xhr, true),
             time: util.now(),
             resHeaders: getHeaders(xhr)
         });
     }
     handleDone()
     {
+        var xhr = this._xhr;
+
         this.emit('update', this._id, {
-            status: this._xhr.status,
+            status: xhr.status,
             done: true,
+            size: getSize(xhr),
             time: util.now(),
-            resTxt: this._xhr.responseText
+            resTxt: xhr.responseText
         });
     }
 };
@@ -87,11 +90,36 @@ function getType(contentType)
     }
 }
 
-function formatSize(size)
+function getSize(xhr, headersOnly)
 {
-    size = util.toNum(size);
+    var size = 0;
+
+    function getStrSize()
+    {
+        if (!headersOnly)
+        {
+            var resTxt = xhr.responseText;
+            if (resTxt) size = lenToUtf8Bytes(resTxt);
+        }
+    }
+
+    try {
+        size = util.toNum(xhr.getResponseHeader('Content-Length'));
+    } catch (e)
+    {
+        getStrSize();
+    }
+
+    if (size === 0) getStrSize();
 
     if (size < 1024) return size + 'B';
 
     return (size / 1024).toFixed(1) + 'KB';
+}
+
+function lenToUtf8Bytes(str)
+{
+    var m = encodeURIComponent(str).match(/%[89ABab]/g);
+
+    return str.length + (m ? m.length : 0);
 }