1779024 - Create Feature Callout message surface using aboutwelcome

Status: VERIFIED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Meg Viar [:mviar]]

Create featureCallout.js with a render function that takes a message configuration with a parent_selector attribute for each screen and position set to callout. Eventually, this component may fetch messages for itself, but for this iteration it can accept the message as an argument.

The message configuration should follow the multistage spotlight schema. A script tag with featureCallout.js can be included in the html of the parent page, or the render function can be imported and called by the parent page's JS. The render function should create a callout element and append it to the body of the parent document. The aboutwelcome.js bundle and related links can be dynamically added to the parent document's head. featureCallout.js can position the element based on the position of its parent element (as defined by the parent_selector for the current screen).

featureCallout.js should define the AW window functions as seen in render_multistage in spotlight.js. This includes capturing or defining an event when the screens change in aboutwelcome so that the callout can be re-positioned.

Updates should be made for the callout positioned screens in aboutwelcome.scss to match new designs.

Comment 1

[Meg Viar [:mviar]]

Attachment: WIP: Bug 1779024 - DEMO using about:welcome for Feature Callout surface

Comment 2

[Meg Viar [:mviar]]

Attachment: Bug 1779024 - Create Feature Callout message surface using aboutwelcome

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/92717aa5366c
Create Feature Callout message surface using aboutwelcome r=pdahiya,Gijs,Mardak

Comment 4

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/92717aa5366c

Comment 5

[Simona Rosu [:srosu], Ecosystem QA]

I‘ve verified this enhancement using the latest Firefox Nightly 105.0a1 (Build ID: 20220807214336) on Windows 10 x64, macOS 12.3.1, and Ubuntu 20.04 x64.

• The “Hop between devices with tab pickup” screen is shown on the “about:firefoxview” page if the “browser.firefox-view.feature-tour” pref is set to “{}” value.
• The “Get back your closed tabs in a snap” screen is displayed after clicking the “Next” button from the “Hop between devices with tab pickup” screen.
• The “Add a splash of color” screen is shown after clicking the “Next” button from the “Get back your closed tabs in a snap” screen.
• The “Add a splash of color” screen is dismissed and the “about:firefoxview” page is still displayed after clicking the “Finish” button from the “Add a splash of color” screen.

Comment 6

[Ed Lee :Mardak]

These messages got turned off in bug 1821826 and to be cleaned up in bug 1828508.