Skip to content

Commit

Permalink
feat: implement colour contributions for debug REPL
Browse files Browse the repository at this point in the history
  • Loading branch information
@robertrossmann
robertrossmann committed May 17, 2020
1 parent 957534c commit e3a36fa
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 31 deletions.
58 changes: 57 additions & 1 deletion src/vs/workbench/contrib/debug/browser/debug.contribution.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import 'vs/css!./media/debug.contribution';
import 'vs/css!./media/debugHover';
import * as nls from 'vs/nls';
import { Color } from 'vs/base/common/color';
import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
import { SyncActionDescriptor, MenuRegistry, MenuId } from 'vs/platform/actions/common/actions';
import { Registry } from 'vs/platform/registry/common/platform';
Expand Down Expand Up @@ -44,7 +45,7 @@ import { ClearReplAction, Repl } from 'vs/workbench/contrib/debug/browser/repl';
import { DebugContentProvider } from 'vs/workbench/contrib/debug/common/debugContentProvider';
import { WelcomeView } from 'vs/workbench/contrib/debug/browser/welcomeView';
import { ThemeIcon, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { registerColor, foreground, badgeBackground, badgeForeground, listDeemphasizedForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { registerColor, foreground, badgeBackground, badgeForeground, listDeemphasizedForeground, contrastBorder, inputBorder, editorWarningForeground, errorForeground, editorInfoForeground } from 'vs/platform/theme/common/colorRegistry';
import { DebugViewPaneContainer, OpenDebugConsoleAction } from 'vs/workbench/contrib/debug/browser/debugViewlet';
import { registerEditorContribution } from 'vs/editor/browser/editorExtensions';
import { CallStackEditorContribution } from 'vs/workbench/contrib/debug/browser/callStackEditorContribution';
Expand Down Expand Up @@ -605,6 +606,12 @@ const debugViewStateLabelForeground = registerColor('debugView.stateLabelForegro
const debugViewStateLabelBackground = registerColor('debugView.stateLabelBackground', { dark: '#88888844', light: '#88888844', hc: '#88888844' }, 'Background color for a label in the CALL STACK view showing the current session\'s or thread\'s state.');
const debugViewValueChangedHighlight = registerColor('debugView.valueChangedHighlight', { dark: '#569CD6', light: '#569CD6', hc: '#569CD6' }, 'Color used to highlight value changes in the debug views (ie. in the Variables view).');

const debugConsoleInfoForeground = registerColor('debugConsole.infoForeground', { dark: editorInfoForeground, light: editorInfoForeground, hc: foreground }, 'Foreground color for info messages in debug REPL console.');
const debugConsoleWarningForeground = registerColor('debugConsole.warningForeground', { dark: editorWarningForeground, light: editorWarningForeground, hc: '#008000' }, 'Foreground color for warning messages in debug REPL console.');
const debugConsoleErrorForeground = registerColor('debugConsole.errorForeground', { dark: errorForeground, light: errorForeground, hc: errorForeground }, 'Foreground color for error messages in debug REPL console.');
const debugConsoleSourceForeground = registerColor('debugConsole.sourceForeground', { dark: foreground, light: foreground, hc: foreground }, 'Foreground color for source filenames in debug REPL console.');
const debugConsoleInputIconForeground = registerColor('debugConsoleInputIcon.foreground', { dark: foreground, light: foreground, hc: foreground }, 'Foreground color for debug console input marker icon.');

registerThemingParticipant((theme, collector) => {
// All these colours provide a default value so they will never be undefined, hence the `!`
const badgeBackgroundColor = theme.getColor(badgeBackground)!;
Expand Down Expand Up @@ -714,4 +721,53 @@ registerThemingParticipant((theme, collector) => {
color: ${tokenNumberColor};
}
`);

const debugConsoleInputBorderColor = theme.getColor(inputBorder) || Color.fromHex('#80808060');
const debugConsoleInfoForegroundColor = theme.getColor(debugConsoleInfoForeground)!;
const debugConsoleWarningForegroundColor = theme.getColor(debugConsoleWarningForeground)!;
const debugConsoleErrorForegroundColor = theme.getColor(debugConsoleErrorForeground)!;
const debugConsoleSourceForegroundColor = theme.getColor(debugConsoleSourceForeground)!;
const debugConsoleInputIconForegroundColor = theme.getColor(debugConsoleInputIconForeground)!;

collector.addRule(`
.repl .repl-input-wrapper {
border-top: 1px solid ${debugConsoleInputBorderColor};
}
.monaco-workbench .repl .repl-tree .output .expression .value.info {
color: ${debugConsoleInfoForegroundColor};
}
.monaco-workbench .repl .repl-tree .output .expression .value.warn {
color: ${debugConsoleWarningForegroundColor};
}
.monaco-workbench .repl .repl-tree .output .expression .value.error {
color: ${debugConsoleErrorForegroundColor};
}
.monaco-workbench .repl .repl-tree .output .expression .source {
color: ${debugConsoleSourceForegroundColor};
}
.monaco-workbench .repl .repl-tree .monaco-tl-contents .arrow {
color: ${debugConsoleInputIconForegroundColor};
}
`);

if (!theme.defines(debugConsoleInputIconForeground)) {
collector.addRule(`
.monaco-workbench.vs .repl .repl-tree .monaco-tl-contents .arrow {
opacity: 0.25;
}
.monaco-workbench.vs-dark .repl .repl-tree .monaco-tl-contents .arrow {
opacity: 0.4;
}
.monaco-workbench.hc-black .repl .repl-tree .monaco-tl-contents .arrow {
opacity: 1;
}
`);
}
});
17 changes: 0 additions & 17 deletions src/vs/workbench/contrib/debug/browser/media/repl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,6 @@
.monaco-workbench .repl .repl-tree .monaco-tl-contents .arrow {
position:absolute;
left: 2px;
opacity: 0.25;
}

.monaco-workbench.vs-dark .repl .repl-tree .monaco-tl-contents .arrow {
opacity: 0.4;
}

.monaco-workbench .repl .repl-tree .output.expression.value-and-source .source {
Expand Down Expand Up @@ -88,18 +83,6 @@
font-style: italic;
}

.monaco-workbench.vs .repl .repl-tree .output.expression > .warn {
color: #cd9731;
}

.monaco-workbench.vs-dark .repl .repl-tree .output.expression > .warn {
color: #cd9731;
}

.monaco-workbench.hc-black .repl .repl-tree .output.expression > .warn {
color: #008000;
}

/* ANSI Codes */
.monaco-workbench .repl .repl-tree .output.expression .code-bold { font-weight: bold; }
.monaco-workbench .repl .repl-tree .output.expression .code-italic { font-style: italic; }
Expand Down
15 changes: 2 additions & 13 deletions src/vs/workbench/contrib/debug/browser/repl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

import 'vs/css!./media/repl';
import { URI as uri } from 'vs/base/common/uri';
import { Color } from 'vs/base/common/color';
import { IAction, IActionViewItem, Action } from 'vs/base/common/actions';
import * as dom from 'vs/base/browser/dom';
import * as aria from 'vs/base/browser/ui/aria/aria';
Expand All @@ -21,7 +20,7 @@ import { ServiceCollection } from 'vs/platform/instantiation/common/serviceColle
import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { ICodeEditor, isCodeEditor } from 'vs/editor/browser/editorBrowser';
import { memoize } from 'vs/base/common/decorators';
import { dispose, IDisposable, Disposable } from 'vs/base/common/lifecycle';
Expand All @@ -34,7 +33,7 @@ import { createAndBindHistoryNavigationWidgetScopedContextKeyService } from 'vs/
import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
import { getSimpleEditorOptions, getSimpleCodeEditorWidgetOptions } from 'vs/workbench/contrib/codeEditor/browser/simpleEditorOptions';
import { IDecorationOptions } from 'vs/editor/common/editorCommon';
import { transparent, editorForeground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
import { transparent, editorForeground } from 'vs/platform/theme/common/colorRegistry';
import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService';
import { FocusSessionActionViewItem } from 'vs/workbench/contrib/debug/browser/debugActionViewItems';
import { CompletionContext, CompletionList, CompletionProviderRegistry, CompletionItem, completionKindFromString, CompletionItemKind, CompletionItemInsertTextRule } from 'vs/editor/common/modes';
Expand Down Expand Up @@ -815,13 +814,3 @@ export class ClearReplAction extends Action {
function getReplView(viewsService: IViewsService): Repl | undefined {
return viewsService.getActiveViewWithId(REPL_VIEW_ID) as Repl ?? undefined;
}

registerThemingParticipant((theme, collector) => {
const inputBorderColor = theme.getColor(inputBorder) || Color.fromHex('#80808060');

collector.addRule(`
.repl .repl-input-wrapper {
border-top: 1px solid ${inputBorderColor};
}
`);
});

0 comments on commit e3a36fa

Please sign in to comment.