Agent: Added support for high contrast theme (#2229)

* added support for high contrast theme

* initial theming

* programmatically change theme colors in agent

src/sql/base/browser/ui/table/media/table.css

@@ -46,7 +46,8 @@
     background-image: url('down.svg');
 }
 
-.vs-dark .slick-header-menubutton {
+.vs-dark .slick-header-menubutton,
+.hc-black .slick-header-menubutton {
     background-image: url('down-inverse.svg');
 }
 
@@ -54,7 +55,8 @@
     background-image: url('filter.svg');
 }
 
-.vs-dark .slick-header-menubutton.filtered {
+.vs-dark .slick-header-menubutton.filtered,
+.hc-black .slick-header-menubutton.filtered {
     background-image: url('filter_inverse.svg');
 }
 
@@ -74,6 +76,10 @@
     background: none repeat scroll 0 0 #333333;
 }
 
+.hc-black .slick-header-menu {
+    background: none repeat scroll 0 0 #000000;
+}
+
 .slick-header-menu a.monaco-button.monaco-text-button {
     width: 60px;
     margin: 6px 6px 6px 6px;
@@ -144,4 +150,8 @@ label {
 
 .vs-dark .slick-header-menu > input.input {
     color: #4a4a4a;
+}
+
+.hc-black .slick-header-menu > input.input {
+    color: #000000;
 }

src/sql/common/theme/colors.ts

@@ -13,4 +13,11 @@ export const disabledInputBackground = registerColor('input.disabled.background'
 export const disabledInputForeground = registerColor('input.disabled.foreground', { dark: '#888888', light: '#888888', hc: foreground }, nls.localize('disabledInputBoxForeground', "Disabled Input box foreground."));
 export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hc: null }, nls.localize('buttonFocusOutline', "Button outline color when focused."));
 
-export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active"));
+export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active"));
+
+// SQL Agent Colors
+export const tableBackground = registerColor('agent.tableBackground', { light: '#fffffe', dark: '#333333', hc: Color.black }, nls.localize('agentTableBackground', "SQL Agent Table background color."));
+export const cellBackground = registerColor('agent.cellBackground', { light: '#faf5f8', dark: Color.black, hc: Color.black }, nls.localize('agentCellBackground', "SQL Agent table cell background color."));
+export const tableHoverBackground = registerColor('agent.tableHoverColor', { light: '#dcdcdc', dark: '#444444', hc: null }, nls.localize('agentTableHoverBackground', "SQL Agent table hover background color."));
+export const jobsHeadingBackground = registerColor('agent.jobsHeadingColor', { light: '#f4f4f4', dark: '#444444', hc: '#2b56f2' }, nls.localize('agentJobsHeadingColor', "SQL Agent heading background color."));
+export const cellBorderColor = registerColor('agent.cellBorderColor', { light: null, dark: null, hc: '#2b56f2' }, nls.localize('agentCellBorderColor', "SQL Agent table cell border color."));

src/sql/parts/jobManagement/common/media/jobs.css

@@ -31,6 +31,10 @@ jobhistory-component {
     border-bottom: 3px solid #444444;
 }
 
+.hc-black .job-heading-container {
+    border-bottom: 3px solid #2b56f2;
+}
+
 .jobview-grid {
     height: calc(100% - 75px);
 	width : 100%;
@@ -43,17 +47,15 @@ jobhistory-component {
 
 #agentViewDiv .slick-header-column {
 	background-color: transparent !important;
-	background: white !important;
     border: 0px !important;
     font-weight: bold;
 }
 
-.vs-dark #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-    background:#333333;
+.hc-black #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
+    border: 1px solid #2b56f2;
 }
 
 #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-    background: white;
     border-right: transparent !important;
     border-left: transparent !important;
     line-height: 33px !important;
@@ -161,19 +163,12 @@ jobhistory-component {
     margin-left:		20px;
 }
 
-.vs-dark #jobsDiv .dynamic-cell-detail {
-    background: black !important;
-}
-
-#jobsDiv .dynamic-cell-detail {
-    background: #faf5f8 !important;
-}
-
 .jobsview-icon {
     background-image: url('./job.svg');
 }
 
