A way to disable animation of cancelled drag for editor apps like VS Code

[zcbenz]

What problem are you trying to solve?

For editor apps it is commonly supported to drag a tab out of current window to make the tab become a new window. For example in VS Code:

However implementing this with web tech has a pitfall that, since the "tab" in editor is not supposed to transfer any data into the app under the cursor when releasing mouse, the drag operation is essentially cancelled when mouse is released, which would create an animation on macOS indicating the drag is cancelled.

In the below screencast, please notice the animation that the tab getting bounced back to original window after releasing mouse, which makes user feel that the drag is cancelled but it is actually not:

cancel-animation.mov

You don't see this animation when actually using VS Code because we have been working around it by patching Chromium in the build of Electron used by VS Code.

What solutions exist today?

Currently the only way to solve it is to patch the browser engine, or to implement drag and drop using pure native implementation.

The patch used by VS Code is:

diff --git a/content/app_shim_remote_cocoa/web_contents_view_cocoa.mm b/content/app_shim_remote_cocoa/web_contents_view_cocoa.mm
index c050c86271d6d..9aba95b1d1b51 100644
--- a/content/app_shim_remote_cocoa/web_contents_view_cocoa.mm
+++ b/content/app_shim_remote_cocoa/web_contents_view_cocoa.mm
@@ -277,9 +277,10 @@ - (void)startDragWithDropData:(const DropData&)dropData
   _dragOperation = operationMask;
 
   // Run the drag operation.
-  [self beginDraggingSessionWithItems:@[ draggingItem ]
+  auto* drag_session = [self beginDraggingSessionWithItems:@[ draggingItem ]
                                 event:dragEvent
                                source:self];
+  drag_session.animatesToStartingPositionsOnCancelOrFail = NO;
 }
 
 // NSDraggingSource methods

How would you solve it?

We propose adding a new property to DataTransfer to control whether the "cancelled drag" animation should be enabled.

I am willing to implement this feature in Chromium browser if it gets passed in WHATWG.

Anything else?

Related VS Code issue microsoft/vscode#199635.

/cc VS Code developers @bpasero @deepak1556

[zcbenz]

Note that there is a prior art that can be followed: Firefox implements its browser tabs with HTML5 drag and drop, and they added a private dataTransfer.mozShowFailAnimation property to solve the exact issue we met in VS Code.
https://hg.mozilla.org/mozilla-central/rev/b2954fa754d2

[sanketj]

cc: @snianu

[zcbenz]

/cc @EdgarChen from Mozilla, this feature had already been implemented in Firefox and I believe this might be a good chance to standardize it.