Alanren/modal message high contrast fix (#3018)

* make modal dialog message section HC aware

* handle warning icon

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

@@ -167,17 +167,20 @@
 	flex-direction: column;
 }
 
-.modal.flyout-dialog .dialog-message.error {
+.vs .modal.flyout-dialog .dialog-message.error,
+.vs-dark .modal.flyout-dialog .dialog-message.error {
 	background-color:#B62E00 !important;
 	color:#FFFFFF !important;
 }
 
-.modal.flyout-dialog .dialog-message.warning {
+.vs .modal.flyout-dialog .dialog-message.warning,
+.vs-dark .modal.flyout-dialog .dialog-message.warning {
 	background-color:#F9E385 !important;
 	color:#4A4A4A !important;
 }
 
-.modal.flyout-dialog .dialog-message.info {
+.vs .modal.flyout-dialog .dialog-message.info,
+.vs-dark .modal.flyout-dialog .dialog-message.info {
 	background-color:#0078D7 !important;
 	color:#FFFFFF !important;
 }
@@ -243,6 +246,7 @@
 	font-size: 11px;
 }
 
+.hc-black .dialog-message.warning .close-message-icon,
 .close-message-icon {
 	background: url('close_inverse.svg') center center no-repeat;
 }
@@ -251,6 +255,7 @@
 	background: url('close.svg') center center no-repeat;
 }
 
+.hc-black .dialog-message.warning .copy-message-icon,
 .copy-message-icon {
 	background: url('copy_inverse.svg') center center no-repeat;
 }
@@ -259,6 +264,7 @@
 	background: url('copy.svg') center center no-repeat;
 }
 
+.hc-black .dialog-message.warning .message-details-icon,
 .message-details-icon {
 	background: url('show_details_inverse.svg') center center no-repeat;
 }
@@ -271,6 +277,10 @@
 	background: url('info_notification_inverse.svg') center center no-repeat;
 }
 
+.hc-black .dialog-message.warning .dialog-message-icon {
+	background: url('warning_notification_inverse.svg') center center no-repeat;
+}
+
 .dialog-message.warning .dialog-message-icon {
 	background: url('warning_notification.svg') center center no-repeat;
 }

src/sql/base/browser/ui/modal/modal.ts

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./media/modal';
-import { IThemable } from 'vs/platform/theme/common/styler';
+import { IThemable, attachButtonStyler } from 'vs/platform/theme/common/styler';
 import { Color } from 'vs/base/common/color';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
@@ -23,6 +23,7 @@ import * as TelemetryKeys from 'sql/common/telemetryKeys';
 import { localize } from 'vs/nls';
 import { MessageLevel } from 'sql/workbench/api/common/sqlExtHostTypes';
 import * as os from 'os';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export const MODAL_SHOWING_KEY = 'modalShowing';
 export const MODAL_SHOWING_CONTEXT = new RawContextKey<Array<string>>(MODAL_SHOWING_KEY, []);
@@ -153,6 +154,7 @@ export abstract class Modal extends Disposable implements IThemable {
 		private _partService: IPartService,
 		private _telemetryService: ITelemetryService,
 		protected _clipboardService: IClipboardService,
+		protected _themeService: IThemeService,
 		_contextKeyService: IContextKeyService,
 		options?: IModalOptions
 	) {
@@ -228,6 +230,10 @@ export abstract class Modal extends Disposable implements IThemable {
 							this.setError(undefined);
 						});
 					});
