Commit 6c34e6d6 authored by apavlov@chromium.org's avatar apavlov@chromium.org
Browse files

2010-03-03 Alexander Pavlov <apavlov@chromium.org>

        Reviewed by Pavel Feldman.

        Web Inspector: resources panel only shows uncompressed resource size.
        https://bugs.webkit.org/show_bug.cgi?id=35403

        * English.lproj/localizedStrings.js:
        * inspector/InspectorResource.cpp:
        (WebCore::InspectorResource::updateScriptObject):
        * inspector/front-end/AbstractTimelinePanel.js:
        (WebInspector.AbstractTimelinePanel.prototype.refresh):
        * inspector/front-end/AuditRules.js:
        (WebInspector.AuditRules.GzipRule.prototype.doRun):
        (WebInspector.AuditRules.GzipRule.prototype._shouldCompress):
        * inspector/front-end/ImageView.js:
        (WebInspector.ImageView):
        * inspector/front-end/Resource.js:
        (WebInspector.Resource.prototype.get resourceSize):
        (WebInspector.Resource.prototype.set resourceSize):
        (WebInspector.Resource.prototype.get transferSize):
        (WebInspector.Resource.CompareBySize):
        (WebInspector.Resource.CompareByTransferSize):
        * inspector/front-end/ResourcesPanel.js:
        (WebInspector.ResourcesPanel.prototype.populateSidebar):
        (WebInspector.ResourceTimeCalculator.prototype.computeBarGraphLabels):
        (WebInspector.ResourceTransferSizeCalculator.prototype.computeBarGraphLabels):
        (WebInspector.ResourceTransferSizeCalculator.prototype.computeBarGraphPercentages):
        (WebInspector.ResourceTransferSizeCalculator.prototype._value):
        (WebInspector.ResourceTransferSizeCalculator.prototype._networkBytes):
        (WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize):
        (WebInspector.ResourceGraph.prototype.refreshLabelPositions):
        (WebInspector.ResourceGraph.prototype.refresh):
        * inspector/front-end/inspector.css:
        * inspector/front-end/inspector.js:
        (WebInspector.updateResource):



git-svn-id: http://svn.webkit.org/repository/webkit/trunk@55466 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 829eca9c
2010-03-03 Alexander Pavlov <apavlov@chromium.org>
Reviewed by Pavel Feldman.
Web Inspector: resources panel only shows uncompressed resource size.
https://bugs.webkit.org/show_bug.cgi?id=35403
* English.lproj/localizedStrings.js:
* inspector/InspectorResource.cpp:
(WebCore::InspectorResource::updateScriptObject):
* inspector/front-end/AbstractTimelinePanel.js:
(WebInspector.AbstractTimelinePanel.prototype.refresh):
* inspector/front-end/AuditRules.js:
(WebInspector.AuditRules.GzipRule.prototype.doRun):
(WebInspector.AuditRules.GzipRule.prototype._shouldCompress):
* inspector/front-end/ImageView.js:
(WebInspector.ImageView):
* inspector/front-end/Resource.js:
(WebInspector.Resource.prototype.get resourceSize):
(WebInspector.Resource.prototype.set resourceSize):
(WebInspector.Resource.prototype.get transferSize):
(WebInspector.Resource.CompareBySize):
(WebInspector.Resource.CompareByTransferSize):
* inspector/front-end/ResourcesPanel.js:
(WebInspector.ResourcesPanel.prototype.populateSidebar):
(WebInspector.ResourceTimeCalculator.prototype.computeBarGraphLabels):
(WebInspector.ResourceTransferSizeCalculator.prototype.computeBarGraphLabels):
(WebInspector.ResourceTransferSizeCalculator.prototype.computeBarGraphPercentages):
(WebInspector.ResourceTransferSizeCalculator.prototype._value):
(WebInspector.ResourceTransferSizeCalculator.prototype._networkBytes):
(WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize):
(WebInspector.ResourceGraph.prototype.refreshLabelPositions):
(WebInspector.ResourceGraph.prototype.refresh):
* inspector/front-end/inspector.css:
* inspector/front-end/inspector.js:
(WebInspector.updateResource):
2010-03-03 Dan Bernstein <mitz@apple.com>
 
