Web Inspector: Inspect element icon looks blurry on non-retina (1x) screen

[Nikita Vasilyev]

https://twitter.com/fvsch/status/1318683422555017219

[Radar WebKit Bug Importer]

<rdar://problem/70744157>

[Federico Bucchi]

Created attachment 413226 [details]
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens

[Devin Rousso]

Comment on attachment 413226 [details]
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens

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

> Source/WebInspectorUI/UserInterface/Images/Crosshair.svg:4
> +    <g transform="translate(0.5 0.5)">

We try to avoid using `<g>` and `transform` wherever possible to keep things flat and clean.  This is how we do it for all other glyphs.

Rather than have a `translate` here, please add `0.5` to the necessary coordinates within this.

[Devin Rousso]

Also, can you upload screenshots comparing before and after?  I want to make sure this doesn't negatively affect retina displays.

[Federico Bucchi]

Created attachment 413252 [details]
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens

[Federico Bucchi]

Created attachment 413253 [details]
3 screens for comparison: 1x with current issue, 1x with fix and retina with no issue

[Devin Rousso]

Created attachment 413327 [details]
[Image] clipping issue after Patch is applied

[Devin Rousso]

Comment on attachment 413252 [details]
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens

r-, I tried applying this myself and adding the 0.5 causes the icon to shift on my retina display and partially clip on the right and bottom (see attachment 413327 [details])

[Federico Bucchi]

Created attachment 413401 [details]
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens

[Devin Rousso]

Comment on attachment 413401 [details]
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens

r- as this still has the same clipping issue

Perhaps try moving the `@media (-webkit-min-device-pixel-ratio: 2)` to `Main.css` with something like
```
    @media (-webkit-max-device-pixel-ratio: 1) {
        .tab-bar .navigation-bar .item.inspect {
            // something goes here
        }
    }
```

[Federico Bucchi]

Created attachment 413911 [details]
Fix blurry Inspect Icon on non-retina (1x) screen

[Federico Bucchi]

Created attachment 413912 [details]
Screenshots of bug resolution

[Federico Bucchi]

Created attachment 413913 [details]
Screenshot of confirmation that nothing changed for retina displays after change for 1x