Potential workaround for electron 4 eating mouse events

Matt Bierner · Matt Bierner · commit 159a49279bc8 · 2019-06-25T22:16:13.000-07:00
For microsoft#75090 See microsoft#75090 for information about issue. This PR attempts to workaround this bug by broadcasting synthetic mouse move and mouseup events from the webview back to the main window
diff --git a/src/vs/workbench/contrib/webview/browser/pre/main.js b/src/vs/workbench/contrib/webview/browser/pre/main.js
@@ -410,6 +410,9 @@
 					}
 				};
 
+				/**
+				 * @param {HTMLIFrameElement} newFrame
+				 */
 				function hookupOnLoadHandlers(newFrame) {
 					clearTimeout(loadTimeout);
 					loadTimeout = undefined;
@@ -442,6 +445,29 @@
 
 					// Bubble out link clicks
 					newFrame.contentWindow.addEventListener('click', handleInnerClick);
+
+					// Electron 4 eats mouseup events from inside webviews
+					// https://github.com/microsoft/vscode/issues/75090
+					// Try to fix this by rebroadcasting mouse moves and mouseups so that we can
+					// emulate these on the main window
+					if (!FAKE_LOAD) {
+						let isMouseDown = false;
+
+						newFrame.contentWindow.addEventListener('mousedown', () => {
+							isMouseDown = true;
+						});
+
+						const tryDispatchSyntheticMouseEvent = (e) => {
+							if (!isMouseDown) {
+								host.postMessage('synthetic-mouse-event', { type: e.type, screenX: e.screenX, screenY: e.screenY, clientX: e.clientX, clientY: e.clientY });
+							}
+						};
+						newFrame.contentWindow.addEventListener('mouseup', e => {
+							tryDispatchSyntheticMouseEvent(e);
+							isMouseDown = false;
+						});
+						newFrame.contentWindow.addEventListener('mousemove', tryDispatchSyntheticMouseEvent);
+					}
 				}
 
 				if (!FAKE_LOAD) {
diff --git a/src/vs/workbench/contrib/webview/electron-browser/webviewElement.ts b/src/vs/workbench/contrib/webview/electron-browser/webviewElement.ts
@@ -391,6 +391,18 @@ export class WebviewElement extends Disposable implements Webview {
 					this._onDidClickLink.fire(URI.parse(uri));
 					return;
 
+				case 'synthetic-mouse-event':
+					{
+						const rawEvent = event.args[0];
+						const bounds = this._webview.getBoundingClientRect();
+						window.dispatchEvent(new MouseEvent(rawEvent.type, {
+							...rawEvent,
+							clientX: rawEvent.clientX + bounds.left,
+							clientY: rawEvent.clientY + bounds.top,
+						}));
+						return;
+					}
+
 				case 'did-set-content':
 					this._webview.style.flex = '';
 					this._webview.style.width = '100%';
