Open Bug 1938413 Opened 2 months ago Updated 4 days ago

Implement "callout 4A" and "callout 4B" for RC in the sidebar, when a user disables auto-open

Categories

(Firefox :: Shopping, task, P2)

task
Points:
3

Tracking

()

People

(Reporter: kpatenio, Assigned: rking)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [fidefe-RCSidebar])

Attachments

(4 files)

This is for "Callout 4A" and "Callout 4B" in Bug 1919914.

Background information
All of our current callouts are implemented in a file called FeatureCalloutMessages.sys.mjs. Each "message" is essentially made up of an object with data that defines its characteristics, and the ones specific to shopping/Review Checker are identified by ids starting with FAKESPOT_CALLOUT_....

Although we have an existing "callout 4" in that file, it's not an exact copy of the new "Callout 4A" or "Callout 4B" for the migrated RC that we want to make. The only similarity is that either will be triggered after disabling the auto-open setting.

The new callouts for the integrated sidebar
The goal of either 4A or 4B is to confirm users' choice to disable auto-open and remind them how to open RC. Here is the Figma: https://www.figma.com/design/GnCtw7DmPtlSEIfjatHtSI/Review-Checker-in-sidebar-migration?node-id=12468-124963&m=dev

Adding the callouts
We don't want to replace the existing callouts for now. We'll need two separate objects in the same file: one for 4A, and another for 4B.

For both variants, we want to make the following changes:

  • Add new strings for the content in the non localized version of shopping.ftl. (Unlike the other shopping.ftl, this version is a good place for strings that we don't want to finalize just yet).
  • Modify the targeting to include our integratedSidebar pref == true. We may want to include sidebar.revamp == true as well.
  • If not yet included, add a new SVG for the illustration. It is the same illustration used for the new versions of Callout 5 and Callout 6. If applicable, don't forget to optimize the SVG using https://svgomg.net/ and by following our SVG guidelines.

For 4A only:

  • Update the selector for the anchor to "#sidebar-main > sidebar-main::%shadow% .tools-and-extensions::%shadow% moz-button[view='viewReviewCheckerSidebar']", so that it will appear over the RC icon in the sidebar.
  • We only want to show this variant if the sidebar setting Expand and collapse sidebar is enabled. One thing we could do is is check sidebar.visibility === "always-show" in our targeting.

For 4B only:

  • Update the selector to target the sidebar toggle button via #sidebar-button.
  • We only want to show the other variant if the sidebar button setting is set to Show and hide sidebar. Similarly, we can check the sidebar.visibility pref === "hide-sidebar" in our targeting.

Testing the callout
The easiest way to test the callouts locally is to go to about:asrouter. See these docs to get it set up. You'll need the sidebar with RC enabled to have it appear. Alternatively, you can temporarily change the anchor selector for the callout. If there's issues with the callout not appearing, try experimenting with the anchor_attachment and callout_attachment.

Severity: -- → N/A
Priority: -- → P2
Whiteboard: [fidefe-RCSidebar]
Attached image CURRENT_RC_callout4.png
Attached image NEW_RC_callout4B.png
Points: --- → 3
Assignee: nobody → rking
Blocks: 1947489
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: