Commit bffed434 authored by pfeldman@chromium.org's avatar pfeldman@chromium.org

2010-11-22 Pavel Feldman <pfeldman@chromium.org>

        Reviewed by Yury Semikhatsky.

        Web Inspector: add timing tab to the network item view.
        https://bugs.webkit.org/show_bug.cgi?id=49920

        * WebCore.gypi:
        * WebCore.vcproj/WebCore.vcproj:
        * inspector/front-end/NetworkItemView.js:
        (WebInspector.NetworkItemView):
        * inspector/front-end/NetworkPanel.js:
        (WebInspector.NetworkPanel.prototype._showPopover):
        * inspector/front-end/Resource.js:
        (WebInspector.Resource.prototype.set timing):
        * inspector/front-end/ResourceTimingView.js: Added.
        (WebInspector.ResourceTimingView):
        (WebInspector.ResourceTimingView.prototype.show):
        (WebInspector.ResourceTimingView.prototype._refresh):
        (WebInspector.ResourceTimingView.createTimingTable):
        * inspector/front-end/WebKit.qrc:
        * inspector/front-end/inspector.html:
        * inspector/front-end/networkPanel.css:
        (#network-views .network-item-view .tabbed-pane-header):
        (.resource-timing-view):
        (.resource-timing-view table):
        (.resource-timing-view .network-timing-bar):
        (.resource-timing-view .network-timing-bar.proxy):
        (.resource-timing-view .network-timing-bar.dns):
        (.resource-timing-view .network-timing-bar.connecting):
        (.resource-timing-view .network-timing-bar.ssl):
        (.resource-timing-view .network-timing-bar.sending):
        (.resource-timing-view .network-timing-bar.waiting):
        (.resource-timing-view .network-timing-bar.receiving):
        (.resource-timing-view.visible):


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@72657 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent cf67e2c2
2010-11-22 Pavel Feldman <pfeldman@chromium.org>
Reviewed by Yury Semikhatsky.
Web Inspector: add timing tab to the network item view.
https://bugs.webkit.org/show_bug.cgi?id=49920
* WebCore.gypi:
* WebCore.vcproj/WebCore.vcproj:
* inspector/front-end/NetworkItemView.js:
(WebInspector.NetworkItemView):
* inspector/front-end/NetworkPanel.js:
(WebInspector.NetworkPanel.prototype._showPopover):
* inspector/front-end/Resource.js:
(WebInspector.Resource.prototype.set timing):
* inspector/front-end/ResourceTimingView.js: Added.
(WebInspector.ResourceTimingView):
(WebInspector.ResourceTimingView.prototype.show):
(WebInspector.ResourceTimingView.prototype._refresh):
(WebInspector.ResourceTimingView.createTimingTable):
* inspector/front-end/WebKit.qrc:
* inspector/front-end/inspector.html:
* inspector/front-end/networkPanel.css:
(#network-views .network-item-view .tabbed-pane-header):
(.resource-timing-view):
(.resource-timing-view table):
(.resource-timing-view .network-timing-bar):
(.resource-timing-view .network-timing-bar.proxy):
(.resource-timing-view .network-timing-bar.dns):
(.resource-timing-view .network-timing-bar.connecting):
(.resource-timing-view .network-timing-bar.ssl):
(.resource-timing-view .network-timing-bar.sending):
(.resource-timing-view .network-timing-bar.waiting):
(.resource-timing-view .network-timing-bar.receiving):
(.resource-timing-view.visible):
2010-11-24 Pavel Feldman <pfeldman@chromium.org>
Not reviewed. Follow up to r72652 (style id change in inspector).
Bvar localizedStrings = new Object;
......
......@@ -4487,6 +4487,7 @@
'inspector/front-end/ResourceCookiesView.js',
'inspector/front-end/ResourceManager.js',
'inspector/front-end/ResourceHeadersView.js',
'inspector/front-end/ResourceTimingView.js',
'inspector/front-end/ResourceView.js',
'inspector/front-end/ResourcesPanel.js',
'inspector/front-end/ScopeChainSidebarPane.js',
......
......@@ -64993,6 +64993,10 @@
RelativePath="..\inspector\front-end\ResourcesPanel.js"
>
</File>
<File
RelativePath="..\inspector\front-end\ResourceTimingView.js"
>
</File>
<File
RelativePath="..\inspector\front-end\ResourceView.js"
>
......@@ -46,6 +46,12 @@ WebInspector.NetworkItemView = function(resource)
this._tabbedPane.appendTab("content", WebInspector.UIString("Content"), this._contentView);
}
this._tabbedPane.appendTab("cookies", WebInspector.UIString("Cookies"), this._cookiesView);
if (Preferences.showTimingTab) {
var timingView = new WebInspector.ResourceTimingView(resource);
this._tabbedPane.appendTab("timing", WebInspector.UIString("Timing"), timingView);
}
this._tabbedPane.addEventListener("tab-selected", this._tabSelected, this);
}
......
......@@ -892,87 +892,8 @@ WebInspector.NetworkPanel.prototype = {
_showPopover: function(anchor)
{
var tableElement = document.createElement("table");
var resource = anchor.parentElement.resource;
var rows = [];
function addRow(title, start, end, color)
{
var row = {};
row.title = title;
row.start = start;
row.end = end;
rows.push(row);
}
if (resource.timing.proxyStart !== -1)
addRow(WebInspector.UIString("Proxy"), resource.timing.proxyStart, resource.timing.proxyEnd);
if (resource.timing.dnsStart !== -1)
addRow(WebInspector.UIString("DNS Lookup"), resource.timing.dnsStart, resource.timing.dnsEnd);
if (resource.timing.connectStart !== -1) {
if (resource.connectionReused)
addRow(WebInspector.UIString("Blocking"), resource.timing.connectStart, resource.timing.connectEnd);
else {
var connectStart = resource.timing.connectStart;
// Connection includes DNS, subtract it here.
if (resource.timing.dnsStart !== -1)
connectStart += resource.timing.dnsEnd - resource.timing.dnsStart;
addRow(WebInspector.UIString("Connecting"), connectStart, resource.timing.connectEnd);
}
}
if (resource.timing.sslStart !== -1)
addRow(WebInspector.UIString("SSL"), resource.timing.sslStart, resource.timing.sslEnd);
var sendStart = resource.timing.sendStart;
if (resource.timing.sslStart !== -1)
sendStart += resource.timing.sslEnd - resource.timing.sslStart;
addRow(WebInspector.UIString("Sending"), resource.timing.sendStart, resource.timing.sendEnd);
addRow(WebInspector.UIString("Waiting"), resource.timing.sendEnd, resource.timing.receiveHeadersEnd);
addRow(WebInspector.UIString("Receiving"), (resource.responseReceivedTime - resource.timing.requestTime) * 1000, (resource.endTime - resource.timing.requestTime) * 1000);
const chartWidth = 200;
var total = (resource.endTime - resource.timing.requestTime) * 1000;
var scale = chartWidth / total;
for (var i = 0; i < rows.length; ++i) {
var tr = document.createElement("tr");
tableElement.appendChild(tr);
var td = document.createElement("td");
td.textContent = rows[i].title;
tr.appendChild(td);
td = document.createElement("td");
td.width = chartWidth + "px";
var row = document.createElement("div");
row.className = "network-timing-row";
td.appendChild(row);
var bar = document.createElement("span");
bar.className = "network-timing-bar";
bar.style.left = scale * rows[i].start + "px";
bar.style.right = scale * (total - rows[i].end) + "px";
bar.style.backgroundColor = rows[i].color;
bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
row.appendChild(bar);
var title = document.createElement("span");
title.className = "network-timing-bar-title";
if (total - rows[i].end < rows[i].start)
title.style.right = (scale * (total - rows[i].end) + 3) + "px";
else
title.style.left = (scale * rows[i].start + 3) + "px";
title.textContent = Number.millisToString(rows[i].end - rows[i].start);
row.appendChild(title);
tr.appendChild(td);
}
var tableElement = WebInspector.ResourceTimingView.createTimingTable(resource);
var popover = new WebInspector.Popover(tableElement);
popover.show(anchor);
return popover;
......
......@@ -299,8 +299,10 @@ WebInspector.Resource.prototype = {
set timing(x)
{
if (!this._cached)
if (!this._cached) {
this._timing = x;
this.dispatchEventToListeners("timing changed");
}
},
get mimeType()
......
/*
* Copyright (C) 2010 Google Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
* met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following disclaimer
* in the documentation and/or other materials provided with the
* distribution.
* * Neither the name of Google Inc. nor the names of its
* contributors may be used to endorse or promote products derived from
* this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
WebInspector.ResourceTimingView = function(resource)
{
WebInspector.View.call(this);
this.element.addStyleClass("resource-timing-view");
this._resource = resource;
resource.addEventListener("timing changed", this._refresh, this);
}
WebInspector.ResourceTimingView.prototype = {
show: function(parentElement)
{
if (!this._resource.timing) {
if (!this._emptyMsgElement) {
this._emptyMsgElement = document.createElement("div");
this._emptyMsgElement.className = "storage-empty-view";
this._emptyMsgElement.textContent = WebInspector.UIString("This request has no detailed timing info.");
this.element.appendChild(this._emptyMsgElement);
}
WebInspector.View.prototype.show.call(this, parentElement);
return;
}
if (this._emptyMsgElement)
this._emptyMsgElement.parentElement.removeChild(this._emptyMsgElement);
this._refresh();
WebInspector.View.prototype.show.call(this, parentElement);
},
_refresh: function()
{
if (this._tableElement)
this._tableElement.parentElement.removeChild(this._tableElement);
this._tableElement = WebInspector.ResourceTimingView.createTimingTable(this._resource);
this.element.appendChild(this._tableElement);
}
}
WebInspector.ResourceTimingView.createTimingTable = function(resource)
{
var tableElement = document.createElement("table");
var rows = [];
function addRow(title, className, start, end, color)
{
var row = {};
row.title = title;
row.className = className;
row.start = start;
row.end = end;
rows.push(row);
}
if (resource.timing.proxyStart !== -1)
addRow(WebInspector.UIString("Proxy"), "proxy", resource.timing.proxyStart, resource.timing.proxyEnd);
if (resource.timing.dnsStart !== -1)
addRow(WebInspector.UIString("DNS Lookup"), "dns", resource.timing.dnsStart, resource.timing.dnsEnd);
if (resource.timing.connectStart !== -1) {
if (resource.connectionReused)
addRow(WebInspector.UIString("Blocking"), "connecting", resource.timing.connectStart, resource.timing.connectEnd);
else {
var connectStart = resource.timing.connectStart;
// Connection includes DNS, subtract it here.
if (resource.timing.dnsStart !== -1)
connectStart += resource.timing.dnsEnd - resource.timing.dnsStart;
addRow(WebInspector.UIString("Connecting"), "connecting", connectStart, resource.timing.connectEnd);
}
}
if (resource.timing.sslStart !== -1)
addRow(WebInspector.UIString("SSL"), "ssl", resource.timing.sslStart, resource.timing.sslEnd);
var sendStart = resource.timing.sendStart;
if (resource.timing.sslStart !== -1)
sendStart += resource.timing.sslEnd - resource.timing.sslStart;
addRow(WebInspector.UIString("Sending"), "sending", resource.timing.sendStart, resource.timing.sendEnd);
addRow(WebInspector.UIString("Waiting"), "waiting", resource.timing.sendEnd, resource.timing.receiveHeadersEnd);
addRow(WebInspector.UIString("Receiving"), "receiving", (resource.responseReceivedTime - resource.timing.requestTime) * 1000, (resource.endTime - resource.timing.requestTime) * 1000);
const chartWidth = 200;
var total = (resource.endTime - resource.timing.requestTime) * 1000;
var scale = chartWidth / total;
for (var i = 0; i < rows.length; ++i) {
var tr = document.createElement("tr");
tableElement.appendChild(tr);
var td = document.createElement("td");
td.textContent = rows[i].title;
tr.appendChild(td);
td = document.createElement("td");
td.width = chartWidth + "px";
var row = document.createElement("div");
row.className = "network-timing-row";
td.appendChild(row);
var bar = document.createElement("span");
bar.className = "network-timing-bar " + rows[i].className;
bar.style.left = scale * rows[i].start + "px";
bar.style.right = scale * (total - rows[i].end) + "px";
bar.style.backgroundColor = rows[i].color;
bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
row.appendChild(bar);
var title = document.createElement("span");
title.className = "network-timing-bar-title";
if (total - rows[i].end < rows[i].start)
title.style.right = (scale * (total - rows[i].end) + 3) + "px";
else
title.style.left = (scale * rows[i].start + 3) + "px";
title.textContent = Number.millisToString(rows[i].end - rows[i].start);
row.appendChild(title);
tr.appendChild(td);
}
return tableElement;
}
WebInspector.ResourceTimingView.prototype.__proto__ = WebInspector.View.prototype;
......@@ -47,6 +47,7 @@ var Preferences = {
resourceExportEnabled: false,
fileSystemEnabled: false,
useDataURLForResourceImageIcons: true,
showTimingTab: false,
debugMode: false
}
......
......@@ -75,6 +75,7 @@
<file>ResourceCookiesView.js</file>
<file>ResourceHeadersView.js</file>
<file>ResourceManager.js</file>
<file>ResourceTimingView.js</file>
<file>ResourceView.js</file>
<file>ResourcesPanel.js</file>
<file>ScopeChainSidebarPane.js</file>
......
......@@ -115,6 +115,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<script type="text/javascript" src="AuditFormatters.js"></script>
<script type="text/javascript" src="ResourceHeadersView.js"></script>
<script type="text/javascript" src="ResourceCookiesView.js"></script>
<script type="text/javascript" src="ResourceTimingView.js"></script>
<script type="text/javascript" src="NetworkItemView.js"></script>
<script type="text/javascript" src="ResourceView.js"></script>
<script type="text/javascript" src="SourceFrame.js"></script>
......
......@@ -637,6 +637,7 @@
height: 31px;
padding-top: 8px;
padding-left: 25px;
white-space: nowrap;
}
#network-views.small .network-item-view .tabbed-pane-header {
......@@ -747,3 +748,63 @@
font-weight: bold;
font-size: 11px;
}
.resource-timing-view {
display: none;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 6px;
font-weight: bold;
font-size: 11px;
color: rgb(30, 30, 30);
}
.resource-timing-view table {
border-spacing: 21px 0;
}
.resource-timing-view .network-timing-bar {
opacity: 1;
}
.resource-timing-view .network-timing-bar.proxy {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(239, 228, 176)), to(rgb(139, 128, 76)));
border-left: 1px solid rgb(139, 128, 76);
}
.resource-timing-view .network-timing-bar.dns {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(153, 208, 216)), to(rgb(81, 174, 189)));
border-left: 1px solid rgb(81, 174, 189);
}
.resource-timing-view .network-timing-bar.connecting {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(203, 232, 145)), to(rgb(160, 214, 56)));
border-left: 1px solid rgb(160, 214, 56);
}
.resource-timing-view .network-timing-bar.ssl {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(21, 232, 145)), to(rgb(216, 149, 132)));
border-left: 1px solid rgb(216, 149, 132);
}
.resource-timing-view .network-timing-bar.sending {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(232, 192, 182)), to(rgb(216, 147, 130)));
border-left: 1px solid rgb(216, 147, 130);
}
.resource-timing-view .network-timing-bar.waiting {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(188, 179, 208)), to(rgb(141, 125, 175)));
border-left: 1px solid rgb(141, 125, 175);
}
.resource-timing-view .network-timing-bar.receiving {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(214, 214, 214)), to(rgb(182, 182, 182)));
border-left: 1px solid rgb(182, 182, 182);
}
.resource-timing-view.visible {
display: block;
}
......@@ -47,6 +47,7 @@ var context = {}; // Used by WebCore's inspector routines.
Preferences.onlineDetectionEnabled = false;
Preferences.nativeInstrumentationEnabled = true;
Preferences.fileSystemEnabled = false;
Preferences.showTimingTab = true;
})();
var devtools = devtools || {};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment