Bug 175734 - Web Inspector: Capture Element Screenshot looks fuzzy
Summary: Web Inspector: Capture Element Screenshot looks fuzzy
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: BJ Burg
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-08-18 12:28 PDT by BJ Burg
Modified: 2021-03-17 15:06 PDT (History)
8 users (show)

See Also:


Attachments
WIP (13.16 KB, patch)
2017-12-06 17:31 PST, BJ Burg
no flags Details | Formatted Diff | Diff
Proposed Fix (16.33 KB, patch)
2017-12-19 15:50 PST, BJ Burg
no flags Details | Formatted Diff | Diff
Patch (6.82 KB, patch)
2017-12-19 15:53 PST, BJ Burg
no flags Details | Formatted Diff | Diff
Proposed Fix (review feedback applied) (27.85 KB, patch)
2018-01-04 15:16 PST, BJ Burg
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description BJ Burg 2017-08-18 12:28:26 PDT
It appears to capture to 1x on a Retina display.
Comment 1 BJ Burg 2017-08-18 12:28:46 PDT
<rdar://problem/33803377>
Comment 2 BJ Burg 2017-12-06 17:31:32 PST
Created attachment 328662 [details]
WIP
Comment 3 EWS Watchlist 2017-12-06 17:34:09 PST
Attachment 328662 [details] did not pass style-queue:


ERROR: Source/WebCore/ChangeLog:9:  You should remove the 'No new tests' and either add and list tests, or explain why no new tests were possible.  [changelog/nonewtests] [5]
Total errors found: 1 in 10 files


If any of these errors are false positives, please file a bug against check-webkit-style.
Comment 4 Simon Fraser (smfr) 2017-12-06 17:38:48 PST
Comment on attachment 328662 [details]
WIP

View in context: https://bugs.webkit.org/attachment.cgi?id=328662&action=review

> Source/WebCore/platform/graphics/ImageBuffer.h:108
> +    String toDataURL(const String& mimeType, std::optional<double> quality = std::nullopt, ScaleBehavior = Scaled) const;

It's hard to wrap my head around what "Scaled" means. Does it mean use the logical size, or the physical size?
Comment 5 Simon Fraser (smfr) 2017-12-06 17:43:06 PST
Comment on attachment 328662 [details]
WIP

View in context: https://bugs.webkit.org/attachment.cgi?id=328662&action=review

>> Source/WebCore/platform/graphics/ImageBuffer.h:108
>> +    String toDataURL(const String& mimeType, std::optional<double> quality = std::nullopt, ScaleBehavior = Scaled) const;
> 
> It's hard to wrap my head around what "Scaled" means. Does it mean use the logical size, or the physical size?

