add functionality to hide open context menu (#64099)

* add functionality to hide open context menu fix toggling of ... menu on windows fix toggling of global activity bar menu on windows fix position of global activity bar menu on windows fixes #62413 fixes #61766 * addressing feedback * linting error * updating to eat mouse click to dismiss menu * remove native context menu changes as unnecessary * use an invisible div to block mouse * move logic into context menu handler * sanitize SNAP variables * rename update.channel to update.mode fixes #67407 * dervie status background from editor widget background
microsoft · Feb 21, 2019 · d96141b · d96141b
1 parent 2ff5d6b
commit d96141b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 14 deletions.
diff --git a/src/vs/platform/contextview/browser/contextMenuHandler.css b/src/vs/platform/contextview/browser/contextMenuHandler.css
@@ -6,3 +6,12 @@
 .context-view .monaco-menu {
 	min-width: 130px;
 }
+
+.context-view-block {
+	position: fixed;
+	left:0;
+	top:0;
+	z-index: -1;
+	width: 100%;
+	height: 100%;
+}
diff --git a/src/vs/platform/contextview/browser/contextMenuHandler.ts b/src/vs/platform/contextview/browser/contextMenuHandler.ts
@@ -16,7 +16,7 @@ import { INotificationService } from 'vs/platform/notification/common/notificati
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IContextMenuDelegate } from 'vs/base/browser/contextmenu';
-import { addDisposableListener, EventType } from 'vs/base/browser/dom';
+import { addDisposableListener, EventType, $ } from 'vs/base/browser/dom';
 import { attachMenuStyler } from 'vs/platform/theme/common/styler';
 import { domEvent } from 'vs/base/browser/event';
 
@@ -25,6 +25,7 @@ export class ContextMenuHandler {
 	private elementDisposable: IDisposable;
 	private menuContainerElement: HTMLElement | null;
 	private focusToReturn: HTMLElement;
+	private block: HTMLElement | null;
 
 	constructor(
 		element: HTMLElement,
@@ -73,12 +74,14 @@ export class ContextMenuHandler {
 					container.className += ' ' + className;
 				}
 
+				// Render invisible div to block mouse interaction in the rest of the UI
+				this.block = container.appendChild($('.context-view-block'));
+
 				const menuDisposables: IDisposable[] = [];
 
 				const actionRunner = delegate.actionRunner || new ActionRunner();
 				actionRunner.onDidBeforeRun(this.onActionRun, this, menuDisposables);
 				actionRunner.onDidRun(this.onDidActionRun, this, menuDisposables);
-
 				menu = new Menu(container, actions, {
 					actionItemProvider: delegate.getActionItem,
 					context: delegate.getActionsContext ? delegate.getActionsContext() : null,
@@ -106,6 +109,11 @@ export class ContextMenuHandler {
 					delegate.onHide(!!didCancel);
 				}
 
+				if (this.block) {
+					this.block.remove();
+					this.block = null;
+				}
+
 				if (this.focusToReturn) {
 					this.focusToReturn.focus();
 				}

diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts
@@ -7,7 +7,6 @@ import 'vs/css!./media/activityaction';
 import * as nls from 'vs/nls';
 import * as DOM from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { EventType as TouchEventType, GestureEvent } from 'vs/base/browser/touch';
 import { Action } from 'vs/base/common/actions';
 import { KeyCode } from 'vs/base/common/keyCodes';
@@ -130,32 +129,29 @@ export class GlobalActivityActionItem extends ActivityActionItem {
 
 		this._register(DOM.addDisposableListener(this.container, DOM.EventType.MOUSE_DOWN, (e: MouseEvent) => {
 			DOM.EventHelper.stop(e, true);
-
-			const event = new StandardMouseEvent(e);
-			this.showContextMenu({ x: event.posx, y: event.posy });
+			this.showContextMenu();
 		}));
 
 		this._register(DOM.addDisposableListener(this.container, DOM.EventType.KEY_UP, (e: KeyboardEvent) => {
 			let event = new StandardKeyboardEvent(e);
 			if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
 				DOM.EventHelper.stop(e, true);
-
-				this.showContextMenu(this.container);
+				this.showContextMenu();
 			}
 		}));
 
 		this._register(DOM.addDisposableListener(this.container, TouchEventType.Tap, (e: GestureEvent) => {
 			DOM.EventHelper.stop(e, true);
-
-			const event = new StandardMouseEvent(e);
-			this.showContextMenu({ x: event.posx, y: event.posy });
+			this.showContextMenu();
 		}));
 	}
 
-	private showContextMenu(location: HTMLElement | { x: number, y: number }): void {
+	private showContextMenu(): void {
 		const globalAction = this._action as GlobalActivityAction;
 		const activity = globalAction.activity as IGlobalActivity;
 		const actions = activity.getActions();
+		const containerPosition = DOM.getDomNodePagePosition(this.container);
+		const location = { x: containerPosition.left + containerPosition.width / 2, y: containerPosition.top };
 
 		this.contextMenuService.showContextMenu({
 			getAnchor: () => location,

diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css
@@ -78,7 +78,7 @@
 	width: 35px;
 	height: 100%;
 	position: relative;
-	z-index: 99;
+	z-index: 3000;
 	background-image: url('code-icon.svg');
 	background-repeat: no-repeat;
 	background-position: center center;
@@ -96,7 +96,7 @@
 	flex-shrink: 0;
 	text-align: center;
 	position: relative;
-	z-index: 99;
+	z-index: 3000;
 	-webkit-app-region: no-drag;
 	height: 100%;
 	width: 138px;