code.vuplus.com Git - vuplus_webkit/blob - Source/WebCore/inspector/front-end/ResourceTimingView.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 WebInspector.ResourceTimingView = function(resource)
  32 {
  33     WebInspector.View.call(this);
  34     this.element.addStyleClass("resource-timing-view");
  35
  36     this._resource = resource;
  37
  38     resource.addEventListener("timing changed", this._refresh, this);
  39 }
  40
  41 WebInspector.ResourceTimingView.prototype = {
  42     show: function(parentElement)
  43     {
  44         if (!this._resource.timing) {
  45             if (!this._emptyView) {
  46                 this._emptyView = new WebInspector.EmptyView(WebInspector.UIString("This request has no detailed timing info."));
  47                 this.addChildView(this._emptyView);
  48                 this._emptyView.show();
  49                 this.innerView = this._emptyView;
  50             }
  51             WebInspector.View.prototype.show.call(this, parentElement);
  52             return;
  53         }
  54
  55         if (this._emptyView) {
  56             this.removeChildView(this._emptyView);
  57             delete this._emptyView;
  58         }
  59
  60         this._refresh();
  61         WebInspector.View.prototype.show.call(this, parentElement);
  62     },
  63
  64     _refresh: function()
  65     {
  66         if (this._tableElement)
  67             this._tableElement.parentElement.removeChild(this._tableElement);
  68
  69         this._tableElement = WebInspector.ResourceTimingView.createTimingTable(this._resource);
  70         this.element.appendChild(this._tableElement);
  71     }
  72 }
  73
  74 WebInspector.ResourceTimingView.createTimingTable = function(resource)
  75 {
  76     var tableElement = document.createElement("table");
  77     var rows = [];
  78
  79     function addRow(title, className, start, end, color)
  80     {
  81         var row = {};
  82         row.title = title;
  83         row.className = className;
  84         row.start = start;
  85         row.end = end;
  86         rows.push(row);
  87     }
  88
  89     if (resource.timing.proxyStart !== -1)
  90         addRow(WebInspector.UIString("Proxy"), "proxy", resource.timing.proxyStart, resource.timing.proxyEnd);
  91
  92     if (resource.timing.dnsStart !== -1)
  93         addRow(WebInspector.UIString("DNS Lookup"), "dns", resource.timing.dnsStart, resource.timing.dnsEnd);
  94
  95     if (resource.timing.connectStart !== -1) {
  96         if (resource.connectionReused)
  97             addRow(WebInspector.UIString("Blocking"), "connecting", resource.timing.connectStart, resource.timing.connectEnd);
  98         else {
  99             var connectStart = resource.timing.connectStart;
 100             // Connection includes DNS, subtract it here.
 101             if (resource.timing.dnsStart !== -1)
 102                 connectStart += resource.timing.dnsEnd - resource.timing.dnsStart;
 103             addRow(WebInspector.UIString("Connecting"), "connecting", connectStart, resource.timing.connectEnd);
 104         }
 105     }
 106
 107     if (resource.timing.sslStart !== -1)
 108         addRow(WebInspector.UIString("SSL"), "ssl", resource.timing.sslStart, resource.timing.sslEnd);
 109
 110     var sendStart = resource.timing.sendStart;
 111     if (resource.timing.sslStart !== -1)
 112         sendStart += resource.timing.sslEnd - resource.timing.sslStart;
 113
 114     addRow(WebInspector.UIString("Sending"), "sending", resource.timing.sendStart, resource.timing.sendEnd);
 115     addRow(WebInspector.UIString("Waiting"), "waiting", resource.timing.sendEnd, resource.timing.receiveHeadersEnd);
 116     addRow(WebInspector.UIString("Receiving"), "receiving", (resource.responseReceivedTime - resource.timing.requestTime) * 1000, (resource.endTime - resource.timing.requestTime) * 1000);
 117
 118     const chartWidth = 200;
 119     var total = (resource.endTime - resource.timing.requestTime) * 1000;
 120     var scale = chartWidth / total;
 121
 122     for (var i = 0; i < rows.length; ++i) {
 123         var tr = document.createElement("tr");
 124         tableElement.appendChild(tr);
 125
 126         var td = document.createElement("td");
 127         td.textContent = rows[i].title;
 128         tr.appendChild(td);
 129
 130         td = document.createElement("td");
 131         td.width = chartWidth + "px";
 132
 133         var row = document.createElement("div");
 134         row.className = "network-timing-row";
 135         td.appendChild(row);
 136
 137         var bar = document.createElement("span");
 138         bar.className = "network-timing-bar " + rows[i].className;
 139         bar.style.left = scale * rows[i].start + "px";
 140         bar.style.right = scale * (total - rows[i].end) + "px";
 141         bar.style.backgroundColor = rows[i].color;
 142         bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
 143         row.appendChild(bar);
 144
 145         var title = document.createElement("span");
 146         title.className = "network-timing-bar-title";
 147         if (total - rows[i].end < rows[i].start)
 148             title.style.right = (scale * (total - rows[i].end) + 3) + "px";
 149         else
 150             title.style.left = (scale * rows[i].start + 3) + "px";
 151         title.textContent = Number.secondsToString((rows[i].end - rows[i].start) / 1000);
 152         row.appendChild(title);
 153
 154         tr.appendChild(td);
 155     }
 156     return tableElement;
 157 }
 158
 159 WebInspector.ResourceTimingView.prototype.__proto__ = WebInspector.View.prototype;