Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

3 files changed, 402 insertions, 0 deletions

diff --git a/devtools/server/actors/emulation/moz.build b/devtools/server/actors/emulation/moz.build
new file mode 100644
index 0000000000..cf229e6fe1
--- /dev/null
+++ b/devtools/server/actors/emulation/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "responsive.js",
+    "touch-simulator.js",
+)
diff --git a/devtools/server/actors/emulation/responsive.js b/devtools/server/actors/emulation/responsive.js
new file mode 100644
index 0000000000..829579cab6
--- /dev/null
+++ b/devtools/server/actors/emulation/responsive.js
@@ -0,0 +1,83 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  responsiveSpec,
+} = require("resource://devtools/shared/specs/responsive.js");
+
+/**
+ * This actor overrides various browser features to simulate different environments to
+ * test how pages perform under various conditions.
+ *
+ * The design below, which saves the previous value of each property before setting, is
+ * needed because it's possible to have multiple copies of this actor for a single page.
+ * When some instance of this actor changes a property, we want it to be able to restore
+ * that property to the way it was found before the change.
+ *
+ * A subtle aspect of the code below is that all get* methods must return non-undefined
+ * values, so that the absence of a previous value can be distinguished from the value for
+ * "no override" for each of the properties.
+ */
+class ResponsiveActor extends Actor {
+  constructor(conn, targetActor) {
+    super(conn, responsiveSpec);
+    this.targetActor = targetActor;
+    this.docShell = targetActor.docShell;
+  }
+
+  destroy() {
+    this.targetActor = null;
+    this.docShell = null;
+
+    super.destroy();
+  }
+
+  get win() {
+    return this.docShell.chromeEventHandler.ownerGlobal;
+  }
+
+  /* Touch events override */
+
+  _previousTouchEventsOverride = undefined;
+
+  /**
+   * Set the current element picker state.
+   *
+   * True means the element picker is currently active and we should not be emulating
+   * touch events.
+   * False means the element picker is not active and it is ok to emulate touch events.
+   *
+   * This actor method is meant to be called by the DevTools front-end. The reason for
+   * this is the following:
+   * RDM is the only current consumer of the touch simulator. RDM instantiates this actor
+   * on its own, whether or not the Toolbox is opened. That means it does so in its own
+   * DevTools Server instance.
+   * When the Toolbox is running, it uses a different DevToolsServer. Therefore, it is not
+   * possible for the touch simulator to know whether the picker is active or not. This
+   * state has to be sent by the client code of the Toolbox to this actor.
+   * If a future use case arises where we want to use the touch simulator from the Toolbox
+   * too, then we could add code in here to detect the picker mode as described in
+   * https://bugzilla.mozilla.org/show_bug.cgi?id=1409085#c3
+
+   * @param {Boolean} state
+   * @param {String} pickerType
+   */
+  setElementPickerState(state, pickerType) {
+    this.targetActor.touchSimulator.setElementPickerState(state, pickerType);
+  }
+
+  /**
+   * Dispatches an "orientationchange" event.
+   */
+  async dispatchOrientationChangeEvent() {
+    const { CustomEvent } = this.win;
+    const orientationChangeEvent = new CustomEvent("orientationchange");
+    this.win.dispatchEvent(orientationChangeEvent);
+  }
+}
+
+exports.ResponsiveActor = ResponsiveActor;
diff --git a/devtools/server/actors/emulation/touch-simulator.js b/devtools/server/actors/emulation/touch-simulator.js
new file mode 100644
index 0000000000..9bb9dd5e2b
--- /dev/null
+++ b/devtools/server/actors/emulation/touch-simulator.js
@@ -0,0 +1,309 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+loader.lazyRequireGetter(
+  this,
+  "PICKER_TYPES",
+  "resource://devtools/shared/picker-constants.js"
+);
+
+var isClickHoldEnabled = Services.prefs.getBoolPref(
+  "ui.click_hold_context_menus"
+);
+var clickHoldDelay = Services.prefs.getIntPref(
+  "ui.click_hold_context_menus.delay",
+  500
+);
+
+// Touch state constants are derived from values defined in: nsIDOMWindowUtils.idl
+const TOUCH_CONTACT = 0x02;
+const TOUCH_REMOVE = 0x04;
+
+const TOUCH_STATES = {
+  touchstart: TOUCH_CONTACT,
+  touchmove: TOUCH_CONTACT,
+  touchend: TOUCH_REMOVE,
+};
+
+const EVENTS_TO_HANDLE = [
+  "mousedown",
+  "mousemove",
+  "mouseup",
+  "touchstart",
+  "touchend",
+  "mouseenter",
+  "mouseover",
+  "mouseout",
+  "mouseleave",
+];
+
+const kStateHover = 0x00000004; // ElementState::HOVER
+
+/**
+ * Simulate touch events for platforms where they aren't generally available.
+ */
+class TouchSimulator {
+  /**
+   * @param {ChromeEventHandler} simulatorTarget: The object we'll use to listen for click
+   *                             and touch events to handle.
+   */
+  constructor(simulatorTarget) {
+    this.simulatorTarget = simulatorTarget;
+    this._currentPickerMap = new Map();
+  }
+
+  enabled = false;
+
+  start() {
+    if (this.enabled) {
+      // Simulator is already started
+      return;
+    }
+
+    EVENTS_TO_HANDLE.forEach(evt => {
+      // Only listen trusted events to prevent messing with
+      // event dispatched manually within content documents
+      this.simulatorTarget.addEventListener(evt, this, true, false);
+    });
+
+    this.enabled = true;
+  }
+
+  stop() {
+    if (!this.enabled) {
+      // Simulator isn't running
+      return;
+    }
+    EVENTS_TO_HANDLE.forEach(evt => {
+      this.simulatorTarget.removeEventListener(evt, this, true);
+    });
+    this.enabled = false;
+  }
+
+  _isPicking() {
+    const types = Object.values(PICKER_TYPES);
+    return types.some(type => this._currentPickerMap.get(type));
+  }
+
+  /**
+   * Set the state value for one of DevTools pickers (either eyedropper or
+   * element picker).
+   * If any content picker is currently active, we should not be emulating
+   * touch events. Otherwise it is ok to emulate touch events.
+   * In theory only one picker can ever be active at a time, but tracking the
+   * different pickers independantly avoids race issues in the client code.
+   *
+   * @param {Boolean} state
+   *        True if the picker is currently active, false otherwise.
+   * @param {String} pickerType
+   *        One of PICKER_TYPES.
+   */
+  setElementPickerState(state, pickerType) {
+    if (!Object.values(PICKER_TYPES).includes(pickerType)) {
+      throw new Error(
+        "Unsupported type in setElementPickerState: " + pickerType
+      );
+    }
+    this._currentPickerMap.set(pickerType, state);
+  }
+
+  // eslint-disable-next-line complexity
+  handleEvent(evt) {
+    // Bail out if devtools is in pick mode in the same tab.
+    if (this._isPicking()) {
+      return;
+    }
+
+    const content = this.getContent(evt.target);
+    if (!content) {
+      return;
+    }
+
+    // App touchstart & touchend should also be dispatched on the system app
+    // to match on-device behavior.
+    if (evt.type.startsWith("touch")) {
+      const sysFrame = content.realFrameElement;
+      if (!sysFrame) {
+        return;
+      }
+      const sysDocument = sysFrame.ownerDocument;
+      const sysWindow = sysDocument.defaultView;
+
+      const touchEvent = sysDocument.createEvent("touchevent");
+      const touch = evt.touches[0] || evt.changedTouches[0];
+      const point = sysDocument.createTouch(
+        sysWindow,
+        sysFrame,
+        0,
+        touch.pageX,
+        touch.pageY,
+        touch.screenX,
+        touch.screenY,
+        touch.clientX,
+        touch.clientY,
+        1,
+        1,
+        0,
+        0
+      );
+
+      const touches = sysDocument.createTouchList(point);
+      const targetTouches = touches;
+      const changedTouches = touches;
+      touchEvent.initTouchEvent(
+        evt.type,
+        true,
+        true,
+        sysWindow,
+        0,
+        false,
+        false,
+        false,
+        false,
+        touches,
+        targetTouches,
+        changedTouches
+      );
+      sysFrame.dispatchEvent(touchEvent);
+      return;
+    }
+
+    // Ignore all but real mouse event coming from physical mouse
+    // (especially ignore mouse event being dispatched from a touch event)
+    if (
+      evt.button ||
+      evt.mozInputSource != evt.MOZ_SOURCE_MOUSE ||
+      evt.isSynthesized
+    ) {
+      return;
+    }
+
+    const eventTarget = this.target;
+    let type = "";
+    switch (evt.type) {
+      case "mouseenter":
+      case "mouseover":
+      case "mouseout":
+      case "mouseleave":
+        // Don't propagate events which are not related to touch events
+        evt.stopPropagation();
+        evt.preventDefault();
+
+        // We don't want to trigger any visual changes to elements whose content can
+        // be modified via hover states. We can avoid this by removing the element's
+        // content state.
+        InspectorUtils.removeContentState(evt.target, kStateHover);
+        break;
+
+      case "mousedown":
+        this.target = evt.target;
+
+        // If the click-hold feature is enabled, start a timeout to convert long clicks
+        // into contextmenu events.
+        // Just don't do it if the event occurred on a scrollbar.
+        if (isClickHoldEnabled && !evt.originalTarget.closest("scrollbar")) {
+          this._contextMenuTimeout = this.sendContextMenu(evt);
+        }
+
+        this.startX = evt.pageX;
+        this.startY = evt.pageY;
+
+        // Capture events so if a different window show up the events
+        // won't be dispatched to something else.
+        evt.target.setCapture(false);
+
+        type = "touchstart";
+        break;
+
+      case "mousemove":
+        if (!eventTarget) {
+          // Don't propagate mousemove event when touchstart event isn't fired
+          evt.stopPropagation();
+          return;
+        }
+
+        type = "touchmove";
+        break;
+
+      case "mouseup":
+        if (!eventTarget) {
+          return;
+        }
+        this.target = null;
+
+        content.clearTimeout(this._contextMenuTimeout);
+        type = "touchend";
+
+        // Only register click listener after mouseup to ensure
+        // catching only real user click. (Especially ignore click
+        // being dispatched on form submit)
+        if (evt.detail == 1) {
+          this.simulatorTarget.addEventListener("click", this, {
+            capture: true,
+            once: true,
+          });
+        }
+        break;
+    }
+
+    const target = eventTarget || this.target;
+    if (target && type) {
+      this.synthesizeNativeTouch(content, evt.screenX, evt.screenY, type);
+    }
+
+    evt.preventDefault();
+    evt.stopImmediatePropagation();
+  }
+
+  sendContextMenu({ target, clientX, clientY, screenX, screenY }) {
+    const view = target.ownerGlobal;
+    const { MouseEvent } = view;
+    const evt = new MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: true,
+      view,
+      screenX,
+      screenY,
+      clientX,
+      clientY,
+    });
+    const content = this.getContent(target);
+    const timeout = content.setTimeout(() => {
+      target.dispatchEvent(evt);
+    }, clickHoldDelay);
+
+    return timeout;
+  }
+
+  /**
+   * Synthesizes a native touch action on a given target element.
+   *
+   * @param {Window} win
+   *        The target window.
+   * @param {Number} screenX
+   *        The `x` screen coordinate relative to the screen origin.
+   * @param {Number} screenY
+   *        The `y` screen coordinate relative to the screen origin.
+   * @param {String} type
+   *        A key appearing in the TOUCH_STATES associative array.
+   */
+  synthesizeNativeTouch(win, screenX, screenY, type) {
+    // Native events work in device pixels.
+    const utils = win.windowUtils;
+    const deviceScale = win.devicePixelRatio;
+    const pt = { x: screenX * deviceScale, y: screenY * deviceScale };
+
+    utils.sendNativeTouchPoint(0, TOUCH_STATES[type], pt.x, pt.y, 1, 90, null);
+    return true;
+  }
+
+  getContent(target) {
+    const win = target?.ownerDocument ? target.ownerGlobal : null;
+    return win;
+  }
+}
+
+exports.TouchSimulator = TouchSimulator;