Skip to content

Commit 3f87353

Browse files
lszomorulszomoru
authored
💄 SCM - Remove registerThemingParticipant (microsoft#165038)
* SCM - adopt more theme variables * Remove registerThemingParticipant
1 parent 53ef06a commit 3f87353

File tree

2 files changed

+68
-114
lines changed

2 files changed

+68
-114
lines changed

‎src/vs/workbench/contrib/scm/browser/media/scm.css

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,10 @@
102102
flex-grow: 1;
103103
}
104104

105+
.scm-view .scm-provider > .status > .monaco-action-bar > .actions-container {
106+
border-color: var(--vscode-sideBar-border);
107+
}
108+
105109
.scm-view .monaco-list-row {
106110
line-height: 22px;
107111
}
@@ -208,6 +212,10 @@
208212
border-radius: 2px !important;
209213
}
210214

215+
.scm-view .scm-editor-container .monaco-editor .focused .selected-text {
216+
background-color: var(--vscode-editor-selectionBackground);
217+
}
218+
211219
.scm-view .scm-editor {
212220
box-sizing: border-box;
213221
width: 100%;
@@ -229,6 +237,9 @@
229237
flex-wrap: wrap;
230238
padding: 0 4px;
231239
overflow: hidden;
240+
height: 30px;
241+
line-height: 20px;
242+
border: 1px solid var(--vscode-button-background);
232243
}
233244

234245
.scm-view .button-container .monaco-description-button > .monaco-button-label {
@@ -250,13 +261,13 @@
250261

251262
.scm-view .button-container .codicon.codicon-cloud-upload,
252263
.scm-view .button-container .codicon.codicon-sync {
253-
line-height: 22px;
264+
line-height: 20px;
254265
margin: 0 0.4em 0 0;
255266
}
256267

257268
.scm-view .button-container .codicon.codicon-arrow-up,
258269
.scm-view .button-container .codicon.codicon-arrow-down {
259-
line-height: 22px;
270+
line-height: 20px;
260271
font-size: small !important;
261272
margin: 0 0.2em 0 0;
262273
}
@@ -292,14 +303,35 @@
292303
display: none;
293304
}
294305

306+
.monaco-workbench .part.panel .scm-view .scm-editor-container {
307+
outline: 1px solid var(--vscode-panelInput-border);
308+
}
309+
295310
.scm-view .scm-editor-container {
296311
position: relative;
297312
box-sizing: border-box;
298313
padding: 1px;
299314
outline-offset: -1px;
315+
outline: 1px solid var(--vscode-input-border);
300316
border-radius: 2px;
301317
}
302318

319+
.scm-view .scm-editor-container.synthetic-focus {
320+
outline: 1px solid var(--vscode-focusBorder);
321+
}
322+
323+
.scm-view .scm-editor-container.validation-info {
324+
outline: 1px solid var(--vscode-inputValidation-infoBorder) !important;
325+
}
326+
327+
.scm-view .scm-editor-container.validation-warning {
328+
outline: 1px solid var(--vscode-inputValidation-warningBorder) !important;
329+
}
330+
331+
.scm-view .scm-editor-container.validation-error {
332+
outline: 1px solid var(--vscode-inputValidation-errorBorder) !important;
333+
}
334+
303335
.scm-editor-validation-container {
304336
display: flex;
305337
box-sizing: border-box;
@@ -309,6 +341,24 @@
309341
padding: 2px;
310342
}
311343

344+
.scm-editor-validation-container.validation-info {
345+
background-color: var(--vscode-inputValidation-infoBackground);
346+
border-color: var(--vscode-inputValidation-infoBorder);
347+
color: var(--vscode-inputValidation-infoForeground);
348+
}
349+
350+
.scm-editor-validation-container.validation-warning {
351+
background-color: var(--vscode-inputValidation-warningBackground);
352+
border-color: var(--vscode-inputValidation-warningBorder);
353+
color: var(--vscode-inputValidation-warningForeground);
354+
}
355+
356+
.scm-editor-validation-container.validation-error {
357+
background-color: var(--vscode-inputValidation-errorBackground);
358+
border-color: var(--vscode-inputValidation-errorBorder);
359+
color: var(--vscode-inputValidation-errorForeground);
360+
}
361+
312362
.scm-editor-validation {
313363
box-sizing: border-box;
314364
font-size: 0.9em;
@@ -324,10 +374,16 @@
324374
}
325375

