Dev: Network, performance timing

src/Network/Network.es6

@@ -1,4 +1,7 @@
 import Tool from '../DevTools/Tool.es6'
+import util from '../util'
+
+require('./Network.scss');
 
 export default class Network extends Tool
 {
@@ -6,9 +9,121 @@ export default class Network extends Tool
     {
         super();
         this.name = 'network';
+        this._performanceTimingData = [];
+
+        this._tpl = require('./Network.hbs');
     }
     init($el)
     {
         super.init($el);
+
+        window.addEventListener('load', () =>
+        {
+            // SetTimeout is required to make sure timing data is initialized.
+            setTimeout(() =>
+            {
+                this._getPerformanceTimingData()
+            }, 3000);
+        }, false);
+    }
+    _getPerformanceTimingData()
+    {
+        var performance = window.webkitPerformance || window.performance,
+            timing = performance.timing;
+
+        var data = [];
+
+        var {
+                navigationStart,
+                unloadEventStart,
+                unloadEventEnd,
+                redirectStart,
+                redirectEnd,
+                fetchStart,
+                domainLookupStart,
+                domainLookupEnd,
+                connectStart,
+                connectEnd,
+                secureConnectionStart,
+                requestStart,
+                responseStart,
+                responseEnd,
+                domLoading,
+                domInteractive,
+                domContentLoadedEventStart,
+                domContentLoadedEventEnd,
+                domComplete,
+                loadEventStart,
+                loadEventEnd
+            } = timing;
+
+        var start = navigationStart,
+            end = loadEventEnd,
+            total = end - start;
+
+        function getData(name, startTime, endTime)
+        {
+            var duration = endTime - startTime;
+
+            return {
+                name: name,
+                start: (startTime - start) / total * 100,
+                duration: duration,
+                len: duration / total * 100
+            };
+        }
+
+        data.push(getData('Total', navigationStart, loadEventEnd));
+        data.push(getData('Network/Server', navigationStart, responseStart));
+        data.push(getData('App cache', fetchStart, domainLookupStart));
+        data.push(getData('DNS', domainLookupStart, domainLookupEnd));
+        data.push(getData('TCP', connectStart, connectEnd));
+        data.push(getData('Time to First Byte', requestStart, responseStart));
+        data.push(getData('Response', responseStart, responseEnd));
+        data.push(getData('Unload', unloadEventStart, unloadEventEnd));
+        data.push(getData('DOM Processing', domLoading, domComplete));
+        data.push(getData('DOM Construction', domLoading, domInteractive));
+        data.push(getData('DOM Content Loaded Event', domContentLoadedEventStart, domContentLoadedEventEnd));
+        data.push(getData('Load Event', loadEventStart, loadEventEnd));
+
+        this._performanceTimingData = data;
+
+        var performanceTiming = {};
+        [
+            'navigationStart',
+            'unloadEventStart',
+            'unloadEventEnd',
+            'redirectStart',
+            'redirectEnd',
+            'fetchStart',
+            'domainLookupStart',
+            'domainLookupEnd',
+            'connectStart',
+            'connectEnd',
+            'secureConnectionStart',
+            'requestStart',
+            'responseStart',
+            'responseEnd',
+            'domLoading',
+            'domInteractive',
+            'domContentLoadedEventStart',
+            'domContentLoadedEventEnd',
+            'domComplete',
+            'loadEventStart',
+            'loadEventEnd'
+        ].forEach((val) =>
+        {
+            performanceTiming[val] = timing[val] === 0 ? 0 : timing[val] - start;
+        });
+        this._performanceTiming = performanceTiming;
+
+        this._render();
+    }
+    _render()
+    {
+        this._$el.html(this._tpl({
+            data: this._performanceTimingData,
+            timing: this._performanceTiming
+        }));
     }
 }

src/Network/Network.hbs

@@ -0,0 +1,28 @@
+<div class="eruda-performance-timing">
+    <div class="eruda-inner-wrapper">
+        {{#each data}}
+            <div class="eruda-bar {{#if @last}}eruda-last{{/if}}">
+                <span style="position:relative;left:{{start}}%;width:{{len}}%">{{name}}({{duration}}ms)</span>
+            </div>
+        {{/each}}
+    </div>
+</div>
+
+<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>

src/Network/Network.scss

@@ -0,0 +1,46 @@
+@import "../color";
+
+.dev-tools { .tools {
+    .network {
+        overflow-y: auto;
+        .performance-timing {
+            padding: 10px;
+            .inner-wrapper {
+                background: $blue;
+                .bar {
+                    border-bottom: 1px solid #fff;
+                    overflow-x: auto;
+                    span {
+                        font-size: 14px;
+                        white-space: nowrap;
+                        color: #fff;
+                        padding: 5px 0;
+                        background: $red-dark;
+                        display: inline-block;
+                    }
+                    &.last {
+                        border-bottom: none;
+                    }
+                }
+            }
+        }
+        .performance-timing-data {
+            padding: 0 10px 10px;
+
+            table {
+                width: 100%;
+                background: #fff;
+                border-collapse: collapse;
+                th {
+                    background: $gray;
+                    text-align: left;
+                    color: #fff;
+                }
+                th, td {
+                    padding: 10px;
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+} }