Changeset 55466 in webkit


Ignore:
Timestamp:
Mar 3, 2010 10:20:11 AM (14 years ago)
Author:
apavlov@chromium.org
Message:

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):
Location:
trunk/WebCore
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r55465 r55466  
     12010-03-03  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector: resources panel only shows uncompressed resource size.
     6        https://bugs.webkit.org/show_bug.cgi?id=35403
     7
     8        * English.lproj/localizedStrings.js:
     9        * inspector/InspectorResource.cpp:
     10        (WebCore::InspectorResource::updateScriptObject):
     11        * inspector/front-end/AbstractTimelinePanel.js:
     12        (WebInspector.AbstractTimelinePanel.prototype.refresh):
     13        * inspector/front-end/AuditRules.js:
     14        (WebInspector.AuditRules.GzipRule.prototype.doRun):
     15        (WebInspector.AuditRules.GzipRule.prototype._shouldCompress):
     16        * inspector/front-end/ImageView.js:
     17        (WebInspector.ImageView):
     18        * inspector/front-end/Resource.js:
     19        (WebInspector.Resource.prototype.get resourceSize):
     20        (WebInspector.Resource.prototype.set resourceSize):
     21        (WebInspector.Resource.prototype.get transferSize):
     22        (WebInspector.Resource.CompareBySize):
     23        (WebInspector.Resource.CompareByTransferSize):
     24        * inspector/front-end/ResourcesPanel.js:
     25        (WebInspector.ResourcesPanel.prototype.populateSidebar):
     26        (WebInspector.ResourceTimeCalculator.prototype.computeBarGraphLabels):
     27        (WebInspector.ResourceTransferSizeCalculator.prototype.computeBarGraphLabels):
     28        (WebInspector.ResourceTransferSizeCalculator.prototype.computeBarGraphPercentages):
     29        (WebInspector.ResourceTransferSizeCalculator.prototype._value):
     30        (WebInspector.ResourceTransferSizeCalculator.prototype._networkBytes):
     31        (WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize):
     32        (WebInspector.ResourceGraph.prototype.refreshLabelPositions):
     33        (WebInspector.ResourceGraph.prototype.refresh):
     34        * inspector/front-end/inspector.css:
     35        * inspector/front-end/inspector.js:
     36        (WebInspector.updateResource):
     37
    1382010-03-03  Dan Bernstein  <mitz@apple.com>
    239

  • trunk/WebCore/inspector/InspectorResource.cpp

    r54343 r55466  
    181181
    182182    if (m_changes.hasChange(LengthChange)) {
    183         jsonObject.set("contentLength", m_length);
     183        jsonObject.set("resourceSize", m_length);
    184184        jsonObject.set("didLengthChange", true);
    185185    }

  • trunk/WebCore/inspector/front-end/AbstractTimelinePanel.js

    r53545 r55466  
    309309        }
    310310
     311
     312        const isBarOpaqueAtLeft = this.sidebarTree.selectedTreeElement && this.sidebarTree.selectedTreeElement.isBarOpaqueAtLeft;
    311313        for (var i = 0; i < staleItemsLength; ++i)
    312             this._staleItems[i]._itemsTreeElement._itemGraph.refresh(this.calculator);
     314            this._staleItems[i]._itemsTreeElement._itemGraph.refresh(this.calculator, isBarOpaqueAtLeft);
    313315
    314316        this._staleItems = [];

  • trunk/WebCore/inspector/front-end/AuditRules.js

    r54591 r55466  
    108108                var resource = resources[i];
    109109                if (this._shouldCompress(resource)) {
    110                     var size = resource.contentLength;
     110                    var size = resource.resourceSize;
    111111                    candidateSize += size;
    112112                    if (this._isCompressed(resource)) {
    … …  
    146146    _shouldCompress: function(resource)
    147147    {
    148         return WebInspector.Resource.Type.isTextType(resource.type) && resource.domain && resource.contentLength !== undefined && resource.contentLength > 150;
     148        return WebInspector.Resource.Type.isTextType(resource.type) && resource.domain && resource.resourceSize !== undefined && resource.resourceSize > 150;
    149149    }
    150150}

  • trunk/WebCore/inspector/front-end/ImageView.js

    r48646 r55466  
    5757    var imageProperties = [
    5858        { name: WebInspector.UIString("Dimensions"), value: WebInspector.UIString("%d × %d", this.imagePreviewElement.naturalWidth, this.imagePreviewElement.height) },
    59         { name: WebInspector.UIString("File size"), value: Number.bytesToString(this.resource.contentLength, WebInspector.UIString.bind(WebInspector)) },
     59        { name: WebInspector.UIString("File size"), value: Number.bytesToString(this.resource.resourceSize, WebInspector.UIString.bind(WebInspector)) },
    6060        { name: WebInspector.UIString("MIME type"), value: this.resource.mimeType }
    6161    ];

  • trunk/WebCore/inspector/front-end/Resource.js

    r53405 r55466  
    273273    },
    274274
    275     get contentLength()
    276     {
    277         return this._contentLength || 0;
    278     },
    279 
    280     set contentLength(x)
    281     {
    282         if (this._contentLength === x)
    283             return;
    284 
    285         this._contentLength = x;
     275    get resourceSize()
     276    {
     277        return this._resourceSize || 0;
     278    },
     279
     280    set resourceSize(x)
     281    {
     282        if (this._resourceSize === x)
     283            return;
     284
     285        this._resourceSize = x;
    286286
    287287        if (WebInspector.panels.resources)
    288288            WebInspector.panels.resources.refreshResource(this);
     289    },
     290
     291    get transferSize()
     292    {
     293        // FIXME: this is wrong for chunked-encoding resources.
     294        return this.cached ? 0 : Number(this.responseHeaders["Content-Length"] || this.resourceSize || 0);
    289295    },
    290296
    … …  
    604610WebInspector.Resource.CompareBySize = function(a, b)
    605611{
    606     return a.contentLength - b.contentLength;
    607 }
     612    return a.resourceSize - b.resourceSize;
     613}
     614
     615WebInspector.Resource.CompareByTransferSize = function(a, b)
     616{
     617    return a.transferSize - b.transferSize;
     618}
     619
    608620
    609621WebInspector.Resource.StatusTextForCode = function(code)

  • trunk/WebCore/inspector/front-end/ResourcesPanel.js

    r55231 r55466  
    9999        ];
    100100
     101        timeGraphItem.isBarOpaqueAtLeft = false;
    101102        timeGraphItem.selectedSortingOptionIndex = 1;
    102103
    … …  
    106107        var transferSizeCalculator = new WebInspector.ResourceTransferSizeCalculator();
    107108        sizeGraphItem.sortingOptions = [
     109            { name: WebInspector.UIString("Sort by Transfer Size"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize, calculator: transferSizeCalculator },
    108110            { name: WebInspector.UIString("Sort by Size"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingSize, calculator: transferSizeCalculator },
    109111        ];
    110112
     113        sizeGraphItem.isBarOpaqueAtLeft = true;
    111114        sizeGraphItem.selectedSortingOptionIndex = 0;
    112115
    … …  
    827830    computeBarGraphLabels: function(resource)
    828831    {
    829         var leftLabel = "";
    830         if (resource.latency > 0)
    831             leftLabel = this.formatValue(resource.latency);
    832 
    833832        var rightLabel = "";
    834833        if (resource.responseReceivedTime !== -1 && resource.endTime !== -1)
    835834            rightLabel = this.formatValue(resource.endTime - resource.responseReceivedTime);
    836835
    837         if (leftLabel && rightLabel) {
     836        var hasLatency = resource.latency > 0;
     837        if (hasLatency)
     838            var leftLabel = this.formatValue(resource.latency);
     839        else
     840            var leftLabel = rightLabel;
     841
     842        if (hasLatency && rightLabel) {
    838843            var total = this.formatValue(resource.duration);
    839844            var tooltip = WebInspector.UIString("%s latency, %s download (%s total)", leftLabel, rightLabel, total);
    840         } else if (leftLabel)
     845        } else if (hasLatency)
    841846            var tooltip = WebInspector.UIString("%s latency", leftLabel);
    842847        else if (rightLabel)
    … …  
    942947    computeBarGraphLabels: function(resource)
    943948    {
    944         const label = this.formatValue(this._value(resource));
    945         var tooltip = label;
     949        var networkBytes = this._networkBytes(resource);
     950        var resourceBytes = this._value(resource);
     951        if (networkBytes && networkBytes !== resourceBytes) {
     952            // Transferred size is not the same as reported resource length.
     953            var networkBytesString = this.formatValue(networkBytes);
     954            var left = networkBytesString;
     955            var right = this.formatValue(resourceBytes);
     956            var tooltip = right ? WebInspector.UIString("%s (%s transferred)", right, networkBytesString) : right;
     957        } else {
     958            var left = this.formatValue(resourceBytes);
     959            var right = left;
     960            var tooltip = left;
     961        }
    946962        if (resource.cached)
    947963            tooltip = WebInspector.UIString("%s (from cache)", tooltip);
    948         return {left: label, right: label, tooltip: tooltip};
     964        return {left: left, right: right, tooltip: tooltip};
     965    },
     966
     967    computeBarGraphPercentages: function(item)
     968    {
     969        const resourceBytesAsPercent = (this._value(item) / this.boundarySpan) * 100;
     970        const networkBytesAsPercent = this._networkBytes(item) ? (this._networkBytes(item) / this.boundarySpan) * 100 : resourceBytesAsPercent;
     971        return {start: 0, middle: networkBytesAsPercent, end: resourceBytesAsPercent};
    949972    },
    950973
    951974    _value: function(resource)
    952975    {
    953         return resource.contentLength;
     976        return resource.resourceSize;
     977    },
     978
     979    _networkBytes: function(resource)
     980    {
     981        return resource.transferSize;
    954982    },
    955983
    … …  
    11421170}
    11431171
     1172WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize = function(a, b)
     1173{
     1174    return -1 * WebInspector.Resource.CompareByTransferSize(a.resource, b.resource);
     1175}
     1176
    11441177WebInspector.ResourceSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
    11451178
    … …  
    11991232        const barRightElementOffsetWidth = this._barRightElement.offsetWidth;
    12001233        const barLeftElementOffsetWidth = this._barLeftElement.offsetWidth;
    1201         const rightBarWidth = (barRightElementOffsetWidth - labelPadding);
    1202         const leftBarWidth = ((barLeftElementOffsetWidth - barRightElementOffsetWidth) - labelPadding);
     1234
     1235        if (this._isBarOpaqueAtLeft) {
     1236            var leftBarWidth = barLeftElementOffsetWidth - labelPadding;
     1237            var rightBarWidth = (barRightElementOffsetWidth - barLeftElementOffsetWidth) - labelPadding;
     1238        } else {
     1239            var leftBarWidth = (barLeftElementOffsetWidth - barRightElementOffsetWidth) - labelPadding;
     1240            var rightBarWidth = barRightElementOffsetWidth - labelPadding;
     1241        }
     1242
    12031243        const labelLeftElementOffsetWidth = this._labelLeftElement.offsetWidth;
    12041244        const labelRightElementOffsetWidth = this._labelRightElement.offsetWidth;
    … …  
    12081248        const graphElementOffsetWidth = this._graphElement.offsetWidth;
    12091249
     1250        if (labelBefore && (graphElementOffsetWidth * (this._percentages.start / 100)) < (labelLeftElementOffsetWidth + 10))
     1251            var leftHidden = true;
     1252
     1253        if (labelAfter && (graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < (labelRightElementOffsetWidth + 10))
     1254            var rightHidden = true;
     1255
     1256        if (barLeftElementOffsetWidth == barRightElementOffsetWidth) {
     1257            // The left/right label data are the same, so a before/after label can be replaced by an on-bar label.
     1258            if (labelBefore && !labelAfter)
     1259                leftHidden = true;
     1260            else if (labelAfter && !labelBefore)
     1261                rightHidden = true;
     1262        }
     1263
    12101264        if (labelBefore) {
    1211             if ((graphElementOffsetWidth * (this._percentages.start / 100)) < (labelLeftElementOffsetWidth + 10))
     1265            if (leftHidden)
    12121266                this._labelLeftElement.addStyleClass("hidden");
    12131267            this._labelLeftElement.style.setProperty("right", (100 - this._percentages.start) + "%");
    … …  
    12191273
    12201274        if (labelAfter) {
    1221             if ((graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < (labelRightElementOffsetWidth + 10))
     1275            if (rightHidden)
    12221276                this._labelRightElement.addStyleClass("hidden");
    12231277            this._labelRightElement.style.setProperty("left", this._percentages.end + "%");
    … …  
    12291283    },
    12301284
    1231     refresh: function(calculator)
     1285    refresh: function(calculator, isBarOpaqueAtLeft)
    12321286    {
    12331287        var percentages = calculator.computeBarGraphPercentages(this.resource);
    … …  
    12441298
    12451299        this._barLeftElement.style.setProperty("left", percentages.start + "%");
    1246         this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
    1247 
    1248         this._barRightElement.style.setProperty("left", percentages.middle + "%");
    12491300        this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
     1301
     1302        if (!isBarOpaqueAtLeft) {
     1303            this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
     1304            this._barRightElement.style.setProperty("left", percentages.middle + "%");
     1305
     1306            if (this._isBarOpaqueAtLeft != isBarOpaqueAtLeft) {
     1307                this._barLeftElement.addStyleClass("waiting");
     1308                this._barRightElement.removeStyleClass("waiting-right");
     1309                this._labelLeftElement.addStyleClass("waiting");
     1310                this._labelRightElement.removeStyleClass("waiting-right");
     1311            }
     1312        } else {
     1313            this._barLeftElement.style.setProperty("right", (100 - percentages.middle) + "%");
     1314            this._barRightElement.style.setProperty("left", percentages.start + "%");
     1315
     1316            if (this._isBarOpaqueAtLeft != isBarOpaqueAtLeft) {
     1317                this._barLeftElement.removeStyleClass("waiting");
     1318                this._barRightElement.addStyleClass("waiting-right");
     1319                this._labelLeftElement.removeStyleClass("waiting");
     1320                this._labelRightElement.addStyleClass("waiting-right");
     1321            }
     1322        }
     1323
     1324        this._isBarOpaqueAtLeft = isBarOpaqueAtLeft;
    12501325
    12511326        this._labelLeftElement.textContent = labels.left;

  • trunk/WebCore/inspector/front-end/inspector.css

    r55383 r55466  
    27622762}
    27632763
     2764.resources-graph-label.waiting-right {
     2765    margin-left: 5px;
     2766}
     2767
    27642768.resources-graph-label.before {
    27652769    color: rgba(0, 0, 0, 0.7);
    … …  
    28302834}
    28312835
    2832 .resources-graph-bar.waiting {
     2836.resources-graph-bar.waiting, .resources-graph-bar.waiting-right {
    28332837    opacity: 0.35;
    28342838}

  • trunk/WebCore/inspector/front-end/inspector.js

    r55464 r55466  
    10971097
    10981098    if (payload.didLengthChange) {
    1099         resource.contentLength = payload.contentLength;
     1099        resource.resourceSize = payload.resourceSize;
    11001100    }
    11011101
Note: See TracChangeset for help on using the changeset viewer.