DND: visible watermark prevents dropping of files (fixes #15698) (#16430)

* fix #15698

* better fix to keep watermark visible

* react on drag enter, not drag over

src/vs/workbench/browser/parts/editor/editorGroupsControl.ts

@@ -1154,7 +1154,7 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 
 		// let a dropped file open inside Code (only if dropped over editor area)
 		this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DROP, (e: DragEvent) => {
-			if (e.target === node) {
+			if (e.target === node || DOM.isAncestor(e.target as HTMLElement, node)) {
 				DOM.EventHelper.stop(e, true);
 				onDrop(e, Position.ONE);
 			} else {
@@ -1162,11 +1162,11 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 			}
 		}));
 
-		// Drag over
-		this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_OVER, (e: DragEvent) => {
-			if (e.target === node) {
-				DOM.addClass(node, 'dropfeedback');
-			}
+		// Drag enter
+		let counter = 0; // see https://github.com/Microsoft/vscode/issues/14470
+		this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_ENTER, (e: DragEvent) => {
+			counter++;
+			DOM.addClass(node, 'dropfeedback');
 
 			const target = <HTMLElement>e.target;
 			if (target) {
@@ -1183,12 +1183,16 @@ export class EditorGroupsControl implements IEditorGroupsControl, IVerticalSashL
 
 		// Drag leave
 		this.toDispose.push(DOM.addDisposableListener(node, DOM.EventType.DRAG_LEAVE, (e: DragEvent) => {
-			DOM.removeClass(node, 'dropfeedback');
+			counter--;
+			if (counter === 0) {
+				DOM.removeClass(node, 'dropfeedback');
+			}
 		}));
 
 		// Drag end (also install globally to be safe)
 		[node, window].forEach(container => {
 			this.toDispose.push(DOM.addDisposableListener(container, DOM.EventType.DRAG_END, (e: DragEvent) => {
+				counter = 0;
 				DOM.removeClass(node, 'dropfeedback');
 				cleanUp();
 			}));

src/vs/workbench/parts/watermark/electron-browser/watermark.css

@@ -3,15 +3,15 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-workbench .part.editor.empty.has-watermark {
+.monaco-workbench .part.editor.empty {
 	background-position-y: calc(50% - 100px);
 }
 
-.monaco-workbench > .part.editor > .watermark {
+.monaco-workbench > .part.editor > .content > .watermark {
 	display: none; /* only visible when no editors are opened */
 }
 
-.monaco-workbench > .part.editor.empty > .watermark {
+.monaco-workbench > .part.editor.empty > .content > .watermark {
 	display: block;
 	position: absolute;
 	width: 100%;
@@ -21,71 +21,71 @@
 	overflow: hidden;
 }
 
-.monaco-workbench > .part.editor.empty > .watermark > .watermark-box {
+.monaco-workbench > .part.editor.empty > .content > .watermark > .watermark-box {
 	display: inline-table;
 	border-collapse: separate;
 	border-spacing: 13px 17px;
 }
 
 @media (min-height: 501px) {
-	.monaco-workbench > .part.editor.empty > .watermark {
+	.monaco-workbench > .part.editor.empty > .content > .watermark {
 		display: block;
 	}
 }
 
 @media (max-height: 500px) {
-	.monaco-workbench > .part.editor.empty > .watermark {
+	.monaco-workbench > .part.editor.empty > .content > .watermark {
 		display: none;
 	}
-	.monaco-workbench .part.editor.empty.has-watermark {
+	.monaco-workbench .part.editor.empty {
 		background-position-y: 50%;
 	}
 }
 
-.monaco-workbench > .part.editor.empty > .watermark dl {
+.monaco-workbench > .part.editor.empty > .content > .watermark dl {
 	display: table-row;
 	opacity: .8;
 	cursor: default;
 }
 
-.monaco-workbench > .part.editor.empty > .watermark dt {
+.monaco-workbench > .part.editor.empty > .content > .watermark dt {
 	text-align: right;
 	letter-spacing: 0.04em
 }
 
-.monaco-workbench > .part.editor.empty > .watermark dd {
+.monaco-workbench > .part.editor.empty > .content > .watermark dd {
 	text-align: left;
 }
 
-.monaco-workbench > .part.editor.empty > .watermark dd > .shortcuts {
+.monaco-workbench > .part.editor.empty > .content > .watermark dd > .shortcuts {
 	padding-left: 0.5em;
 	padding-right: 0.5em;
 }
 
-.monaco-workbench.mac > .part.editor.empty > .watermark dd > .shortcuts {
+.monaco-workbench.mac > .part.editor.empty > .content > .watermark dd > .shortcuts {
 	letter-spacing: 0.15em;
 	font-family: "Lucida Grande", sans-serif;
 }
 
-.monaco-workbench > .part.editor.empty > .watermark dt,
-.monaco-workbench > .part.editor.empty > .watermark dd {
+.monaco-workbench > .part.editor.empty > .content > .watermark dt,
+.monaco-workbench > .part.editor.empty > .content > .watermark dd {
 	display: table-cell;
 }
 
-.monaco-workbench > .part.editor.empty > .watermark dt,
-.monaco-workbench > .part.editor.empty > .watermark dl {
+.monaco-workbench > .part.editor.empty > .content > .watermark dt,
+.monaco-workbench > .part.editor.empty > .content > .watermark dl {
 	color: rgba(0,0,0,.68);
 }
 
-.vs-dark .monaco-workbench > .part.editor.empty > .watermark dt,
-.vs-dark .monaco-workbench > .part.editor.empty > .watermark dl {
+.vs-dark .monaco-workbench > .part.editor.empty > .content > .watermark dt,
+.vs-dark .monaco-workbench > .part.editor.empty > .content > .watermark dl {
 	color: rgba(255,255,255,.6);
 }
 
-.hc-black .monaco-workbench > .part.editor.empty > .watermark dt {
+.hc-black .monaco-workbench > .part.editor.empty > .content > .watermark dt {
 	color: #FFF;
 }
-.hc-black .monaco-workbench > .part.editor.empty > .watermark dl {
+.hc-black .monaco-workbench > .part.editor.empty > .content > .watermark dl {
 	color: #FFF;
 	opacity: 1;
 }

src/vs/workbench/parts/watermark/electron-browser/watermark.ts

@@ -152,7 +152,7 @@ export class WatermarkContribution implements IWorkbenchContribution {
 
 	private create(): void {
 		const container = this.partService.getContainer(Parts.EDITOR_PART);
-		$(container).addClass('has-watermark');
+
 		const watermark = $()
 			.div({ 'class': 'watermark' });
 		const box = $(watermark)
@@ -178,7 +178,7 @@ export class WatermarkContribution implements IWorkbenchContribution {
 			});
 		};
 		update();
-		watermark.build(container, 0);
+		watermark.build(container.firstChild as HTMLElement, 0);
 		this.toDispose.push(this.keybindingService.onDidUpdateKeybindings(update));
 	}