Reland "Context menu: fix event handling on close"

This is a reland of commit dcc0329

The original CL caused e2e test failures on Mac bots. This reland
aims to fix this by awaiting the context menus to be fully closed
before moving on.

Original change's description:
> Context menu: fix event handling on close
>
> On Windows, closing a context menu by clicking on the button which
> opened it, would immediately re-open the menu. A fix was added in
> https://crrev.com/c/5592569, which relies on `requestAnimationFrame`.
> rAF does not trigger when when the window is not visible, which can
> happen for the device toolbar (rendered in the main browser window)
> when DevTools is detached and hidden behind another window.
>
> This CL replaces `requestAnimationFrame` with `setTimeout`.
>
> Bug: 377161958, 339560549
> Change-Id: Id6af436c41d14a6e16160faff4e160e40bbe4122
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6004964
> Auto-Submit: Wolfgang Beyer <[email protected]>
> Reviewed-by: Benedikt Meurer <[email protected]>
> Commit-Queue: Benedikt Meurer <[email protected]>

Bug: 377161958, 339560549
Change-Id: I3bef672cbfa201f7b53aa3003a709789394a8b0a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6017683
Auto-Submit: Wolfgang Beyer <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>

Author: wolfib

front_end/ui/legacy/Toolbar.ts

@@ -1028,9 +1028,9 @@ export class ToolbarMenuButton extends ToolbarCombobox {
       useSoftMenu: this.useSoftMenu,
       x: this.element.getBoundingClientRect().left,
       y: this.element.getBoundingClientRect().top + this.element.offsetHeight,
-      // Without rAF, pointer events will be un-ignored too early, and a single click causes the
-      // context menu to be closed and immediately re-opened on Windows (https://crbug.com/339560549).
-      onSoftMenuClosed: () => requestAnimationFrame(() => this.element.removeAttribute('aria-expanded')),
+      // Without adding a delay, pointer events will be un-ignored too early, and a single click causes
+      // the context menu to be closed and immediately re-opened on Windows (https://crbug.com/339560549).
+      onSoftMenuClosed: () => setTimeout(() => this.element.removeAttribute('aria-expanded'), 50),
     });
     this.contextMenuHandler(contextMenu);
     this.element.setAttribute('aria-expanded', 'true');

test/e2e/emulation/responsive_test.ts

@@ -7,14 +7,14 @@ import {
   pressKey,
   waitFor,
 } from '../../shared/helper.js';
-
 import {
   clickWidthInput,
   clickZoomDropDown,
   getZoom,
   openDeviceToolbar,
   reloadDockableFrontEnd,
   toggleAutoAdjustZoom,
+  waitForZoomDropDownNotExpanded,
 } from '../helpers/emulation-helpers.js';
 
 describe('Custom devices', () => {
@@ -24,10 +24,11 @@ describe('Custom devices', () => {
     await openDeviceToolbar();
   });
 
-  it('can preserved zoom', async () => {
+  it('can preserve zoom', async () => {
     await clickZoomDropDown();
     await pressKey('ArrowDown');
     await pressKey('Enter');
+    await waitForZoomDropDownNotExpanded();
     assert.strictEqual(await getZoom(), '50%');
 
     await clickWidthInput();
@@ -37,6 +38,7 @@ describe('Custom devices', () => {
     await clickZoomDropDown();
     await pressKey('ArrowDown');
     await pressKey('Enter');
+    await waitForZoomDropDownNotExpanded();
     assert.strictEqual(await getZoom(), '50%');
 
     await toggleAutoAdjustZoom();

test/e2e/helpers/emulation-helpers.ts

@@ -10,6 +10,7 @@ import {
   getBrowserAndPages,
   goToResource,
   waitFor,
+  waitForFunction,
 } from '../../shared/helper.js';
 
 import {
@@ -100,32 +101,51 @@ export const selectToggleButton = async () => {
 export const selectEdit = async () => {
   await clickDevicesDropDown();
   await click(EDIT_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
 };
 
 export const selectDevice = async (name: string) => {
   await clickDevicesDropDown();
   await click(`[aria-label*="${name}, unchecked"]`);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
 };
 
 export const selectTestDevice = async () => {
   await clickDevicesDropDown();
   await click(TEST_DEVICE_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
 };
 
 // Test if span button works when emulating a dual screen device.
 export const selectDualScreen = async () => {
   await clickDevicesDropDown();
   await click(SURFACE_DUO_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
 };
 
 export const selectFoldableDevice = async () => {
   await clickDevicesDropDown();
   await click(FOLDABLE_DEVICE_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
+};
+
+const waitForNotExpanded = async (selector: string) => {
+  const toolbar = await waitFor(DEVICE_TOOLBAR_SELECTOR);
+  const dropdown = await waitFor(selector, toolbar);
+  await waitForFunction(async () => {
+    const expanded = await dropdown.evaluate(el => el.getAttribute('aria-expanded'));
+    return expanded === null;
+  });
+};
+
+export const waitForZoomDropDownNotExpanded = async () => {
+  await waitForNotExpanded(ZOOM_LIST_DROPDOWN_SELECTOR);
 };
 
 export const clickDevicePosture = async (name: string) => {
   await clickDevicePostureDropDown();
   await click(`[aria-label*="${name}, unchecked"]`);
+  await waitForNotExpanded(DEVICE_POSTURE_DROPDOWN_SELECTOR);
 };
 
 export const getDevicePostureDropDown = async () => {
@@ -155,6 +175,7 @@ export const getZoom = async () => {
 export const toggleAutoAdjustZoom = async () => {
   await clickZoomDropDown();
   await click(AUTO_AUTO_ADJUST_ZOOM_SELECTOR);
+  await waitForZoomDropDownNotExpanded();
 };
 
 const IPAD_MENU_ITEM_SELECTOR = '[aria-label*="iPad"]';
@@ -163,4 +184,5 @@ const IPAD_MENU_ITEM_SELECTOR = '[aria-label*="iPad"]';
 export const selectNonDualScreenDevice = async () => {
   await clickDevicesDropDown();
   await click(IPAD_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
 };

test/e2e/helpers/settings-helpers.ts

@@ -31,6 +31,13 @@ export const openPanelViaMoreTools = async (panelTitle: string) => {
   // Click the desired menu item
   await click(`aria/${panelTitle}[role="menuitem"]`);
 
+  // Wait for the triple dot menu to be collapsed.
+  const button = await waitForAria('Customize and control DevTools');
+  await waitForFunction(async () => {
+    const expanded = await button.evaluate(el => el.getAttribute('aria-expanded'));
+    return expanded === null;
+  });
+
   // Wait for the corresponding panel to appear.
   await waitForAria(`${panelTitle} panel[role="tabpanel"]`);
 };

test/e2e/recorder/replay_test.ts

@@ -658,7 +658,7 @@ describe('Recorder', function() {
     );
   });
 
-  it('should be able to  navigate to a prerendered page', async () => {
+  it('should be able to navigate to a prerendered page', async () => {
     await setupRecorderWithScriptAndReplay({
       title: 'Test Recording',
       steps: [