1840156 - Shopping toolbar button

Status: VERIFIED FIXED

(Firefox :: Shopping, task, P2)

Description

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

This bug covers creating a shopping page action button.

If the shopping experience is enabled, that is, browser.shopping.experience2023.enabled is true, then this button should appear in the URLBar when the user visits a supported product page.

If the shopping experience is disabled, that is, browser.shopping.experience2023.enabled is false, we don't want to show the page action button at all.

There is a pref that tells us whether a user has opted in or out of the experience, browser.shopping.experience2023.optedIn. (Note this is different from the browser.shopping.experience2023.enabled pref, which simply puts a user in the experimental population that might be shown the experience.)

If the browser.shopping.experience2023.optedIn pref value is false, then when the user visits a supported shopping page, we want to display the shopping page action button in an inactive state. (The sidebar will not pop open automatically in this case.)

If the browser.shopping.experience2023.optedIn pref value is true, then when the user visits a supported product page, the page action button will be shown in an active state, and the sidebar will appear.

Whenever the user clicks the page action button, the browser.shopping.experience2023.optedIn pref value should be flipped (note, this behavior may change in the next few days), and the button should toggle between active/inactive states.

Figma designs: https://www.figma.com/file/Wu4kaHSfKSQnzkym7qek3R/Shopping-Experience-MVP?type=design&node-id=67-23327&mode=design&t=VvOstFKWe7hwylJc-4

To notify your button component when the user arrives on a product page, you can make a call directly from either branch of the if (this._isProductPage) conditional here, inside the onLocationChange listener.

Explicit non-goals for this bug:

• we don't yet have a final icon, so don't spend too much time styling the placeholder shopping cart svg; flipping a color is enough.
• after the page action button is clicked, the sidebar toggling behavior is still not fully signed off, but flipping the pref is a good enough guess for now.

Implementation notes:

To notify your button component when the user arrives on a product page, you can make a call directly from either branch of the if (this._isProductPage) conditional here.

I would guess Gijs is the right person to review patches, as he's familiar with toolbar button code (I'm not sure if anyone else on the team is).

Comment 1

[Fred Chasen [:fchasen]]

Attachment: Bug 1840156 - Shopping urlbar button r?#shopping-reviewers

• Adds a urlbar button to toggle sidebar and show isProduct state
• ShoppingSidebarManager.toggleSidebar() method to open and close sidebar
• Add shopping cart svg

Comment 2

[Fred Chasen [:fchasen]]

Attachment: WIP: Bug 1840156 - Shopping toolbar button (scoped per window)

• Adds a urlbar button to toggle sidebar and show isProduct state
• ShoppingSidebarManager.toggleSidebar() method to open and close sidebar
• Add shopping cart svg
• Button only toggles sidebars in it's window
• Sidebar status is stick when opening new windows
• Sidebar status is saved to a pref for restoring

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e9ef633550ad
Shopping urlbar button r=shopping-reviewers,fluent-reviewers,desktop-theme-reviewers,Gijs,flod,jhirsch

Comment 4

[Natalia Csoregi [:nataliaCs]]

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

Comment 5

[Rares Doghi, Desktop QA]

Verified as fixed in our latest 119.0a1 (2023-08-28).