-.vs-dark .jobsview-icon {
+.vs-dark .jobsview-icon,
+.hc-black .jobsview-icon {
 	background-image: url('./job_inverse.svg');
 }
 
@@ -181,7 +176,8 @@ jobhistory-component {
     background-image: url('./alert.svg');
 }
 
-.vs-dark .alertsview-icon {
+.vs-dark .alertsview-icon,
+.hc-black .alertsview-icon {
 	background-image: url('./alert_inverse.svg');
 }
 
@@ -189,7 +185,8 @@ jobhistory-component {
     background-image: url('./proxy.svg');
 }
 
-.vs-dark .proxiesview-icon {
+.vs-dark .proxiesview-icon,
+.hc-black .proxiesview-icon {
 	background-image: url('./proxy_inverse.svg');
 }
 
@@ -197,7 +194,8 @@ jobhistory-component {
     background-image: url('./operator.svg');
 }
 
-.vs-dark .operatorsview-icon {
+.vs-dark .operatorsview-icon,
+.hc-black .operatorsview-icon {
 	background-image: url('./operator_inverse.svg');
 }
 
@@ -210,6 +208,10 @@ agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.od
     border-left: 1px dotted white;
 }
 
+.hc-black .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+    border-left: 1px dotted #2b56f2;
+}
+
 .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
     border-left: 1px dotted #444444;
 }
@@ -238,6 +240,12 @@ agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.od
     background: #444444 !important;
 }
 
+.hc-black #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
+.hc-black #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
+.hc-black #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell {
+    background: none !important;
+}
+
 table.jobprevruns div.bar0, table.jobprevruns div.bar1, table.jobprevruns div.bar2,
 table.jobprevruns div.bar3, table.jobprevruns div.bar4, table.jobprevruns div.bar5 {
     padding-top: 3px;
@@ -258,33 +266,6 @@ table.jobprevruns > tbody {
     vertical-align: bottom;
 }
 
-.jobs-view-toolbar{
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    padding: 15px 10px 15px 30px;
-    font-size: 16px;
-    border-bottom: 3px solid #f4f4f4;
-}
-
-.jobs-view-toolbar .vs-dark {
-    border-bottom: 3px solid #444444;
-}
-
-.jobs-view-toolbar > div{
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: flex-start;
-    margin-right: 25px;
-    cursor: pointer;
-    padding: 2px;
-}
-
-.jobs-view-toolbar span{
-    padding-left: 5px;
-}
-
-
 #alertsDiv .jobalertsview-grid {
     height: calc(100% - 75px);
 	width : 100%;
@@ -329,12 +310,7 @@ jobsview-component .jobview-grid .slick-cell.error-row {
     opacity: 0;
 }
 
-.vs-dark #alertsDiv jobalertsview-component .jobalertsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-    background:#333333;
-}
-
 #alertsDiv jobalertsview-component .jobalertsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-    background: white;
     border-right: transparent !important;
     border-left: transparent !important;
     line-height: 33px !important;
@@ -360,12 +336,7 @@ jobsview-component .jobview-grid .slick-cell.error-row {
     border-left: 1px dotted #444444;
 }
 
-.vs-dark #operatorsDiv joboperatorsview-component .joboperatorsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-    background:#333333;
-}
-
 #operatorsDiv joboperatorsview-component .joboperatorsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-    background: white;
     border-right: transparent !important;
     border-left: transparent !important;
     line-height: 33px !important;
@@ -391,12 +362,7 @@ jobsview-component .jobview-grid .slick-cell.error-row {
     border-left: 1px dotted #444444;
 }
 
-.vs-dark #proxiesDiv jobproxiesview-component .jobproxiesview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-    background:#333333;
-}
-
 #proxiesDiv jobproxiesview-component .jobproxiesview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-    background: white;
     border-right: transparent !important;
     border-left: transparent !important;
     line-height: 33px !important;

src/sql/parts/jobManagement/views/jobHistory.css

@@ -28,6 +28,10 @@
 	color: #fff;
 }
 
+.hc-black .overview-container .overview-tab {
+	color: #ffffff;
+}
+
 .overview-container > .overview-tab {
 	position: relative;
 	margin-bottom: 1px;
@@ -46,6 +50,11 @@ input#accordion {
 	background: #444444;
 }
 
