invert feedback

src/vs/workbench/browser/media/part.css

@@ -8,6 +8,19 @@
 	overflow: hidden;
 }
 
+.monaco-workbench .part > .drop-block-overlay {
+	visibility: hidden; /* use visibility to ensure transitions */
+	transition-property: opacity;
+	transition-timing-function: linear;
+	transition-duration: 250ms;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	opacity: 0;
+	pointer-events: none;
+}
+
 .monaco-workbench .part > .title {
 	display: none; /* Parts have to opt in to show title area */
 }

src/vs/workbench/browser/parts/activitybar/activitybarPart.ts

@@ -17,7 +17,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { IDisposable, toDisposable, DisposableStore, Disposable } from 'vs/base/common/lifecycle';
 import { ToggleActivityBarVisibilityAction, ToggleMenuBarAction } from 'vs/workbench/browser/actions/layoutActions';
 import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeService';
-import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
+import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar';
 import { Dimension, addClass, removeNode } from 'vs/base/browser/dom';
@@ -39,7 +39,6 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur
 import { getMenuBarVisibility } from 'vs/platform/windows/common/windows';
 import { isWeb } from 'vs/base/common/platform';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
-import { CompositeDragAndDropObserver } from 'vs/workbench/browser/dnd';
 
 interface ICachedViewlet {
 	id: string;
@@ -298,10 +297,6 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 	createContentArea(parent: HTMLElement): HTMLElement {
 		this.element = parent;
 
-		const overlay = document.createElement('div');
-		addClass(overlay, 'drag-overlay');
-		parent.appendChild(overlay);
-
 		this.content = document.createElement('div');
 		addClass(this.content, 'content');
 		parent.appendChild(this.content);
@@ -321,23 +316,6 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 
 		this.createGlobalActivityActionBar(globalActivities);
 
-		CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, {
-			onDragStart: e => {
-				overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || '';
-				overlay.style.opacity = '.8';
-			},
-			onDragEnd: e => {
-				overlay.style.opacity = '';
-			},
-			onDragEnter: e => {
-				overlay.style.opacity = '';
-			},
-			onDragLeave: e => {
-				overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || '';
-				overlay.style.opacity = '.8';
-			}
-		});
-
 		return this.content;
 	}
 

src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css

@@ -7,15 +7,10 @@
 	width: 48px;
 }
 
