Polish and fix regressions in the new menu components.

Review Request #10936 — Created March 3, 2020 and submitted

Information

Review Board
release-4.0.x

Reviewers

The new rb-c-menu/RB.MenuView component had a few design decisions
made early on that, upon further reflection, weren't really necessary,
and impacted other parts of the UI.

It used display: block/none to control visibility, for a couple
reasons that made sense earlier in development, but weren't ultimately
needed. Since display cannot be animated, and affected animations, it
was up to RB.MenuView to more closely manage the opening/closing
states, adding some JS-specific intermediary classes to turn display
on/off at the right times. This actually broke the legacy .menu class,
which broke opening review request action menus.

Addressing this was actually pretty easy, and allowed for the deletion
of a lot of code. We're now once again using visibility and opacity
to fully manage the display. The JS intermediary state classes are now
gone, and all the setTimeout calls in RB.MenuView are gone as well.
This also allowed RB.MenuView.open() and close() to consolidate
fully into _setOpened().

It also fixes an issue with the key bindings. Previously, RB.MenuView
captured all keyboard events, with the idea being that while you're
interacting with a menu, you shouldn't be triggering other elements
accidentally. That ended up not working as well in practice. This
prevented things like jumping to another part of the UI via a keyboard
shortcut (posing an accessibility issue), or even reloading the page.
It no longer swallows all events, only preventing default behavior and
bubbling if the event is being specifically handled by the menu.

Unit tests pass.

Tested both mouse-based and keyboard-based navigation and usage of the
menu. Verified that keyboard-based navigation didn't animate the menu
(ensuring that capability hasn't broken).

Tested that the review request action menus worked.

Summary ID
Polish and fix regressions in the new menu components.
The new `rb-c-menu`/`RB.MenuView` component had a few design decisions made early on that, upon further reflection, weren't really necessary, and impacted other parts of the UI. It used `display: block/none` to control visibility, for a couple reasons that made sense earlier in development, but weren't ultimately needed. Since `display` cannot be animated, and affected animations, it was up to `RB.MenuView` to more closely manage the opening/closing states, adding some JS-specific intermediary classes to turn `display` on/off at the right times. This actually broke the legacy `.menu` class, which broke opening review request action menus. Addressing this was actually pretty easy, and allowed for the deletion of a lot of code. We're now once again using `visibility` and `opacity` to fully manage the display. The JS intermediary state classes are now gone, and all the `setTimeout` calls in `RB.MenuView` are gone as well. This also allowed `RB.MenuView.open()` and `close()` to consolidate fully into `_setOpened()`. It also fixes an issue with the key bindings. Previously, `RB.MenuView` captured all keyboard events, with the idea being that while you're interacting with a menu, you shouldn't be triggering other elements accidentally. That ended up not working as well in practice. This prevented things like jumping to another part of the UI via a keyboard shortcut (posing an accessibility issue), or even reloading the page. It no longer swallows all events, only preventing default behavior and bubbling if the event is being specifically handled by the menu.
e161ccf2ca74898c794add549eaaec1931c7b059
Description From Last Updated

This needs to have "Returns:" now.

daviddavid
david
  1. 
      
  2. Show all issues

    This needs to have "Returns:" now.

  3. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-4.0.x (4208681)