Implement "callout 6" for RC in the sidebar, when a user closes RC
Categories
(Firefox :: Shopping, task, P2)
Tracking
()
Tracking | Status | |
---|---|---|
firefox137 | --- | fixed |
People
(Reporter: kpatenio, Assigned: rking)
References
(Blocks 2 open bugs)
Details
(Whiteboard: [fidefe-RCSidebar])
Attachments
(2 files)
This is for "Callout 6" 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_...
.
We have no existing RC equivalent of this callout, so it will be a brand new addition.
The new callout for the integrated sidebar
The goal of Callout 6 is explain where to find RC after closing the sidebar panel using either the X button or sidebar button. Here is the Figma: https://www.figma.com/design/GnCtw7DmPtlSEIfjatHtSI/Review-Checker-in-sidebar-migration?node-id=12468-125026&m=dev
Adding the callouts
Add a new object for Callout 6 and 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. Like some of our other callouts, make sure we're checking thatoptedIn
== 1. - If not yet included, add a new SVG for the illustration. It is the same illustration used for the new versions of Callout 4A and Callout 5. If applicable, don't forget to optimize the SVG using https://svgomg.net/ and by following our SVG guidelines.
- Set the frequency to once in a lifetime
- As for the trigger, it's probably easiest to listen for the pref
browser.shopping.experience2023.active
changing to false. When false, the sidebar is closed.
And lastly, for the anchor:
- We might want to select either the sidebar button if the sidebar.visibility is set to "always-hide". The selector would be
#sidebar-button
. - Otherwise, select the RC tool icon if the sidebar.visibility is set to "always-show". The selector would be
"#sidebar-main > sidebar-main::%shadow% .tools-and-extensions::%shadow% moz-button[view='viewReviewCheckerSidebar']"
.
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
|
Comment 4•15 days ago
|
||
bugherder |
Description
•