-.monaco-workbench .part > .drag-overlay {
-	transition-property: opacity;
-	transition-duration: .2s;
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	opacity: 0;
-	top: 0;
-	pointer-events: none;
+.monaco-workbench .part > .drop-block-overlay.visible {
+	visibility: visible;
+	backdrop-filter: brightness(97%) blur(2px);
+	opacity: 1;
 }
 
 .monaco-workbench .activitybar > .content {

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

@@ -32,6 +32,7 @@ import { registerSingleton } from 'vs/platform/instantiation/common/extensions';
 import { MementoObject } from 'vs/workbench/common/memento';
 import { assertIsDefined } from 'vs/base/common/types';
 import { IBoundarySashes } from 'vs/base/browser/ui/grid/gridview';
+import { CompositeDragAndDropObserver } from 'vs/workbench/browser/dnd';
 
 interface IEditorPartUIState {
 	serializedGrid: ISerializedGrid;
@@ -826,6 +827,20 @@ export class EditorPart extends Part implements IEditorGroupsService, IEditorGro
 		// Drop support
 		this._register(this.createEditorDropTarget(this.container, {}));
 
+		// No drop in the editor
+		const overlay = document.createElement('div');
+		addClass(overlay, 'drop-block-overlay');
+		parent.appendChild(overlay);
+
+		CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, {
+			onDragStart: e => {
+				toggleClass(overlay, 'visible', true);
+			},
+			onDragEnd: e => {
+				toggleClass(overlay, 'visible', false);
+			}
+		});
+
 		return this.container;
 	}
 

src/vs/workbench/browser/parts/panel/panelPart.ts

@@ -20,13 +20,13 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ClosePanelAction, PanelActivityAction, ToggleMaximizedPanelAction, TogglePanelAction, PlaceHolderPanelActivityAction, PlaceHolderToggleCompositePinnedAction, PositionPanelActionConfigs, SetPanelPositionAction } from 'vs/workbench/browser/parts/panel/panelActions';
 import { IThemeService, registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BACKGROUND, PANEL_INPUT_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
+import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BACKGROUND, PANEL_INPUT_BORDER } from 'vs/workbench/common/theme';
 import { activeContrastBorder, focusBorder, contrastBorder, editorBackground, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
 import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar';
 import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositeBarActions';
 import { IBadge } from 'vs/workbench/services/activity/common/activity';
 import { INotificationService } from 'vs/platform/notification/common/notification';
-import { Dimension, trackFocus, addClass } from 'vs/base/browser/dom';
+import { Dimension, trackFocus } from 'vs/base/browser/dom';
 import { localize } from 'vs/nls';
 import { IDisposable, DisposableStore } from 'vs/base/common/lifecycle';
 import { IContextKey, IContextKeyService, ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
@@ -37,7 +37,6 @@ import { ViewContainer, IViewContainersRegistry, Extensions as ViewContainerExte
 import { MenuId } from 'vs/platform/actions/common/actions';
 import { ViewMenuActions } from 'vs/workbench/browser/parts/views/viewMenuActions';
 import { IPaneComposite } from 'vs/workbench/common/panecomposite';
-import { CompositeDragAndDropObserver } from 'vs/workbench/browser/dnd';
 
 interface ICachedPanel {
 	id: string;
@@ -341,31 +340,6 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 
 		super.create(parent);
 
-		const overlay = document.createElement('div');
-		addClass(overlay, 'drag-overlay');
-		parent.appendChild(overlay);
-
-		CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, {
-			onDragStart: e => {
-				// this.element.style.outline = `1px solid`;
-				// this.element.style.outlineOffset = '-1px';
-				overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || '';
-				overlay.style.opacity = '.8';
-			},
-			onDragEnd: e => {
-				// this.element.style.outline = '';
-				overlay.style.opacity = '';
-			},
-			onDragEnter: e => {
-				overlay.style.opacity = '';
-			},
-			onDragLeave: e => {
-				overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || '';
-				overlay.style.opacity = '.8';
-			}
-		});
-
-
 		const focusTracker = this._register(trackFocus(parent));
 		this._register(focusTracker.onDidFocus(() => this.panelFocusContextKey.set(true)));
 		this._register(focusTracker.onDidBlur(() => this.panelFocusContextKey.set(false)));

src/vs/workbench/browser/parts/sidebar/sidebarPart.ts

@@ -23,9 +23,9 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { Event, Emitter } from 'vs/base/common/event';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
-import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND, SIDE_BAR_BORDER, SIDE_BAR_DRAG_AND_DROP_BACKGROUND, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
+import { SIDE_BAR_TITLE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND, SIDE_BAR_BORDER, SIDE_BAR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
 import { INotificationService } from 'vs/platform/notification/common/notification';
-import { EventType, addDisposableListener, trackFocus, addClass } from 'vs/base/browser/dom';
+import { EventType, addDisposableListener, trackFocus } from 'vs/base/browser/dom';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
@@ -33,7 +33,7 @@ import { IExtensionService } from 'vs/workbench/services/extensions/common/exten
 import { registerSingleton } from 'vs/platform/instantiation/common/extensions';
 import { LayoutPriority } from 'vs/base/browser/ui/grid/grid';
 import { assertIsDefined } from 'vs/base/common/types';
-import { LocalSelectionTransfer, CompositeDragAndDropObserver, DraggedViewIdentifier, DraggedCompositeIdentifier } from 'vs/workbench/browser/dnd';
+import { LocalSelectionTransfer, DraggedViewIdentifier, DraggedCompositeIdentifier } from 'vs/workbench/browser/dnd';
 
 export class SidebarPart extends CompositePart<Viewlet> implements IViewletService {
 
@@ -152,28 +152,6 @@ export class SidebarPart extends CompositePart<Viewlet> implements IViewletServi
 
 		super.create(parent);
 
-		const overlay = document.createElement('div');
-		addClass(overlay, 'drag-overlay');
-		parent.appendChild(overlay);
-
-		CompositeDragAndDropObserver.INSTANCE.registerTarget(this.element, {
-			onDragStart: e => {
-				overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || '';
-				overlay.style.opacity = '.8';
-			},
-			onDragEnd: e => {
-				// this.element.style.outline = '';
-				overlay.style.opacity = '';
-			},
-			onDragEnter: e => {
-				overlay.style.opacity = '';
-			},
-			onDragLeave: e => {
-				overlay.style.backgroundColor = this.theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND, true)?.toString() || '';
-				overlay.style.opacity = '.8';
-			}
-		});
-
 		const focusTracker = this._register(trackFocus(parent));
 		this._register(focusTracker.onDidFocus(() => this.sideBarFocusContextKey.set(true)));
 		this._register(focusTracker.onDidBlur(() => this.sideBarFocusContextKey.set(false)));