1754832 - Open spotlight tab modal from PBM

Status: VERIFIED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Punam Dahiya [:pdahiya]]

Scope of this bug is to open link or a tab modal based on click of promo CTA based off configuration set in promo message JSON
https://www.figma.com/file/DuYnaE2DxETEbBFUOrNzyM/Privacy-Segmentation?node-id=707%3A2753

Comment 1

[Andrei Oprea [:andreio]]

Attachment: WIP: Bug 1754832 - Update PBM template to support opening modal with configurable text and image

Comment 2

[Punam Dahiya [:pdahiya]]

Thanks @andrei for helping investigate and determine feasibility of this work. As discussed, ideally we should reuse spotlight from about:privatebrowsing to handle displaying this modal.

@mardak need your feedback if it's ok to reuse spotlight.html for this usecase . See figma https://www.figma.com/file/DuYnaE2DxETEbBFUOrNzyM/Privacy-Segmentation?node-id=707%3A2720 - Option B

Some of the edge cases that might be unique to about:private browsing modal is

1. Need explicit close button
2. Telemetry collected should be only when in experiment or in future special handling to send telemetry without client_id
3. Modal should display in center of the window
4. Modal template might display two additional market place icon 'Download From Google Play', 'Download From App Store' (Designs need to be updated)

Comment 3

[Punam Dahiya [:pdahiya]]

Assigning myself to update patch as per finalized designs. Thanks

Comment 4

[Ed Lee :Mardak]

Currently the spotlight messaging surface is always a window-modal (i.e., blocks access to other tabs), and the template doesn't quite match any existing spotlight or refactored about:welcome implementation (e.g., no buttons, showing multiple images and a link). We could add the capability as part of bug 1739252 ideally reusing about:welcome components bug 1752935.

Potentially this could be implemented as…

• show close button
• show another image
• allow not having a primary button
• allow prefixing the secondary button (here "or" and treating "email yourself a link" as the secondary button)
  -- or maybe via fluent and special styling, e.g., email-secondary = or <a data-l10n-name=link>email yourself…</a> ??

This is in addition to attachment 9263764 [details]'s hooking up the ability to open up a spotlight.

Comment 5

[Punam Dahiya [:pdahiya]]

Thanks Ed for clarifying, curious how big of a change configuring spotlight to be a modal that doesn't block other tab. If UX requires user to continue browsing in other tabs similar to about:preferences#sync -> Sync on -> Change dialog

Comment 6

[Punam Dahiya [:pdahiya]]

Attachment: Bug 1754832 - Update PBM to support opening spotlight tab modal

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c7b9d567515c
Update PBM to support opening spotlight tab modal r=Mardak,mviar,fluent-reviewers,flod

Comment 8

[Iulian Moraru]

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

Comment 9

[Simona Rosu [:srosu], Ecosystem QA]

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

• The "Firefox Focus" promo message is displayed on a new private window, and it is not shown in a second opened tab.
• The Firefox Focus promo is displayed only once per week and only 3 times per browser profile.
• The spotlight modal is opened after clicking the CTA button from the promo message and contains the following elements:
  • A QR code image;
  • “Get Firefox Focus” title;
  • “Scan the QR Code to Download” subtitle;
  • “Email yourself a link” primary button;
  • “Close” secondary button.
• Also, now the user can continue browsing in other tabs while the spotlight modal is displayed.
• The Firefox Focus promo is dismissed after clicking the “Close” button.
• No telemetry probe is registered when clicking the “Download Firefox Focus” and “Close” buttons from the Firefox Focus promo message.

Comment 10

[Ed Lee :Mardak]

This bug added selecting either gDialogBox or getTabDialogBox for window vs tab modals.