Home | History | Annotate | Download | only in network 
      1 /*
      2  * Copyright (C) 2010 Google Inc. All rights reserved.
      3  *
      4  * Redistribution and use in source and binary forms, with or without
      5  * modification, are permitted provided that the following conditions are
      6  * met:
      7  *
      8  *     * Redistributions of source code must retain the above copyright
      9  * notice, this list of conditions and the following disclaimer.
     10  *     * Redistributions in binary form must reproduce the above
     11  * copyright notice, this list of conditions and the following disclaimer
     12  * in the documentation and/or other materials provided with the
     13  * distribution.
     14  *     * Neither the name of Google Inc. nor the names of its
     15  * contributors may be used to endorse or promote products derived from
     16  * this software without specific prior written permission.
     17  *
     18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
     19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
     20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
     21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
     22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
     23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
     24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
     25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
     26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
     27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
     28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     29  */
     30 
     31 /**
     32  * @constructor
     33  * @extends {WebInspector.VBox}
     34  * @param {!WebInspector.NetworkRequest} request
     35  */
     36 WebInspector.RequestTimingView = function(request)
     37 {
     38     WebInspector.VBox.call(this);
     39     this.element.classList.add("resource-timing-view");
     40 
     41     this._request = request;
     42 }
     43 
     44 WebInspector.RequestTimingView.prototype = {
     45     wasShown: function()
     46     {
     47         this._request.addEventListener(WebInspector.NetworkRequest.Events.TimingChanged, this._refresh, this);
     48         this._request.addEventListener(WebInspector.NetworkRequest.Events.FinishedLoading, this._refresh, this);
     49 
     50         if (!this._request.timing) {
     51             if (!this._emptyView) {
     52                 this._emptyView = new WebInspector.EmptyView(WebInspector.UIString("This request has no detailed timing info."));
     53                 this._emptyView.show(this.element);
     54                 this.innerView = this._emptyView;
     55             }
     56             return;
     57         }
     58 
     59         if (this._emptyView) {
     60             this._emptyView.detach();
     61             delete this._emptyView;
     62         }
     63 
     64         this._refresh();
     65     },
     66 
     67     willHide: function()
     68     {
     69         this._request.removeEventListener(WebInspector.NetworkRequest.Events.TimingChanged, this._refresh, this);
     70         this._request.removeEventListener(WebInspector.NetworkRequest.Events.FinishedLoading, this._refresh, this);
     71     },
     72 
     73     _refresh: function()
     74     {
     75         if (this._tableElement)
     76             this._tableElement.remove();
     77 
     78         this._tableElement = WebInspector.RequestTimingView.createTimingTable(this._request);
     79         this.element.appendChild(this._tableElement);
     80     },
     81 
     82     __proto__: WebInspector.VBox.prototype
     83 }
     84 
     85 
     86 /**
     87  * @param {!WebInspector.NetworkRequest} request
     88  * @return {!Element}
     89  */
     90 WebInspector.RequestTimingView.createTimingTable = function(request)
     91 {
     92     var tableElement = document.createElementWithClass("table", "network-timing-table");
     93 
     94     /**
     95      * @param {string} title
     96      * @param {string} className
     97      * @param {number} start
     98      * @param {number} end
     99      */
    100     function addRow(title, className, start, end)
    101     {
    102         var tr = tableElement.createChild("tr");
    103         tr.createChild("td").createTextChild(title);
    104         var td = tr.createChild("td");
    105         td.width = chartWidth + "px";
    106         var row = td.createChild("div", "network-timing-row");
    107 
    108         var bar = row.createChild("span", "network-timing-bar " + className);
    109         bar.style.left = Math.floor(scale * start) + "px";
    110         bar.style.right = Math.floor(scale * (total - end)) + "px";
    111         bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
    112 
    113         var label = row.createChild("span", "network-timing-bar-title");
    114         if (total - end < start)
    115             label.style.right = (scale * (total - end)) + "px";
    116         else
    117             label.style.left = (scale * start) + "px";
    118         label.textContent = Number.secondsToString((end - start) / 1000, true);
    119     }
    120 
    121     /**
    122      * @param {!Array.<number>} numbers
    123      * @return {number|undefined}
    124      */
    125     function firstPositive(numbers)
    126     {
    127         for (var i = 0; i < numbers.length; ++i) {
    128             if (numbers[i] > 0)
    129                 return numbers[i];
    130         }
    131         return undefined;
    132     }
    133 
    134     function createCommunicationTimingTable()
    135     {
    136         if (blocking > 0)
    137             addRow(WebInspector.UIString("Stalled"), "blocking", 0, blocking);
    138 
    139         if (timing.proxyStart !== -1)
    140             addRow(WebInspector.UIString("Proxy negotiation"), "proxy", timing.proxyStart, timing.proxyEnd);
    141 
    142         if (timing.dnsStart !== -1)
    143             addRow(WebInspector.UIString("DNS Lookup"), "dns", timing.dnsStart, timing.dnsEnd);
    144 
    145         if (timing.connectStart !== -1)
    146             addRow(WebInspector.UIString("Initial connection"), "connecting", timing.connectStart, timing.connectEnd);
    147 
    148         if (timing.sslStart !== -1)
    149             addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
    150 
    151         addRow(WebInspector.UIString("Request sent"), "sending", timing.sendStart, timing.sendEnd);
    152         addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.sendEnd, timing.receiveHeadersEnd);
    153 
    154         if (request.endTime !== -1)
    155             addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
    156     }
    157 
    158     function createServiceWorkerTimingTable()
    159     {
    160         addRow(WebInspector.UIString("Stalled"), "blocking", 0, timing.serviceWorkerFetchStart);
    161 
    162         addRow(WebInspector.UIString("Request to ServiceWorker"), "serviceworker", timing.serviceWorkerFetchStart, timing.serviceWorkerFetchEnd);
    163         addRow(WebInspector.UIString("ServiceWorker Preparation"), "serviceworker", timing.serviceWorkerFetchStart, timing.serviceWorkerFetchReady);
    164         addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.serviceWorkerFetchEnd, timing.receiveHeadersEnd);
    165 
    166         if (request.endTime !== -1)
    167             addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
    168     }
    169 
    170     var timing = request.timing;
    171     var blocking = firstPositive([timing.dnsStart, timing.connectStart, timing.sendStart]);
    172     var endTime = firstPositive([request.endTime, request.responseReceivedTime, timing.requestTime]);
    173     var total = (endTime - timing.requestTime) * 1000;
    174     const chartWidth = 200;
    175     var scale = chartWidth / total;
    176 
    177     if (request.fetchedViaServiceWorker)
    178         createServiceWorkerTimingTable();
    179     else
    180         createCommunicationTimingTable();
    181 
    182     if (!request.finished) {
    183         var cell = tableElement.createChild("tr").createChild("td", "caution");
    184         cell.colSpan = 2;
    185         cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!"));
    186     }
    187 
    188     return tableElement;
    189 }
    190