tor-browser

commit f8f007a94eb7b4c6f7168cefeb2555a3bdba04c1
parent b8e5f0230d0cfd61586ba09d6a658c2eca992e17
Author: Tooru Fujisawa <arai_a@mac.com>
Date:   Tue, 18 Nov 2025 08:35:47 +0000

Bug 2000416 - Allow dragging with pen. r=masayuki,devtools-reviewers,nchevobbe

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

Diffstat:
M
devtools/client/inspector/rules/views/text-property-editor.js
 | 
7
++++---
M
devtools/client/shared/components/splitter/Draggable.js
 | 
7
++++---
M
devtools/client/shared/events.js
 | 
13
+++++++++++++
M
devtools/client/shared/widgets/LinearEasingFunctionWidget.js
 | 
7
++++---

4 files changed, 25 insertions(+), 9 deletions(-)
diff --git a/devtools/client/inspector/rules/views/text-property-editor.js b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -22,6 +22,9 @@ const { throttle } = require("resource://devtools/shared/throttle.js");
 const {
   style: { ELEMENT_STYLE },
 } = require("resource://devtools/shared/constants.js");
+const {
+  canPointerEventDrag,
+} = require("resource://devtools/client/shared/events.js");
 
 loader.lazyRequireGetter(
   this,
@@ -1684,9 +1687,7 @@ class TextPropertyEditor {
   }
 
   #draggingOnPointerDown = event => {
-    // We want to handle a drag during a mouse button is pressed.  So, we can
-    // ignore pointer events which are caused by other devices.
-    if (event.pointerType != "mouse") {
+    if (!canPointerEventDrag(event)) {
       return;
     }
 
diff --git a/devtools/client/shared/components/splitter/Draggable.js b/devtools/client/shared/components/splitter/Draggable.js
@@ -10,6 +10,9 @@ const {
 } = require("resource://devtools/client/shared/vendor/react.mjs");
 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  canPointerEventDrag,
+} = require("resource://devtools/client/shared/events.js");
 
 class Draggable extends Component {
   static get propTypes() {
@@ -38,9 +41,7 @@ class Draggable extends Component {
     this.mouseY = 0;
   }
   startDragging(ev) {
-    // We want to handle a drag during a mouse button is pressed.  So, we can
-    // ignore pointer events which are caused by other devices.
-    if (ev.pointerType != "mouse") {
+    if (!canPointerEventDrag(ev)) {
       return;
     }
 
diff --git a/devtools/client/shared/events.js b/devtools/client/shared/events.js
@@ -21,3 +21,16 @@ exports.preventDefaultAndStopPropagation = function (event) {
     }
   }
 };
+
+/**
+ * Returns true if the pointer event can perform drag.
+ *
+ * We want to handle a drag during a button is pressed.  So, we can ignore
+ * pointer events which are caused by other devices.
+ *
+ * @param {PointerEvent} event
+ * @returns {boolean}
+ */
+exports.canPointerEventDrag = function (event) {
+  return event.pointerType == "mouse" || event.pointerType == "pen";
+};
diff --git a/devtools/client/shared/widgets/LinearEasingFunctionWidget.js b/devtools/client/shared/widgets/LinearEasingFunctionWidget.js
@@ -11,6 +11,9 @@
 const EventEmitter = require("devtools/shared/event-emitter");
 const { InspectorCSSParserWrapper } = require("devtools/shared/css/lexer");
 const { throttle } = require("devtools/shared/throttle");
+const {
+  canPointerEventDrag,
+} = require("resource://devtools/client/shared/events.js");
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
 const SVG_NS = "http://www.w3.org/2000/svg";
 
@@ -189,9 +192,7 @@ class LinearEasingFunctionWidget extends EventEmitter {
    */
   #onPointerDown(event) {
     if (
-      // We want to handle a drag during a mouse button is pressed.  So, we can
-      // ignore pointer events which are caused by other devices.
-      event.pointerType != "mouse" ||
+      !canPointerEventDrag(event) ||
       !event.target.classList.contains(
         LinearEasingFunctionWidget.CONTROL_POINTS_CLASSNAME
       )