1629483 - Highlight tile separator lines with opacity overlap

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect, P2)

Description

[Cristian Fogel [:cfogel]]

Attachment: Screenshot 0002-04-13 at 10.30.25.png

Affected versions

• 75.0, 76.0b4, 77.0a1 (2020-04-09);

Affected platforms

• Windows 10, macOS 10.15.3, Ubuntu 18.04;

Steps to reproduce

1. Launch Firefox;
2. (optional) navigate random pages until highlights section is populated with at least 1 site;
3. Zoom over the highlight tile and hover over it;

Expected result

• elements are displayed properly;

Actual result

• separators for highlight icon overlap, the opacity is affected causing dots of harder colour intensity;

Enhancement suggestion

• cut separator lines before they reach the circle so they won't overlap anymore;

Regression range

• will check and provide one if needed;
• at first glimpse checking with older builds such as 62.0.3 shows the same design so inclined to say it's not one;

Additional notes

• attached screenshot with the issue.

Comment 1

[Scott [:thecount] Downe]

I'm not sure what you mean by separators, but I can confirm the dots are much darker in a light theme for a card than they are for a section, is that the issue?

Comment 2

[Cristian Fogel [:cfogel]]

Yes, where the line+halfCircle+line join, due to their opacity they show the dots.
Referring to the separator as the line in between the tile image and description section.

While in a light theme the merge dots are darker, on dark theme they are whiter; so it is not limited to a theme.

Applying the opacity over the whole line, not over each individual element(line+halfCircle+line) might fix the issue or offset the lines by 1pixel so they don't overlap anymore should do the trick.

Comment 3

[Scott [:thecount] Downe]

Attachment: Bug 1629483 - Newtab card opacity lines overlap fix

Comment 4

[Scott [:thecount] Downe]

I've got a small fix for this.

I moved it by 1 px to clear the overlap.

I also noticed it was using some const size based variables that while were the right number, suggests it was the wrong variable. It was using a size for the icon, not the actual circle size, for placement of the circle. The icon size just so happened to be half the size of the circle, which is right, but that's just by chance. I fixed it so it's now half the size of the circle size, which is probably what we want.

Comment 5

[Scott [:thecount] Downe]

Attachment: bad.png

Comment 6

[Scott [:thecount] Downe]

Attachment: good+.png

Comment 7

[Scott [:thecount] Downe]

Added images with before and after.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a0955b50d542
Newtab card opacity lines overlap fix r=gvn

Comment 9

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/a0955b50d542

Comment 10

[Cristian Fogel [:cfogel]]

Verified with 81.0a1 (2020-08-03) on the mentioned OSs.