1615081 - Collections Design Refinement

Status: VERIFIED FIXED

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

Comment 1

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

Build for review:
https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/f0PDySwoRH2m58G8Ydjacw/runs/0/artifacts/public/build/target.dmg

To show collections:

1. Open a tab and navigate to about:config
2. Click Accept the Risk and Continue
3. Set preference browser.newtabpage.activity-stream.discoverystream.endpoints to http,https
4. Set preference browser.newtabpage.activity-stream.discoverystream.config to {"api_key_pref":"extensions.pocket.oAuthConsumerKey","collapsible":true,"enabled":true,"show_spocs":true,"hardcoded_layout":false,"personalized":true,"layout_endpoint":"https://e5e8374d-fffa-4a77-a604-31603852b6fd.mock.pstmn.io/1615081-layout"}
5. Open a new tab. You should see a collection.

Comment 2

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

Hey Tyler, this is ready for you to do a design review!

Comment 3

[Tyler Miller]

Looking good! Changes to make:

1. Move the Story Card Collection Outside of the "Recommended by Pocket" section. We should be careful to maintain the same padding/margins of the "Recommended by Pocket" section so that things align together and that any styles applied to the elements inside "Recommended by Pocket" are also applied to this new Collections section.

2. Update the styles of the Collections Header to match the Figma file (https://www.figma.com/file/kGLfzf0mRohdzclaulZsWc/New-Tab-Spec-for-Fx-72?node-id=0%3A1).

3. Remove the header "General Feed" from the "Recommended by Pocket" section.

Comment 4

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

Attachment: Collections design refinement

Comment 5

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

@Tyler – I updated the build link and test steps above so you can see my revisions.

Can you take a look and let me know if there's anything else? If not I'll get it into code review so we can land it!

Comment 6

[Tyler Miller]

Looking good! New feedback here:

1. Looks like the Collections Title isn't pulling the correct text color when in Dark Mode, the correct color is #D7D7DB.
2. When the Collections Title is longer and/or the screen is at a smaller size, the Dismiss button is overlapping the title text.
3. The Dismiss button isn't centered vertically with the text opposite it. Something like 26px of margin-top should fix that.
4. The Collection isn't highlighted when hovering over the Dismiss button.
5. The Dismiss button background shouldn't be visible until hovering over it.
6. The correct Dismiss button icon color in light mode is #737373.

Lemme know if you need any further clarity.

Comment 7

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

@Tyler: New DMG: https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/NPD8wsaFR2WPfcdCfJF66w/runs/0/artifacts/public/build/target.dmg

This covers everything except "The Collection isn't highlighted when hovering over the Dismiss button.", which I'd like to do in a follow-on ticket.

Hoping to move this over to code review now unless there's anything else burning!

Comment 8

[Tyler Miller]

This looks great! "The Collection isn't highlighted when hovering over the Dismiss button." isn't mission-critical so let's follow up with that later.

Comment 9

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

Also tweaked: color of the dismiss X icon in light mode should change to the darker gray (rgb(12,12,13)) when hovered over.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/94f5541b9290
Collections design refinement r=thecount

Comment 11

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/94f5541b9290

Comment 12

[Robert Martin [:romartin], Ecosystem QA]

Hello,

Given that the verification for the issues mentioned in comment 6 will be included in our Nightly feature testing and that we’ve already started testing it, we will mark this bug as VERIFIED as soon as we are done with our testing in order to avoid duplicating the work.

Thank you,
Robert

Comment 13

[Robert Martin [:romartin], Ecosystem QA]

During our testing, we’ve encountered a discrepancy between the expected result mentioned by Tyler Miller in comment 6 and the Figma design documentation:

The Collection Title actual color is #F9F9FA(Grey 10) which is correct according to Figma but incorrect according to comment 6.

@Gavin, can you please share your insight into what the expected Collection Title color should be?

Comment 14

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

Deferring to our designer, Tyler, to make that call...

Comment 15

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

^

Comment 16

[Tyler Miller]

Comment 6 is correct (Figma was incorrect) and the title color should be Gray 30/#D7D7DB which matches the rest of the titles on the page. Figma has been updated to match.

Comment 17

[Robert Martin [:romartin], Ecosystem QA]

Thank you for the clarification @Gavin and @Tyler.

I’ve logged the following bug for further tracking.

Given the above and the fact that the 4th check from comment 6 is tracked in this bug, I have verified the following, using Windows 10 x64, macOS 10.15 and Arch Linux 5.3.6 x64 on latest Firefox Nightly 75.0a1 (Build ID: 20200226213903) :

• The “Dismiss” button is does not overlap the title text at smaller browser size.
• The “Dismiss” button is centered vertically with the text opposite to it.
• The “Dismiss” button is not visible unless hovered.
• The actual “Dismiss” button’s icon color in light mode is #737373.