Bug 35403

Summary: Web Inspector: resources panel only shows uncompressed resource size.
Product: WebKit Reporter: Pavel Feldman <pfeldman>
Component: Web Inspector (Deprecated)Assignee: Alexander Pavlov (apavlov) <apavlov>
Status: RESOLVED FIXED    
Severity: Normal CC: bweinstein, joepeck, rik, timothy
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
[PATCH] Suggested solution
pfeldman: review-
[PATCH] Comments addressed
pfeldman: review-
[PATCH] Rendering option extracted from the TreeElement pfeldman: review+

Description Pavel Feldman 2010-02-25 14:01:16 PST
We should show both: gzipped and raw sizes.
- We should render is as on Time / Sort by Duration (both sizes on the same bar), except for solid chunk should go first
- Solid would correspond to gzipped (network) size, semi-transparent should correspond to actual resource size.
- There should be additional sorting option "Sort by Uncompressed Size"
- Existing sorting should be default and sort by compressed size.
Comment 1 Anthony Ricaud 2010-02-25 23:53:38 PST
A related bug : https://bugs.webkit.org/show_bug.cgi?id=19793
Comment 2 Alexander Pavlov (apavlov) 2010-03-01 10:10:42 PST
Created attachment 49729 [details]
[PATCH] Suggested solution
Comment 3 Pavel Feldman 2010-03-03 03:18:01 PST
Comment on attachment 49729 [details]
[PATCH] Suggested solution

> +    get transferSize()
> +    {
> +        return this.cached ? 0 : (this.responseHeaders["Content-Length"] || this.contentLength || 0);
> +    },

What is the difference between Content-Length header and this.contentLength?

> +        var resourceBytes = this._value(resource);
> +        if (networkBytes && networkBytes != resourceBytes) {

!==

> +    _networkBytes: function(resource)
> +    {
> +        return resource.responseHeaders["Content-Length"];

Why not this.contentLength?

> +        const isTransparentRight = panel && panel.calculator && panel.calculator.isTransparentRight;

What is calculator's 'isTransparentRight'? Does not sound like calculator property?


r- is for "Content-Length" vs contentLength confusion, also for 'isTransparentRight' on calculator.
Comment 4 Alexander Pavlov (apavlov) 2010-03-03 07:50:31 PST
Created attachment 49909 [details]
[PATCH] Comments addressed
Comment 5 Alexander Pavlov (apavlov) 2010-03-03 07:52:49 PST
(In reply to comment #3)
> (From update of attachment 49729 [details])
> > +    get transferSize()
> > +    {
> > +        return this.cached ? 0 : (this.responseHeaders["Content-Length"] || this.contentLength || 0);
> > +    },
> 
> What is the difference between Content-Length header and this.contentLength?

These two are the opposites. Content-Length is the network transfer size while this.contentLength is the actual resource size, contrary to its name. Fixed the name.

> > +        var resourceBytes = this._value(resource);
> > +        if (networkBytes && networkBytes != resourceBytes) {
> 
> !==

networkBytes used to be a string, hence !=. Fixed to be a number.

> > +    _networkBytes: function(resource)
> > +    {
> > +        return resource.responseHeaders["Content-Length"];
> 
> Why not this.contentLength?

See above.

> > +        const isTransparentRight = panel && panel.calculator && panel.calculator.isTransparentRight;
> 
> What is calculator's 'isTransparentRight'? Does not sound like calculator
> property?

Fixed, now resides in the sorting options along with the sorter and calculator.
Comment 6 Pavel Feldman 2010-03-03 08:09:54 PST
Comment on attachment 49909 [details]
[PATCH] Comments addressed

isBarOpaqueAtLeft should not be a sorting function option. It is a graph item property (time is always 'false', size is always 'true').

>      refresh: function(calculator)

Let it receive and cache isBarOpaqueAtLeft?
Comment 7 Alexander Pavlov (apavlov) 2010-03-03 09:00:56 PST
Created attachment 49913 [details]
[PATCH] Rendering option extracted from the TreeElement
Comment 8 Alexander Pavlov (apavlov) 2010-03-03 10:20:48 PST
Committing to http://svn.webkit.org/repository/webkit/trunk ...
        M       WebCore/ChangeLog
        M       WebCore/English.lproj/localizedStrings.js
        M       WebCore/inspector/InspectorResource.cpp
        M       WebCore/inspector/front-end/AbstractTimelinePanel.js
        M       WebCore/inspector/front-end/AuditRules.js
        M       WebCore/inspector/front-end/ImageView.js
        M       WebCore/inspector/front-end/Resource.js
        M       WebCore/inspector/front-end/ResourcesPanel.js
        M       WebCore/inspector/front-end/inspector.css
        M       WebCore/inspector/front-end/inspector.js
Committed r55466