+
+					attachButtonStyler(this._toggleMessageDetailButton, this._themeService);
+					attachButtonStyler(this._copyMessageButton, this._themeService);
+					attachButtonStyler(this._closeMessageButton, this._themeService);
 				});
 				messageContainer.div({ class: 'dialog-message-body' }, (messageBody) => {
 					messageBody.div({ class: 'dialog-message-summary' }, (summaryContainer) => {
@@ -601,6 +607,7 @@ export abstract class Modal extends Disposable implements IThemable {
 			this._modalDialog.style('border-style', border ? 'solid' : null);
 			this._modalDialog.style('border-color', border);
 		}
+
 		if (this._modalHeaderSection) {
 			this._modalHeaderSection.style('background-color', headerAndFooterBackground);
 			this._modalHeaderSection.style('border-bottom-width', border ? '1px' : null);
@@ -608,6 +615,13 @@ export abstract class Modal extends Disposable implements IThemable {
 			this._modalHeaderSection.style('border-bottom-color', border);
 		}
 
+		if (this._modalMessageSection) {
+			this._modalMessageSection.style('background-color', headerAndFooterBackground);
+			this._modalMessageSection.style('border-bottom-width', border ? '1px' : null);
+			this._modalMessageSection.style('border-bottom-style', border ? 'solid' : null);
+			this._modalMessageSection.style('border-bottom-color', border);
+		}
+
 		if (this._modalBodySection) {
 			this._modalBodySection.style.backgroundColor = bodyBackground;
 		}

src/sql/base/browser/ui/modal/optionsDialog.ts

@@ -93,13 +93,13 @@ export class OptionsDialog extends Modal {
 		name: string,
 		options: IModalOptions,
 		@IPartService partService: IPartService,
-		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService private _workbenchThemeService: IWorkbenchThemeService,
 		@IContextViewService private _contextViewService: IContextViewService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IClipboardService clipboardService: IClipboardService
 	) {
-		super(title, name, partService, telemetryService, clipboardService, contextKeyService, options);
+		super(title, name, partService, telemetryService, clipboardService, _workbenchThemeService, contextKeyService, options);
 	}
 
 	public render() {
@@ -115,8 +115,8 @@ export class OptionsDialog extends Modal {
 		attachButtonStyler(this._okButton, this._themeService);
 		attachButtonStyler(this._closeButton, this._themeService);
 		let self = this;
-		this._register(self._themeService.onDidColorThemeChange(e => self.updateTheme(e)));
+		this._register(self._workbenchThemeService.onDidColorThemeChange(e => self.updateTheme(e)));
-		self.updateTheme(self._themeService.getColorTheme());
+		self.updateTheme(self._workbenchThemeService.getColorTheme());
 	}
 
 	protected renderBody(container: HTMLElement) {

src/sql/base/browser/ui/modal/webViewDialog.ts

@@ -45,7 +45,7 @@ export class WebViewDialog extends Modal {
 	protected findInputFocusContextKey: IContextKey<boolean>;
 
 	constructor(
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@IClipboardService clipboardService: IClipboardService,
 		@IPartService private _webViewPartService: IPartService,
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -54,7 +54,7 @@ export class WebViewDialog extends Modal {
 		@IEnvironmentService private _environmentService: IEnvironmentService,
 		@IInstantiationService private _instantiationService: IInstantiationService
 	) {
-		super('', TelemetryKeys.WebView, _webViewPartService, telemetryService, clipboardService, contextKeyService, { isFlyout: false, hasTitleIcon: true });
+		super('', TelemetryKeys.WebView, _webViewPartService, telemetryService, clipboardService, themeService, contextKeyService, { isFlyout: false, hasTitleIcon: true });
 		this._okLabel = localize('webViewDialog.ok', 'OK');
 		this._closeLabel = localize('webViewDialog.close', 'Close');
 	}

src/sql/parts/accountManagement/accountDialog/accountDialog.ts

@@ -67,7 +67,7 @@ export class AccountDialog extends Modal {
 
 	constructor(
 		@IPartService partService: IPartService,
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@IListService private _listService: IListService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
@@ -82,6 +82,7 @@ export class AccountDialog extends Modal {
 			partService,
 			telemetryService,
 			clipboardService,
+			themeService,
 			contextKeyService,
 			{ hasSpinner: true }
 		);

src/sql/parts/accountManagement/autoOAuthDialog/autoOAuthDialog.ts

@@ -43,7 +43,7 @@ export class AutoOAuthDialog extends Modal {
 
 	constructor(
 		@IPartService partService: IPartService,
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@IContextViewService private _contextViewService: IContextViewService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
@@ -55,6 +55,7 @@ export class AutoOAuthDialog extends Modal {
 			partService,
 			telemetryService,
 			clipboardService,
+			themeService,
 			contextKeyService,
 			{
 				isFlyout: true,

src/sql/parts/accountManagement/firewallRuleDialog/firewallRuleDialog.ts

@@ -65,7 +65,7 @@ export class FirewallRuleDialog extends Modal {
 	constructor(
 		@IAccountPickerService private _accountPickerService: IAccountPickerService,
 		@IPartService partService: IPartService,
-		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService private _workbenchThemeService: IWorkbenchThemeService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextViewService private _contextViewService: IContextViewService,
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -79,6 +79,7 @@ export class FirewallRuleDialog extends Modal {
 			partService,
 			telemetryService,
 			clipboardService,
+			_workbenchThemeService,
 			contextKeyService,
 			{
 				isFlyout: true,
@@ -205,8 +206,8 @@ export class FirewallRuleDialog extends Modal {
 			builder.append(firewallRuleSection);
 		});
 
-		this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e)));
+		this._register(this._workbenchThemeService.onDidColorThemeChange(e => this.updateTheme(e)));
-		this.updateTheme(this._themeService.getColorTheme());
+		this.updateTheme(this._workbenchThemeService.getColorTheme());
 
 		$(this._IPAddressInput).on(DOM.EventType.CLICK, () => {
 			this.onFirewallRuleOptionSelected(true);

src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts

@@ -88,7 +88,7 @@ export class ConnectionDialogWidget extends Modal {
 		private providerNameToDisplayNameMap: { [providerDisplayName: string]: string },
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
-		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService private _workbenchThemeService: IWorkbenchThemeService,
 		@IPartService _partService: IPartService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
@@ -96,7 +96,7 @@ export class ConnectionDialogWidget extends Modal {
 		@IContextViewService private _contextViewService: IContextViewService,
 		@IClipboardService clipboardService: IClipboardService
 	) {
-		super(localize('connection', 'Connection'), TelemetryKeys.Connection, _partService, telemetryService, clipboardService, contextKeyService, { hasSpinner: true, hasErrors: true });
+		super(localize('connection', 'Connection'), TelemetryKeys.Connection, _partService, telemetryService, clipboardService, _workbenchThemeService, contextKeyService, { hasSpinner: true, hasErrors: true });
 	}
 
 	public refresh(): void {
@@ -194,8 +194,8 @@ export class ConnectionDialogWidget extends Modal {
 		this.$connectionUIContainer.appendTo(this._bodyBuilder);
 
 		let self = this;
-		this._register(self._themeService.onDidColorThemeChange(e => self.updateTheme(e)));
+		this._register(self._workbenchThemeService.onDidColorThemeChange(e => self.updateTheme(e)));
-		self.updateTheme(self._themeService.getColorTheme());
+		self.updateTheme(self._workbenchThemeService.getColorTheme());
 	}
 
 	/**

src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts

@@ -120,7 +120,7 @@ export class NewDashboardTabDialog extends Modal {
 
 	constructor(
 		@IPartService partService: IPartService,
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@IListService private _listService: IListService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
@@ -135,6 +135,7 @@ export class NewDashboardTabDialog extends Modal {
 			partService,
 			telemetryService,
 			clipboardService,
+			themeService,
 			contextKeyService,
 			{ hasSpinner: true }
 		);

src/sql/parts/disasterRecovery/backup/backupDialog.ts

@@ -27,7 +27,7 @@ export class BackupDialog extends Modal {
 	private _moduleRef: any;
 
 	constructor(
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@IPartService partService: IPartService,
 		@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -35,7 +35,7 @@ export class BackupDialog extends Modal {
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IClipboardService clipboardService: IClipboardService
 	) {
-		super('', TelemetryKeys.Backup, partService, telemetryService, clipboardService, contextKeyService, { isAngular: true, hasErrors: true });
+		super('', TelemetryKeys.Backup, partService, telemetryService, clipboardService, themeService, contextKeyService, { isAngular: true, hasErrors: true });
 	}
 
 	protected renderBody(container: HTMLElement) {

src/sql/parts/disasterRecovery/restore/restoreDialog.ts

@@ -130,14 +130,14 @@ export class RestoreDialog extends Modal {
 	constructor(
 		optionsMetadata: sqlops.ServiceOption[],
 		@IPartService partService: IPartService,
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@IContextViewService private _contextViewService: IContextViewService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IFileBrowserDialogController private fileBrowserDialogService: IFileBrowserDialogController,
 		@IClipboardService clipboardService: IClipboardService
 	) {
-		super(localize('RestoreDialogTitle', 'Restore database'), TelemetryKeys.Restore, partService, telemetryService, clipboardService, contextKeyService, { hasErrors: true, isWide: true, hasSpinner: true });
+		super(localize('RestoreDialogTitle', 'Restore database'), TelemetryKeys.Restore, partService, telemetryService, clipboardService, themeService, contextKeyService, { hasErrors: true, isWide: true, hasSpinner: true });
 		this._restoreTitle = localize('restoreDialog.restoreTitle', 'Restore database');
 		this._databaseTitle = localize('restoreDialog.database', 'Database');
 		this._backupFileTitle = localize('restoreDialog.backupFile', 'Backup file');

src/sql/parts/fileBrowser/fileBrowserDialog.ts

@@ -53,14 +53,14 @@ export class FileBrowserDialog extends Modal {
 
 	constructor(title: string,
 		@IPartService partService: IPartService,
-		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService private _workbenchthemeService: IWorkbenchThemeService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextViewService private _contextViewService: IContextViewService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IClipboardService clipboardService: IClipboardService
 	) {
-		super(title, TelemetryKeys.Backup, partService, telemetryService, clipboardService, contextKeyService, { isFlyout: true, hasTitleIcon: false, hasBackButton: true, hasSpinner: true });
+		super(title, TelemetryKeys.Backup, partService, telemetryService, clipboardService, _workbenchthemeService, contextKeyService, { isFlyout: true, hasTitleIcon: false, hasBackButton: true, hasSpinner: true });
 		this._viewModel = this._instantiationService.createInstance(FileBrowserViewModel);
 		this._viewModel.onAddFileTree(args => this.handleOnAddFileTree(args.rootNode, args.selectedNode, args.expandedNodes));
 		this._viewModel.onPathValidate(args => this.handleOnValidate(args.succeeded, args.message));
@@ -238,7 +238,7 @@ export class FileBrowserDialog extends Modal {
 		this._register(attachButtonStyler(this._okButton, this._themeService));
 		this._register(attachButtonStyler(this._cancelButton, this._themeService));
 
-		this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme()));
+		this._register(this._workbenchthemeService.onDidColorThemeChange(e => this.updateTheme()));
 	}
 
 	// Update theming that is specific to file browser

src/sql/parts/insights/browser/insightsDialogView.ts

@@ -125,7 +125,7 @@ export class InsightsDialogView extends Modal {
 	constructor(
 		private _model: IInsightsDialogModel,
 		@IInstantiationService private _instantiationService: IInstantiationService,
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@IListService private _listService: IListService,
 		@IPartService partService: IPartService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
@@ -135,7 +135,7 @@ export class InsightsDialogView extends Modal {
 		@ICapabilitiesService private _capabilitiesService: ICapabilitiesService,
 		@IClipboardService clipboardService: IClipboardService
 	) {
-		super(nls.localize("InsightsDialogTitle", "Insights"), TelemetryKeys.Insights, partService, telemetryService, clipboardService, contextKeyService);
+		super(nls.localize("InsightsDialogTitle", "Insights"), TelemetryKeys.Insights, partService, telemetryService, clipboardService, themeService, contextKeyService);
 		this._model.onDataChange(e => this.build());
 	}
 

src/sql/parts/objectExplorer/serverGroupDialog/serverGroupDialog.ts

@@ -51,13 +51,13 @@ export class ServerGroupDialog extends Modal {
 
 	constructor(
 		@IPartService partService: IPartService,
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@IContextViewService private _contextViewService: IContextViewService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IClipboardService clipboardService: IClipboardService
 	) {
-		super(localize('ServerGroupsDialogTitle', 'Server Groups'), TelemetryKeys.ServerGroups, partService, telemetryService, clipboardService, contextKeyService);
+		super(localize('ServerGroupsDialogTitle', 'Server Groups'), TelemetryKeys.ServerGroups, partService, telemetryService, clipboardService, themeService, contextKeyService);
 	}
 
 	public render() {

src/sql/parts/profiler/dialog/profilerColumnEditorDialog.ts

@@ -314,13 +314,13 @@ export class ProfilerColumnEditorDialog extends Modal {
 
 	constructor(
 		@IPartService _partService: IPartService,
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IContextViewService private _contextViewService: IContextViewService,
 		@IClipboardService clipboardService: IClipboardService
 	) {
-		super(nls.localize('profilerColumnDialog.profiler', 'Profiler'), TelemetryKeys.Profiler, _partService, telemetryService, clipboardService, contextKeyService);
+		super(nls.localize('profilerColumnDialog.profiler', 'Profiler'), TelemetryKeys.Profiler, _partService, telemetryService, clipboardService, themeService, contextKeyService);
 	}
 
 	public render(): void {

src/sql/platform/dialog/dialogModal.ts

@@ -41,13 +41,13 @@ export class DialogModal extends Modal {
 		name: string,
 		options: IModalOptions,
 		@IPartService partService: IPartService,
-		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService themeService: IWorkbenchThemeService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IClipboardService clipboardService: IClipboardService,
 		@IInstantiationService private _instantiationService: IInstantiationService
 	) {
-		super(_dialog.title, name, partService, telemetryService, clipboardService, contextKeyService, options);
+		super(_dialog.title, name, partService, telemetryService, clipboardService, themeService, contextKeyService, options);
 	}
 
 	public layout(): void {

src/sql/platform/dialog/wizardModal.ts

@@ -46,13 +46,13 @@ export class WizardModal extends Modal {
 		name: string,
 		options: IModalOptions,
 		@IPartService partService: IPartService,
-		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@IWorkbenchThemeService themeService: IWorkbenchThemeService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IClipboardService clipboardService: IClipboardService
 	) {
-		super(_wizard.title, name, partService, telemetryService, clipboardService, contextKeyService, options);
+		super(_wizard.title, name, partService, telemetryService, clipboardService, themeService, contextKeyService, options);
 	}
 
 	public layout(): void {

src/sql/workbench/errorMessageDialog/errorMessageDialog.ts

@@ -42,13 +42,13 @@ export class ErrorMessageDialog extends Modal {
 	public onOk: Event<void> = this._onOk.event;
 
 	constructor(
-		@IThemeService private _themeService: IThemeService,
+		@IThemeService themeService: IThemeService,
 		@IClipboardService clipboardService: IClipboardService,
 		@IPartService partService: IPartService,
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IContextKeyService contextKeyService: IContextKeyService
 	) {
-		super('', TelemetryKeys.ErrorMessage, partService, telemetryService, clipboardService, contextKeyService, { isFlyout: false, hasTitleIcon: true });
+		super('', TelemetryKeys.ErrorMessage, partService, telemetryService, clipboardService, themeService, contextKeyService, { isFlyout: false, hasTitleIcon: true });
 		this._okLabel = localize('errorMessageDialog.ok', 'OK');
 		this._closeLabel = localize('errorMessageDialog.close', 'Close');
 	}