1877557 - Update configuration so above_button_content renders below MultiSelect/Tiles and before action buttons

Status: VERIFIED FIXED

(Firefox :: Messaging System, task, P1)

Description

[Negin]

Currently, when using above_button_content in about:welcome, LinkParagraph component renders before the MultiSelect checkboxes. Because we're running surveys that require a legal link + copy, we'd like to update LinkParagraph so it renders before the action buttons but after MultiSelect/tiles.

figma

Comment 1

[Negin]

Attachment: Bug 1877557 - Extra configurations for LinkParagraph component for about:welcome

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d260879745fc
Extra configurations for LinkParagraph component for about:welcome r=omc-reviewers,emcminn,pdahiya

Comment 3

[Norisz Fay [:noriszfay]]

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

Comment 4

[Daniel Bodea [:danibodea]]

I am attempting to verify this fix, but it is not clear what the change is and how to verify it.

I have found these steps in Phabricator ticket, however, I can't seem to understand how to make the specific screen appear in the about:welcome flow:

in about:config include the following screens in browser.aboutwelcome.screens
route to about:welcome
notice the privacy notice link rendered above the Next button
ensure link is clickable
on <800px notice the link in center alignment nested above the Next button
set browser.shopping.experience2023.active and browser.shopping.experience2023.enabled to true and route to amazon.com
ensure no visual regression in the opt-in screen privacy notice link as well as by resizing the container

Can you explain step 1? The pref "browser.aboutwelcome.screens" already exists as string type, but it has no value, by default. What value should it have? Thank you.

Comment 5

[Negin]

(In reply to Daniel Bodea [:danibodea] from comment #4)

I am attempting to verify this fix, but it is not clear what the change is and how to verify it.

I have found these steps in Phabricator ticket, however, I can't seem to understand how to make the specific screen appear in the about:welcome flow:

in about:config include the following screens in browser.aboutwelcome.screens
route to about:welcome
notice the privacy notice link rendered above the Next button
ensure link is clickable
on <800px notice the link in center alignment nested above the Next button
set browser.shopping.experience2023.active and browser.shopping.experience2023.enabled to true and route to amazon.com
ensure no visual regression in the opt-in screen privacy notice link as well as by resizing the container

Can you explain step 1? The pref "browser.aboutwelcome.screens" already exists as string type, but it has no value, by default. What value should it have? Thank you.

Hi there!

In the test step, screens is a link in the phabricator test step which has the screen array in a gist that you would copy and paste into browser.aboutwelcome.screens pref. Here's the link from the test plan:
https://gist.github.com/nuggetsnegin/7c72eeccb48a3a60b63e35dab6a6da51

The link will has JSON that uses a screen that implements the configuration change so you can test the changes. Thanks!

Comment 6

[Daniel Bodea [:danibodea]]

I am still unable to make the respective screen appear in the about:welcome flow. Is there something else I might be missing?

Steps used:

1. Launch Firefox (Beta v125.0b9)
2. Load about:config
3. Find the pref browser.aboutwelcome.screens and attribute value "https://gist.github.com/nuggetsnegin/7c72eeccb48a3a60b63e35dab6a6da51"
4. Load about:welcome -> The screen is not shown in the flow
5. Restart browser.
6. Load about:welcome -> The screen is not shown in the flow

Thank you for the help!

Comment 7

[Negin]

(In reply to Daniel Bodea [:danibodea] from comment #6)

I am still unable to make the respective screen appear in the about:welcome flow. Is there something else I might be missing?

Steps used:

1. Launch Firefox (Beta v125.0b9)
2. Load about:config
3. Find the pref browser.aboutwelcome.screens and attribute value "https://gist.github.com/nuggetsnegin/7c72eeccb48a3a60b63e35dab6a6da51"
4. Load about:welcome -> The screen is not shown in the flow
5. Restart browser.
6. Load about:welcome -> The screen is not shown in the flow

Thank you for the help!

No worries! Are you a enrolled in any about:welcome experiments (in about:studies)? I followed the same steps you outlined and can see the respective screen. I'll upload a video to this bug to see if that helps debug the issue.

Comment 8

[Negin]

Attachment: Untitled.mov

Comment 9

[Daniel Bodea [:danibodea]]

Thank you for the video! I have managed to correctly set it up for testing.

I can confirm that the "By selecting “Next,” you agree to Firefox’s Privacy Notice" bit is displayed under the checkboxes and above the "Next" button and has a smaller font size, as it appears in the figma design. Furthermore, the "Privacy Notice" link is clickable and it redirects to the same page as before. If the user shrinks the window width under 800 px, the "By selecting “Next,” you agree to Firefox’s Privacy Notice" bit is center aligned above the Next button.

Testing has been performed on Windows 10, MacOS 11 and Ubuntu 22 with Nightly v126.0a1 and Beta v125.0 (RC).