From 5e4b8924ec4c6e6cac3737b2cd9f5f491cfcffc3 Mon Sep 17 00:00:00 2001 From: Matt Irvine Date: Mon, 8 Jan 2018 20:05:27 -0500 Subject: [PATCH] Set tab color default off and add config for fill/border (#452) --- .../common/connectionManagementService.ts | 3 ++- src/sql/parts/query/common/constants.ts | 3 +++ .../parts/query/common/query.contribution.ts | 15 ++++++++--- .../connectionManagementService.test.ts | 2 +- .../browser/parts/editor/tabsTitleControl.ts | 27 ++++++++++++------- 5 files changed, 35 insertions(+), 15 deletions(-) diff --git a/src/sql/parts/connection/common/connectionManagementService.ts b/src/sql/parts/connection/common/connectionManagementService.ts index f55d8868dc..e9785d0943 100644 --- a/src/sql/parts/connection/common/connectionManagementService.ts +++ b/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(this._workspaceConfigurationService, 'enableTabColors')) { + if (WorkbenchUtils.getSqlConfigValue(this._workspaceConfigurationService, 'tabColorMode') === QueryConstants.tabColorModeOff) { return undefined; } let connectionProfile = this.getConnectionProfile(uri); diff --git a/src/sql/parts/query/common/constants.ts b/src/sql/parts/query/common/constants.ts index 066a90e305..0cb556a742 100644 --- a/src/sql/parts/query/common/constants.ts +++ b/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'; diff --git a/src/sql/parts/query/common/query.contribution.ts b/src/sql/parts/query/common/query.contribution.ts index 1af3298433..9d92a9344b 100644 --- a/src/sql/parts/query/common/query.contribution.ts +++ b/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': { - 'type': 'boolean', - 'description': localize('sql.enableTabColors', 'True to color tabs based on the server group of their active connection, false otherwise'), - 'default': true + 'sql.tabColorMode': { + 'type': 'string', + 'enum': [Constants.tabColorModeOff, Constants.tabColorModeBorder, Constants.tabColorModeFill], + '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', diff --git a/src/sqltest/parts/connection/connectionManagementService.test.ts b/src/sqltest/parts/connection/connectionManagementService.test.ts index 963fd3e371..38a230b326 100644 --- a/src/sqltest/parts/connection/connectionManagementService.test.ts +++ b/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(() => { color: expectedColor diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 07cb0ebd51..650c5a9c48 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/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) { - tabContainer.style.borderTopColor = sqlEditor.tabColor; - tabContainer.style.borderTopWidth = isTabActive ? '2px' : '1px'; - let backgroundColor = Color.Format.CSS.parseHex(sqlEditor.tabColor); - if (backgroundColor) { - tabContainer.style.backgroundColor = backgroundColor.transparent(isTabActive ? 0.3 : 0.2).toString(); - } - } else { + let tabColorMode = WorkbenchUtils.getSqlConfigValue(this.workspaceConfigurationService, 'tabColorMode'); + if (tabColorMode === QueryConstants.tabColorModeOff || (tabColorMode !== QueryConstants.tabColorModeBorder && tabColorMode !== QueryConstants.tabColorModeFill) + || this.themeService.getTheme().type === HIGH_CONTRAST || !sqlEditor.tabColor) { 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(); + } } } }