Skip to content

Commit 6471852

Browse files
sbattensbatten
authored
adopt css var in lieu of registerThemingParticipant (microsoft#165561)
* panel and auxiliar bar part css refs microsoft#165169 * unused imports
1 parent 12d2660 commit 6471852

File tree

4 files changed

+65
-153
lines changed

4 files changed

+65
-153
lines changed

‎src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts

Lines changed: 3 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
1212
import { INotificationService } from 'vs/platform/notification/common/notification';
1313
import { IStorageService } from 'vs/platform/storage/common/storage';
1414
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
15-
import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
16-
import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
15+
import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
16+
import { IThemeService } from 'vs/platform/theme/common/themeService';
1717
import { Extensions as PaneCompositeExtensions } from 'vs/workbench/browser/panecomposite';
1818
import { BasePanelPart } from 'vs/workbench/browser/parts/panel/panelPart';
1919
import { ActiveAuxiliaryContext, AuxiliaryBarFocusContext } from 'vs/workbench/common/contextkeys';
20-
import { SIDE_BAR_BACKGROUND, SIDE_BAR_BORDER, SIDE_BAR_FOREGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
20+
import { SIDE_BAR_BACKGROUND, SIDE_BAR_BORDER, SIDE_BAR_FOREGROUND } from 'vs/workbench/common/theme';
2121
import { IViewDescriptorService, ViewContainerLocation } from 'vs/workbench/common/views';
2222
import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
2323
import { IWorkbenchLayoutService, Parts, Position } from 'vs/workbench/services/layout/browser/layoutService';
@@ -126,63 +126,3 @@ export class AuxiliaryBarPart extends BasePanelPart {
126126
};
127127
}
128128
}
129-
130-
registerThemingParticipant((theme, collector) => {
131-
132-
// Auxiliary Bar Background: since panels can host editors, we apply a background rule if the panel background
133-
// color is different from the editor background color. This is a bit of a hack though. The better way
134-
// would be to have a way to push the background color onto each editor widget itself somehow.
135-
const auxiliaryBarBackground = theme.getColor(SIDE_BAR_BACKGROUND);
136-
if (auxiliaryBarBackground && auxiliaryBarBackground !== theme.getColor(editorBackground)) {
137-
collector.addRule(`
138-
.monaco-workbench .part.auxiliarybar > .content .monaco-editor,
139-
.monaco-workbench .part.auxiliarybar > .content .monaco-editor .margin,
140-
.monaco-workbench .part.auxiliarybar > .content .monaco-editor .monaco-editor-background {
141-
background-color: ${auxiliaryBarBackground};
142-
}
143-
`);
144-
}
145-
146-
// Title Active
147-
const titleActive = theme.getColor(SIDE_BAR_TITLE_FOREGROUND);
148-
if (titleActive) {
149-
collector.addRule(`
150-
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
151-
color: ${titleActive} !important;
152-
}
153-
`);
154-
collector.addRule(`
155-
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label {
156-
color: ${titleActive} !important;
157-
}
158-
`);
159-
}
160-
161-
// Styling with Outline color (e.g. high contrast theme)
162-
const outline = theme.getColor(activeContrastBorder);
163-
if (outline) {
164-
collector.addRule(`
165-
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
166-
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
167-
outline-color: ${outline};
168-
outline-width: 1px;
169-
outline-style: solid;
170-
border-bottom: none;
171-
outline-offset: -2px;
172-
}
173-
174-
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
175-
outline-style: dashed;
176-
}
177-
`);
178-
}
179-
180-
// const inputBorder = theme.getColor(PANEL_INPUT_BORDER);
181-
// if (inputBorder) {
182-
// collector.addRule(`
183-
// .monaco-workbench .part.auxiliarybar .monaco-inputbox {
184-
// border-color: ${inputBorder}
185-
// }
186-
// `);
187-
// }
188-
});

‎src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,23 @@
77
display: none !important;
88
visibility: hidden !important;
99
}
10+
11+
.monaco-workbench .part.auxiliarybar > .content .monaco-editor,
12+
.monaco-workbench .part.auxiliarybar > .content .monaco-editor .margin,
13+
.monaco-workbench .part.auxiliarybar > .content .monaco-editor .monaco-editor-background {
14+
background-color: var(--vscode-sideBar-background) !important;
15+
}
16+
17+
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label,
18+
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label {
19+
color: var(--vscode-sideBarTitle-foreground) !important;
20+
}
21+
22+
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
23+
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
24+
outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important;
25+
}
26+
27+
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
28+
outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important;
29+
}

