Drop files from Explorer to CustomEditor (webview) doesn't work

[maxbublik]

Type: Bug

Hi guys, thanks a lot for your amazing work! Unfortunately after searching existing issues and documentation, I still experience an issue. I developed a tiny extension to showcase the bug https://github.com/maxbublik/vscode-customeditor-drop

The extension offers a CustomEditor for *.drops.json files. When such a file is opened via the given custom editor, you can drag-n-drop (presumably anything) onto the webview and the drop event information is appended to the underlying json file.

Drop a file from Explorer tree view: ❌ does not work
Drop an item with dataTransfer.setData('text/uri-list', value); manually set in another webview: ✅ OK
Drop a file from OS: ✅ OK

dnd-customeditor-explorer.mov

VS Code version: Code - Insiders 1.79.0-insider (2575777, 2023-05-12T05:24:44.544Z)
OS version: Darwin arm64 21.4.0
Modes:
Sandboxed: Yes

System Info

Item	Value
CPUs	Apple M1 (8 x 24)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	2, 2, 2
Memory (System)	16.00GB (1.09GB free)
Process Argv	--crash-reporter-id 47e2bfbb-a348-459d-8975-8945e0235016
Screen Reader	no
VM	0%

Extensions: none

A/B Experiments

vsliv695:30137379
vsins829:30139715
vsliv368:30146709
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythontb:30258533
pythonptprofiler:30281269
vshan820:30294714
pythondataviewer:30285072
vscod805:30301674
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593cf:30376535
pythonvs932:30404738
cppdebug:30492333
vsclangdf:30492506
c4g48928:30535728
dsvsc012:30540252
pynewext54:30618038
pylantcb52:30590116
pyind779:30611226
pythonsymbol12:30651887
showlangstatbar:30737417
azdwalk:30721579
pythonms35:30671666
f08j5886:30680471
24365598:30687740
pythonfmttext:30716741
pythoncmvfstr:30726892
fixshowwlkth:30724385
hidesbindicator:30724476
pythongtdpath:30726887

[mjbvz]

Thank you for the great repo steps!

The root cause is:

vscode/src/vs/workbench/contrib/webview/browser/webviewElement.ts

Line 688 in 273b73d

windowDidDragStart(): void {

This code surpasses pointer events on the webview element when any element in VS Code editor dom is being dragged. This is what lets you drag and drop over a webview (or any text editor) to open the dropped file

Here's the behavior we want:

• If the user drags a file over a webview without holding shift, they see the editor drop overlay. Dropping the file opens in that editor group
• Once the user presses shift while dragging, they instead start dropping the content into the webview. The drop overlay should now go away
• Once the user releases shift, the drop overlay shows again

Coordinating the drag events across the different iframes involved here gets a little tricky. We may need to capture the events inside the webview iframes and re-broadcast them up to VS Code, similar to what we already do for keypresses

[maxbublik]

Hi, Matt, thanks a lot for your message!

What I do observe: when the user drags a file over a webview with holding shift and the drop overlay is absent, the webview still does not receive neither dragover nor drop events.
This is a bug, right? Or did I miss some configuration?

I assume the whole drag-n-drop machinery (getting tricky recently) is evolving around a core VSCode pattern: dropping a file onto an editor group should open that file in that editor group. What if webview providers could explicitly announce dropTypes (the same way as native VSCode trees). Therefore, certain webviews could skip the pattern and handle dragover and drop events on their own if the original drag event contains one of the announces dataTransfer.types. The video demonstrates this at timecode 0:12-0:17. Does it break the UX significantly?

[mjbvz]

What if webview providers could explicitly announce dropTypes

I don't think that helps. If the users is dragging a file or url-list, we want the behavior I described above: first we show the drop overlay and then when the user presses shift, we allow dropping into the webview

My current understanding is that requires coordinating the drag events across different iframes and that's what gets tricky

[maxbublik]

Hi Matt, @mjbvz, do you have a rough estimation of the fix to arrive?

[drvkize0]

Wonder if this will work? I do notice when holding shift I can't drag from file explorer.

windowDidDragStart(): void {
    if( !shiftIsDown)
		this._startBlockingIframeDragEvents();
}

[swordensen]

I basically added a new listener on the WebviewWindowDragMonitor that should re-enable the customWebView pointer events allowing us to drag and drop files as expected.

Once the user releases shift, the drop overlay shows again

I recognized that if a user presses shift while dragging and dropping a file on to any editor then the full drag and drop is cancelled. Are we sure we want to show the drop overlay again if the user stops pressing shift?

[Edit] I can make another PR if we want to disable the WebView if the user releases shift

[Edit 2] This is my first PR to VSCode so I do apologize if I did not submit it appropriately. I also recognize that Matt is incredibly busy so I won't @ him. But, to whomever ends up reviewing this, please @ me if there are any issues and I'll try to address them ASAP. This issue is a blocker for an extension I would like to make

[rzhao271]

@mjbvz on Windows, dropping a file from the explorer or from the drops view into the editor ends up opening the file or link. With the extension sample above, I dropped in a spreadsheet from the explorer, and Excel opened. Is that expected behaviour?

Edit: verified that that behaviour also occurs in Stable.

[swordensen]

@mjbvz on Windows, dropping a file from the explorer or from the drops view into the editor ends up opening the file or link. With the extension sample above, I dropped in a spreadsheet from the explorer, and Excel opened. Is that expected behaviour?

Edit: verified that that behaviour also occurs in Stable.

This is likely due to the fact that default drop events are not prevented.

I can look into resolving this.

[ManPython]

The title is wrong described. The move any file as D&D to VSC not opening a editor with new tab.
And it's not related with security issue or maybe it is.. as "workspace" and "namespace" around dir, where outside dir of project files can't be opened, but need ctr+shift+N as new instance VSC in case intuition want suggest it should be easy opened to change something or run test script.

[swordensen]

@rzhao271 Because this issue is closed I created a new issue to track the bug you reported here: #218626. I think I know how to fix it so you can assign it to me if you want

@ManPython I honestly don't know what you are trying to say. Can you clarify?

[swordensen]

@mjbvz can this issue be re-opened since my PR was reverted? I'll open another PR "soonTM" I just figured it should point at this issue.