grid - retire editorGroup.background and add new colors for empty groups

microsoft · May 9, 2018 · a970588 · a970588
1 parent b4b420f
commit a970588
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 26 deletions.
diff --git a/extensions/theme-abyss/themes/abyss-color-theme.json b/extensions/theme-abyss/themes/abyss-color-theme.json
@@ -365,7 +365,6 @@
 		// Workbench: Editors
 		// "editorGroupHeader.noTabsBackground": "",
 		"editorGroup.border": "#2b2b4a",
-		"editorGroup.background": "#1c1c2a",
 		"editorGroup.dropBackground": "#25375daa",
 		"editorGroupHeader.tabsBackground": "#1c1c2a",
 

diff --git a/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json b/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json
@@ -19,7 +19,6 @@
 		"editorWidget.background": "#131510",
 		"editorHoverWidget.background": "#221a14",
 		"editorGroupHeader.tabsBackground": "#131510",
-		"editorGroup.background": "#0f0c08",
 		"editorLineNumber.activeForeground": "#adadad",
 		"tab.inactiveBackground": "#131510",
 		"titleBar.activeBackground": "#423523",

diff --git a/extensions/theme-monokai-dimmed/themes/dimmed-monokai-color-theme.json b/extensions/theme-monokai-dimmed/themes/dimmed-monokai-color-theme.json
@@ -21,7 +21,6 @@
 		"editorIndentGuide.background": "#505037",
 		"editorIndentGuide.activeBackground": "#707057",
 		"editorGroupHeader.tabsBackground": "#282828",
-		"editorGroup.background": "#1e1e1e",
 		"tab.inactiveBackground": "#404040",
 		"tab.border": "#303030",
 		"tab.inactiveForeground": "#d8d8d8",

diff --git a/extensions/theme-red/themes/Red-color-theme.json b/extensions/theme-red/themes/Red-color-theme.json
@@ -15,7 +15,6 @@
 		// editor
 		"editor.background": "#390000",
 		"editorGroup.border": "#ff666633",
-		"editorGroup.background": "#1c0101",
 		"editorCursor.foreground": "#970000",
 		"editor.foreground": "#F8F8F8",
 		"editorWhitespace.foreground": "#c10000",

diff --git a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json
@@ -413,7 +413,6 @@
 		// Workbench: Editors
 		// "editorGroupHeader.noTabsBackground": "",
 		"editorGroup.border": "#00212B",
-		"editorGroup.background": "#011b23",
 		"editorGroup.dropBackground": "#2AA19844",
 		"editorGroupHeader.tabsBackground": "#004052",
 

diff --git a/extensions/theme-solarized-light/themes/solarized-light-color-theme.json b/extensions/theme-solarized-light/themes/solarized-light-color-theme.json
@@ -409,7 +409,6 @@
 		// Workbench: Editors
 		// "editorGroupHeader.noTabsBackground": "",
 		"editorGroup.border": "#DDD6C1",
-		"editorGroup.background": "#FFFBF2",
 		"editorGroup.dropBackground": "#DDD6C1AA",
 		"editorGroupHeader.tabsBackground": "#D9D2C2",
 

diff --git a/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json b/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json
@@ -23,7 +23,6 @@
 		"editorHoverWidget.border": "#ffffff44",
 		"editorGroup.border": "#404f7d",
 		"editorGroupHeader.tabsBackground": "#001733",
-		"editorGroup.background": "#1c1c2a",
 		"editorGroup.dropBackground": "#25375daa",
 		"peekViewResult.background": "#001c40",
 		"tab.inactiveBackground": "#001c40",

diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts
@@ -30,7 +30,7 @@ import { IEditorStacksModel, IStacksModelChangeEvent, IEditorGroup, EditorOption
 import { getCodeEditor } from 'vs/editor/browser/services/codeEditorService';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { editorBackground, contrastBorder, activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
-import { Themable, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND, EDITOR_GROUP_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, EDITOR_GROUP_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BORDER } from 'vs/workbench/common/theme';
+import { Themable, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND, EDITOR_GROUP_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BORDER } from 'vs/workbench/common/theme';
 import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { ResourcesDropHandler, LocalSelectionTransfer, DraggedEditorIdentifier } from 'vs/workbench/browser/dnd';
@@ -1660,8 +1660,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 	}
 
 	private updateFromDragAndDrop(element: HTMLElement, isDraggedOver: boolean): void {
-		const groupCount = this.stacks.groups.length;
-		const background = this.getColor(isDraggedOver ? EDITOR_DRAG_AND_DROP_BACKGROUND : groupCount > 0 ? EDITOR_GROUP_BACKGROUND : null);
+		const background = this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND);
 		element.style.backgroundColor = background;
 
 		const activeContrastBorderColor = this.getColor(activeContrastBorder);

diff --git a/src/vs/workbench/browser/parts/editor/editorPart.ts b/src/vs/workbench/browser/parts/editor/editorPart.ts
@@ -38,7 +38,6 @@ import { Event, Emitter, once } from 'vs/base/common/event';
 import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
-import { EDITOR_GROUP_BACKGROUND } from 'vs/workbench/common/theme';
 import { createCSSRule, Dimension, addClass, removeClass } from 'vs/base/browser/dom';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { join } from 'vs/base/common/paths';
@@ -1457,8 +1456,6 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
 		} else {
 			removeClass(content, 'multiple-groups');
 		}
