1910641 - Update the "Finish Setup" toolbar button for the onboarding setup checklist experiment

Status: RESOLVED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Meg Viar [:mviar]]

For the Onboard Setup Checklist experiment in Fx131 (see brief below), we'll update the "Finish Setup" toolbar button added in bug 1905379.
Updates will include:

• Clicking the button should toggle showing the setup checklist (see bug 1901617) rather than returning the user to about:welcome.
• The Finish Setup button should appear to the right of the new configurable bookmarks bar button (see bug 1901261) if both are present.
• Take out the logic that removes the button when the user sees the last card in about:welcome
• For now, leave the button in place until the user removes it (pending final approval from product)

Experiment brief

Comment 1

[Meg Viar [:mviar]]

@halemu came up with an idea for a different approach to reduce on-train changes and make use of the new configurable bookmark style messaging surface. This will include making the bookmark surface's icon configurable so that the icon from the current Finish Setup button can be used. We'll also enable the "SET_PREF" action in the bookmark button surface. Additionally, we'll test adding an option to dismiss the checklist directly in the callout via the dismiss X in the corner or a secondary button and include any necessary style changes to support this.

This approach allows us to configure the experiment associated with this new template as a multi-feature experiment. We'll use the aboutwelcome nimbus feature's toolbarButtonEnabled variable to suppress the existing "Finish Setup" button. The fxms_bmb_button nimbus feature will be used to configure a button similar to the existing Finish Setup button that sets a messaging-system-action pref to true on click. Finally, we'll use the featureCallout feature to configure the message with the checklist and dismiss button that sets the previously mentioned pref to false and closes the callout. The callout's trigger will be a preference observer of that pref, and the targeting will include that pref being set to true.

Comment 2

[Hanna Alemu [:hanna_a]]

Attachment: Bug 1910641 - Update the FxMS Bookmarks Bar button for the onboarding setup checklist experiment

Comment 3

[Hanna Alemu [:hanna_a]]

To test the approach using attached patch:

• Add the following message in FeatureCalloutMessages.sys.mjs (Messages array) for the onboarding checklist
  { id: "CHECKLIST", template: "feature_callout", content: { id: "CHECKLIST", template: "multistage", backdrop: "transparent", transitions: false, disableHistoryUpdates: true, screens: [ { id: "CHECKLIST", anchors: [ { selector: "#unified-extensions-button", panel_position: { anchor_attachment: "bottomcenter", callout_attachment: "topright", }, no_open_on_anchor: true, }, ], content: { position: "callout", page_event_listeners: [ { params: { type: "tourend", }, action: { type: "SET_PREF", data: { pref: { name: "messaging-system-action.testpref.test.test", value: "false", }, }, }, }, ], title: { raw: "Finish setting up Firefox", marginInline: "3px 40px", fontWeight: "600", fontSize: "16px", }, action_checklist_subtitle: { raw: "This is the checklist subtitle", }, tiles: { type: "action_checklist", data: [ { id: "action-checklist-pin-to-taskbar", targeting: "!doesAppNeedPinUncached", label: { raw: "Pin to taskbar" }, action: { type: "MULTI_ACTION", data: { actions: [ { type: "PIN_FIREFOX_TO_TASKBAR" }, { type: "PIN_FIREFOX_TO_START_MENU" }, ], }, }, }, { id: "action-checklist-import-data", targeting: "hasMigratedBookmarks || hasMigratedCSVPasswords || hasMigratedHistory || hasMigratedPasswords", label: { raw: "Import data" }, action: { type: "SHOW_MIGRATION_WIZARD" }, showExternalLinkIcon: true, }, { id: "action-checklist-set-to-default", targeting: "isDefaultBrowserUncached", label: { raw: "Set to default" }, action: { type: "SET_DEFAULT_BROWSER" }, }, { id: "action-checklist-explore-extensions", targeting: "'messaging-system-action.hasOpenedExtensions'|preferenceValue", label: { raw: "Explore Extensions" }, action: { type: "MULTI_ACTION", data: { actions: [ { type: "SET_PREF", data: { pref: { name: "messaging-system-action.hasOpenedExtensions", value: "true", }, }, }, { type: "OPEN_URL", data: { args: "https://addons.mozilla.org/", where: "current", }, }, ], }, }, showExternalLinkIcon: true, }, { id: "action-checklist-choose-theme", targeting: "'messaging-system-action.hasOpenedThemes'|preferenceValue", label: { raw: "Choose a theme" }, action: { type: "MULTI_ACTION", data: { actions: [ { type: "SET_PREF", data: { pref: { name: "messaging-system-action.hasOpenedThemes", value: "true", }, }, }, { type: "OPEN_URL", data: { args: "https://addons.mozilla.org/en-US/firefox/search/?sort=hotness&type=statictheme", where: "current", }, }, ], }, }, showExternalLinkIcon: true, }, { id: "action-checklist-sync-mobile", targeting: "isFxASignedIn", label: { raw: "Sync mobile" }, action: { type: "MULTI_ACTION", data: { actions: [ { type: "OPEN_URL", data: { args: "https://accounts.firefox.com/", where: "current", }, }, ], }, }, showExternalLinkIcon: true, }, ], }, dismiss_button: { action: { navigate: true, }, }, }, }, ], }, priority: 1, targeting:"messaging-system-action.testpref.test.test" | preferenceValue == true, trigger: { id: "preferenceObserver", params: ["messaging-system-action.testpref.test.test"] }, frequency: { lifetime: 10000 }, },
• Search for TEST_BMB_BUTTON in about:asrouter (This is the button we will use to imitate the Finish Setup button using the new fxms_bookmarks_bar button surface) and click Show
• Open a new tab, Click on the Getting started button.

• This will set a new pref messaging-system-action.testpref.test.test to true. The onboarding checklist message has a preferenceObserver trigger listener which will trigger the message when this pref changes.
• The onboarding checklist can be dismissed using the x button

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/12943f54650a
Update the FxMS Bookmarks Bar button for the onboarding setup checklist experiment r=mviar,omc-reviewers

Comment 5

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/12943f54650a

Comment 6

[Hanna Alemu [:hanna_a]]

Comment on attachment 9428917 [details]
Bug 1910641 - Update the FxMS Bookmarks Bar button for the onboarding setup checklist experiment

Beta/Release Uplift Approval Request

• User impact if declined: This change is needed to run the onboarding setup checklist experiment in Fx 132.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: * To view changes, search for the "TEST_BMB_BUTTON" test message in about:asrouter and click Show, open a new tab to see the button.
• The button should have a customized logo icon(Using the firefox focus logo for testing)
• Clicking the button should open the moz.org site in a new tab, and set a messaging-system-action.testpref.test.test pref to true
• Verify browser tests are passing by running ./mach test browser/components/asrouter/tests/browser/browser_bookmarks_bar_button.js
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): The change is contained within the FxMS Bookmarks Bar button surface, and we currently have no messages live/in-tree that use this suface. The experiment will use Nimbus to deliver the message to users.
• String changes made/needed: No
• Is Android affected?: No

Comment 7

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9428917 [details]
Bug 1910641 - Update the FxMS Bookmarks Bar button for the onboarding setup checklist experiment

Approved for 132.0b5.

Comment 8

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/5fe50ee0faed