Implement "callout 4A" and "callout 4B" for RC in the sidebar, when a user disables auto-open
Categories
(Firefox :: Shopping, task, P2)
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 ourintegratedSidebar
pref == true. We may want to includesidebar.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 thesidebar.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
.
Updated•2 months ago
|
Description
•