fix #50933 and #50677

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

@@ -1297,9 +1297,10 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
 	//#region Themable
 
 	protected updateStyles(): void {
+		const isEmpty = this.isEmpty();
 
 		// Container
-		if (this.isEmpty()) {
+		if (isEmpty) {
 			this.element.style.backgroundColor = this.getColor(EDITOR_GROUP_EMPTY_BACKGROUND);
 		} else {
 			this.element.style.backgroundColor = null;
@@ -1308,10 +1309,16 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
 		// Title control
 		const { showTabs } = this.accessor.partOptions;
 		const borderColor = this.getColor(EDITOR_GROUP_HEADER_TABS_BORDER) || this.getColor(contrastBorder);
+
+		if (!isEmpty && showTabs && borderColor) {
+			addClass(this.titleContainer, 'title-border-bottom');
+			this.titleContainer.style.setProperty('--title-border-bottom-color', borderColor.toString());
+		} else {
+			removeClass(this.titleContainer, 'title-border-bottom');
+			this.titleContainer.style.removeProperty('--title-border-bottom-color');
+		}
+
 		this.titleContainer.style.backgroundColor = this.getColor(showTabs ? EDITOR_GROUP_HEADER_TABS_BACKGROUND : EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND);
-		this.titleContainer.style.borderBottomWidth = (borderColor && showTabs) ? '1px' : null;
-		this.titleContainer.style.borderBottomStyle = (borderColor && showTabs) ? 'solid' : null;
-		this.titleContainer.style.borderBottomColor = showTabs ? borderColor : null;
 
 		// Editor container
 		this.editorContainer.style.backgroundColor = this.getColor(editorBackground);

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

@@ -42,12 +42,25 @@
 /* Title */
 
 .monaco-workbench > .part.editor > .content .editor-group-container > .title {
+	position: relative;
 	height: 35px;
 	display: flex;
 	box-sizing:	border-box;
 	overflow: hidden;
 }
 
+.monaco-workbench > .part.editor > .content .editor-group-container > .title.title-border-bottom::after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	z-index: 5;
+	pointer-events: none;
+	background-color: var(--title-border-bottom-color);
+	width: 100%;
+	height: 1px;
+}
+
 .monaco-workbench > .part.editor > .content .editor-group-container.empty > .title {
 	display: none;
 }

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

@@ -32,6 +32,7 @@
 /* Tab */
 
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
+	position: relative;
 	display: flex;
 	white-space: nowrap;
 	cursor: pointer;
@@ -40,6 +41,30 @@
 	padding-left: 10px;
 }
 
+.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 5;
+	pointer-events: none;
+	background-color: var(--tab-border-top-color);
+	width: 100%;
+	height: 1px;
+}
+
+.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom::after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	z-index: 5;
+	pointer-events: none;
+	background-color: var(--tab-border-bottom-color);
+	width: 100%;
+	height: 1px;
+}
+
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-right,
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-off {
 	padding-left: 5px; /* reduce padding when we show icons and are in shrinking mode and tab close button is not left */
@@ -59,7 +84,7 @@
 
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-left::after,
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-off::after {
-	content: "";
+	content: '';
 	display: flex;
 	flex: 0;
 	width: 5px; /* Reserve space to hide tab fade when close button is left or off (fixes https://github.com/Microsoft/vscode/issues/45728) */
@@ -96,7 +121,7 @@
 }
 
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container >  .tab.sizing-shrink > .tab-label::after {
-	content: "";
+	content: '';
 	position: absolute;
 	right: 0;
 	height: 100%;

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

@@ -27,7 +27,7 @@ import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElemen
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { getOrSet } from 'vs/base/common/map';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, EDITOR_GROUP_HEADER_TABS_BORDER } from 'vs/workbench/common/theme';
+import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP } from 'vs/workbench/common/theme';
 import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
 import { ResourcesDropHandler, fillResourceDataTransfers, DraggedEditorIdentifier, DraggedEditorGroupIdentifier, DragAndDropObserver } from 'vs/workbench/browser/dnd';
 import { Color } from 'vs/base/common/color';
@@ -830,19 +830,22 @@ export class TabsTitleControl extends TitleControl {
 			tabContainer.setAttribute('aria-selected', 'true');
 			tabContainer.style.backgroundColor = this.getColor(TAB_ACTIVE_BACKGROUND);
 
-			const activeTabBorderColor = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
+			const activeTabBorderColorBottom = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
+			if (activeTabBorderColorBottom) {
+				addClass(tabContainer, 'tab-border-bottom');
+				tabContainer.style.setProperty('--tab-border-bottom-color', activeTabBorderColorBottom.toString());
+			} else {
+				removeClass(tabContainer, 'tab-border-bottom');
+				tabContainer.style.removeProperty('--tab-border-bottom-color');
+			}
+
 			const activeTabBorderColorTop = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER_TOP : TAB_UNFOCUSED_ACTIVE_BORDER_TOP);
-			if (activeTabBorderColor) {
-				// Use boxShadow for the active tab border because if we also have a editor group header
-				// color, the two colors would collide and the tab border never shows up.
-				// see https://github.com/Microsoft/vscode/issues/33111
-				// In case of tabs container having a border, we need to inset -2px for the border to show up.
-				const hasTabsContainerBorder = !!this.getColor(EDITOR_GROUP_HEADER_TABS_BORDER);
-				tabContainer.style.boxShadow = `${activeTabBorderColor} 0 ${hasTabsContainerBorder ? -2 : -1}px inset`;
-			} else if (activeTabBorderColorTop) {
-				tabContainer.style.boxShadow = `${activeTabBorderColorTop} 0 2px inset`;
+			if (activeTabBorderColorTop) {
+				addClass(tabContainer, 'tab-border-top');
+				tabContainer.style.setProperty('--tab-border-top-color', activeTabBorderColorTop.toString());
 			} else {
-				tabContainer.style.boxShadow = null;
+				removeClass(tabContainer, 'tab-border-top');
+				tabContainer.style.removeProperty('--tab-border-top-color');
 			}
 
 			// Label