Bug 1588438 - Refactor deprecated touch event APIs. r=ochameau

This revision refactors RDM's touch simulator to use modern touch web APIs where possible.

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

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

devtools/client/responsive/test/browser/browser_touch_simulation.js

@@ -201,6 +201,29 @@ async function testWithTouch(ui) {
       "any-hover: none should be matched"
     );
   });
+
+  // Capturing touch events with the content window as a registered listener causes the
+  // "changedTouches" field to be undefined when using deprecated TouchEvent APIs.
+  // See Bug 1549220 and Bug 1588438 for more information on this issue.
+  info("Test that changed touches captured on the content window are defined.");
+  await ContentTask.spawn(ui.getViewportBrowser(), {}, async function() {
+    const div = content.document.querySelector("div");
+
+    content.addEventListener(
+      "touchstart",
+      event => {
+        const changedTouch = event.changedTouches[0];
+        ok(changedTouch, "Changed touch is defined.");
+      },
+      true
+    );
+
+    await EventUtils.synthesizeMouseAtCenter(
+      div,
+      { type: "mousedown", isSynthesized: false },
+      content
+    );
+  });
 }
 
 async function testWithMetaViewportEnabled(ui) {

devtools/server/actors/emulation/touch-simulator.js

@@ -322,52 +322,44 @@ TouchSimulator.prototype = {
   },
 
   sendTouchEvent(evt, target, name) {
+    const win = target.ownerGlobal;
     const document = target.ownerDocument;
     const content = this.getContent(target);
     if (!content) {
       return;
     }
 
-    const touchEvent = document.createEvent("touchevent");
-    const point = document.createTouch(
-      content,
+    const point = new win.Touch({
+      identifier: 0,
       target,
-      0,
-      evt.pageX,
-      evt.pageY,
-      evt.screenX,
-      evt.screenY,
-      evt.clientX,
-      evt.clientY,
-      1,
-      1,
-      0,
-      0
-    );
+      pageX: evt.pageX,
+      pageY: evt.pageY,
+      screenX: evt.screenX,
+      screenY: evt.screenY,
+      clientX: evt.clientX,
+      clientY: evt.clientY,
+      radiusX: 1,
+      radiusY: 1,
+      rotationAngle: 0,
+      force: 1,
+    });
 
     let touches = document.createTouchList(point);
     let targetTouches = touches;
-    const changedTouches = touches;
+    let changedTouches = touches;
+
     if (name === "touchend" || name === "touchcancel") {
       // "touchend" and "touchcancel" events should not have the removed touch
       // neither in touches nor in targetTouches
-      touches = targetTouches = document.createTouchList();
+      touches = targetTouches = changedTouches = document.createTouchList();
     }
 
-    touchEvent.initTouchEvent(
-      name,
-      true,
-      true,
-      content,
-      0,
-      false,
-      false,
-      false,
-      false,
+    // Initialize TouchEvent and dispatch.
+    const touchEvent = new win.TouchEvent(name, {
       touches,
       targetTouches,
-      changedTouches
-    );
+      changedTouches,
+    });
     target.dispatchEvent(touchEvent);
   },