-
-		content.style.backgroundColor = groupCount > 0 ? this.getColor(EDITOR_GROUP_BACKGROUND) : null;
 	}
 
 	public activateGroup(group: EditorGroup): void;

diff --git a/src/vs/workbench/browser/parts/editor2/nextEditorGroupView.ts b/src/vs/workbench/browser/parts/editor2/nextEditorGroupView.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, focusBorder } from 'vs/platform/theme/common/colorRegistry';
-import { Themable, EDITOR_GROUP_HEADER_TABS_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_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 } from 'vs/workbench/common/theme';
 import { IMoveEditorOptions, ICopyEditorOptions } from 'vs/workbench/services/group/common/nextEditorGroupsService';
 import { NextTabsTitleControl } from 'vs/workbench/browser/parts/editor2/nextTabsTitleControl';
 import { NextEditorControl } from 'vs/workbench/browser/parts/editor2/nextEditorControl';
@@ -85,6 +85,7 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
 
 	private _group: EditorGroup;
 
+	private active: boolean;
 	private _dimension: Dimension;
 	private _whenRestored: Thenable<void>;
 
@@ -173,15 +174,15 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
 		// Editor control
 		this.editorControl = this._register(this.scopedInstantiationService.createInstance(NextEditorControl, this.editorContainer, this._group.id));
 
-		// Update styles
-		this.updateStyles();
+		// Track Focus
+		this.doTrackFocus();
 
 		// Update containers
 		this.updateTitleContainer();
 		this.updateContainer();
 
-		// Track Focus
-		this.doTrackFocus();
+		// Update styles
+		this.updateStyles();
 	}
 
 	private doTrackFocus(): void {
@@ -241,6 +242,9 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
 			this.element.removeAttribute('tabIndex');
 			this.element.removeAttribute('aria-label');
 		}
+
+		// Update styles
+		this.updateStyles();
 	}
 
 	private updateTitleContainer(): void {
@@ -448,13 +452,17 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
 	}
 
 	setActive(isActive: boolean): void {
+		this.active = isActive;
 
 		// Update container
 		toggleClass(this.element, 'active', isActive);
 		toggleClass(this.element, 'inactive', !isActive);
 
 		// Update title control
 		this.titleAreaControl.setActive(isActive);
+
+		// Update styles
+		this.updateStyles();
 	}
 
 	isEmpty(): boolean {
@@ -887,6 +895,11 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
 
 		// 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 {
+			this.element.style.backgroundColor = null;
+		}
 
 		// Title control
 		const { showTabs } = this.accessor.partOptions;

diff --git a/src/vs/workbench/browser/parts/editor2/nextTabsTitleControl.ts b/src/vs/workbench/browser/parts/editor2/nextTabsTitleControl.ts
@@ -30,7 +30,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, EDITOR_GROUP_BACKGROUND, WORKBENCH_BACKGROUND } 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 } from 'vs/workbench/common/theme';
 import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
 import { ResourcesDropHandler, fillResourceDataTransfers, LocalSelectionTransfer, DraggedEditorIdentifier, DragCounter } from 'vs/workbench/browser/dnd';
 import { Color } from 'vs/base/common/color';
@@ -1036,13 +1036,12 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	if (theme.type !== 'hc') {
 		const workbenchBackground = WORKBENCH_BACKGROUND(theme);
 		const editorBackgroundColor = theme.getColor(editorBackground);
-		const editorGroupBackground = theme.getColor(EDITOR_GROUP_BACKGROUND);
 		const editorGroupHeaderTabsBackground = theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND);
 		const editorDragAndDropBackground = theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND);
 
 		let adjustedTabBackground: Color;
-		if (editorGroupHeaderTabsBackground && editorBackgroundColor && editorGroupBackground) {
-			adjustedTabBackground = editorGroupHeaderTabsBackground.flatten(editorBackgroundColor, editorGroupBackground, editorBackgroundColor, workbenchBackground);
+		if (editorGroupHeaderTabsBackground && editorBackgroundColor) {
+			adjustedTabBackground = editorGroupHeaderTabsBackground.flatten(editorBackgroundColor, editorBackgroundColor, workbenchBackground);
 		}
 
 		let adjustedTabDragBackground: Color;

diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts
@@ -105,11 +105,17 @@ export const TAB_UNFOCUSED_INACTIVE_FOREGROUND = registerColor('tab.unfocusedIna
 
 // < --- Editors --- >
 
-export const EDITOR_GROUP_BACKGROUND = registerColor('editorGroup.background', {
-	dark: '#2D2D2D',
-	light: '#ECECEC',
+export const EDITOR_GROUP_EMPTY_BACKGROUND = registerColor('editorGroup.emptyBackground', {
+	dark: null,
+	light: null,
 	hc: null
-}, nls.localize('editorGroupBackground', "Background color of an editor group. Editor groups are the containers of editors. The background color shows up when dragging editor groups around."));
+}, nls.localize('editorGroupEmptyBackground', "Background color of an empty editor group. Editor groups are the containers of editors."));
+
+export const EDITOR_GROUP_ACTIVE_EMPTY_BACKGROUND = registerColor('editorGroup.activeEmptyBackground', {
+	dark: EDITOR_GROUP_EMPTY_BACKGROUND,
+	light: EDITOR_GROUP_EMPTY_BACKGROUND,
+	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_HEADER_TABS_BACKGROUND = registerColor('editorGroupHeader.tabsBackground', {
 	dark: '#252526',