Fixes #182449 : Pressing Shift re-enables webview during Drag and Dro…

…p Events (#209211)

* added shift key listener to re-enable drag events for webview #182449

* adding drag and drag over listeners to webview iframe(s)

updating html hash

adding shift release listener to drag and drag over events

adding new custom drag event handler to allow event bubbling

adding new event types

correcting comment:

removing drag over listener from drag monitor since we are converting this to drag events

making webview drag monitor stateful and adding missing events to iframe dom html file

Revert "Merge remote-tracking branch 'microsoft/main' into swordensen"

This reverts commit 47e3877, reversing
changes made to 8f71927.

Revert "making webview drag monitor stateful and adding missing events to iframe dom html file"

This reverts commit 8f71927.

Revert "removing drag over listener from drag monitor since we are converting this to drag events"

This reverts commit bfae5f1.

Revert "correcting comment:"

This reverts commit 696facb.

Revert "Merge branch 'main' into main"

This reverts commit 78ed36c, reversing
changes made to 7b96d0e.

Revert "adding new event types"

This reverts commit 7b96d0e.

Revert "adding new custom drag event handler to allow event bubbling"

This reverts commit 39971e0.

Revert "adding shift release listener to drag and drag over events"

This reverts commit 4f5d9e8.

Revert "updating html hash"

This reverts commit 6a474cb.

Revert "adding drag and drag over listeners to webview iframe(s)"

This reverts commit 6688ec6.

adding harmless change to see if this causes smoketests and integration tests to fail

adding sha hash

Revert "adding sha hash"

This reverts commit 830baa8.

Revert "adding harmless change to see if this causes smoketests and integration tests to fail"

This reverts commit ceb55f9.

Revert "Revert "adding drag and drag over listeners to webview iframe(s)""

This reverts commit 1baf483.

Revert "Revert "adding shift release listener to drag and drag over events""

This reverts commit 40bc29c.

Revert "Revert "adding new custom drag event handler to allow event bubbling""

This reverts commit 44f4fda.

Revert "Revert "adding new event types""

This reverts commit 67f1aaa.

removing internal drag listener

removing types. Maybe it's causing build issues?

renaming drag event to WebviewDragEvent to avoid collision with native DragEvent type

resolving conflict with correcting comment

Revert "Revert "Merge branch 'main' into main""

This reverts commit 1a4d711.

Revert "Revert "Merge branch 'main' into main""

This reverts commit 8520787.

resolving conflict

Revert "resolving conflict"

This reverts commit c5b3f7f.

Revert "Merge remote-tracking branch 'microsoft/main' into swordensen"

somehow i got assigned these changes in the process of unreverting my merges

fix: serialization of newline characters

removing console log

forgot the security hash when removing console log

* updating sha

src/vs/workbench/contrib/webview/browser/pre/index.html

@@ -5,7 +5,9 @@
 	<meta charset="UTF-8">
 
 	<meta http-equiv="Content-Security-Policy"
-		content="default-src 'none'; script-src 'sha256-noHVLQsurkONXmA3fcuAmcZ8UPYm/db88mhm9gAXcvk=' 'self'; frame-src 'self'; style-src 'unsafe-inline';">
+
+	content="default-src 'none'; script-src 'sha256-EJBlYt9sOvo6RhZZJG+duTqIZCB8pctk1a62h/ZIElc=' 'self'; frame-src 'self'; style-src 'unsafe-inline';">
+
 
 	<!-- Disable pinch zooming -->
 	<meta name="viewport"
@@ -791,6 +793,17 @@
 			}
 		}
 
+
+		function handleInnerDragEvent(/** @type {DragEvent} */ e) {
+			if (!e.dataTransfer) {
+				return;
+			}
+
+			hostMessaging.postMessage('drag', {
+				shiftKey: e.shiftKey
+			});
+		}
+
 		/**
 		 * @param {() => void} callback
 		 */
@@ -881,7 +894,9 @@
 		window.addEventListener('keydown', handleInnerKeydown);
 		window.addEventListener('keyup', handleInnerKeyup);
 		window.addEventListener('dragenter', handleInnerDragStartEvent);
-		window.addEventListener('dragover', handleInnerDragStartEvent);
+		window.addEventListener('dragover', handleInnerDragEvent);
+		window.addEventListener('drag', handleInnerDragEvent);
+
 
 		onDomReady(() => {
 			if (!document.body) {
@@ -1163,7 +1178,8 @@
 					});
 
 					contentWindow.addEventListener('dragenter', handleInnerDragStartEvent);
-					contentWindow.addEventListener('dragover', handleInnerDragStartEvent);
+					contentWindow.addEventListener('dragover', handleInnerDragEvent);
+					contentWindow.addEventListener('drag', handleInnerDragEvent);
 
 					unloadMonitor.onIframeLoaded(newFrame);
 				}

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