Build fix.
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -180,7 +180,7 @@ void InspectorResource::updateScriptObject(InspectorFrontend* frontend)
}
if (m_changes.hasChange(LengthChange)) {
jsonObject.set("contentLength", m_length);
jsonObject.set("resourceSize", m_length);
jsonObject.set("didLengthChange", true);
}
......
......@@ -308,8 +308,10 @@ WebInspector.AbstractTimelinePanel.prototype = {
staleItemsLength = this._staleItems.length;
}
const isBarOpaqueAtLeft = this.sidebarTree.selectedTreeElement && this.sidebarTree.selectedTreeElement.isBarOpaqueAtLeft;
for (var i = 0; i < staleItemsLength; ++i)
this._staleItems[i]._itemsTreeElement._itemGraph.refresh(this.calculator);
this._staleItems[i]._itemsTreeElement._itemGraph.refresh(this.calculator, isBarOpaqueAtLeft);
this._staleItems = [];
......
......@@ -107,7 +107,7 @@ WebInspector.AuditRules.GzipRule.prototype = {
for (var i = 0, length = resources.length; i < length; ++i) {
var resource = resources[i];
if (this._shouldCompress(resource)) {
var size = resource.contentLength;
var size = resource.resourceSize;
candidateSize += size;
if (this._isCompressed(resource)) {
compressedSize += size;
......@@ -145,7 +145,7 @@ WebInspector.AuditRules.GzipRule.prototype = {
_shouldCompress: function(resource)
{
return WebInspector.Resource.Type.isTextType(resource.type) && resource.domain && resource.contentLength !== undefined && resource.contentLength > 150;
return WebInspector.Resource.Type.isTextType(resource.type) && resource.domain && resource.resourceSize !== undefined && resource.resourceSize > 150;
}
}
......
......@@ -56,7 +56,7 @@ WebInspector.ImageView = function(resource)
var imageProperties = [
{ name: WebInspector.UIString("Dimensions"), value: WebInspector.UIString("%d × %d", this.imagePreviewElement.naturalWidth, this.imagePreviewElement.height) },
{ name: WebInspector.UIString("File size"), value: Number.bytesToString(this.resource.contentLength, WebInspector.UIString.bind(WebInspector)) },
{ name: WebInspector.UIString("File size"), value: Number.bytesToString(this.resource.resourceSize, WebInspector.UIString.bind(WebInspector)) },
{ name: WebInspector.UIString("MIME type"), value: this.resource.mimeType }
];
......
......@@ -272,22 +272,28 @@ WebInspector.Resource.prototype = {
return this._responseReceivedTime - this._startTime;
},
get contentLength()
get resourceSize()
{
return this._contentLength || 0;
return this._resourceSize || 0;
},
set contentLength(x)
set resourceSize(x)
{
if (this._contentLength === x)
if (this._resourceSize === x)
return;
this._contentLength = x;
this._resourceSize = x;
if (WebInspector.panels.resources)
WebInspector.panels.resources.refreshResource(this);
},
get transferSize()
{
// FIXME: this is wrong for chunked-encoding resources.
return this.cached ? 0 : Number(this.responseHeaders["Content-Length"] || this.resourceSize || 0);
},
get expectedContentLength()
{
return this._expectedContentLength || 0;
......@@ -603,9 +609,15 @@ WebInspector.Resource.CompareByLatency = function(a, b)
WebInspector.Resource.CompareBySize = function(a, b)
{
return a.contentLength - b.contentLength;
return a.resourceSize - b.resourceSize;
}
WebInspector.Resource.CompareByTransferSize = function(a, b)
{
return a.transferSize - b.transferSize;
}
WebInspector.Resource.StatusTextForCode = function(code)
{
return code ? code + " " + WebInspector.Resource.StatusText[code] : "";
......
......@@ -98,6 +98,7 @@ WebInspector.ResourcesPanel.prototype = {
{ name: WebInspector.UIString("Sort by Latency"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingLatency, calculator: transferDurationCalculator },
];
timeGraphItem.isBarOpaqueAtLeft = false;
timeGraphItem.selectedSortingOptionIndex = 1;
var sizeGraphItem = new WebInspector.SidebarTreeElement("resources-size-graph-sidebar-item", WebInspector.UIString("Size"));
......@@ -105,9 +106,11 @@ WebInspector.ResourcesPanel.prototype = {
var transferSizeCalculator = new WebInspector.ResourceTransferSizeCalculator();
sizeGraphItem.sortingOptions = [
{ name: WebInspector.UIString("Sort by Transfer Size"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize, calculator: transferSizeCalculator },
{ name: WebInspector.UIString("Sort by Size"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingSize, calculator: transferSizeCalculator },
];
sizeGraphItem.isBarOpaqueAtLeft = true;
sizeGraphItem.selectedSortingOptionIndex = 0;
this.graphsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("GRAPHS"), {}, true);
......@@ -826,18 +829,20 @@ WebInspector.ResourceTimeCalculator.prototype = {
computeBarGraphLabels: function(resource)
{
var leftLabel = "";
if (resource.latency > 0)
leftLabel = this.formatValue(resource.latency);
var rightLabel = "";
if (resource.responseReceivedTime !== -1 && resource.endTime !== -1)
rightLabel = this.formatValue(resource.endTime - resource.responseReceivedTime);
if (leftLabel && rightLabel) {
var hasLatency = resource.latency > 0;
if (hasLatency)
var leftLabel = this.formatValue(resource.latency);
else
var leftLabel = rightLabel;
if (hasLatency && rightLabel) {
var total = this.formatValue(resource.duration);
var tooltip = WebInspector.UIString("%s latency, %s download (%s total)", leftLabel, rightLabel, total);
} else if (leftLabel)
} else if (hasLatency)
var tooltip = WebInspector.UIString("%s latency", leftLabel);
else if (rightLabel)
var tooltip = WebInspector.UIString("%s download", rightLabel);
......@@ -941,16 +946,39 @@ WebInspector.ResourceTransferSizeCalculator = function()
WebInspector.ResourceTransferSizeCalculator.prototype = {
computeBarGraphLabels: function(resource)
{
const label = this.formatValue(this._value(resource));
var tooltip = label;
var networkBytes = this._networkBytes(resource);
var resourceBytes = this._value(resource);
if (networkBytes && networkBytes !== resourceBytes) {
// Transferred size is not the same as reported resource length.
var networkBytesString = this.formatValue(networkBytes);
var left = networkBytesString;
var right = this.formatValue(resourceBytes);
var tooltip = right ? WebInspector.UIString("%s (%s transferred)", right, networkBytesString) : right;
} else {
var left = this.formatValue(resourceBytes);
var right = left;
var tooltip = left;
}
if (resource.cached)
tooltip = WebInspector.UIString("%s (from cache)", tooltip);
return {left: label, right: label, tooltip: tooltip};
return {left: left, right: right, tooltip: tooltip};
},
computeBarGraphPercentages: function(item)
{
const resourceBytesAsPercent = (this._value(item) / this.boundarySpan) * 100;
const networkBytesAsPercent = this._networkBytes(item) ? (this._networkBytes(item) / this.boundarySpan) * 100 : resourceBytesAsPercent;
return {start: 0, middle: networkBytesAsPercent, end: resourceBytesAsPercent};
},
_value: function(resource)
{
return resource.contentLength;
return resource.resourceSize;
},
_networkBytes: function(resource)
{
return resource.transferSize;
},
formatValue: function(value)
......@@ -1141,6 +1169,11 @@ WebInspector.ResourceSidebarTreeElement.CompareByDescendingSize = function(a, b)
return -1 * WebInspector.Resource.CompareBySize(a.resource, b.resource);
}
WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize = function(a, b)
{
return -1 * WebInspector.Resource.CompareByTransferSize(a.resource, b.resource);
}
WebInspector.ResourceSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
WebInspector.ResourceGraph = function(resource)
......@@ -1198,8 +1231,15 @@ WebInspector.ResourceGraph.prototype = {
const labelPadding = 10;
const barRightElementOffsetWidth = this._barRightElement.offsetWidth;
const barLeftElementOffsetWidth = this._barLeftElement.offsetWidth;
const rightBarWidth = (barRightElementOffsetWidth - labelPadding);
const leftBarWidth = ((barLeftElementOffsetWidth - barRightElementOffsetWidth) - labelPadding);
if (this._isBarOpaqueAtLeft) {
var leftBarWidth = barLeftElementOffsetWidth - labelPadding;
var rightBarWidth = (barRightElementOffsetWidth - barLeftElementOffsetWidth) - labelPadding;
} else {
var leftBarWidth = (barLeftElementOffsetWidth - barRightElementOffsetWidth) - labelPadding;
var rightBarWidth = barRightElementOffsetWidth - labelPadding;
}
const labelLeftElementOffsetWidth = this._labelLeftElement.offsetWidth;
const labelRightElementOffsetWidth = this._labelRightElement.offsetWidth;
......@@ -1207,8 +1247,22 @@ WebInspector.ResourceGraph.prototype = {
const labelAfter = (labelRightElementOffsetWidth > rightBarWidth);
const graphElementOffsetWidth = this._graphElement.offsetWidth;
if (labelBefore && (graphElementOffsetWidth * (this._percentages.start / 100)) < (labelLeftElementOffsetWidth + 10))
var leftHidden = true;
if (labelAfter && (graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < (labelRightElementOffsetWidth + 10))
var rightHidden = true;
if (barLeftElementOffsetWidth == barRightElementOffsetWidth) {
// The left/right label data are the same, so a before/after label can be replaced by an on-bar label.
if (labelBefore && !labelAfter)
leftHidden = true;
else if (labelAfter && !labelBefore)
rightHidden = true;
}
if (labelBefore) {
if ((graphElementOffsetWidth * (this._percentages.start / 100)) < (labelLeftElementOffsetWidth + 10))
if (leftHidden)
this._labelLeftElement.addStyleClass("hidden");
this._labelLeftElement.style.setProperty("right", (100 - this._percentages.start) + "%");
this._labelLeftElement.addStyleClass("before");
......@@ -1218,7 +1272,7 @@ WebInspector.ResourceGraph.prototype = {
}
if (labelAfter) {
if ((graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < (labelRightElementOffsetWidth + 10))
if (rightHidden)
this._labelRightElement.addStyleClass("hidden");
this._labelRightElement.style.setProperty("left", this._percentages.end + "%");
this._labelRightElement.addStyleClass("after");
......@@ -1228,7 +1282,7 @@ WebInspector.ResourceGraph.prototype = {
}
},
refresh: function(calculator)
refresh: function(calculator, isBarOpaqueAtLeft)
{
var percentages = calculator.computeBarGraphPercentages(this.resource);
var labels = calculator.computeBarGraphLabels(this.resource);
......@@ -1243,11 +1297,32 @@ WebInspector.ResourceGraph.prototype = {
}
this._barLeftElement.style.setProperty("left", percentages.start + "%");
this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
this._barRightElement.style.setProperty("left", percentages.middle + "%");
this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
if (!isBarOpaqueAtLeft) {
this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
this._barRightElement.style.setProperty("left", percentages.middle + "%");
if (this._isBarOpaqueAtLeft != isBarOpaqueAtLeft) {
this._barLeftElement.addStyleClass("waiting");
this._barRightElement.removeStyleClass("waiting-right");
this._labelLeftElement.addStyleClass("waiting");
this._labelRightElement.removeStyleClass("waiting-right");
}
} else {
this._barLeftElement.style.setProperty("right", (100 - percentages.middle) + "%");
this._barRightElement.style.setProperty("left", percentages.start + "%");
if (this._isBarOpaqueAtLeft != isBarOpaqueAtLeft) {
this._barLeftElement.removeStyleClass("waiting");
this._barRightElement.addStyleClass("waiting-right");
this._labelLeftElement.removeStyleClass("waiting");
this._labelRightElement.addStyleClass("waiting-right");
}
}
this._isBarOpaqueAtLeft = isBarOpaqueAtLeft;
this._labelLeftElement.textContent = labels.left;
this._labelRightElement.textContent = labels.right;
......
......@@ -2761,6 +2761,10 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
margin-right: 5px;
}
.resources-graph-label.waiting-right {
margin-left: 5px;
}
.resources-graph-label.before {
color: rgba(0, 0, 0, 0.7);
text-shadow: none;
......@@ -2829,7 +2833,7 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
display: block;
}
.resources-graph-bar.waiting {
.resources-graph-bar.waiting, .resources-graph-bar.waiting-right {
opacity: 0.35;
}
......
......@@ -1096,7 +1096,7 @@ WebInspector.updateResource = function(identifier, payload)
}
if (payload.didLengthChange) {
resource.contentLength = payload.contentLength;
resource.resourceSize = payload.resourceSize;
}
if (payload.didCompletionChange) {
......
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