draggable doesn't work inside Firefox DevTools Panel (extension)

[crutch12]

I tried to implement Resizing example in Extension DevTools Panel, but it doesn't work.

The reason

Firefox DevTools Panel doesn't support drag event, thus draggable() doesn't call the onDrag handler.

In Action Popup window it works fine.
In Chrome DevTools Panel it works fine.

Reproduction

• Open Firefox
• Install some DevTools extension (e.g. React DevTools)
• Open a page that uses React (e.g. current page, since github uses react)
• Open DevTools - Components Panel (React)
• In another tab open about:debugging#/runtime/this-firefox url
• Find React DevTools extension and click Inspect
• In the Inspect Window press Ctrl + Shift + C and select some element from Components Panel
• In the Inspect Window run this code:

document.body.draggable = true
window.addEventListener('drag', e => {
  console.log('drag', e.clientX, e.clientY)
})
window.addEventListener('dragstart', e => {
  console.log('dragstart', e.clientX, e.clientY)
}) 
window.addEventListener('dragstart', e => {
  console.log('dragend', e.clientX, e.clientY)
}) 

• In the Components Panel try to drag any element
• You can see, that dragstart and dragend events are fired, but the drag event doesn't fire. Moreover: dragend is fired almost immediately.

dragstart 174 321
dragend 174 321

Solution

As I can see, for example React DevTools uses onPointerDown/onPointerMove/onPointerUp to deal with resizing
https://github.com/facebook/react/blob/b4a8d298450fd1fd274445fe8554e5fc18c5e12c/packages/react-devtools-shared/src/devtools/views/Components/Components.js#L151

It would be great, if we could select which mode does draggable use for drag detection. E.g.:

import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
draggable({
  element: document.body,
  mode: 'pointer', // 'drag' | 'pointer'
  onDrag() {
    // ...
  },
})

Thus it could listen for pointer/drag events.

References

https://bugzilla.mozilla.org/show_bug.cgi?id=1408756