src/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js

   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 WebInspector.RequestTimingView.createTimingTable = function(request)
  87 {
  88     var tableElement = document.createElement("table");
  89     tableElement.className = "network-timing-table";
  90     var rows = [];
  91
  92     function addRow(title, className, start, end)
  93     {
  94         var row = {};
  95         row.title = title;
  96         row.className = className;
  97         row.start = start;
  98         row.end = end;
  99         rows.push(row);
 100     }
 101
 102     function firstPositive(numbers)
 103     {
 104         for (var i = 0; i < numbers.length; ++i) {
 105             if (numbers[i] > 0)
 106                 return numbers[i];
 107         }
 108         return undefined;
 109     }
 110
 111     var timing = request.timing;
 112     var blocking = firstPositive([timing.dnsStart, timing.connectStart, timing.sendStart]);
 113     var endTime = firstPositive([request.endTime, request.responseReceivedTime, timing.requestTime]);
 114     var total = (endTime - timing.requestTime) * 1000;
 115
 116     if (blocking > 0)
 117         addRow(WebInspector.UIString("Blocking"), "blocking", 0, blocking);
 118
 119     if (timing.proxyStart !== -1)
 120         addRow(WebInspector.UIString("Proxy"), "proxy", timing.proxyStart, timing.proxyEnd);
 121
 122     if (timing.dnsStart !== -1)
 123         addRow(WebInspector.UIString("DNS Lookup"), "dns", timing.dnsStart, timing.dnsEnd);
 124
 125     if (timing.connectStart !== -1)
 126         addRow(WebInspector.UIString("Connecting"), "connecting", timing.connectStart, timing.connectEnd);
 127
 128     if (timing.sslStart !== -1)
 129         addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
 130
 131     addRow(WebInspector.UIString("Sending"), "sending", timing.sendStart, timing.sendEnd);
 132     addRow(WebInspector.UIString("Waiting"), "waiting", timing.sendEnd, timing.receiveHeadersEnd);
 133
 134     if (request.endTime !== -1)
 135         addRow(WebInspector.UIString("Receiving"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
 136
 137     const chartWidth = 200;
 138     var scale = chartWidth / total;
 139
 140     for (var i = 0; i < rows.length; ++i) {
 141         var tr = document.createElement("tr");
 142         tableElement.appendChild(tr);
 143
 144         var td = document.createElement("td");
 145         td.textContent = rows[i].title;
 146         tr.appendChild(td);
 147
 148         td = document.createElement("td");
 149         td.width = chartWidth + "px";
 150
 151         var row = document.createElement("div");
 152         row.className = "network-timing-row";
 153         td.appendChild(row);
 154
 155         var bar = document.createElement("span");
 156         bar.className = "network-timing-bar " + rows[i].className;
 157         bar.style.left = Math.floor(scale * rows[i].start) + "px";
 158         bar.style.right = Math.floor(scale * (total - rows[i].end)) + "px";
 159         bar.style.backgroundColor = rows[i].color;
 160         bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
 161         row.appendChild(bar);
 162
 163         var title = document.createElement("span");
 164         title.className = "network-timing-bar-title";
 165         if (total - rows[i].end < rows[i].start)
 166             title.style.right = (scale * (total - rows[i].end) + 3) + "px";
 167         else
 168             title.style.left = (scale * rows[i].start + 3) + "px";
 169         title.textContent = Number.secondsToString((rows[i].end - rows[i].start) / 1000, true);
 170         row.appendChild(title);
 171
 172         tr.appendChild(td);
 173     }
 174
 175     if (!request.finished) {
 176         var cell = tableElement.createChild("tr").createChild("td", "caution");
 177         cell.colSpan = 2;
 178         cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!"));
 179     }
 180
 181     return tableElement;
 182 }