Maybe better terminology would be around "preserve resolution" or something.
Comment 6 BJ Burg 2017-12-06 20:53:40 PST
(In reply to Simon Fraser (smfr) from comment #4)
> Comment on attachment 328662 [details]
> WIP
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=328662&action=review
> 
> > Source/WebCore/platform/graphics/ImageBuffer.h:108
> > +    String toDataURL(const String& mimeType, std::optional<double> quality = std::nullopt, ScaleBehavior = Scaled) const;
> 
> It's hard to wrap my head around what "Scaled" means. Does it mean use the
> logical size, or the physical size?

The existing uses are that Scaled is the logical size and Unscaled is the internal size. I was going to introduce my own enum, then I noticed this other one being used in the exact same way, so I used it instead.
Comment 7 BJ Burg 2017-12-19 15:50:39 PST
Created attachment 329844 [details]
Proposed Fix
Comment 8 BJ Burg 2017-12-19 15:53:40 PST
Created attachment 329846 [details]
Patch
Comment 9 BJ Burg 2017-12-19 16:31:14 PST
webkit-patch is messing up my patches, but the correct one is up for review now.
Comment 10 BJ Burg 2017-12-19 16:47:18 PST
Per smfr, will put up new patch with enum class PreserveResolution { Yes, No }
Comment 11 Joseph Pecoraro 2017-12-19 16:49:52 PST
Comment on attachment 329844 [details]
Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=329844&action=review

Inspector parts look good to me, someone else should probably review the WebCore portions.

> LayoutTests/inspector/page/hidpi-snapshot-size.html:8
> +    window.snapshotElement = document.getElementById('element-to-snapshot');

Style: Some single quotes in this test that could be double quotes.

> LayoutTests/inspector/page/hidpi-snapshot-size.html:16
> +    // This function is adapted from an answer on the following page:
> +    // https://stackoverflow.com/questions/15327959/get-height-and-width-dimensions-from-base64-png/41152378#41152378

I don't really think we need to link to the stack overflow. Does this gain us anything?

If we want to carry over the explanation of what this is doing we can attribute it and reformat + improve it here. For example:

    A PNG file starts with the bytes 89 50 4E 47 0D 01 1A 0A, followed by the
    IHDR chunk that contains the size. IHDR’s content starts with a 4-byte width
    and a 4-byte height, so a PNG’s width and height are always bytes 16-24.

> LayoutTests/inspector/page/hidpi-snapshot-size.html:28
> +    let suite = InspectorTest.createAsyncSuite("Page.snapshot");

This tests Page.snapshotNode and maybe could get an even better name.

> LayoutTests/inspector/page/hidpi-snapshot-size.html:41
> +            // Peek into the data URL's raw PNG data to get the size. For various reasons,
> +            // setting the 'src' attribute of an <img> element is unreliable under WKTR.

I don't find this comment useful.

> LayoutTests/inspector/page/hidpi-snapshot-size.html:58
> +<p id="element-to-snapshot" style="height: 198px; width: 198px; border: 1px solid black;">Test for DOM.snapshotNode on HiDPI systems.</p>

Typo: Says "DOM.snapshotNode" but test "Page.snapshotNode"
Comment 12 BJ Burg 2018-01-04 13:35:57 PST
Comment on attachment 329844 [details]
Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=329844&action=review

>> LayoutTests/inspector/page/hidpi-snapshot-size.html:41
>> +            // setting the 'src' attribute of an <img> element is unreliable under WKTR.
> 
> I don't find this comment useful.

I spent a lot of time trying to do it that way, and I want to remember why it was a dead end. =)
Comment 13 Simon Fraser (smfr) 2018-01-04 13:50:36 PST
(In reply to Brian Burg from comment #12)
> Comment on attachment 329844 [details]
> Proposed Fix
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=329844&action=review
> 
> >> LayoutTests/inspector/page/hidpi-snapshot-size.html:41
> >> +            // setting the 'src' attribute of an <img> element is unreliable under WKTR.
> > 
> > I don't find this comment useful.
> 
> I spent a lot of time trying to do it that way, and I want to remember why
> it was a dead end. =)

You make it sound like setting the src doesn't work. It does, but you probably have to listen for the 'load' event to fix the test.
Comment 14 BJ Burg 2018-01-04 14:18:42 PST
Comment on attachment 329844 [details]
Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=329844&action=review

>>>> LayoutTests/inspector/page/hidpi-snapshot-size.html:41
>>>> +            // setting the 'src' attribute of an <img> element is unreliable under WKTR.
>>> 
>>> I don't find this comment useful.
>> 
>> I spent a lot of time trying to do it that way, and I want to remember why it was a dead end. =)
> 
> You make it sound like setting the src doesn't work. It does, but you probably have to listen for the 'load' event to fix the test.

I did try that approach (listen for 'load') but the width/height properties of the image element did not match what would be shown when running the test manually under mini browser or Safari. I didn't have time to further investigate why that is.
Comment 15 BJ Burg 2018-01-04 15:16:56 PST
Created attachment 330491 [details]
Proposed Fix (review feedback applied)
Comment 16 Simon Fraser (smfr) 2018-01-04 15:41:09 PST
Comment on attachment 330491 [details]
Proposed Fix (review feedback applied)

ImageBuffer bits look OK.
Comment 17 Joseph Pecoraro 2018-01-04 15:53:19 PST
Comment on attachment 330491 [details]
Proposed Fix (review feedback applied)

View in context: https://bugs.webkit.org/attachment.cgi?id=330491&action=review

r=me since smfr is happy with the rest

> LayoutTests/inspector/page/hidpi-snapshot-size.html:17
> +    // IHDR chunk that contains the size. IHDRâs content starts with a 4-byte width
> +    // and a 4-byte height, so a PNGâs width and height are always bytes 16-24.

Might want to cleanup these single quotes: "IHDRâs" and "PNGâs"

> LayoutTests/inspector/page/hidpi-snapshot-size.html:35
> +            let targetElementId = await WI.domTreeManager.querySelector(documentNode.id, "#element-to-snapshot");

Nit: I'd name this `targetNodeId` instead of ElementId.
Comment 18 BJ Burg 2018-01-04 16:00:31 PST
Committed r226425: <https://trac.webkit.org/changeset/226425>