1839725 - Create main sidebar container

Status: RESOLVED FIXED

(Firefox :: Shopping, task, P2)

Description

[Niklas Baumgardner [:niklas]]

The main sidebar container should contain the header with title and Firefox icon and the close button.

Animation can potentially be coped from HNT settings panel (TBD)

Sidebar will push content over, not overlay the content page

See figma for design

Comment 1

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

Note the header is sticky: it remains visible at the top of the sidebar even if the user scrolls through sidebar content.

See also a11y annotations in figma: https://www.figma.com/file/Wu4kaHSfKSQnzkym7qek3R/Shopping-Experience-MVP?type=design&node-id=1-265&mode=design&t=s4GFkPNxsyXbFQRZ-0

Comment 2

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

Attachment: 6/23 screenshot of figma

Figma shows lots of different content inside the main container, but the key bit is the stuff in the header and the X to hide the sidebar, which is shown in the screenshot.

The text in the header is TBD.

Comment 3

[Niklas Baumgardner [:niklas]]

Attachment: Bug 1839725 - Create main sidebar container for shopping. r=#shopping-reviewers!

Comment 4

[Itiel]

Hi emilio, can you please see https://phabricator.services.mozilla.com/D182932#inline-1015075 and suggest a solution so that the scrollbar won't consume part of the padding, in a way that the widths specified there will still apply?

You can test this by flipping browser.shopping.experience2023.enabled to true and opening an amazon product page, and then navigating to chrome://browser/content/shopping/shopping.html

Comment 5

[Emilio Cobos Álvarez (:emilio)]

I mean, the scrollbar needs to consume some of the space, the reason it doesn't seem to is because of the hard-coded width: 288px in the shopping-card. I think that should be removed, then stuff works as you expect, because the shopping card shrinks as needed. Or what else am I missing? Otherwise there's no other way of placing the scrollbar.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fabc28b96964
Create main sidebar container for shopping. r=shopping-reviewers,Itiel,fluent-reviewers,bolsson,kpatenio

Comment 7

[Sandor Molnar[:smolnar]]

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