Web Inspector: resources panel only shows uncompressed resource size.

[Pavel Feldman]

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.

[Anthony Ricaud]

A related bug : https://bugs.webkit.org/show_bug.cgi?id=19793

[Alexander Pavlov (apavlov)]

Created attachment 49729 [details]
[PATCH] Suggested solution

[Pavel Feldman]

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.

[Alexander Pavlov (apavlov)]

Created attachment 49909 [details]
[PATCH] Comments addressed

[Alexander Pavlov (apavlov)]

(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.

[Pavel Feldman]

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?

[Alexander Pavlov (apavlov)]

Created attachment 49913 [details]
[PATCH] Rendering option extracted from the TreeElement

[Alexander Pavlov (apavlov)]

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