Fix up mobile interaction for menu actions.

Review Request #13061 — Created May 23, 2023 and submitted — Latest diff uploaded


Review Board


Interacting with actions located in menus was broken in a few different
ways on mobile. Some of these problems were baked into the menu
implementation from the very beginning, and some are a bit more recent.

To fix these issues, this change does several things:

  • Hidden menus were being set to have visibility: hidden and
    opacity: 0, but this still can allow them to be interacted with.
    When in mobile mode, various action menus would overlap, so a click on
    something in the "Review" menu was accidentally activating things in
    the "Close" menu.
  • Interaction with a lot of the menus relied entirely on the :focus
    and :hover states. This kind of worked sometimes with the way that
    mobile browsers deal with touch events, but it wasn't reliable, and
    barely worked at all with mobile mode in desktop browser devtools.
    I've added explicit touch event handlers to improve the interaction.
  • The "Review" menu in particular is very modal, and takes up a lot of
    the screen when working on mobile. I've added an event overlay over
    the rest of the page so that taps outside of the menu area will
    dismiss the menu.
  • Exercised all of the menus and actions using both mobile and desktop
  • Ran python tests
  • Ran js tests