+.hc-black .overview-container .overview-tab label {
+	background: #000000;
+	border: 1px solid #2b56f2;
+}
+
 .overview-container .overview-tab label {
 	position: relative;
 	display: block;
@@ -61,6 +70,11 @@ input#accordion {
 	background: #333333;
 }
 
+.hc-black .overview-tab .accordion-content {
+	background: #000000;
+	border: 1px solid #2b56f2;
+}
+
 .overview-tab .accordion-content {
 	max-height: 0;
 	overflow: hidden;
@@ -105,7 +119,8 @@ input#accordion:checked ~ .accordion-content {
 	padding-bottom: 10px;
 }
 
-.vs-dark.monaco-shell .all-jobs >.back-button-icon {
+.vs-dark.monaco-shell .all-jobs >.back-button-icon,
+.hc-black.monaco-shell .all-jobs >.back-button-icon {
 	content: url('../common/media/back_inverse.svg');
 }
 
@@ -166,15 +181,6 @@ table.step-list tr.step-row td {
 	display: flex;
 }
 
-.vs-dark .history-details > .job-steps {
-	display: block;
-	border-left: 3px solid #444444;
-	padding-left: 10px;
-	height: 100%;
-	width: 90%;
-	overflow-y: scroll;
-}
-
 .history-details > .job-steps {
 	display: block;
 	border-left: 3px solid #f4f4f4;
@@ -184,6 +190,14 @@ table.step-list tr.step-row td {
 	overflow-y: scroll;
 }
 
+.vs-dark .history-details > .job-steps {
+	border-left: 3px solid #444444;
+}
+
+.hc-black .history-details > .job-steps {
+	border-left: 3px solid #2b56f2;
+}
+
 .history-details > .job-steps > .step-list {
 	padding-bottom: 10px;
 }
@@ -251,3 +265,6 @@ jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-cont
 	border-top: 3px solid #444444;
 }
 
+.hc-black jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-container {
+	border-top: 3px solid #2b56f2;
+}

src/sql/parts/jobManagement/views/jobsView.component.ts

@@ -27,7 +27,6 @@ import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plu
 import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
 import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@@ -36,6 +35,8 @@ import { IAction } from 'vs/base/common/actions';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IDashboardService } from 'sql/services/dashboard/common/dashboardService';
 import { escape } from 'sql/base/common/strings';
+import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { tableBackground, cellBackground, tableHoverBackground, jobsHeadingBackground, cellBorderColor } from 'sql/common/theme/colors';
 
 export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -96,7 +97,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
 		@Inject(forwardRef(() => AgentViewComponent)) private _agentViewComponent: AgentViewComponent,
 		@Inject(IJobManagementService) private _jobManagementService: IJobManagementService,
-		@Inject(IThemeService) private _themeService: IThemeService,
+		@Inject(IWorkbenchThemeService) private _themeService: IWorkbenchThemeService,
 		@Inject(ICommandService) private _commandService: ICommandService,
 		@Inject(IInstantiationService) instantiationService: IInstantiationService,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
@@ -121,6 +122,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 		// set base class elements
 		this._visibilityElement = this._gridEl;
 		this._parentComponent = this._agentViewComponent;
+		this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e)));
 	}
 
 	public layout() {
@@ -820,6 +822,25 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 		}
 	}
 
+	private updateTheme(theme: IColorTheme) {
+		let bgColor = theme.getColor(tableBackground);
+		let cellColor = theme.getColor(cellBackground);
+		let borderColor = theme.getColor(cellBorderColor);
+		let headerColumns = $('#agentViewDiv .slick-header-column');
+		let cells = $('.grid-canvas .ui-widget-content.slick-row .slick-cell');
+		let cellDetails = $('#jobsDiv .dynamic-cell-detail');
+		headerColumns.toArray().forEach(col => {
+			col.style.background = bgColor.toString();
+		});
+		cells.toArray().forEach(cell => {
+			cell.style.background = bgColor.toString();
+			cell.style.border = borderColor ? '1px solid ' + borderColor.toString() : null;
+		});
+		cellDetails.toArray().forEach(cellDetail => {
+			cellDetail.style.background = cellColor.toString();
+		});
+	}
+
 	protected getTableActions(): TPromise<IAction[]> {
 		let actions: IAction[] = [];
 		actions.push(this._instantiationService.createInstance(EditJobAction));