Set tab color default off and add config for fill/border (#452)

src/sql/parts/connection/common/connectionManagementService.ts

@@ -29,6 +29,7 @@ import * as TelemetryUtils from 'sql/common/telemetryUtilities';
 import { warn } from 'sql/base/common/log';
 import { IResourceProviderService } from 'sql/parts/accountManagement/common/interfaces';
 import { IAngularEventingService, AngularEventType } from 'sql/services/angularEventing/angularEventingService';
+import * as QueryConstants from 'sql/parts/query/common/constants';
 
 import * as data from 'data';
 
@@ -1331,7 +1332,7 @@ export class ConnectionManagementService implements IConnectionManagementService
 	}
 
 	public getTabColorForUri(uri: string): string {
-		if (!WorkbenchUtils.getSqlConfigValue<string>(this._workspaceConfigurationService, 'enableTabColors')) {
+		if (WorkbenchUtils.getSqlConfigValue<string>(this._workspaceConfigurationService, 'tabColorMode') === QueryConstants.tabColorModeOff) {
 			return undefined;
 		}
 		let connectionProfile = this.getConnectionProfile(uri);

src/sql/parts/query/common/constants.ts

@@ -10,3 +10,6 @@ export const configShowBatchTime = 'showBatchTime';
 export const querySection = 'query';
 export const shortcutStart = 'shortcut';
 
+export const tabColorModeOff = 'off';
+export const tabColorModeBorder = 'border';
+export const tabColorModeFill = 'fill';

src/sql/parts/query/common/query.contribution.ts

@@ -31,6 +31,7 @@ import * as gridActions from 'sql/parts/grid/views/gridActions';
 import * as gridCommands from 'sql/parts/grid/views/gridCommands';
 import { QueryPlanEditor } from 'sql/parts/queryPlan/queryPlanEditor';
 import { QueryPlanInput } from 'sql/parts/queryPlan/queryPlanInput';
+import * as Constants from 'sql/parts/query/common/constants';
 import { localize } from 'vs/nls';
 
 const gridCommandsWeightBonus = 100; // give our commands a little bit more weight over other default list/tree commands
@@ -240,10 +241,16 @@ let registryProperties = {
 		'description': localize('sql.showBatchTime', '[Optional] Should execution time be shown for individual batches'),
 		'default': false
 	},
-	'sql.enableTabColors': {
+	'sql.tabColorMode': {
-		'type': 'boolean',
+		'type': 'string',
-		'description': localize('sql.enableTabColors', 'True to color tabs based on the server group of their active connection, false otherwise'),
+		'enum': [Constants.tabColorModeOff, Constants.tabColorModeBorder, Constants.tabColorModeFill],
-		'default': true
+		'enumDescriptions': [
+			localize('tabColorMode.off', "Tab coloring will be disabled"),
+			localize('tabColorMode.border', "The top border of each editor tab will be colored to match the relevant server group"),
+			localize('tabColorMode.fill', "Each editor tab's background color will match the relevant server group"),
+		],
+		'default': Constants.tabColorModeOff,
+		'description': localize('tabColorMode', "Controls how to color tabs based on the server group of their active connection")
 	},
 	'mssql.intelliSense.enableIntelliSense': {
 		'type': 'boolean',

src/sqltest/parts/connection/connectionManagementService.test.ts

@@ -774,7 +774,7 @@ suite('SQL ConnectionManagementService tests', () => {
 
 	test('getTabColorForUri returns the group color corresponding to the connection for a URI', done => {
 		// Set up the connection store to give back a group for the expected connection profile
-		configResult['enableTabColors'] = true;
+		configResult['tabColorMode'] = 'border';
 		let expectedColor = 'red';
 		connectionStore.setup(x => x.getGroupFromId(connectionProfile.groupId)).returns(() => <IConnectionProfileGroup> {
 			color: expectedColor

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

@@ -47,6 +47,9 @@ import { IWorkspacesService } from 'vs/platform/workspaces/common/workspaces';
 
 // {{SQL CARBON EDIT}} -- Display the editor's tab color
 import { Color } from 'vs/base/common/color';
+import { IWorkspaceConfigurationService } from 'vs/workbench/services/configuration/common/configuration';
+import * as QueryConstants from 'sql/parts/query/common/constants';
+import * as WorkbenchUtils from 'sql/workbench/common/sqlWorkbenchUtils';
 
 interface IEditorInputLabel {
 	name: string;
@@ -80,7 +83,9 @@ export class TabsTitleControl extends TitleControl {
 		@IWindowsService private windowsService: IWindowsService,
 		@IThemeService themeService: IThemeService,
 		@IFileService private fileService: IFileService,
-		@IWorkspacesService private workspacesService: IWorkspacesService
+		@IWorkspacesService private workspacesService: IWorkspacesService,
+		// {{SQL CARBON EDIT}} -- Display the editor's tab color
+		@IWorkspaceConfigurationService private workspaceConfigurationService: IWorkspaceConfigurationService
 	) {
 		super(contextMenuService, instantiationService, editorService, editorGroupService, contextKeyService, keybindingService, telemetryService, messageService, menuService, quickOpenService, themeService);
 
@@ -866,16 +871,20 @@ export class TabsTitleControl extends TitleControl {
 	// {{SQL CARBON EDIT}} -- Display the editor's tab color
 	private setEditorTabColor(editor: IEditorInput, tabContainer: HTMLElement, isTabActive: boolean) {
 		let sqlEditor = editor as any;
-		if (sqlEditor.tabColor && this.themeService.getTheme().type !== HIGH_CONTRAST) {
+		let tabColorMode = WorkbenchUtils.getSqlConfigValue<string>(this.workspaceConfigurationService, 'tabColorMode');
-			tabContainer.style.borderTopColor = sqlEditor.tabColor;
+		if (tabColorMode === QueryConstants.tabColorModeOff || (tabColorMode !== QueryConstants.tabColorModeBorder && tabColorMode !== QueryConstants.tabColorModeFill)
-			tabContainer.style.borderTopWidth = isTabActive ? '2px' : '1px';
+			|| this.themeService.getTheme().type === HIGH_CONTRAST || !sqlEditor.tabColor) {
-			let backgroundColor = Color.Format.CSS.parseHex(sqlEditor.tabColor);
-			if (backgroundColor) {
-				tabContainer.style.backgroundColor = backgroundColor.transparent(isTabActive ? 0.3 : 0.2).toString();
-			}
-		} else {
 			tabContainer.style.borderTopColor = '';
 			tabContainer.style.borderTopWidth = '';
+			return;
+		}
+		tabContainer.style.borderTopColor = sqlEditor.tabColor;
+		tabContainer.style.borderTopWidth = isTabActive ? '3px' : '2px';
+		if (tabColorMode === QueryConstants.tabColorModeFill) {
+			let backgroundColor = Color.Format.CSS.parseHex(sqlEditor.tabColor);
+			if (backgroundColor) {
+				tabContainer.style.backgroundColor = backgroundColor.transparent(isTabActive ? 0.5 : 0.2).toString();
+			}
 		}
 	}
 }