grid - drop outline as focus indication and rely on dimmed state

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

@@ -17,7 +17,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 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, focusBorder } from 'vs/platform/theme/common/colorRegistry';
+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 { IMoveEditorOptions, ICopyEditorOptions, ICloseEditorsFilter, IGroupChangeEvent, GroupChangeKind, EditorsOrder, GroupsOrder } from 'vs/workbench/services/group/common/editorGroupsService';
 import { TabsTitleControl } from 'vs/workbench/browser/parts/editor/tabsTitleControl';
@@ -1234,7 +1234,6 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
 	protected updateStyles(): void {
 
 		// Container
-		this.element.style.outlineColor = this.getColor(focusBorder);
 		if (this.isEmpty()) {
 			this.element.style.backgroundColor = this.getColor(this.active ? EDITOR_GROUP_ACTIVE_EMPTY_BACKGROUND : EDITOR_GROUP_EMPTY_BACKGROUND);
 		} else {

src/vs/workbench/browser/parts/editor/media/close-inverse.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#424242" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#e8e8e8" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>
\ No newline at end of file

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

@@ -13,6 +13,7 @@
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
 	background-size: 15%;
+	opacity: 0.5; /* dimmed to indicate inactive state */
 }
 
 .monaco-workbench > .part.editor > .content.empty .editor-group-container.empty  {
@@ -20,13 +21,11 @@
 }
 
 .monaco-workbench > .part.editor > .content .editor-group-container.empty.active {
-	outline-width: 1px;
-	outline-style: solid;
-	outline-offset: -2px;
+	opacity: 1; /* indicate active group through undimmed state */
 }
 
-.monaco-workbench > .part.editor > .content.empty .editor-group-container.empty.active {
-	outline-width: 0; /* no outline when editor part is empty */
+.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 */
@@ -46,17 +45,12 @@
 
 .monaco-workbench > .part.editor > .content .editor-group-container > .editor-group-container-toolbar {
 	display: none;
-	opacity: 0.5;
 }
 
 .monaco-workbench > .part.editor > .content:not(.empty) .editor-group-container.empty > .editor-group-container-toolbar {
 	display: block;
 }
 
-.monaco-workbench > .part.editor > .content:not(.empty) .editor-group-container.empty.active > .editor-group-container-toolbar {
-	opacity: 1;
-}
-
 .monaco-workbench > .part.editor > .content .editor-group-container > .editor-group-container-toolbar .action-label {
 	display: block;
 	height: 35px;

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

@@ -75,5 +75,5 @@
 
 .monaco-shell.vs-dark .screen-reader-detected-explanation .cancel,
 .monaco-shell.hc-black .screen-reader-detected-explanation .cancel {
-	background: url('close-big-dark.svg') center center no-repeat;
+	background: url('close-big-inverse.svg') center center no-repeat;
 }
\ No newline at end of file