‎src/vs/workbench/browser/parts/panel/media/panelpart.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,42 @@
3434
.monaco-workbench.noeditorarea .part.panel.left {
3535
border-right-width: 0; /* no border when editor area is hiden */
3636
}
37+
38+
.monaco-workbench .part.panel > .content .monaco-editor,
39+
.monaco-workbench .part.panel > .content .monaco-editor .margin,
40+
.monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background {
41+
background-color: var(--vscode-panel-background) !important;
42+
}
43+
44+
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label,
45+
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
46+
color: var(--vscode-panelTitle-activeForeground) !important;
47+
}
48+
49+
.monaco-workbench .part.panel .monaco-inputbox {
50+
border-color: var(--vscode-panelInput-border) !important;
51+
}
52+
53+
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
54+
border-top-color: var(--vscode-focusBorder) !important;
55+
}
56+
57+
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
58+
outline: none;
59+
}
60+
61+
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before,
62+
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before {
63+
border-top-color: var(--vscode-panelTitle-activeBorder) !important;
64+
}
65+
66+
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
67+
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
68+
outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important;
69+
}
70+
71+
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
72+
outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important;
73+
}
74+
75+

‎src/vs/workbench/browser/parts/panel/panelPart.ts

Lines changed: 3 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
1919
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
2020
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
2121
import { PanelActivityAction, TogglePanelAction, PlaceHolderPanelActivityAction, PlaceHolderToggleCompositePinnedAction, PositionPanelActionConfigs, SetPanelPositionAction } from 'vs/workbench/browser/parts/panel/panelActions';
22-
import { IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
23-
import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_INPUT_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_DRAG_AND_DROP_BORDER } from 'vs/workbench/common/theme';
24-
import { activeContrastBorder, focusBorder, contrastBorder, editorBackground, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
22+
import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
23+
import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_DRAG_AND_DROP_BORDER } from 'vs/workbench/common/theme';
24+
import { contrastBorder, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
2525
import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar';
2626
import { IActivityHoverOptions, ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositeBarActions';
2727
import { IBadge } from 'vs/workbench/services/activity/common/activity';
@@ -1008,90 +1008,3 @@ export class PanelPart extends BasePanelPart {
10081008
};
10091009
}
10101010
}
1011-
1012-
registerThemingParticipant((theme, collector) => {
1013-
1014-
// Panel Background: since panels can host editors, we apply a background rule if the panel background
1015-
// color is different from the editor background color. This is a bit of a hack though. The better way
1016-
// would be to have a way to push the background color onto each editor widget itself somehow.
1017-
const panelBackground = theme.getColor(PANEL_BACKGROUND);
1018-
if (panelBackground && panelBackground !== theme.getColor(editorBackground)) {
1019-
collector.addRule(`
1020-
.monaco-workbench .part.panel > .content .monaco-editor,
1021-
.monaco-workbench .part.panel > .content .monaco-editor .margin,
1022-
.monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background {
1023-
background-color: ${panelBackground};
1024-
}
1025-
`);
1026-
}
1027-
1028-
// Title Active
1029-
const titleActive = theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND);
1030-
if (titleActive) {
1031-
collector.addRule(`
1032-
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
1033-
color: ${titleActive} !important;
1034-
}
1035-
`);
1036-
collector.addRule(`
1037-
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label {
1038-
color: ${titleActive} !important;
1039-
}
1040-
`);
1041-
}
1042-
1043-
const inputBorder = theme.getColor(PANEL_INPUT_BORDER);
1044-
if (inputBorder) {
1045-
collector.addRule(`
1046-
.monaco-workbench .part.panel .monaco-inputbox {
1047-
border-color: ${inputBorder}
1048-
}
1049-
`);
1050-
}
1051-
1052-
1053-
// Base Panel Styles
1054-
// Title focus
1055-
const focusBorderColor = theme.getColor(focusBorder);
1056-
if (focusBorderColor) {
1057-
collector.addRule(`
1058-
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
1059-
border-top-color: ${focusBorderColor};
1060-
}
1061-
`);
1062-
collector.addRule(`
1063-
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
1064-
outline: none;
1065-
}
1066-
`);
1067-
}
1068-
1069-
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
1070-
if (titleActiveBorder) {
1071-
collector.addRule(`
1072-
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before,
1073-
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before {
1074-
border-top-color: ${titleActiveBorder};
1075-
}
1076-
`);
1077-
}
1078-
1079-
// Styling with Outline color (e.g. high contrast theme)
1080-
const outline = theme.getColor(activeContrastBorder);
1081-
if (outline) {
1082-
collector.addRule(`
1083-
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
1084-
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
1085-
outline-color: ${outline};
1086-
outline-width: 1px;
1087-
outline-style: solid;
1088-
border-bottom: none;
1089-
outline-offset: -1px;
1090-
}
1091-
1092-
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
1093-
outline-style: dashed;
1094-
}
1095-
`);
1096-
}
1097-
});

0 commit comments

Comments
 (0)