Fenix: FNX-486 ⁃ [Bug] Context menus across app are too wide (like Bookmarks)

[yoasif]

Steps to reproduce

1. Open Library > Bookmarks
2. Open context menu next to a bookmark

Expected behavior

Narrower menu that shows menu items without looking oddly wide.

Fennec and Kiwi look neater:

Actual behavior

Menu looks too wide.

Device information

• Android device: Pixel 2
• Fenix version: latest play store

[liuche]

This has already taken a lot of work, and isn't worth continuing bc of eng effort for ROI.

[sblatz]

My WIP PR: https://github.com/mozilla-mobile/android-components/pull/3714

[vesta0]

@liuche is this still too much ENG work (narrowing the BOOKMARK context menu)? If so, please comment and close this.

[liuche]

@sblatz @ekager I assume the difficulty here hasn't changed much, and it's still hard to handle dynamically sizing (or shrinking) the context menus in AC?

[ekager]

cc @Mugurell it looks like you landed something in AC that could help with this?

[Mugurell]

Thanks Emily!

Indeed, I recently added support for dynamic width menus in A-C (https://github.com/mozilla-mobile/android-components/issues/6499) but using only xml set values.
The next step would be to add runtime values support, should be fairly easy.

For this ticket we would just need to know a min/max width for the menu.
I guess

• min would be let's say 10dp (as small as possible)
• max would be 250dp (I think what it is now)

?

The menu will have a dynamic width between this values, it will be as narrow as the widest menu action.

[ekager]

Sounds good to me! As long as it's adjusting to the widest menu item doesn't really matter what the min is 👍

[Mugurell]

Having the possibility of setting a min/max size for each menu is definitely nice.
Based on also what Emily said above I was thinking that maybe we should make it as a default for all menus to be as small as their widest item.
Currently all menus can have between 250dp-314dp width. Should we by default allow for even a smaller width?

[topotropic]

Would be great to align to an 8dp grid and follow material guidelines where the minimum width is 112dp and max width is 280dp.

[liuche]

This is still important to Vesta, but it's too much work before Release.

[Mugurell]

I think I might have an easy solution following the recent https://github.com/mozilla-mobile/fenix/issues/7157 and the UX directions from:

• https://github.com/mozilla-mobile/fenix/issues/10541#issuecomment-635147257 & https://github.com/mozilla-mobile/fenix/issues/7157#issue-537777448 - Maximum width: 314 dp while also ensuring a minimum 48dp tappable “exit area” available whenever the menu is open.
• https://github.com/mozilla-mobile/fenix/issues/1871#issuecomment-638842210 - minimum width is 112dp.

The menu width should be dynamic between this constraints, wrapping it's content.

[ghost]

@Mugurell I think I'm somewhat late to report my comments now since there're some commits that have already been added, but can you please take a look at my comment on the issue #11716. I think the three-dot menus on the bottom navigation tray and the menu at the new Tabs Tray should be reverted to the previous state. I know it'll introduces some inconsistencies with the other existing menus but I think the menus I mentioned should be expanded back because of the usability of the buttons and when using them with only the right hand and the thumb button will be at the centre so clicking it'll be harder if the buttons are reduced in size.

[softvision-miralobontiu]

Verified as fixed on the latest Nightly build from 6/19 with Sony Xperia Z5 Premium (Android 7.1.1), and OnePlus 5T (Android 9).
The context menus, three-dot menus, bookmark menus are dynamic, adjusting to it's content.