Bug 218003

Summary:

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

Product:

WebKit

Reporter:

Nikita Vasilyev <nvasilyev>

Component:

Web Inspector

Assignee:

Radar WebKit Bug Importer <webkit-bug-importer>

Status:

NEW

Severity:

Normal

CC:

ews-watchlist, fbucchi, hi, inspector-bugzilla-changes, webkit-bug-importer

Priority:

Keywords:

GoodFirstBug, InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

Attachments:

Description	Flags
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens	none
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens	none
3 screens for comparison: 1x with current issue, 1x with fix and retina with no issue	none
[Image] clipping issue after Patch is applied	none
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens	none
Fix blurry Inspect Icon on non-retina (1x) screen	fbucchi: review?
Screenshots of bug resolution	none
Screenshot of confirmation that nothing changed for retina displays after change for 1x	none

Nikita Vasilyev

Reported 2020-10-20 16:38:14 PDT

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

Attachments
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens (1.97 KB, patch) 2020-11-04 16:53 PST, Federico Bucchi	no flags	Details Formatted Diff Diff
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens (1.98 KB, patch) 2020-11-04 22:52 PST, Federico Bucchi	no flags	Details Formatted Diff Diff
3 screens for comparison: 1x with current issue, 1x with fix and retina with no issue (6.35 KB, image/png) 2020-11-04 23:10 PST, Federico Bucchi	no flags	Details
[Image] clipping issue after Patch is applied (6.39 KB, image/png) 2020-11-05 11:11 PST, Devin Rousso	no flags	Details
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens (2.16 KB, patch) 2020-11-05 21:39 PST, Federico Bucchi	no flags	Details Formatted Diff Diff
Fix blurry Inspect Icon on non-retina (1x) screen (1.43 KB, patch) 2020-11-11 22:34 PST, Federico Bucchi	fbucchi: review?	Details Formatted Diff Diff
Screenshots of bug resolution (2.82 KB, image/png) 2020-11-11 22:36 PST, Federico Bucchi	no flags	Details
Screenshot of confirmation that nothing changed for retina displays after change for 1x (5.91 KB, image/png) 2020-11-11 22:37 PST, Federico Bucchi	no flags	Details
Show Obsolete (3) View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2020-10-27 16:39:17 PDT

<rdar://problem/70744157>

Federico Bucchi

Comment 2 2020-11-04 16:53:43 PST

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

Devin Rousso

Comment 3 2020-11-04 17:44:40 PST

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

Comment 4 2020-11-04 17:48:06 PST

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

Federico Bucchi

Comment 5 2020-11-04 22:52:51 PST

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

Federico Bucchi

Comment 6 2020-11-04 23:10:03 PST

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

Devin Rousso

Comment 7 2020-11-05 11:11:29 PST

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

Devin Rousso

Comment 8 2020-11-05 11:11:45 PST

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

Comment 9 2020-11-05 21:39:43 PST

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

Devin Rousso

Comment 10 2020-11-10 12:06:17 PST

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

Comment 11 2020-11-11 22:34:19 PST

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

Federico Bucchi

Comment 12 2020-11-11 22:36:57 PST

Created attachment 413912 [details] Screenshots of bug resolution

Federico Bucchi

Comment 13 2020-11-11 22:37:46 PST

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

Note You need to log in before you can comment on or make changes to this bug.