@@ -34,7 +34,7 @@ import { loadLocalResource, WebviewResourceResponse } from 'vs/workbench/contrib
 import { WebviewThemeDataProvider } from 'vs/workbench/contrib/webview/browser/themeing';
 import { areWebviewContentOptionsEqual, IWebview, WebviewContentOptions, WebviewExtensionDescription, WebviewInitInfo, WebviewMessageReceivedEvent, WebviewOptions } from 'vs/workbench/contrib/webview/browser/webview';
 import { WebviewFindDelegate, WebviewFindWidget } from 'vs/workbench/contrib/webview/browser/webviewFindWidget';
-import { FromWebviewMessage, KeyEvent, ToWebviewMessage } from 'vs/workbench/contrib/webview/browser/webviewMessages';
+import { FromWebviewMessage, KeyEvent, ToWebviewMessage, WebViewDragEvent } from 'vs/workbench/contrib/webview/browser/webviewMessages';
 import { decodeAuthority, webviewGenericCspSource, webviewRootResourceAuthority } from 'vs/workbench/contrib/webview/common/webview';
 import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
 import { CodeWindow } from 'vs/base/browser/window';
@@ -310,6 +310,10 @@ export class WebviewElement extends Disposable implements IWebview, WebviewFindD
 			this._startBlockingIframeDragEvents();
 		}));
 
+		this._register(this.on('drag', (event) => {
+			this.handleDragEvent('drag', event);
+		}));
+
 		if (initInfo.options.enableFindWidget) {
 			this._webviewFindWidget = this._register(instantiationService.createInstance(WebviewFindWidget, this));
 		}
@@ -697,6 +701,17 @@ export class WebviewElement extends Disposable implements IWebview, WebviewFindD
 		this.window?.dispatchEvent(emulatedKeyboardEvent);
 	}
 
+	private handleDragEvent(type: 'drag', event: WebViewDragEvent) {
+		// Create a fake DragEvent from the data provided
+		const emulatedDragEvent = new DragEvent(type, event);
+		// Force override the target
+		Object.defineProperty(emulatedDragEvent, 'target', {
+			get: () => this.element,
+		});
+		// And re-dispatch
+		this.window?.dispatchEvent(emulatedDragEvent);
+	}
+
 	windowDidDragStart(): void {
 		// Webview break drag and dropping around the main window (no events are generated when you are over them)
 		// Work around this by disabling pointer events during the drag.

src/vs/workbench/contrib/webview/browser/webviewMessages.d.ts

@@ -17,6 +17,10 @@ type KeyEvent = {
 	repeat: boolean;
 }
 
+type WebViewDragEvent = {
+	shiftKey: boolean;
+}
+
 export type FromWebviewMessage = {
 	'onmessage': { message: any; transfer?: ArrayBuffer[] };
 	'did-click-link': { uri: string };
@@ -36,6 +40,7 @@ export type FromWebviewMessage = {
 	'did-keyup': KeyEvent;
 	'did-context-menu': { clientX: number; clientY: number; context: { [key: string]: unknown } };
 	'drag-start': void;
+	'drag': WebViewDragEvent
 };
 
 interface UpdateContentEvent {

src/vs/workbench/contrib/webview/browser/webviewWindowDragMonitor.ts

@@ -18,19 +18,41 @@ export class WebviewWindowDragMonitor extends Disposable {
 	constructor(targetWindow: CodeWindow, getWebview: () => IWebview | undefined) {
 		super();
 
-		this._register(DOM.addDisposableListener(targetWindow, DOM.EventType.DRAG_START, () => {
+		const onDragStart = () => {
 			getWebview()?.windowDidDragStart();
-		}));
+		};
 
 		const onDragEnd = () => {
 			getWebview()?.windowDidDragEnd();
 		};
 
+		this._register(DOM.addDisposableListener(targetWindow, DOM.EventType.DRAG_START, () => {
+			onDragStart();
+		}));
+
 		this._register(DOM.addDisposableListener(targetWindow, DOM.EventType.DRAG_END, onDragEnd));
+
 		this._register(DOM.addDisposableListener(targetWindow, DOM.EventType.MOUSE_MOVE, currentEvent => {
 			if (currentEvent.buttons === 0) {
 				onDragEnd();
 			}
 		}));
+
+		this._register(DOM.addDisposableListener(targetWindow, DOM.EventType.DRAG, (event) => {
+			if (event.shiftKey) {
+				onDragEnd();
+			} else {
+				onDragStart();
+			}
+		}));
+
+		this._register(DOM.addDisposableListener(targetWindow, DOM.EventType.DRAG_OVER, (event) => {
+			if (event.shiftKey) {
+				onDragEnd();
+			} else {
+				onDragStart();
+			}
+		}));
+
 	}
 }