[Feature] Make three-dot menu scrollable and expandable

[eliserichards]

Meta: #17796
Followup to #17771

UX point of contact: @violasong (Victoria)

Figma designs (bottom right, labeled "Final design"): https://www.figma.com/file/NHu4cTmzfYgi3QJz5DIDWD/Fenix-Toolbar-Menus?node-id=0%3A1

Acceptance criteria

• The three-dot menu should have an initial short height
• The menu should expand when the user scrolls down to see other menu items (see second picture for max height)
• The menu should match the Top/Bottom orientation of the toolbar setting:
  • Toolbar set to Top: user can scroll down. The menu does not expand.
  • Toolbar set to Bottom: user can scroll down. The menu expands upwards.
  • The navigation bar (back, forward, share, refresh) should be on TOP or BOTTOM, respecting this setting

Notes:

• This should be tested on multiple device sizes
• The width of the menu should not change

Top toolbar

┆Issue is synchronized with this Jira Task

[Mugurell]

Looked into this, trying to get it done with the least of changes but seems like using the PopupWindow's update() does not really gives us the expected animations and results. I think though we should be able to the height increase on our own.

Just wanted to confirm with UX that

• the starting height of the menu should be 472dp (or the screen height, whichever is smaller) and
• the menu should expand to show all items (or the screen height, whichever is smaller)

[violasong]

Starting height should be enough to cut off the bottom of the "Add to Home screen" label (or screen height, whichever is smaller)

Paraphrase from @kbrosnan: Here's the way Fennec solved this: When overflow was planned for there was always a half item at the end showing you could scroll in that direction. If you were making a list 4 items tall the container for that list was 3.75 items tall so that if there was a 5th item it was clear there was truncation

[eliserichards]

the menu should expand to show all items (or the screen height, whichever is smaller)

Yes :)

Additional info: When the top toolbar is set, the menu should always be fully expanded (so it is easier to reach items with your thumb)

[Mugurell]

Regarding testing the collapsed/expanding menu, this is for now only available in debug builds.

[lobontiumira]

Hi all!
I've tested with Google Pixel (Android 10), and Samsung Galaxy Note 8 (Android 9), on a debug build with AC: 75.0.20210405143037, a69f74ece, and GV 89.0a1-20210405094633.

On Google Pixel, the menu is scrollable, no issues encountered:

• I was able to exit the menu by tapping anywhere outside the menu,
• I was able to access any option from the menu both when the menu was collapsed, and fully displayed,
• I was able to access the options from the menu when the toolbar was set to the top.

scrollable.light.mp4

However, on Samsung Galaxy Note 8 (Android 9):

• I was able to exit the menu by tapping anywhere outside the menu,
• I was NOT able to access any of the options from the menu while the menu was fully displayed,
• when the menu was collapsed, the options from the menu are responsive,
• when the toolbar was set to the top, the menu was responsive.

Samsung.blocked.mp4

logcat Samsung.txt

@Mugurell should I file a new issue regarding the blocked menu?
Removing the qa:needed label for now.

[Mugurell]

@lobontiumira I have some questions regarding the issue seen on the Note 8:

• does it always reproduce, and just on this device?
• does the menu get closed if pressing back?
• is the app / system still responding?
• does such an issue exist on Nightly on that device?

[Mugurell]

Also, you can open a new ticket to investigate there.

[lobontiumira]

• does it always reproduce, and just on this device?
  Yes, always, not reproducible on Google Pixel (Android 10), nor on OnePlus 5T (Android 10).
• does the menu get closed if pressing back?
  Only if pressing the device's back button.
• is the app / system still responding?
  Yes, I was able to enter Settings, for example, after entering in tabs tray - new tab - three-dot menu from Homescreen.
• does such an issue exist on Nightly on that device?
  Not reproducible on the 4/6 Nightly build on the same device.

I will open a new issue #18814

[cadeyrn]

@eliserichards The "scrollable and expandable" is not yet implemented as per mockup. The icon row should always be visible. Should this issue be reopened or is this covered by another issue?

[Mugurell]

@eliserichards The "scrollable and expandable" is not yet implemented as per mockup. The icon row should always be visible. Should this issue be reopened or is this covered by another issue?

If you're referring at

this will follow up in mozilla-mobile/android-components#9932

[cadeyrn]

If you're referring at

Exactly. Thanks! :)

[mrandreastoth]

I've read this ticket and I still don't understand the justification to force a reduced display height of the menu when the current orientation allows the complete menu to be shown. By this ticket's own logic, this would mean that an app, any spp, should only utilise the maximum height based on the minimum height of the device's possible orientations! Seriously, the correct solution would and should be that the menu is always rendered to its full height even if the current orientation doesn't fit it and that the menu is scrollable, just like a webpage. That is the correct solution, and not what this ticket describes and implements. Please review.