From 46ca8a728824d0d32524db5dff0ca8710833e62c Mon Sep 17 00:00:00 2001 From: dmolin Date: Thu, 16 May 2019 22:16:08 +0100 Subject: [PATCH 1/5] Adding setting to control the background color for the active tab in an unfocused editor group --- src/vs/workbench/browser/parts/editor/tabsTitleControl.ts | 4 ++-- src/vs/workbench/common/theme.ts | 7 ++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 919151455e1e1..a137b69034daa 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -25,7 +25,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, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_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_BACKGROUND, 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, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER } from 'vs/workbench/common/theme'; import { activeContrastBorder, contrastBorder, editorBackground, breadcrumbsBackground } from 'vs/platform/theme/common/colorRegistry'; import { ResourcesDropHandler, fillResourceDataTransfers, DraggedEditorIdentifier, DraggedEditorGroupIdentifier, DragAndDropObserver } from 'vs/workbench/browser/dnd'; import { Color } from 'vs/base/common/color'; @@ -904,7 +904,7 @@ export class TabsTitleControl extends TitleControl { // Container addClass(tabContainer, 'active'); tabContainer.setAttribute('aria-selected', 'true'); - tabContainer.style.backgroundColor = this.getColor(TAB_ACTIVE_BACKGROUND); + tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_ACTIVE_BACKGROUND : TAB_UNFOCUSED_ACTIVE_BACKGROUND); const activeTabBorderColorBottom = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER); if (activeTabBorderColorBottom) { diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 957b3b244ad4c..af6c7d079fdcd 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -138,6 +138,11 @@ export const TAB_UNFOCUSED_INACTIVE_FOREGROUND = registerColor('tab.unfocusedIna hc: Color.white }, nls.localize('tabUnfocusedInactiveForeground', "Inactive tab foreground color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); +export const TAB_UNFOCUSED_ACTIVE_BACKGROUND = registerColor('tab.unfocusedActiveBackground', { + dark: editorBackground, + light: editorBackground, + hc: editorBackground +}, nls.localize('tabUnfocusedActiveBackground', "tab background color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); // < --- Editors --- > @@ -570,4 +575,4 @@ export class Themable extends Disposable { return color ? color.toString() : null; } -} \ No newline at end of file +} From b87eb9e4acc9c96eb0b32def80aff0e98de2a5d8 Mon Sep 17 00:00:00 2001 From: dmolin Date: Sat, 18 May 2019 15:56:51 +0100 Subject: [PATCH 2/5] Adding style fixes for unfocused container group when shrink mode is enabled in tab sizing --- .../browser/parts/editor/tabsTitleControl.ts | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index a137b69034daa..9048caaceca12 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -1293,11 +1293,27 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const adjustedColor = tabActiveBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabActiveBackground.flatten(adjustedTabDragBackground); collector.addRule(` - .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { + .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { background: linear-gradient(to left, ${adjustedColor}, transparent); } - .monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { + background: linear-gradient(to left, ${adjustedColorDrag}, transparent); + } + `); + } + + // Adjust gradient for unfocused active tab background + const tabUnfocusedActiveBackground = theme.getColor(TAB_UNFOCUSED_ACTIVE_BACKGROUND); + if (tabUnfocusedActiveBackground && adjustedTabBackground && adjustedTabDragBackground) { + const adjustedColor = tabUnfocusedActiveBackground.flatten(adjustedTabBackground); + const adjustedColorDrag = tabUnfocusedActiveBackground.flatten(adjustedTabDragBackground); + collector.addRule(` + .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after { + background: linear-gradient(to left, ${adjustedColor}, transparent); + } + + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after { background: linear-gradient(to left, ${adjustedColorDrag}, transparent); } `); From 7df192599ecd24885c611c65b8de1c9fcf500a06 Mon Sep 17 00:00:00 2001 From: dmolin Date: Tue, 21 May 2019 15:36:57 +0100 Subject: [PATCH 3/5] fine-graining the selectors to correctly address the unfocused active tab --- src/vs/workbench/browser/parts/editor/tabsTitleControl.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 9048caaceca12..8284263cf8ce8 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -1309,11 +1309,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const adjustedColor = tabUnfocusedActiveBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabUnfocusedActiveBackground.flatten(adjustedTabDragBackground); collector.addRule(` - .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after { + .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { background: linear-gradient(to left, ${adjustedColor}, transparent); } - .monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after { + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { background: linear-gradient(to left, ${adjustedColorDrag}, transparent); } `); From 82f5ef99534393a608eb2205fe8d86e8ab3a0bd3 Mon Sep 17 00:00:00 2001 From: dmolin Date: Sat, 25 May 2019 17:48:18 +0100 Subject: [PATCH 4/5] move tab unfocused bg color and use current active background values as defaults --- src/vs/workbench/common/theme.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index af6c7d079fdcd..823c13ff85a18 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -30,6 +30,12 @@ export const TAB_ACTIVE_BACKGROUND = registerColor('tab.activeBackground', { hc: editorBackground }, nls.localize('tabActiveBackground', "Active tab background color. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); +export const TAB_UNFOCUSED_ACTIVE_BACKGROUND = registerColor('tab.unfocusedActiveBackground', { + dark: TAB_ACTIVE_BACKGROUND, + light: TAB_ACTIVE_BACKGROUND, + hc: TAB_ACTIVE_BACKGROUND +}, nls.localize('tabUnfocusedActiveBackground', "tab background color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); + export const TAB_INACTIVE_BACKGROUND = registerColor('tab.inactiveBackground', { dark: '#2D2D2D', light: '#ECECEC', @@ -138,12 +144,6 @@ export const TAB_UNFOCUSED_INACTIVE_FOREGROUND = registerColor('tab.unfocusedIna hc: Color.white }, nls.localize('tabUnfocusedInactiveForeground', "Inactive tab foreground color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); -export const TAB_UNFOCUSED_ACTIVE_BACKGROUND = registerColor('tab.unfocusedActiveBackground', { - dark: editorBackground, - light: editorBackground, - hc: editorBackground -}, nls.localize('tabUnfocusedActiveBackground', "tab background color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); - // < --- Editors --- > export const EDITOR_PANE_BACKGROUND = registerColor('editorPane.background', { From f763adc61d06c2478b2067491606210a24c08c9c Mon Sep 17 00:00:00 2001 From: dmolin Date: Mon, 27 May 2019 10:10:26 +0100 Subject: [PATCH 5/5] extracting CSS selectors into a generator function to collect common code and reduce redundancies --- .../browser/parts/editor/tabsTitleControl.ts | 65 ++++++++----------- src/vs/workbench/common/theme.ts | 2 +- 2 files changed, 28 insertions(+), 39 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 8284263cf8ce8..f673b499901c1 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -1245,35 +1245,29 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { adjustedTabDragBackground = editorGroupHeaderTabsBackground.flatten(editorBackgroundColor, editorDragAndDropBackground, editorBackgroundColor, workbenchBackground); } + // Adjust gradient for focused and unfocused hover background + const makeTabHoverBackgroundRule = (color: Color, colorDrag: Color, hasFocus = false) => ` + .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container${hasFocus ? '.active' : ''} > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { + background: linear-gradient(to left, ${color}, transparent) !important; + } + + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container${hasFocus ? '.active' : ''} > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { + background: linear-gradient(to left, ${colorDrag}, transparent) !important; + } + `; + // Adjust gradient for (focused) hover background if (tabHoverBackground && adjustedTabBackground && adjustedTabDragBackground) { const adjustedColor = tabHoverBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabHoverBackground.flatten(adjustedTabDragBackground); - collector.addRule(` - .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { - background: linear-gradient(to left, ${adjustedColor}, transparent) !important; - } - - - .monaco-workbench .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { - background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important; - } - `); + collector.addRule(makeTabHoverBackgroundRule(adjustedColor, adjustedColorDrag, true)); } // Adjust gradient for unfocused hover background if (tabUnfocusedHoverBackground && adjustedTabBackground && adjustedTabDragBackground) { const adjustedColor = tabUnfocusedHoverBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabUnfocusedHoverBackground.flatten(adjustedTabDragBackground); - collector.addRule(` - .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { - background: linear-gradient(to left, ${adjustedColor}, transparent) !important; - } - - .monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after { - background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important; - } - `); + collector.addRule(makeTabHoverBackgroundRule(adjustedColor, adjustedColorDrag)); } // Adjust gradient for drag and drop background @@ -1287,20 +1281,23 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { `); } - // Adjust gradient for active tab background + // Adjust gradient for active tab background (focused and unfocused editor groups) + const makeTabActiveBackgroundRule = (color: Color, colorDrag: Color, hasFocus = false) => ` + .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container${hasFocus ? '.active' : ':not(.active)'} > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { + background: linear-gradient(to left, ${color}, transparent); + } + + .monaco-workbench .part.editor > .content.dragged-over .editor-group-container${hasFocus ? '.active' : ':not(.active)'} > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { + background: linear-gradient(to left, ${colorDrag}, transparent); + } + `; + + // Adjust gradient for unfocused active tab background const tabActiveBackground = theme.getColor(TAB_ACTIVE_BACKGROUND); if (tabActiveBackground && adjustedTabBackground && adjustedTabDragBackground) { const adjustedColor = tabActiveBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabActiveBackground.flatten(adjustedTabDragBackground); - collector.addRule(` - .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { - background: linear-gradient(to left, ${adjustedColor}, transparent); - } - - .monaco-workbench .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { - background: linear-gradient(to left, ${adjustedColorDrag}, transparent); - } - `); + collector.addRule(makeTabActiveBackgroundRule(adjustedColor, adjustedColorDrag, true)); } // Adjust gradient for unfocused active tab background @@ -1308,15 +1305,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { if (tabUnfocusedActiveBackground && adjustedTabBackground && adjustedTabDragBackground) { const adjustedColor = tabUnfocusedActiveBackground.flatten(adjustedTabBackground); const adjustedColorDrag = tabUnfocusedActiveBackground.flatten(adjustedTabDragBackground); - collector.addRule(` - .monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { - background: linear-gradient(to left, ${adjustedColor}, transparent); - } - - .monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after { - background: linear-gradient(to left, ${adjustedColorDrag}, transparent); - } - `); + collector.addRule(makeTabActiveBackgroundRule(adjustedColor, adjustedColorDrag)); } // Adjust gradient for inactive tab background diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 823c13ff85a18..8bb1a35ebf260 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -34,7 +34,7 @@ export const TAB_UNFOCUSED_ACTIVE_BACKGROUND = registerColor('tab.unfocusedActiv dark: TAB_ACTIVE_BACKGROUND, light: TAB_ACTIVE_BACKGROUND, hc: TAB_ACTIVE_BACKGROUND -}, nls.localize('tabUnfocusedActiveBackground', "tab background color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); +}, nls.localize('tabUnfocusedActiveBackground', "Active tab background color in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); export const TAB_INACTIVE_BACKGROUND = registerColor('tab.inactiveBackground', { dark: '#2D2D2D',