fix #50710

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

@@ -18,7 +18,7 @@ import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
 import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
 import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { editorBackground, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
-import { Themable, EDITOR_GROUP_HEADER_TABS_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND, EDITOR_GROUP_ACTIVE_EMPTY_BACKGROUND, EDITOR_GROUP_EMPTY_BACKGROUND } from 'vs/workbench/common/theme';
+import { Themable, EDITOR_GROUP_HEADER_TABS_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND, EDITOR_GROUP_ACTIVE_EMPTY_BACKGROUND, EDITOR_GROUP_EMPTY_BACKGROUND, EDITOR_GROUP_ACTIVE_EMPTY_BORDER } from 'vs/workbench/common/theme';
 import { IMoveEditorOptions, ICopyEditorOptions, ICloseEditorsFilter, IGroupChangeEvent, GroupChangeKind, EditorsOrder, GroupsOrder } from 'vs/workbench/services/group/common/editorGroupsService';
 import { TabsTitleControl } from 'vs/workbench/browser/parts/editor/tabsTitleControl';
 import { EditorControl } from 'vs/workbench/browser/parts/editor/editorControl';
@@ -1349,4 +1349,27 @@ registerThemingParticipant((theme, collector, environment) => {
 			background-image: url('${join(environment.appRoot, letterpress)}')
 		}
 	`);
+
+	// Active Empty Group Border
+	const activeEmptyGroupBorder = theme.getColor(EDITOR_GROUP_ACTIVE_EMPTY_BORDER);
+	if (activeEmptyGroupBorder) {
+		collector.addRule(`
+			.monaco-workbench > .part.editor > .content:not(.empty) .editor-group-container.empty.active {
+				outline-width: 1px;
+				outline-color: ${activeEmptyGroupBorder};
+				outline-offset: -2px;
+				outline-style: solid;
+			}
+
+			.monaco-workbench > .part.editor > .content.empty .editor-group-container.empty.active:focus {
+				outline: none; /* never show outline for empty group if it is the last */
+			}
+		`);
+	} else {
+		collector.addRule(`
+			.monaco-workbench > .part.editor > .content .editor-group-container.empty.active:focus {
+				outline: none; /* disable focus outline unless active empty group border is defined */
+			}
+		`);
+	}
 });

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

@@ -24,10 +24,6 @@
 	opacity: 1; /* indicate active group through undimmed state */
 }
 
-.monaco-workbench > .part.editor > .content .editor-group-container.empty.active:focus {
-	outline: none; /* do not use outline for focus indication, rely on dimmed state via opacity */
-}
-
 /* Title */
 
 .monaco-workbench > .part.editor > .content .editor-group-container > .title {

src/vs/workbench/common/theme.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as nls from 'vs/nls';
-import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken } from 'vs/platform/theme/common/colorRegistry';
+import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder } from 'vs/platform/theme/common/colorRegistry';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
 import { Color } from 'vs/base/common/color';
@@ -129,6 +129,12 @@ export const EDITOR_GROUP_ACTIVE_EMPTY_BACKGROUND = registerColor('editorGroup.a
 	hc: EDITOR_GROUP_EMPTY_BACKGROUND
 }, nls.localize('editorGroupActiveEmptyBackground', "Background color of an empty editor group that is active. Editor groups are the containers of editors."));
 
+export const EDITOR_GROUP_ACTIVE_EMPTY_BORDER = registerColor('editorGroup.activeEmptyBorder', {
+	dark: null,
+	light: null,
+	hc: focusBorder
+}, nls.localize('editorGroupActiveEmptyBorder', "Border color of an empty editor group that is active. Editor groups are the containers of editors."));
+
 export const EDITOR_GROUP_HEADER_TABS_BACKGROUND = registerColor('editorGroupHeader.tabsBackground', {
 	dark: '#252526',
 	light: '#F3F3F3',