From a970588eb6ecb6772cd3e09c51a62d72914fdc7d Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Wed, 9 May 2018 10:53:04 +0200 Subject: [PATCH] grid - retire editorGroup.background and add new colors for empty groups --- .../theme-abyss/themes/abyss-color-theme.json | 1 - .../themes/kimbie-dark-color-theme.json | 1 - .../themes/dimmed-monokai-color-theme.json | 1 - .../theme-red/themes/Red-color-theme.json | 1 - .../themes/solarized-dark-color-theme.json | 1 - .../themes/solarized-light-color-theme.json | 1 - .../themes/tomorrow-night-blue-theme.json | 1 - .../parts/editor/editorGroupsControl.ts | 5 ++-- .../browser/parts/editor/editorPart.ts | 3 --- .../parts/editor2/nextEditorGroupView.ts | 23 +++++++++++++++---- .../parts/editor2/nextTabsTitleControl.ts | 7 +++--- src/vs/workbench/common/theme.ts | 14 +++++++---- 12 files changed, 33 insertions(+), 26 deletions(-) diff --git a/extensions/theme-abyss/themes/abyss-color-theme.json b/extensions/theme-abyss/themes/abyss-color-theme.json index 85f5f9a4a9e..53454a8ed40 100644 --- 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 index ebcf0341dc8..9a93b5e73e9 100644 --- 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 index 20f12faee09..dfb5cf1ab69 100644 --- 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 index 8d69156514c..2231f5e7e4e 100644 --- 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 index 5665e73ac52..e11ed770918 100644 --- 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 index 588e21e8933..37f3e385d7b 100644 --- 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 index de15bf88bc8..7ffe04a8d10 100644 --- 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 index 9e122534143..4947c7fa85a 100644 --- 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 index c8ac278715d..8fea3ebfbb0 100644 --- 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 index 10124b2adb7..8f54ccbda58 100644 --- 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; @@ -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,6 +452,7 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie } setActive(isActive: boolean): void { + this.active = isActive; // Update container toggleClass(this.element, 'active', isActive); @@ -455,6 +460,9 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie // 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 index b6d372c6853..09424506e71 100644 --- 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 index 8cf201036ac..190e4afced5 100644 --- 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',