Skip to content

Commit 92ae7d6

Browse files
dmolinbpasero
dmolin
authored and
bpasero
committed
Controlling the background color of the active tab in an unfocused editor group (microsoft#73848)
* Adding setting to control the background color for the active tab in an unfocused editor group * Adding style fixes for unfocused container group when shrink mode is enabled in tab sizing * fine-graining the selectors to correctly address the unfocused active tab * move tab unfocused bg color and use current active background values as defaults * extracting CSS selectors into a generator function to collect common code and reduce redundancies
1 parent afb0837 commit 92ae7d6

2 files changed

Lines changed: 42 additions & 32 deletions

File tree

‎src/vs/workbench/browser/parts/editor/tabsTitleControl.ts‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElemen
2525
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
2626
import { getOrSet } from 'vs/base/common/map';
2727
import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
28-
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';
28+
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';
2929
import { activeContrastBorder, contrastBorder, editorBackground, breadcrumbsBackground } from 'vs/platform/theme/common/colorRegistry';
3030
import { ResourcesDropHandler, fillResourceDataTransfers, DraggedEditorIdentifier, DraggedEditorGroupIdentifier, DragAndDropObserver } from 'vs/workbench/browser/dnd';
3131
import { Color } from 'vs/base/common/color';
@@ -904,7 +904,7 @@ export class TabsTitleControl extends TitleControl {
904904
// Container
905905
addClass(tabContainer, 'active');
906906
tabContainer.setAttribute('aria-selected', 'true');
907-
tabContainer.style.backgroundColor = this.getColor(TAB_ACTIVE_BACKGROUND);
907+
tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_ACTIVE_BACKGROUND : TAB_UNFOCUSED_ACTIVE_BACKGROUND);
908908

909909
const activeTabBorderColorBottom = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
910910
if (activeTabBorderColorBottom) {
@@ -1245,35 +1245,29 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
12451245
adjustedTabDragBackground = editorGroupHeaderTabsBackground.flatten(editorBackgroundColor, editorDragAndDropBackground, editorBackgroundColor, workbenchBackground);
12461246
}
12471247

1248+
// Adjust gradient for focused and unfocused hover background
1249+
const makeTabHoverBackgroundRule = (color: Color, colorDrag: Color, hasFocus = false) => `
1250+
.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 {
1251+
background: linear-gradient(to left, ${color}, transparent) !important;
1252+
}
1253+
1254+
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container${hasFocus ? '.active' : ''} > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after {
1255+
background: linear-gradient(to left, ${colorDrag}, transparent) !important;
1256+
}
1257+
`;
1258+
12481259
// Adjust gradient for (focused) hover background
12491260
if (tabHoverBackground && adjustedTabBackground && adjustedTabDragBackground) {
12501261
const adjustedColor = tabHoverBackground.flatten(adjustedTabBackground);
12511262
const adjustedColorDrag = tabHoverBackground.flatten(adjustedTabDragBackground);
1252-
collector.addRule(`
1253-
.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after {
1254-
background: linear-gradient(to left, ${adjustedColor}, transparent) !important;
1255-
}
1256-
1257-
1258-
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after {
1259-
background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important;
1260-
}
1261-
`);
1263+
collector.addRule(makeTabHoverBackgroundRule(adjustedColor, adjustedColorDrag, true));
12621264
}
12631265

12641266
// Adjust gradient for unfocused hover background
12651267
if (tabUnfocusedHoverBackground && adjustedTabBackground && adjustedTabDragBackground) {
12661268
const adjustedColor = tabUnfocusedHoverBackground.flatten(adjustedTabBackground);
12671269
const adjustedColorDrag = tabUnfocusedHoverBackground.flatten(adjustedTabDragBackground);
1268-
collector.addRule(`
1269-
.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after {
1270-
background: linear-gradient(to left, ${adjustedColor}, transparent) !important;
1271-
}
1272-
1273-
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after {
1274-
background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important;
1275-
}
1276-
`);
1270+
collector.addRule(makeTabHoverBackgroundRule(adjustedColor, adjustedColorDrag));
12771271
}
12781272

12791273
// Adjust gradient for drag and drop background
@@ -1287,20 +1281,31 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
12871281
`);
12881282
}
12891283

1290-
// Adjust gradient for active tab background
1284+
// Adjust gradient for active tab background (focused and unfocused editor groups)
1285+
const makeTabActiveBackgroundRule = (color: Color, colorDrag: Color, hasFocus = false) => `
1286+
.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 {
1287+
background: linear-gradient(to left, ${color}, transparent);
1288+
}
1289+
1290+
.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 {
1291+
background: linear-gradient(to left, ${colorDrag}, transparent);
1292+
}
1293+
`;
1294+
1295+
// Adjust gradient for unfocused active tab background
12911296
const tabActiveBackground = theme.getColor(TAB_ACTIVE_BACKGROUND);
12921297
if (tabActiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
12931298
const adjustedColor = tabActiveBackground.flatten(adjustedTabBackground);
12941299
const adjustedColorDrag = tabActiveBackground.flatten(adjustedTabDragBackground);
1295-
collector.addRule(`
1296-
.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after {
1297-
background: linear-gradient(to left, ${adjustedColor}, transparent);
1298-
}
1300+
collector.addRule(makeTabActiveBackgroundRule(adjustedColor, adjustedColorDrag, true));
1301+
}
12991302

1300-
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after {
1301-
background: linear-gradient(to left, ${adjustedColorDrag}, transparent);
1302-
}
1303-
`);
1303+
// Adjust gradient for unfocused active tab background
1304+
const tabUnfocusedActiveBackground = theme.getColor(TAB_UNFOCUSED_ACTIVE_BACKGROUND);
1305+
if (tabUnfocusedActiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
1306+
const adjustedColor = tabUnfocusedActiveBackground.flatten(adjustedTabBackground);
1307+
const adjustedColorDrag = tabUnfocusedActiveBackground.flatten(adjustedTabDragBackground);
1308+
collector.addRule(makeTabActiveBackgroundRule(adjustedColor, adjustedColorDrag));
13041309
}
13051310

13061311
// Adjust gradient for inactive tab background

‎src/vs/workbench/common/theme.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ export const TAB_ACTIVE_BACKGROUND = registerColor('tab.activeBackground', {
3030
hc: editorBackground
3131
}, 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."));
3232

33+
export const TAB_UNFOCUSED_ACTIVE_BACKGROUND = registerColor('tab.unfocusedActiveBackground', {
34+
dark: TAB_ACTIVE_BACKGROUND,
35+
light: TAB_ACTIVE_BACKGROUND,
36+
hc: TAB_ACTIVE_BACKGROUND
37+
}, 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."));
38+
3339
export const TAB_INACTIVE_BACKGROUND = registerColor('tab.inactiveBackground', {
3440
dark: '#2D2D2D',
3541
light: '#ECECEC',
@@ -138,7 +144,6 @@ export const TAB_UNFOCUSED_INACTIVE_FOREGROUND = registerColor('tab.unfocusedIna
138144
hc: Color.white
139145
}, 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."));
140146

141-
142147
// < --- Editors --- >
143148

144149
export const EDITOR_PANE_BACKGROUND = registerColor('editorPane.background', {
@@ -570,4 +575,4 @@ export class Themable extends Disposable {
570575

571576
return color ? color.toString() : null;
572577
}
573-
}
578+
}

0 commit comments

Comments
 (0)