1687827 - Update pocket and highlights card box shadow and border radius if newNewtabExperience is enabled

Status: VERIFIED FIXED

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

Description

[:prathiksha]

Spec: https://www.figma.com/file/hGOaTi5ufs2Ese6agbUN4G/New-New-Tab?node-id=985%3A9859

Comment 1

[:prathiksha]

Attachment: Bug 1687827 - Update pocket and highlights card box shadow and border radius if newNewtabExperience is enabled.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1139f807e404
Update pocket and highlights card box shadow and border radius if newNewtabExperience is enabled. r=ewright

Comment 3

[Alexandru Michis [:malexandru]]

Backed out changeset 1139f807e404 (Bug 1687827) for causing bc failures in browser_parsable_css.js

Backout link: https://hg.mozilla.org/integration/autoland/rev/be339641243e3fd6c82ff588cf58113c8a7b1209

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Crunnable&revision=1139f807e404c30afd3c3e91bece5e3833667742&selectedTaskRun=LUqvrgUMT_WGmQ-_4m3K4Q.0

Failure logs:
-bc: https://treeherder.mozilla.org/logviewer?job_id=328145601&repo=autoland&lineNumber=1599

• lint: https://treeherder.mozilla.org/logviewer?job_id=328144948&repo=autoland&lineNumber=105

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a9d27a32ec85
Update pocket and highlights card box shadow and border radius if newNewtabExperience is enabled. r=ewright

Comment 5

[Narcis Beleuzu [:NarcisB]]

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

Comment 6

[:prathiksha]

Comment on attachment 9198326 [details]
Bug 1687827 - Update pocket and highlights card box shadow and border radius if newNewtabExperience is enabled.

Beta/Release Uplift Approval Request

• User impact if declined: Some small styles like the border-radius and box-shadow will not be updated on the newtab page for an experiment we plan to run in 86.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: 1. Set browser.newtabpage.activity-stream.newNewtabExperience.enabled pref to true.

2. Verify that the border radius of Pocket and Highlights cards is 8px.

3. Verify that new box-shadow on focus is added to Pocket and Highlights cards as per the spec.

4. Verify that a new box shadow is added to Pocket and Highlights cards as shown in the spec.

5. Set browser.newtabpage.activity-stream.newNewtabExperience.enabled pref to false and verify that (2), (3) and (4) are not effective.

spec: https://www.figma.com/file/hGOaTi5ufs2Ese6agbUN4G/New-New-Tab

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Small style changes behind a pref (will only affect experiment users).
• String changes made/needed: None

Comment 7

[Robert Martin [:romartin], Ecosystem QA]

I have verified the following based on a Slack conversation with @Prathiksha and based on the steps provided in comment 6 using Firefox Nightly 87.0a1 (Build ID: 20210201213620) on Windows 10 x64, macOS 10.15.6, and Ubuntu Linux 20.04 x64:

• With the browser.newtabpage.activity-stream.newNewtabExperience.enabled pref set to true for the Pocket cards:
  • The box-radius is 8px.
  • The box-shadow has the "0 3px 8px var(--newtab-card-first-shadow), 0 0 2px var(--newtab-card-second-shadow)" value which is expected as per figma.
• With the browser.newtabpage.activity-stream.newNewtabExperience.enabled pref set to true for the "Recent activity" cards:
  • The box-radius is 8px.
  • The box-shadow has the "0 3px 8px var(--newtab-card-first-shadow), 0 0 2px var(--newtab-card-second-shadow)" value which is expected as per figma.
• With the browser.newtabpage.activity-stream.newNewtabExperience.enabled pref set to false for the Pocket cards:
  • The box-radius is 4px.
  • The box-shadow has the "0 1px 4px 0 rgba(12, 12, 13, 0.1)" value.
• With the browser.newtabpage.activity-stream.newNewtabExperience.enabled pref set to false for the "Highlights" cards:
  • The box-radius is 3px.
  • The box-shadow has the "var(--newtab-card-shadow)" value.

Comment 8

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9198326 [details]
Bug 1687827 - Update pocket and highlights card box shadow and border radius if newNewtabExperience is enabled.

Approved for 86 beta 5, thanks.

Comment 9

[Julien Cristau [:jcristau] (back April 22)]

https://hg.mozilla.org/releases/mozilla-beta/rev/86b49ddf2db8

Comment 10

[Robert Martin [:romartin], Ecosystem QA]

I have verified the following based on the steps provided in comment 6 using Firefox Beta 86.0b5 (Build ID: 20210202185823) on Windows 10 x64, macOS 10.15.6, and Ubuntu Linux 20.04 x64:

• With the browser.newtabpage.activity-stream.newNewtabExperience.enabled pref set to true for the Pocket cards:
  • The box-radius is 8px.
  • The box-shadow has the "0 3px 8px var(--newtab-card-first-shadow), 0 0 2px var(--newtab-card-second-shadow)" value which is expected as per figma.
• With the browser.newtabpage.activity-stream.newNewtabExperience.enabled pref set to true for the "Recent activity" cards:
  • The box-radius is 8px.
  • The box-shadow has the "0 3px 8px var(--newtab-card-first-shadow), 0 0 2px var(--newtab-card-second-shadow)" value which is expected as per figma.
• With the browser.newtabpage.activity-stream.newNewtabExperience.enabled pref set to false for the Pocket cards:
  • The box-radius is 4px.
  • The box-shadow has the "0 1px 4px 0 rgba(12, 12, 13, 0.1)" value.
• With the browser.newtabpage.activity-stream.newNewtabExperience.enabled pref set to false for the "Highlights" cards:
  • The box-radius is 3px.
  • The box-shadow has the "var(--newtab-card-shadow)" value.