1628045 - Build new hero layout variant

Status: VERIFIED FIXED

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

Comment 1

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

https://www.figma.com/file/3c4TF1eRf8y2DhwySP4lkA/Firefox-77-Spec

Comment 2

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

Test Steps

• Set browser.newtabpage.activity-stream.discoverystream.endpoints to http,https
• Set 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/layout/1628045"}
• Open new tab
• Verify layout matches spec

Note: If no spocs show up, you may need to set browser.newtabpage.activity-stream.discoverystream.spocs-endpoint to https://e5e8374d-fffa-4a77-a604-31603852b6fd.mock.pstmn.io/spocs/v2.

Comment 3

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

Attachment: adding hook to trigger hero layout

Comment 4

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

Attachment: Bug 1628045 - New hero layout variant

Comment 5

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

@Tyler, here's a build for you to design review:

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

Comment 6

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

Feedback from Tyler:

• The small cards should have the Windows Title 10 (13px/19 line height) font style
• Sponsored text on small cards isn’t wrapping to two lines
• Padding inside the small cards isn’t set to 8px

Comment 7

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

@Tyler – Here's a revised build for you to check out:

https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/Fj3B6S_CTfeuZ6qw4FY-6Q/runs/0/artifacts/public/build/target.dmg

Comment 8

[Tyler Miller]

Revised build looks great! A few tweaks:

• I'm seeing two SPOCs stacked on top of each other on the right. Should be that only the top-right card is SPOC.
• Line height for the sponsored label on the small cards should be 19px, but looking like it's coming through as 24px
  -at the largest width breakpoint (936px width) the small cards should have a min-height of 222px

all else looks good to go!

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d8b2993bf75d
New hero layout variant r=thecount

Comment 10

[Cristian Brindusan [:cbrindusan]]

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

Comment 11

[Valentina Virlics [:vvalentina], Ecosystem QA]

I have verified this on Firefox Nightly 77.0a1 (Build ID 20200426215109) on Win 10, Linux Ubuntu 18.04 and Mac 10.15.
Having the prefs from Comment 2 set, as suggested (including the spocs endpoint), we observed the following:

1. 1 Hero card:
   a. padding 16px (no matter of the browser height)
   b. picture height: 228px/168px (depending on browser height)

2. 4 small cards:
   a. padding 8px (no matter of the browser height)
   b. only the one from the top right corner is sponsored
   c. sponsored label heights: 19px
   d. sponsored label wraps on 2 rows <696px browser height
   e. picture height: 108px/78px (depending on browser height)
   f. without description/abstracts

3. The hero layout is only visible on the lager containers (939px and 696px)

4. Dismissing the sponsored small card, should trigger another sponsored card?

@Gavin are these correct? I am interested in particular of: 1 b), 2 e) and 4.
Thanks!

Comment 12

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

@Tyler, can you review this feedback and ensure it's all acceptable? Thanks!

Comment 13

[Tyler Miller]

Hi Valentina,

1b) Picture height should change based on browser width, not browser height
2e) Picture height should change based on browser width, not browser height
4) The intention with replacing a card that is a SPOC in the hero layout is to match the existing behavior in the three-by-one design. Existing behavior: when a SPOC is removed, the card is replaced with a non-SPOC story. When the user opens a new tab, a new SPOC is shown there.

Others
1a) Yes
2a) No, on larger breakpoints the padding is 16px
2b) Yes
2c) Yes
2d) The sponsored label MAY wrap if too long, but does not always wrap
2f) Sorry, not clear about this question. Small cards should not ever show description/abstracts.
3) Yes

Comment 14

[Valentina Virlics [:vvalentina], Ecosystem QA]

(In reply to Tyler Miller from comment #13)

1b) Picture height should change based on browser width, not browser height

Yeah, my bad. My question was: if hero card picture size is correct - 228px/168px (for 939px wide and 696px wide)?

2e) Picture height should change based on browser width, not browser height

My question was: if small cards picture size is correct - 108px/78px (for 939px wide and 696px wide)?

Others
2a) No, on larger breakpoints the padding is 16px

Small cards padding is always 8px (for 939px wide and 696px wide), is this ok?

2f) Sorry, not clear about this question. Small cards should not ever show description/abstracts.

This was an confirmation, not a question.

Thanks in advance!

Comment 15

[Tyler Miller]

Got it! For 1b the heights listed are good 👍

For 2e, the heights listed are good 👍

for 2a, we should adjust the padding on larger breakpoints to 16px on 939 width.

for 2f, confirmed.

Comment 16

[Valentina Virlics [:vvalentina], Ecosystem QA]

@Tyler - Thanks for the quick reply!
Just to be sure I was clear about the padding: I was talking about small cards, on different breakpoints.
Hero card has also one padding - 16px - for both smaller and larger breakpoints.
If it is still the case, would you like for us to add a new issue for the small cards padding on larger breakpoints, or reopening this should work as well?

Comment 17

[Tyler Miller]

@Valentina, let's open a new issue on this

Comment 18

[Valentina Virlics [:vvalentina], Ecosystem QA]

Based on the above comments, I'll mark this issue as verified.