feat: support showBreakpointsInOverviewRuler

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 };

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,
       },
     };
   }

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':

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': '过滤模式',

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',
+        },
       ],
     },
   ],

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.',
+);