Bug 1808715 - Port bug 1805414: Click through menu button dropmarkers and fix clicking on menu items in tests. r=mkmelin

Differential Revision: https://phabricator.services.mozilla.com/D166102

--HG--
extra : moz-landing-system : lando

calendar/test/browser/browser_eventUndoRedo.js

@@ -36,11 +36,21 @@ async function isDisabled(element) {
 
   let hiddenPromise = BrowserTestUtils.waitForEvent(targetMenu, "popuphidden");
   let status = element.disabled;
-  EventUtils.synthesizeKey("VK_ESCAPE");
+  targetMenu.hidePopup();
   await hiddenPromise;
   return status;
 }
 
+async function clickItem(element) {
+  let targetMenu = document.getElementById("menu_EditPopup");
+
+  let shownPromise = BrowserTestUtils.waitForEvent(targetMenu, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(document.getElementById("menu_Edit"), {});
+  await shownPromise;
+
+  targetMenu.activateItem(element);
+}
+
 /**
  * Removes CalTransaction items from the CalTransactionManager stacks so other
  * tests are unhindered.
@@ -81,7 +91,7 @@ async function testAddUndoRedoEvent(undoId, redoId) {
   Assert.ok(await isDisabled(redo), `#${redoId} is disabled`);
 
   // Test undo.
-  undo.doCommand();
+  await clickItem(undo);
   await TestUtils.waitForCondition(() => {
     eventItem = document.querySelector("calendar-month-day-box-item");
     return !eventItem;
@@ -90,7 +100,7 @@ async function testAddUndoRedoEvent(undoId, redoId) {
   Assert.ok(!eventItem, `#${undoId} reverses item creation`);
 
   // Test redo.
-  redo.doCommand();
+  await clickItem(redo);
   await TestUtils.waitForCondition(() => {
     eventItem = document.querySelector("calendar-month-day-box-item");
     return eventItem;
@@ -140,7 +150,7 @@ async function testModifyUndoRedoEvent(undoId, redoId) {
   Assert.ok(await isDisabled(redo), `#${redoId} is disabled`);
 
   // Test undo.
-  undo.doCommand();
+  await clickItem(undo);
   await TestUtils.waitForCondition(() => {
     eventItem = document.querySelector("calendar-month-day-box-item");
     return eventItem && eventItem.item.title == "Modifiable Event";
@@ -149,7 +159,7 @@ async function testModifyUndoRedoEvent(undoId, redoId) {
   Assert.equal(eventItem.item.title, "Modifiable Event", `#${undoId} reverses item modification`);
 
   // Test redo.
-  redo.doCommand();
+  await clickItem(redo);
   await TestUtils.waitForCondition(() => {
     eventItem = document.querySelector("calendar-month-day-box-item");
     return eventItem && eventItem.item.title == "Modified Event";
@@ -197,7 +207,7 @@ async function testDeleteUndoRedo(undoId, redoId) {
   Assert.ok(await isDisabled(redo), `#${redoId} is disabled`);
 
   // Test undo.
-  undo.doCommand();
+  await clickItem(undo);
   await TestUtils.waitForCondition(() => {
     eventItem = document.querySelector("calendar-month-day-box-item");
     return eventItem;
@@ -205,7 +215,7 @@ async function testDeleteUndoRedo(undoId, redoId) {
   Assert.ok(eventItem, `#${undoId} reverses item deletion`);
 
   // Test redo.
-  redo.doCommand();
+  await clickItem(redo);
   await TestUtils.waitForCondition(() => {
     eventItem = document.querySelector("calendar-month-day-box-item");
     return !eventItem;

calendar/test/browser/invitations/head.js

@@ -152,7 +152,7 @@ async function clickMenuAction(win, buttonId, actionId) {
   let menuShown = BrowserTestUtils.waitForEvent(actionMenu, "popupshown");
   EventUtils.synthesizeMouseAtCenter(actionButton.querySelector("dropmarker"), {}, win);
   await menuShown;
-  EventUtils.synthesizeMouseAtCenter(win.document.getElementById(actionId), {}, win);
+  actionMenu.activateItem(win.document.getElementById(actionId));
   await TestUtils.waitForCondition(() => actionButton.hidden, `action menu "#${buttonId}" hidden`);
 }
 

mail/base/test/browser/browser_menulist.js

@@ -78,24 +78,23 @@ add_task(async () => {
   is(testDocument.activeElement, menulists[0]);
 
   EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, testWindow);
-  is(testDocument.activeElement, beforeButton);
+  is(testDocument.activeElement, beforeButton, "focus back to the start");
 
+  let popup = menulists[2].menupopup;
   // The dropmarker should open and close the popup.
+  let openEvent = BrowserTestUtils.waitForEvent(popup, "popupshown");
   EventUtils.synthesizeMouseAtCenter(
     menulists[2]._dropmarker,
     { clickCount: 1 },
     testWindow
   );
-  await new Promise(resolve => setTimeout(resolve));
-  ok(menulists[2].hasAttribute("open"));
+  await openEvent;
+  ok(menulists[2].hasAttribute("open"), "popup open");
 
-  EventUtils.synthesizeMouseAtCenter(
-    menulists[2]._dropmarker,
-    { clickCount: 1 },
-    testWindow
-  );
-  await new Promise(resolve => setTimeout(resolve));
-  ok(!menulists[2].hasAttribute("open"));
+  let hiddenEvent = BrowserTestUtils.waitForEvent(popup, "popuphidden");
+  popup.hidePopup();
+  await hiddenEvent;
+  ok(!menulists[2].hasAttribute("open"), "closed again");
 
   // Open the popup and choose an item.
   EventUtils.synthesizeMouseAtCenter(
@@ -103,18 +102,14 @@ add_task(async () => {
     { clickCount: 1 },
     testWindow
   );
-  await new Promise(resolve => setTimeout(resolve));
-  ok(menulists[2].hasAttribute("open"));
+  await BrowserTestUtils.waitForEvent(popup, "popupshown");
+  ok(menulists[2].hasAttribute("open"), "open for item click");
 
   await new Promise(resolve => {
     menulists[2].addEventListener("select", () => setTimeout(resolve), {
       once: true,
     });
-    EventUtils.synthesizeMouseAtCenter(
-      menulists[2].querySelectorAll("menuitem")[0],
-      { clickCount: 1 },
-      testWindow
-    );
+    popup.activateItem(menulists[2].querySelectorAll("menuitem")[0]);
   });
   ok(!menulists[2].hasAttribute("open"));
   is(testDocument.activeElement, menulists[2]);
@@ -129,18 +124,14 @@ add_task(async () => {
     { clickCount: 1 },
     testWindow
   );
-  await new Promise(resolve => setTimeout(resolve));
+  await BrowserTestUtils.waitForEvent(popup, "popupshown");
   ok(menulists[2].hasAttribute("open"));
 
   await new Promise(resolve => {
     menulists[2].addEventListener("select", () => setTimeout(resolve), {
       once: true,
     });
-    EventUtils.synthesizeMouseAtCenter(
-      menulists[2].querySelectorAll("menuitem")[1],
-      { clickCount: 1 },
-      testWindow
-    );
+    popup.activateItem(menulists[2].querySelectorAll("menuitem")[1]);
   });
   ok(!menulists[2].hasAttribute("open"));
   is(testDocument.activeElement, menulists[2]);
@@ -173,18 +164,14 @@ add_task(async () => {
     { clickCount: 1 },
     testWindow
   );
-  await new Promise(resolve => setTimeout(resolve));
+  await BrowserTestUtils.waitForEvent(popup, "popupshown");
   ok(menulists[2].hasAttribute("open"));
 
   await new Promise(resolve => {
     menulists[2].addEventListener("select", () => setTimeout(resolve), {
       once: true,
     });
-    EventUtils.synthesizeMouseAtCenter(
-      menulists[2].querySelectorAll("menuitem")[0],
-      { clickCount: 1 },
-      testWindow
-    );
+    popup.activateItem(menulists[2].querySelectorAll("menuitem")[0]);
   });
   ok(!menulists[2].hasAttribute("open"));
   is(testDocument.activeElement, menulists[2]);

mail/components/cloudfile/test/browser/browser_repeat_upload.js

@@ -179,11 +179,7 @@ add_task(async () => {
   let bucket = composeDocument.getElementById("attachmentBucket");
   await new Promise(resolve => {
     bucket.addEventListener("attachments-added", resolve, { once: true });
-    EventUtils.synthesizeMouseAtCenter(
-      menuitems[1],
-      { clickCount: 1 },
-      composeWindow
-    );
+    menu.menupopup.activateItem(menuitems[1]);
   });
   info("attachment added");
   await promiseAnimationFrame(composeWindow);

mail/test/browser/composition/browser_attachmentReminder.js

@@ -356,11 +356,7 @@ async function click_manual_reminder(aCwc, aExpectedState) {
   );
   await shownPromise;
   let hiddenPromise = BrowserTestUtils.waitForEvent(popup, "popuphidden");
-  EventUtils.synthesizeMouseAtCenter(
-    aCwc.e("button-attachPopup_remindLaterItem"),
-    {},
-    aCwc.window
-  );
+  popup.activateItem(aCwc.e("button-attachPopup_remindLaterItem"));
   await hiddenPromise;
   wait_for_window_focused(aCwc.window);
   assert_manual_reminder_state(aCwc, aExpectedState);

mail/test/browser/composition/head.js

@@ -55,10 +55,6 @@ async function chooseIdentity(win, identityKey) {
   );
   await shownPromise;
   let hiddenPromise = BrowserTestUtils.waitForEvent(popup, "popuphidden");
-  EventUtils.synthesizeMouseAtCenter(
-    popup.querySelector(`[identitykey="${identityKey}"]`),
-    {},
-    win
-  );
+  popup.activateItem(popup.querySelector(`[identitykey="${identityKey}"]`));
   await hiddenPromise;
 }

mail/themes/linux/mail/menulist.css

@@ -10,13 +10,10 @@ menulist::part(text-input) {
 }
 
 menulist[is="menulist-editable"][editable="true"] {
-  appearance: auto;
-  -moz-default-appearance: textfield;
-  margin-inline-end: 2.4em;
+  padding-inline-end: 2.4em;
 }
 
 menulist[is="menulist-editable"][editable="true"]::part(dropmarker) {
-  display: -moz-box;
   width: 2em;
   margin-top: -2px;
   margin-bottom: -2px;

mail/themes/shared/mail/message-bar.css

@@ -355,6 +355,7 @@ toolbarbutton.notification-button[is="toolbarbutton-menu-button"] > dropmarker {
   padding-inline-start: 5px;
   border-start-start-radius: 0;
   border-start-end-radius: 0;
+  pointer-events: none;
 }
 
 .close {

mail/themes/shared/mail/messenger.css

@@ -312,6 +312,10 @@ toolbar:not([mode="text"]) .toolbarbutton-1[hideWebExtensionLabel="true"] .toolb
   display: none;
 }
 
+.toolbarbutton-menubutton-dropmarker {
+  pointer-events: none;
+}
+
 .toolbarbutton-1:not([is="toolbarbutton-menu-button"]),
 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {