Bug 1753836 - Fix context menus to deal with Event.screen* returning page CSS coordinates. r=Gijs

If the page is zoomed, its devicePixelRatio will differ from the browser
chrome's. Account for this by converting to device pixels before starting to
scroll.

Depends on D138036

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

browser/actors/ContextMenuChild.jsm

@@ -789,8 +789,8 @@ class ContextMenuChild extends JSWindowActorChild {
     const context = this.context;
 
     context.timeStamp = aEvent.timeStamp;
-    context.screenX = aEvent.screenX;
-    context.screenY = aEvent.screenY;
+    context.screenXDevPx = aEvent.screenX * this.contentWindow.devicePixelRatio;
+    context.screenYDevPx = aEvent.screenY * this.contentWindow.devicePixelRatio;
     context.mozInputSource = aEvent.mozInputSource;
 
     let node = aEvent.composedTarget;

browser/base/content/nsContextMenu.js

@@ -71,15 +71,17 @@ function openContextMenu(aMessage, aBrowser, aActor) {
   // We don't have access to the original event here, as that happened in
   // another process. Therefore we synthesize a new MouseEvent to propagate the
   // inputSource to the subsequently triggered popupshowing event.
-  var newEvent = document.createEvent("MouseEvent");
+  let newEvent = document.createEvent("MouseEvent");
+  let screenX = context.screenXDevPx / window.devicePixelRatio;
+  let screenY = context.screenYDevPx / window.devicePixelRatio;
   newEvent.initNSMouseEvent(
     "contextmenu",
     true,
     true,
     null,
     0,
-    context.screenX,
-    context.screenY,
+    screenX,
+    screenY,
     0,
     0,
     false,

toolkit/actors/PictureInPictureChild.jsm

@@ -1129,14 +1129,14 @@ class PictureInPictureToggleChild extends JSWindowActorChild {
 
     let toggle = this.getToggleElement(shadowRoot);
     if (this.isMouseOverToggle(toggle, event)) {
-      event.stopImmediatePropagation();
-      event.preventDefault();
-
+      let devicePixelRatio = toggle.ownerGlobal.devicePixelRatio;
       this.sendAsyncMessage("PictureInPicture:OpenToggleContextMenu", {
-        screenX: event.screenX,
-        screenY: event.screenY,
+        screenXDevPx: event.screenX * devicePixelRatio,
+        screenYDevPx: event.screenY * devicePixelRatio,
         mozInputSource: event.mozInputSource,
       });
+      event.stopImmediatePropagation();
+      event.preventDefault();
     }
   }
 

toolkit/components/pictureinpicture/PictureInPicture.jsm

@@ -687,14 +687,16 @@ var PictureInPicture = {
     // We synthesize a new MouseEvent to propagate the inputSource to the
     // subsequently triggered popupshowing event.
     let newEvent = document.createEvent("MouseEvent");
+    let screenX = data.screenXDevPx / window.devicePixelRatio;
+    let screenY = data.screenYDevPx / window.devicePixelRatio;
     newEvent.initNSMouseEvent(
       "contextmenu",
       true,
       true,
       null,
       0,
-      data.screenX,
-      data.screenY,
+      screenX,
+      screenY,
       0,
       0,
       false,