diff --git a/packages/core-browser/src/core-preferences.ts b/packages/core-browser/src/core-preferences.ts index 59e052cadc..c3835687f8 100644 --- a/packages/core-browser/src/core-preferences.ts +++ b/packages/core-browser/src/core-preferences.ts @@ -159,6 +159,11 @@ export const corePreferenceSchema: PreferenceSchema = { default: true, description: '%preference.debug.breakpoint.editorHint%', }, + 'debug.breakpoint.showBreakpointsInOverviewRuler': { + type: 'boolean', + default: false, + description: '%preference.debug.breakpoint.showBreakpointsInOverviewRuler%', + }, 'debug.toolbar.top': { type: 'number', default: 0, @@ -305,6 +310,7 @@ export interface CoreConfiguration { 'explorer.compactFolders': boolean; 'debug.toolbar.float': boolean; 'debug.breakpoint.editorHint': boolean; + 'debug.breakpoint.showBreakpointsInOverviewRuler': boolean; 'debug.toolbar.top': number; 'debug.toolbar.height': number; 'files.watcherExclude': { [key: string]: boolean }; diff --git a/packages/debug/src/browser/editor/debug-model.ts b/packages/debug/src/browser/editor/debug-model.ts index cd96ae66ed..f8043560a8 100644 --- a/packages/debug/src/browser/editor/debug-model.ts +++ b/packages/debug/src/browser/editor/debug-model.ts @@ -10,6 +10,7 @@ import { AbstractMenuService, } from '@opensumi/ide-core-browser/lib/menu/next'; import { URI, DisposableCollection, isOSX, memoize, Disposable, uuid } from '@opensumi/ide-core-common'; +import { IThemeService, debugIconBreakpointForeground } from '@opensumi/ide-theme'; import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api'; import { @@ -69,6 +70,9 @@ export class DebugModel implements IDebugModel { @Autowired(PreferenceService) private readonly preferenceService: PreferenceService; + @Autowired(IThemeService) + public readonly themeService: IThemeService; + protected frameDecorations: string[] = []; protected topFrameRange: monaco.Range | undefined; @@ -541,6 +545,20 @@ export class DebugModel implements IDebugModel { !!session, this.breakpointManager.breakpointsEnabled, ); + const showBreakpointsInOverviewRuler = this.preferenceService.getValid( + 'debug.breakpoint.showBreakpointsInOverviewRuler', + false, + ); + + let overviewRulerDecoration: monaco.editor.IModelDecorationOverviewRulerOptions | null = null; + if (showBreakpointsInOverviewRuler) { + overviewRulerDecoration = { + color: this.themeService.getColor({ + id: debugIconBreakpointForeground, + }), + position: monaco.editor.OverviewRulerLane.Left, + } as monaco.editor.IModelDecorationOverviewRulerOptions; + } return { range, @@ -550,6 +568,7 @@ export class DebugModel implements IDebugModel { glyphMarginHoverMessage: message.map((value) => ({ value })), stickiness: options.STICKINESS, beforeContentClassName: renderInline ? 'debug-breakpoint-placeholder' : undefined, + overviewRuler: overviewRulerDecoration, }, }; } diff --git a/packages/i18n/src/common/en-US.lang.ts b/packages/i18n/src/common/en-US.lang.ts index 29632e40b7..cd0e05c504 100644 --- a/packages/i18n/src/common/en-US.lang.ts +++ b/packages/i18n/src/common/en-US.lang.ts @@ -530,6 +530,8 @@ export const localizationBundle = { 'preference.debug.inline.values': 'Show variable values inline in editor while debugging.', 'preference.debug.breakpoint.editorHint': 'After enabling, there will be a background color blinking prompt when clicking on the breakpoint list to jump to the editor.', + 'preference.debug.breakpoint.showBreakpointsInOverviewRuler': + 'Controls whether breakpoints should be shown in the overview ruler.', // workbench 'preference.workbench.refactoringChanges.showPreviewStrategy': diff --git a/packages/i18n/src/common/zh-CN.lang.ts b/packages/i18n/src/common/zh-CN.lang.ts index da0dda72e3..231e6514d8 100644 --- a/packages/i18n/src/common/zh-CN.lang.ts +++ b/packages/i18n/src/common/zh-CN.lang.ts @@ -411,6 +411,7 @@ export const localizationBundle = { 'preference.debug.toolbar.float.title': '运行与调试:浮层模式', 'preference.debug.breakpoint.editorHint.title': '控制是否开启编辑器断点闪烁提示', 'preference.debug.breakpoint.editorHint': '启用后,点击断点列表跳转到编辑器时,会有背景色闪烁提示', + 'preference.debug.breakpoint.showBreakpointsInOverviewRuler': '控制是否应在概览标尺中显示断点', 'preference.debug.console.filter.mode': '调试控制台筛选器模式', 'preference.debug.console.filter.mode.filter': '过滤模式', diff --git a/packages/preferences/src/browser/preference-settings.service.ts b/packages/preferences/src/browser/preference-settings.service.ts index 7a28b8e601..0aed18ccf4 100644 --- a/packages/preferences/src/browser/preference-settings.service.ts +++ b/packages/preferences/src/browser/preference-settings.service.ts @@ -792,6 +792,10 @@ export const defaultSettingSections: { { id: 'debug.inline.values', localized: 'preference.debug.inline.values' }, { id: 'debug.toolbar.float', localized: 'preference.debug.toolbar.float.title' }, { id: 'debug.breakpoint.editorHint', localized: 'preference.debug.breakpoint.editorHint.title' }, + { + id: 'debug.breakpoint.showBreakpointsInOverviewRuler', + localized: 'preference.debug.breakpoint.showBreakpointsInOverviewRuler', + }, ], }, ], diff --git a/packages/theme/src/common/color-tokens/debug.ts b/packages/theme/src/common/color-tokens/debug.ts index dcca16490f..f0d0fe070a 100644 --- a/packages/theme/src/common/color-tokens/debug.ts +++ b/packages/theme/src/common/color-tokens/debug.ts @@ -101,3 +101,8 @@ export const debugConsoleInputIconForeground = registerColor( { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground }, 'Foreground color for debug console input marker icon.', ); +export const debugIconBreakpointForeground = registerColor( + 'debugIcon.breakpointForeground', + { dark: '#E51400', light: '#E51400', hcDark: '#E51400', hcLight: '#E51400' }, + 'Icon color for breakpoints.', +);