1858462 - Make the shopping sidebar resizable

Status: VERIFIED FIXED

(Firefox :: Shopping, task, P2)

Description

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

Right now, the shopping sidebar is not resizable. Let's define and implement the behavior to make it resizable.

Interesting questions:

• what's a good minimum width?
• what's a good maximum width?
• if you resize the sidebar in one tab, do we mirror that change to other tabs?
• if you resize the sidebar, then restart firefox, do we remember that change and keep the custom sidebar width in your next session?

Comment 1

[Julian Gaibler]

I chatted with Verdi, and we thought 220x as min-width and 420px as max-width would probably be good values (checked on macOS).
Smaller than 220x, the content squishes too much and larger than 420px, the UI elements get too far apart.

I'd also suggest moving from pixels to em (see bug 1851833) so the min and max values change according to the font size :)

In terms of mirroring behavior, maybe the size could be mirrored across tabs of the same window but reset to 320px for new windows? Our other sidebar seems to have a complicated inheritance system for the sidebar width (the sidebar size depends on the size of the sidebar of the currently focused window). That would also be cool, but I assume it is a bit too complex to replicate for the shopping sidebar(?)

Comment 2

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

I'd also suggest moving from pixels to em (see bug 1851833) so the min and max values change according to the font size :)

OK, what em values would you suggest, then?

In terms of mirroring behavior, maybe the size could be mirrored across tabs of the same window but reset to 320px for new windows?

Sure, that's fine. We have some per-window code where we could store this (the Actors and the ShoppingSidebarManager in browser.js).

Our other sidebar seems to have a complicated inheritance system for the sidebar width (the sidebar size depends on the size of the sidebar of the currently focused window). That would also be cool, but I assume it is a bit too complex to replicate for the shopping sidebar(?)

If the existing sidebar is open in a window, and you open a new window, the sidebar will be displayed in the new window automatically, as soon as it opens. This is why it makes sense to base the width of the new window's sidebar on the last focused window's sidebar.

In the case of the shopping sidebar, it only pops open when a supported product page is visited, so I think it makes less sense to try to base the width on the width of the last focused window's shopping sidebar--especially because the last focused window may or may not have a shopping sidebar currently displayed when a new window is opened.

Comment 3

[Julian Gaibler]

OK, what em values would you suggest, then?

Because we designed for Mac where the default size is 13px, I would suggest using the suggested pixel values divided by 13. Rounding to two decimal places should be enough I think.

min-width: 16.92em
default width: 24.62em
max-width: 32.31em

[...] so I think it makes less sense to try to base the width on the width of the last focused window's shopping sidebar

Alright, then let's just reset the size to the default width in new windows :)

Comment 4

[Niklas Baumgardner [:niklas]]

Attachment: Bug 1858462 - Make shopping sidebar resizable. r=#shopping-reviewers

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9f7e052804fc
Make shopping sidebar resizable. r=desktop-theme-reviewers,dao

Comment 6

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/9f7e052804fc

Comment 7

[Rares Doghi, Desktop QA]

Verified as fixed in 121.0a1 (2023-11-17).