Closed Bug 1343495 Opened 4 years ago Closed 4 years ago

CSS Grid Highlighter icon is blurry

Categories

(DevTools :: Inspector, defect)

defect
Not set
normal

Tracking

(firefox52+ wontfix, firefox53+ verified, firefox54 verified)

VERIFIED FIXED
Firefox 54
Tracking Status
firefox52 + wontfix
firefox53 + verified
firefox54 --- verified

People

(Reporter: zer0, Assigned: zer0)

References

(Blocks 1 open bug)

Details

Attachments

(4 files)

The current CSS Grid Highlighter icon is still blurry, that it's more evident on 1ddpx than retina displays. It should be crisp no matter the dpi.
Assignee: nobody → zer0
Blocks: dt-grid
I forgot to mention that where the icon itself now is not blurry anymore, it's still not crisp in rule view; so Gabriel review the icon but this bug is not over yet.

The reason is because the current icon in the rule view has size `1em x 1em`, so to speak 11x11 pixels. The icons are made to be 16x16, so since they're SVG they will work with anything can scale well (8x8, 32x32…).
We mentioned that in the past when we where talking about this issue. Possible solutions:

1. Make the grid icon specifically for the rule view, so 11x11, and force the css style to be 11x11 instead of 1em x 1em.
2. Increase the size of the icons in rule-view, at least the grid icon, so that they will be 16x16 pixels.

Gabriel, what do you think?
I'm going to attach a screenshot of the icon in the rule-view at 16x16, just to have a comparison.
Flags: needinfo?(gl)
Attached image grid icon at 16x16
Comment on attachment 8842376 [details]
Bug 1343495 - CSS Grid Highlighter icon is blurry;

https://reviewboard.mozilla.org/r/116256/#review117826
Attachment #8842376 - Flags: review?(gl) → review+
Flags: needinfo?(gl)
The last commit is for having an optimized path as the first commit I made – I forgot in the second.
Pushed by mferretti@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/17a520550438
CSS Grid Highlighter icon is blurry; r=gl
Status: NEW → ASSIGNED
Flags: qe-verify+
Comment on attachment 8842376 [details]
Bug 1343495 - CSS Grid Highlighter icon is blurry;

Approval Request Comment
[Feature/Bug causing the regression]:
CSS Grid Inspector (Bug 1181227)

[User impact if declined]:
Users will have blurry icon for CSS Grid Inspector, especially in 1dppx display (regular ones, no retina for example).

[Is this code covered by automated tests?]:
No (it's an icon improvement).

[Has the fix been verified in Nightly?]:
Not yet, just landing.

[Needs manual test from QE? If yes, steps to reproduce]: 

1. http://labs.jensimmons.com/2016/examples/grid-content-1.html
2. Toggle Devtools (Tools > Web Developer > Toggle Tools)
3. Select the <main> node in the inspector
4. Select the Rules panel
5. See that the grid icon shown after the `display` property of the element in the Rules panel is blurry (that's more evident in 1dppx monitor). 

[List of other uplifts needed for the feature/fix]:
[Is the change risky?]:
No.

[Why is the change risky/not risky?]:
Doesn't involve code, it's an icon improvement of what we've landed already.

[String changes made/needed]:
None.
Attachment #8842376 - Flags: approval-mozilla-beta?
Attachment #8842376 - Flags: approval-mozilla-aurora?
Comment on attachment 8842376 [details]
Bug 1343495 - CSS Grid Highlighter icon is blurry;

Too late for 52, sorry.
Attachment #8842376 - Flags: approval-mozilla-beta? → approval-mozilla-beta-
(In reply to Julien Cristau [:jcristau] from comment #12)
> Comment on attachment 8842376 [details]
> Bug 1343495 - CSS Grid Highlighter icon is blurry;
> 
> Too late for 52, sorry.

Wanted to know if it is absolutely impossible to uplift this to beta since you commented on Bug 1342051 about uplifting that bug. We do want this uplifted since one of the biggest pushes we are doing on the devtools, devrel and marketing for FF52 is to market and ship this grid inspector.
Flags: needinfo?(jcristau)
Bug 1342051 was called out as a blocker for shipping, so it gets a last minute exception, but I didn't think a less-than-24-hour-old bug about a tiny icon being slightly blurry qualified.
Flags: needinfo?(jcristau)
https://hg.mozilla.org/mozilla-central/rev/17a520550438
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 54
We can take this for 53 aurora. Uplifting this now to 52 would delay the entire release. We could keep it open and tracked in case of a dot release, though.
Comment on attachment 8842376 [details]
Bug 1343495 - CSS Grid Highlighter icon is blurry;

Minor icon resolution fix, let's take it for 53 aurora.
Attachment #8842376 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Verified fixed using the latest Nightly 54.0a1 (2017-03-06) on Ubuntu 16.04, Mac OS X 10.11 and Windows 10 x64
Status: RESOLVED → VERIFIED
Verified fixed Fx 53b1 on Win 10, Ubuntu 14.04, OS X 10.11.
Flags: qe-verify+
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.