Active tab disappears when starting to drag (fixes #8631)

src/vs/workbench/browser/parts/editor/media/sidebyside.css

@@ -40,12 +40,12 @@
 	outline-offset: -2px;
 }
 
-.vs .monaco-workbench .editor > .content.dragged {
+.vs .monaco-workbench .editor > .content.dragging {
 	border-left: 1px solid #E7E7E7;
 	border-right: 1px solid #E7E7E7;
 }
 
-.vs-dark .monaco-workbench .editor > .content.dragged {
+.vs-dark .monaco-workbench .editor > .content.dragging {
 	border-left: 1px solid #444;
 	border-right: 1px solid #444;
 }
@@ -63,16 +63,20 @@
 	right: 0;
 }
 
-.monaco-workbench .editor > .content > .one-editor-container.dragged {
+.monaco-workbench .editor > .content > .one-editor-container.drag {
+	z-index: 2000000;
+}
+
+.monaco-workbench .editor > .content > .one-editor-container.dragging {
 	box-sizing: content-box;
 }
 
-.vs .monaco-workbench .editor > .content > .one-editor-container.dragged {
+.vs .monaco-workbench .editor > .content > .one-editor-container.dragging {
 	border-left: 1px solid #E7E7E7;
 	border-right: 1px solid #E7E7E7;
 }
 
-.vs-dark .monaco-workbench .editor > .content > .one-editor-container.dragged {
+.vs-dark .monaco-workbench .editor > .content > .one-editor-container.dragging {
 	border-left: 1px solid #444;
 	border-right: 1px solid #444;
 }

src/vs/workbench/browser/parts/editor/media/tabstitle.css

@@ -25,6 +25,10 @@
 	z-index: 1; /* on top of tabs */
 }
 
+.monaco-workbench > .part.editor > .content.drag > .one-editor-container > .title.tabs::before {
+	z-index: auto;
+}
+
 .vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title.tabs::before {
 	border-top: 1px solid #DDDDDD;
 }
@@ -71,6 +75,10 @@
 	z-index: 2; /* on top of the horizontal border of the title */
 }
 
+.monaco-workbench > .part.editor > .content.drag > .one-editor-container > .title .tabs-container > .tab.active {
+	z-index: auto;
+}
+
 .vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab:not(.active) {
 	background-color: #ECECEC;
 }

src/vs/workbench/browser/parts/editor/media/titlecontrol.css

@@ -80,11 +80,11 @@
 }
 
 #monaco-workbench-editor-move-overlay,
-.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.dragged,
-.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.dragged > .title,
-.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.dragged > .title .title-label a,
-.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.dragged > .title .title-label span,
-.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.dragged .monaco-editor .view-lines {
+.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.drag,
+.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.drag > .title,
+.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.drag > .title .title-label a,
+.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.drag > .title .title-label span,
+.monaco-workbench > .part.editor > .content.multiple-editors .one-editor-container.drag .monaco-editor .view-lines {
 	cursor: -webkit-grabbing;
 }
 

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

@@ -1063,9 +1063,8 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
 			let startX = mouseDownEvent.posx;
 			let oldNewLeft: number = null;
 
-			this.containers[position].style({
-				zIndex: 2000000
-			});
+			this.containers[position].addClass('drag');
+			this.parent.addClass('drag');
 
 			let $window = $(window);
 			$window.on(DOM.EventType.MOUSE_MOVE, (e: MouseEvent) => {
@@ -1168,8 +1167,8 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
 				// Move the editor to provide feedback to the user and add class
 				if (newLeft !== null) {
 					this.containers[position].style({ left: newLeft + 'px' });
-					this.containers[position].addClass('dragged');
-					this.parent.addClass('dragged');
+					this.containers[position].addClass('dragging');
+					this.parent.addClass('dragging');
 				}
 			}).once(DOM.EventType.MOUSE_UP, (e: MouseEvent) => {
 				DOM.EventHelper.stop(e, false);
@@ -1181,8 +1180,10 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
 				this.dragging = false;
 
 				// Restore styles
-				this.parent.removeClass('dragged');
-				this.containers[position].removeClass('dragged');
+				this.parent.removeClass('drag');
+				this.containers[position].removeClass('drag');
+				this.parent.removeClass('dragging');
+				this.containers[position].removeClass('dragging');
 				this.containers[position].style({ zIndex: 'auto' });
 				POSITIONS.forEach((p) => this.containers[p].removeClass('draggedunder'));
 				this.containers[Position.LEFT].style({ left: 0, right: 'auto' });