1552932 - [Top Sites] Focus and Hover UX updates

Status: RESOLVED FIXED

(Firefox :: New Tab Page, enhancement, P1)

Description

[Wolasi :wolasi]

Tasks

• Focus highlight color for Top Sites in dark theme should be rgba(69, 161, 255, 0.4)
• Hovering over a focused Top Site should turn the highlight color gray like is done for story cards

Spec
https://www.figma.com/file/0xZkmT86rSXbGRB4eIvrn0ts/New-Tab-Spec-for-Fx-v68?node-id=383%3A1

Comment 1

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/5087

Comment 2

[Gavin Suntop [:gvn] (they/them)]

Wolasi, I made a custom build from this patch for you to review:

https://queue.taskcluster.net/v1/task/MYjmjn8YTl6Rqqva-WQDag/runs/0/artifacts/public/build/target.dmg

Let me know if that doesn't work for you. It's unsigned, so you'll need to allow it to launch under your Security & Privacy control panel.

Comment 3

[Gavin Suntop [:gvn] (they/them)]

^

Comment 4

[Wolasi :wolasi]

LGTM

Comment 5

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/719da47cffec

Comment 6

[Marius Coman [:mcoman], Ecosystem QA]

I have tested this issue with the latest Firefox Nightly (69.0a1 Build ID - 20190613215335) installed, on Windows 10 x64, Arch Linux and Mac 10.14.5. Now, when hovering over a focused Top Site the color is changed from blue to gray, but the focus highlight color for the top sites in dark theme is rgba (69, 161, 255, 0.3) instead of rgba(69, 161, 255, 0.4) as mentioned in the specs.

Gavin, could you please confirm if this change is intended or not? Also, in case that this change is not intended, should we reopen this bug or should we log another one?

Comment 7

[Gavin Suntop [:gvn] (they/them)]

Wolasi, can you take another look at the build and see if this is an issue? Thx!

Comment 8

[Wolasi :wolasi]

Marius, I discussed this issue with Gavin earlier, and his theory was that this might be a browser quirk since the focus state was being applied to different element types. With that in mind, we'll revisit the issue when we refactor the Top Sites markup when we make Top Sites responsive.