326376
.scm-editor-validation a {
377+
color: var(--vscode-textLink-foreground);
327378
-webkit-user-select: none;
328379
user-select: none;
329380
}
330381

382+
.scm-editor-validation a:active,
383+
.scm-editor-validation a:hover {
384+
color: var(--vscode-textLink-activeForeground);
385+
}
386+
331387
.scm-editor-validation-actions {
332388
align-self: start;
333389
margin-top: 1px;
@@ -343,6 +399,7 @@
343399
overflow: hidden;
344400
white-space: nowrap;
345401
text-overflow: ellipsis;
402+
color: var(--vscode-input-placeholderForeground);
346403
}
347404

348405
.scm-view .scm-editor-placeholder.hidden {
@@ -351,8 +408,13 @@
351408

352409
.scm-view .scm-editor-container .monaco-editor-background,
353410
.scm-view .scm-editor-container .monaco-editor,
354-
.scm-view .scm-editor-container .mtk1 {
411+
.scm-view .scm-editor-container .monaco-editor .margin {
355412
color: inherit;
413+
background-color: var(--vscode-input-background);
414+
}
415+
416+
.scm-view .scm-editor-container .mtk1 {
417+
color: var(--vscode-input-foreground);
356418
}
357419

358420
/* Repositories */

‎src/vs/workbench/contrib/scm/browser/scmViewPane.ts

Lines changed: 3 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
2222
import { MenuItemAction, IMenuService, registerAction2, MenuId, IAction2Options, MenuRegistry, Action2 } from 'vs/platform/actions/common/actions';
2323
import { IAction, ActionRunner, Action, Separator } from 'vs/base/common/actions';
2424
import { ActionBar, IActionViewItemProvider } from 'vs/base/browser/ui/actionbar/actionbar';
25-
import { IThemeService, registerThemingParticipant, IFileIconTheme, ThemeIcon, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
25+
import { IThemeService, IFileIconTheme, ThemeIcon } from 'vs/platform/theme/common/themeService';
2626
import { isSCMResource, isSCMResourceGroup, connectPrimaryMenuToInlineActionBar, isSCMRepository, isSCMInput, collectContextMenuActions, getActionViewItemProvider, isSCMActionButton } from './util';
2727
import { attachBadgeStyler, attachButtonStyler } from 'vs/platform/theme/common/styler';
2828
import { WorkbenchCompressibleObjectTree, IOpenEvent } from 'vs/platform/list/browser/listService';
@@ -44,7 +44,7 @@ import { coalesce, flatten } from 'vs/base/common/arrays';
4444
import { memoize } from 'vs/base/common/decorators';
4545
import { IStorageService, StorageScope, StorageTarget, WillSaveStateReason } from 'vs/platform/storage/common/storage';
4646
import { EditorResourceAccessor, SideBySideEditor } from 'vs/workbench/common/editor';
47-
import { SIDE_BAR_BACKGROUND, SIDE_BAR_BORDER, PANEL_BACKGROUND, PANEL_INPUT_BORDER } from 'vs/workbench/common/theme';
47+
import { SIDE_BAR_BACKGROUND, PANEL_BACKGROUND } from 'vs/workbench/common/theme';
4848
import { CodeEditorWidget, ICodeEditorWidgetOptions } from 'vs/editor/browser/widget/codeEditorWidget';
4949
import { ITextModel } from 'vs/editor/common/model';
5050
import { IEditorConstructionOptions } from 'vs/editor/browser/config/editorConfiguration';
@@ -56,7 +56,6 @@ import { SelectionClipboardContributionID } from 'vs/workbench/contrib/codeEdito
5656
import { ContextMenuController } from 'vs/editor/contrib/contextmenu/browser/contextmenu';
5757
import * as platform from 'vs/base/common/platform';
5858
import { compare, format } from 'vs/base/common/strings';
59-
import { inputPlaceholderForeground, inputValidationInfoBorder, inputValidationWarningBorder, inputValidationErrorBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationErrorBackground, inputValidationErrorForeground, inputBackground, inputForeground, inputBorder, focusBorder, registerColor, contrastBorder, editorSelectionBackground, selectionBackground, textLinkActiveForeground, textLinkForeground, buttonBorder } from 'vs/platform/theme/common/colorRegistry';
6059
import { SuggestController } from 'vs/editor/contrib/suggest/browser/suggestController';
6160
import { SnippetController2 } from 'vs/editor/contrib/snippet/browser/snippetController2';
6261
import { Schemas } from 'vs/base/common/network';
@@ -88,6 +87,7 @@ import { RepositoryContextKeys } from 'vs/workbench/contrib/scm/browser/scmViewS
8887
import { DragAndDropController } from 'vs/editor/contrib/dnd/browser/dnd';
8988
import { DropIntoEditorController } from 'vs/editor/contrib/dropIntoEditor/browser/dropIntoEditorContribution';
9089
import { MessageController } from 'vs/editor/contrib/message/browser/messageController';
90+
import { contrastBorder, registerColor } from 'vs/platform/theme/common/colorRegistry';
9191

9292
type TreeElement = ISCMRepository | ISCMInput | ISCMActionButton | ISCMResourceGroup | IResourceNode<ISCMResource, ISCMResourceGroup> | ISCMResource;
9393

@@ -2184,18 +2184,6 @@ class SCMInputWidget {
21842184
}
21852185
}
21862186

2187-
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
2188-
const link = theme.getColor(textLinkForeground);
2189-
if (link) {
2190-
collector.addRule(`.scm-editor-validation a { color: ${link}; }`);
2191-
}
2192-
2193-
const activeLink = theme.getColor(textLinkActiveForeground);
2194-
if (activeLink) {
2195-
collector.addRule(`.scm-editor-validation a:active, .scm-editor-validation a:hover { color: ${activeLink}; }`);
2196-
}
2197-
});
2198-
21992187
export class SCMViewPane extends ViewPane {
22002188

22012189
private _onDidLayout: Emitter<void>;
@@ -2515,102 +2503,6 @@ export class SCMViewPane extends ViewPane {
25152503

25162504
export const scmProviderSeparatorBorderColor = registerColor('scm.providerBorder', { dark: '#454545', light: '#C8C8C8', hcDark: contrastBorder, hcLight: contrastBorder }, localize('scm.providerBorder', "SCM Provider separator border."));
25172505

2518-
registerThemingParticipant((theme, collector) => {
2519-
const inputBackgroundColor = theme.getColor(inputBackground);
2520-
if (inputBackgroundColor) {
2521-
collector.addRule(`.scm-view .scm-editor-container .monaco-editor-background,
2522-
.scm-view .scm-editor-container .monaco-editor,
2523-
.scm-view .scm-editor-container .monaco-editor .margin
2524-
{ background-color: ${inputBackgroundColor} !important; }`);
2525-
}
2526-
2527-
const selectionBackgroundColor = theme.getColor(selectionBackground) ?? theme.getColor(editorSelectionBackground);
2528-
if (selectionBackgroundColor) {
2529-
collector.addRule(`.scm-view .scm-editor-container .monaco-editor .focused .selected-text { background-color: ${selectionBackgroundColor}; }`);
2530-
}
2531-
2532-
const inputForegroundColor = theme.getColor(inputForeground);
2533-
if (inputForegroundColor) {
2534-
collector.addRule(`.scm-view .scm-editor-container .mtk1 { color: ${inputForegroundColor}; }`);
2535-
}
2536-
2537-
const inputBorderColor = theme.getColor(inputBorder);
2538-
if (inputBorderColor) {
2539-
collector.addRule(`.scm-view .scm-editor-container { outline: 1px solid ${inputBorderColor}; }`);
2540-
}
2541-
2542-
const panelInputBorder = theme.getColor(PANEL_INPUT_BORDER);
2543-
if (panelInputBorder) {
2544-
collector.addRule(`.monaco-workbench .part.panel .scm-view .scm-editor-container { outline: 1px solid ${panelInputBorder}; }`);
2545-
}
2546-
2547-
const buttonBorderColor = theme.getColor(buttonBorder);
2548-
collector.addRule(`.scm-view .button-container .monaco-description-button { height: ${buttonBorderColor ? '32px' : '30px'}; }`);
2549-
2550-
const focusBorderColor = theme.getColor(focusBorder);
2551-
if (focusBorderColor) {
2552-
collector.addRule(`.scm-view .scm-editor-container.synthetic-focus { outline: 1px solid ${focusBorderColor}; }`);
2553-
}
2554-
2555-
const inputPlaceholderForegroundColor = theme.getColor(inputPlaceholderForeground);
2556-
if (inputPlaceholderForegroundColor) {
2557-
collector.addRule(`.scm-view .scm-editor-placeholder { color: ${inputPlaceholderForegroundColor}; }`);
2558-
}
2559-
2560-
const inputValidationInfoBorderColor = theme.getColor(inputValidationInfoBorder);
2561-
if (inputValidationInfoBorderColor) {
2562-
collector.addRule(`.scm-view .scm-editor-container.validation-info { outline: 1px solid ${inputValidationInfoBorderColor} !important; }`);
2563-
collector.addRule(`.scm-editor-validation-container.validation-info { border-color: ${inputValidationInfoBorderColor}; }`);
2564-
}
2565-
2566-
const inputValidationInfoBackgroundColor = theme.getColor(inputValidationInfoBackground);
2567-
if (inputValidationInfoBackgroundColor) {
2568-
collector.addRule(`.scm-editor-validation-container.validation-info { background-color: ${inputValidationInfoBackgroundColor}; }`);
2569-
}
2570-
2571-
const inputValidationInfoForegroundColor = theme.getColor(inputValidationInfoForeground);
2572-
if (inputValidationInfoForegroundColor) {
2573-
collector.addRule(`.scm-editor-validation-container.validation-info { color: ${inputValidationInfoForegroundColor}; }`);
2574-
}
2575-
2576-
const inputValidationWarningBorderColor = theme.getColor(inputValidationWarningBorder);
2577-
if (inputValidationWarningBorderColor) {
2578-
collector.addRule(`.scm-view .scm-editor-container.validation-warning { outline: 1px solid ${inputValidationWarningBorderColor} !important; }`);
2579-
collector.addRule(`.scm-editor-validation-container.validation-warning { border-color: ${inputValidationWarningBorderColor}; }`);
2580-
}
2581-
2582-
const inputValidationWarningBackgroundColor = theme.getColor(inputValidationWarningBackground);
2583-
if (inputValidationWarningBackgroundColor) {
2584-
collector.addRule(`.scm-editor-validation-container.validation-warning { background-color: ${inputValidationWarningBackgroundColor}; }`);
2585-
}
2586-
2587-
const inputValidationWarningForegroundColor = theme.getColor(inputValidationWarningForeground);
2588-
if (inputValidationWarningForegroundColor) {
2589-
collector.addRule(`.scm-editor-validation-container.validation-warning { color: ${inputValidationWarningForegroundColor}; }`);
2590-
}
2591-
2592-
const inputValidationErrorBorderColor = theme.getColor(inputValidationErrorBorder);
2593-
if (inputValidationErrorBorderColor) {
2594-
collector.addRule(`.scm-view .scm-editor-container.validation-error { outline: 1px solid ${inputValidationErrorBorderColor} !important; }`);
2595-
collector.addRule(`.scm-editor-validation-container.validation-error { border-color: ${inputValidationErrorBorderColor}; }`);
2596-
}
2597-
2598-
const inputValidationErrorBackgroundColor = theme.getColor(inputValidationErrorBackground);
2599-
if (inputValidationErrorBackgroundColor) {
2600-
collector.addRule(`.scm-editor-validation-container.validation-error { background-color: ${inputValidationErrorBackgroundColor}; }`);
2601-
}
2602-
2603-
const inputValidationErrorForegroundColor = theme.getColor(inputValidationErrorForeground);
2604-
if (inputValidationErrorForegroundColor) {
2605-
collector.addRule(`.scm-editor-validation-container.validation-error { color: ${inputValidationErrorForegroundColor}; }`);
2606-
}
2607-
2608-
const repositoryStatusActionsBorderColor = theme.getColor(SIDE_BAR_BORDER);
2609-
if (repositoryStatusActionsBorderColor) {
2610-
collector.addRule(`.scm-view .scm-provider > .status > .monaco-action-bar > .actions-container { border-color: ${repositoryStatusActionsBorderColor}; }`);
2611-
}
2612-
});
2613-
26142506
export class SCMActionButton implements IDisposable {
26152507
private button: Button | ButtonWithDescription | ButtonWithDropdown | undefined;
26162508
private readonly disposables = new MutableDisposable<DisposableStore>();

0 commit comments

Comments
 (0)