unify the panel styles (#9934)

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

@@ -76,6 +76,10 @@ panel {
 	min-width: 65px;
 }
 
+.tabbedPanel.horizontal > .title .tabList .tab-header {
+	margin: 5px;
+}
+
 .tabbedPanel.vertical > .title .tabList .tab-header {
 	display: block;
 	min-width: 150px;
@@ -156,9 +160,8 @@ panel {
 .tabbedPanel .tab-group-header {
 	font-weight: 600;
 	font-size: 14px;
-	margin: 15px 24px 3px 24px;
+	margin: 10px 24px 5px 24px;
-	line-height: 20px;
+	line-height: 35px;
-	height: 35px;
 	border-style: solid;
 	border-width: 0 0 1px 0;
 }

src/sql/base/browser/ui/panel/panel.component.ts

@@ -23,6 +23,9 @@ import * as nls from 'vs/nls';
 import { TabHeaderComponent } from 'sql/base/browser/ui/panel/tabHeader.component';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
+import { IThemable } from 'vs/base/common/styler';
+import { ITabbedPanelStyles } from 'sql/base/browser/ui/panel/panel';
+import { createStyleSheet } from 'vs/base/browser/dom';
 
 export interface IPanelOptions {
 	/**
@@ -49,7 +52,7 @@ let idPool = 0;
 @Component({
 	selector: 'panel',
 	template: `
-		<div class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
+		<div #rootContainer class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
 			<div *ngIf="!options.alwaysShowTabs ? _tabs.length !== 1 : true" class="composite title">
 				<div class="tabContainer">
 					<div *ngIf="options.layout === NavigationBarLayout.vertical" class="vertical-tab-action-container">
@@ -81,7 +84,7 @@ let idPool = 0;
 		</div>
 	`
 })
-export class PanelComponent extends Disposable {
+export class PanelComponent extends Disposable implements IThemable {
 	@Input() public options?: IPanelOptions;
 	@Input() public actions?: Array<Action>;
 	@ContentChildren(TabComponent) private readonly _tabs!: QueryList<TabComponent>;
@@ -95,12 +98,15 @@ export class PanelComponent extends Disposable {
 	private _actionbar?: ActionBar;
 	private _mru: TabComponent[] = [];
 	private _tabExpanded: boolean = true;
+	private _styleElement: HTMLStyleElement;
 
 	protected AutoScrollbarVisibility = ScrollbarVisibility.Auto; // used by angular template
 	protected HiddenScrollbarVisibility = ScrollbarVisibility.Hidden; // used by angular template
 	protected NavigationBarLayout = NavigationBarLayout; // used by angular template
 
 	@ViewChild('panelActionbar', { read: ElementRef }) private _actionbarRef!: ElementRef;
+	@ViewChild('rootContainer', { read: ElementRef }) private _rootContainer!: ElementRef;
+
 	constructor(
 		@Inject(forwardRef(() => NgZone)) private _zone: NgZone,
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef) {
@@ -122,6 +128,8 @@ export class PanelComponent extends Disposable {
 
 	ngOnInit(): void {
 		this.options = mixin(this.options || {}, defaultOptions, false);
+		const rootContainerElement = this._rootContainer.nativeElement as HTMLElement;
+		this._styleElement = createStyleSheet(rootContainerElement);
 	}
 
 	ngAfterContentInit(): void {
@@ -321,4 +329,70 @@ export class PanelComponent extends Disposable {
 			return header.nativeElement === document.activeElement;
 		});
 	}
+
+	style(styles: ITabbedPanelStyles) {
+		if (this._styleElement) {
+			const content: string[] = [];
+			if (styles.titleInactiveForeground) {
+				content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header {
+					color: ${styles.titleInactiveForeground}
+				}`);
+			}
+			if (styles.titleActiveBorder && styles.titleActiveForeground) {
+				content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header:focus,
+					.tabbedPanel.horizontal > .title .tabList .tab-header.active {
+					border-color: ${styles.titleActiveBorder};
+					border-style: solid;
+					color: ${styles.titleActiveForeground}
+				}`);
+
+				content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header:focus,
+					.tabbedPanel.horizontal > .title .tabList .tab-header.active {;
+					border-width: 0 0 ${styles.activeTabContrastBorder ? '0' : '2'}px 0;
+				}`);
+
+				content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header:hover {
+					color: ${styles.titleActiveForeground}
+				}`);
+			}
+
+			if (styles.activeBackgroundForVerticalLayout) {
+				content.push(`.tabbedPanel.vertical > .title .tabList .tab-header.active {
+					background-color:${styles.activeBackgroundForVerticalLayout}
+				}`);
+			}
+
+			if (styles.border) {
+				content.push(`.tabbedPanel.vertical > .title > .tabContainer {
+					border-right-width: 1px;
+					border-right-style: solid;
+					border-right-color: ${styles.border};
+				}
+
+				.tabbedPanel .tab-group-header {
+					border-color: ${styles.border};
+				}`);
+			}
+
+			if (styles.activeTabContrastBorder) {
+				content.push(`
+				.tabbedPanel > .title .tabList .tab-header.active {
+					outline: 1px solid;
+					outline-offset: -3px;
+					outline-color: ${styles.activeTabContrastBorder};
+				}
+			`);
+			} else {
+				content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header:focus {
+					outline-width: 0px;
+				}`);
+			}
+
+			const newStyles = content.join('\n');
+			if (newStyles !== this._styleElement.innerHTML) {
+				this._styleElement.innerHTML = newStyles;
+			}
+		}
+	}
+
 }

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

@@ -23,6 +23,9 @@ export interface ITabbedPanelStyles {
 	titleInactiveForeground?: Color;
 	focusBorder?: Color;
 	outline?: Color;
+	activeBackgroundForVerticalLayout?: Color;
+	border?: Color;
+	activeTabContrastBorder?: Color;
 }
 
 export interface IPanelOptions {

src/sql/base/browser/ui/panel/tabHeader.component.ts

@@ -19,7 +19,7 @@ import { CloseTabAction } from 'sql/base/browser/ui/panel/tabActions';
 @Component({
 	selector: 'tab-header',
 	template: `
-		<div #actionHeader role="tab" [attr.aria-selected]="tab.active" [attr.aria-label]="tab.title" class="tab-header" style="flex: 0 0; flex-direction: row; height: 100%" [class.active]="tab.active" tabindex="0" (click)="selectTab(tab)" (keyup)="onKey($event)">
+		<div #actionHeader role="tab" [attr.aria-selected]="tab.active" [attr.aria-label]="tab.title" class="tab-header" style="flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (click)="selectTab(tab)" (keyup)="onKey($event)">
 			<span class="tab" role="presentation">
 				<div role="presentation">
 					<a #tabIcon></a>

src/sql/workbench/browser/modelComponents/media/tabbedPanel.css

@@ -11,49 +11,3 @@
 .tabbedpanel-component .tabbedPanel {
 	border-top-width: 0px;
 }
-
-.tabbedpanel-component .tabbedPanel .tabContainer {
-	border-style: solid;
-	border-color: rgb(237, 235, 233);
-	border-width: 0px;
-}
-
-.vs-dark .tabbedpanel-component .tabbedPanel .tabContainer,
-.hc-black .tabbedpanel-component .tabbedPanel .tabContainer {
-	border-color: rgba(128, 128, 128, 0.5);
-}
-
-.tabbedpanel-component .tabbedPanel.vertical > .title .tabContainer {
-	border-right-width: 1px;
-}
-
-.tabbedpanel-component .tabbedPanel.horizontal > .title .tabContainer {
-	border-bottom-width: 1px;
-}
-
-.tabbedpanel-component .tabbedPanel .tab > .tabLabel.active {
-	border-bottom: 0px solid;
-}
-
-.tabbedpanel-component .tabbedPanel.vertical .tabList .tab-header {
-	line-height: 35px;
-}
-
-.tabbedpanel-component .tabbedPanel.horizontal .tabList .tab-header {
-	border-color: rgb(214, 214, 214);
-	border-width: 0 1px 0 0;
-	border-style: solid;
-}
-
-.tabbedpanel-component .tabbedPanel .tabList .tab .tabLabel {
-	font-weight: normal;
-}
-
-.tabbedpanel-component .tabList .tab-header.active {
-	background-color: #E1F0FE;
-}
-
-.vs-dark .tabbedpanel-component .tabList .tab-header.active,
-.hc-black .tabbedpanel-component .tabList .tab-header.active {
-	background-color: rgba(128, 128, 128, 0.5);
-}

src/sql/workbench/browser/modelComponents/tabbedPanel.component.ts

@@ -11,6 +11,8 @@ import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBa
 import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
 import 'vs/css!./media/tabbedPanel';
 import { IUserFriendlyIcon, createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
+import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
 
 export interface TabConfig {
 	title: string;
@@ -40,7 +42,9 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
+	) {
 		super(changeRef, el);
 	}
 
@@ -49,6 +53,7 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
 	}
 
 	ngAfterViewInit(): void {
+		this._register(attachTabbedPanelStyler(this._panel, this.themeService));
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/common/styler.ts

@@ -8,7 +8,11 @@ import { IDisposable } from 'vs/base/common/lifecycle';
 import * as cr from 'vs/platform/theme/common/colorRegistry';
 import { IThemable } from 'vs/base/common/styler';
 import { attachStyler } from 'vs/platform/theme/common/styler';
-import { SIDE_BAR_SECTION_HEADER_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, SIDE_BAR_DRAG_AND_DROP_BACKGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
+import {
+	SIDE_BAR_SECTION_HEADER_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, SIDE_BAR_DRAG_AND_DROP_BACKGROUND,
+	PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, VERTICAL_TAB_ACTIVE_BACKGROUND, DASHBOARD_BORDER,
+
+} from 'vs/workbench/common/theme';
 
 export function attachModalDialogStyler(widget: IThemable, themeService: IThemeService, style?:
 	{
@@ -39,6 +43,9 @@ export function attachTabbedPanelStyler(widget: IThemable, themeService: IThemeS
 		titleActiveBorder: PANEL_ACTIVE_TITLE_BORDER,
 		titleInactiveForeground: PANEL_INACTIVE_TITLE_FOREGROUND,
 		focusBorder: cr.focusBorder,
-		outline: cr.activeContrastBorder
+		outline: cr.activeContrastBorder,
+		activeBackgroundForVerticalLayout: VERTICAL_TAB_ACTIVE_BACKGROUND,
+		border: DASHBOARD_BORDER,
+		activeTabContrastBorder: cr.activeContrastBorder
 	}, widget);
 }

src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts

@@ -51,6 +51,7 @@ import { NAV_SECTION } from 'sql/workbench/contrib/dashboard/browser/containers/
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { DASHBOARD_BORDER } from 'vs/workbench/common/theme';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
+import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
 
 
 const dashboardRegistry = Registry.as<IDashboardRegistry>(DashboardExtensions.DashboardContributions);
@@ -132,6 +133,7 @@ export abstract class DashboardPage extends AngularDisposable implements IConfig
 	}
 
 	ngAfterViewInit(): void {
+		attachTabbedPanelStyler(this._panel, this.themeService);
 		this.updateTheme(this.themeService.getColorTheme());
 	}
 

src/sql/workbench/contrib/dashboard/browser/core/dashboardPanel.css

@@ -5,20 +5,4 @@
 
 panel.dashboard-panel > .tabbedPanel {
 	border-top-width: 0px;
-	border-top-style: solid;
-	box-sizing: border-box;
-}
-
-panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header .tab > .tabLabel.active {
-	border-bottom: 0px solid;
-}
-
-panel.dashboard-panel > .tabbedPanel .tabList .tab .tabLabel {
-	opacity: 1;
-}
-
-panel.dashboard-panel > .tabbedPanel > .title > .title-actions,
-panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
-	box-sizing: border-box;
-	border: 1px solid transparent;
 }

src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts

@@ -5,145 +5,17 @@
 
 import 'vs/css!./dashboardPanel';
 import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import {
+import { DASHBOARD_WIDGET_SUBTEXT, TAB_LABEL, DASHBOARD_WIDGET_TITLE, DASHBOARD_PROPERTIES_NAME } from 'vs/workbench/common/theme';
-	TAB_ACTIVE_BACKGROUND, TAB_INACTIVE_BACKGROUND,
-	TAB_INACTIVE_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND, TAB_BORDER, EDITOR_GROUP_BORDER, VERTICAL_TAB_ACTIVE_BACKGROUND, DASHBOARD_BORDER, DASHBOARD_WIDGET_SUBTEXT, TAB_LABEL, TAB_GROUP_HEADER, DASHBOARD_WIDGET_TITLE, DASHBOARD_PROPERTIES_NAME
-} from 'vs/workbench/common/theme';
-import { activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
 
 registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
-	// Title Active
-	const tabActiveBackground = theme.getColor(TAB_ACTIVE_BACKGROUND);
-	const tabActiveBackgroundVertical = theme.getColor(VERTICAL_TAB_ACTIVE_BACKGROUND);
-
-	if (tabActiveBackground) {
-		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab:hover .tabLabel,
-			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel.active {
-				border-bottom: 0px solid;
-			}
-
-			panel.dashboard-panel > .tabbedPanel.vertical > .title .tabList .tab-header.active {
-				background-color: ${tabActiveBackgroundVertical};
-			}
-
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header.active {
-				background-color: ${tabActiveBackground};
-			}
-
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header.active {
-				border-bottom-color: transparent;
-			}
-
-			panel.dashboard-panel > .tabbedPanel.vertical > .title .tabList .tab-header.active {
-				border-right-color: transparent;
-			}
-		`);
-	}
-
-	const highContrastActiveTabBorderColor = theme.getColor(activeContrastBorder);
-	if (highContrastActiveTabBorderColor) {
-		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header.active {
-				outline: 1px solid;
-				outline-offset: -3px;
-				outline-color: ${highContrastActiveTabBorderColor};
-			}
-		`);
-	}
-
-	// Title Inactive
-	const tabInactiveBackground = theme.getColor(TAB_INACTIVE_BACKGROUND);
-	const tabInactiveForeground = theme.getColor(TAB_INACTIVE_FOREGROUND);
-	if (tabInactiveBackground || tabInactiveForeground) {
-		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab .tabLabel {
-				color: ${tabInactiveForeground};
-			}
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header {
-				background-color: ${tabInactiveBackground};
-			}
-		`);
-	}
-
 	// tab label
 	const tabLabelColor = theme.getColor(TAB_LABEL);
 	if (tabLabelColor) {
-		collector.addRule(`.tabbedPanel.vertical > .title .tabList .tabLabel {
-			color: ${tabLabelColor}
-		}`);
-
 		collector.addRule(`properties-widget .propertiesValue {
 			color: ${tabLabelColor}
 		}`);
 	}
 
-	// tab group header
-	const tabGroupHeader = theme.getColor(TAB_GROUP_HEADER);
-	if (tabGroupHeader) {
-		collector.addRule(`.tabbedPanel .tab-group-header {
-			border-color: ${tabGroupHeader};
-		}`);
-	}
-
-	// Panel title background
-	const panelTitleBackground = theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND);
-	if (panelTitleBackground) {
-		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title {
-				background-color: ${panelTitleBackground};
-			}
-		`);
-	}
-
-	// Panel title background
-	const tabBorder = theme.getColor(TAB_BORDER);
-	if (tabBorder) {
-		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header {
-				border-right-color: ${tabBorder};
-				border-bottom-color: ${tabBorder};
-			}
-		`);
-	}
-
-	// Styling with Outline color (e.g. high contrast theme)
-	const outline = theme.getColor(activeContrastBorder);
-	if (outline) {
-		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title {
-				border-bottom-color: ${tabBorder};
-				border-bottom-width: 1px;
-				border-bottom-style: solid;
-			}
-
-			panel.dashboard-panel > .tabbedPanel.vertical > .title {
-				border-right-color: ${tabBorder};
-				border-right-width: 1px;
-				border-right-style: solid;
-			}
-		`);
-	}
-
-	const divider = theme.getColor(EDITOR_GROUP_BORDER);
-	if (divider) {
-		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header {
-				border-right-width: 1px;
-				border-right-style: solid;
-			}
-		`);
-	}
-
-	const sideBorder = theme.getColor(DASHBOARD_BORDER);
-	if (sideBorder) {
-		collector.addRule(`panel.dashboard-panel > .tabbedPanel.vertical > .title > .tabContainer {
-			border-right-width: 1px;
-			border-right-style: solid;
-			border-right-color: ${sideBorder};
-		}`);
-	}
-
 	// widget title
 	const widgetTitle = theme.getColor(DASHBOARD_WIDGET_TITLE);
 	if (widgetTitle) {