feat: support flashing prompt for focus breakpoints in the editor

packages/core-browser/src/core-preferences.ts

@@ -154,6 +154,11 @@ export const corePreferenceSchema: PreferenceSchema = {
       type: 'boolean',
       default: true,
     },
+    'debug.breakpoint.editorHint': {
+      type: 'boolean',
+      default: true,
+      description: '%preference.debug.breakpoint.editorHint%',
+    },
     'debug.toolbar.top': {
       type: 'number',
       default: 0,
@@ -299,6 +304,7 @@ export interface CoreConfiguration {
   'explorer.confirmMove': boolean;
   'explorer.compactFolders': boolean;
   'debug.toolbar.float': boolean;
+  'debug.breakpoint.editorHint': boolean;
   'debug.toolbar.top': number;
   'debug.toolbar.height': number;
   'files.watcherExclude': { [key: string]: boolean };

packages/debug/__tests__/browser/editor/debug-model.test.ts

@@ -127,7 +127,7 @@ describe('Debug Model', () => {
 
   it('debugModel should be init success', () => {
     expect(mockEditor.onKeyDown).toBeCalledTimes(1);
-    expect(mockEditor.getModel).toBeCalledTimes(4);
+    expect(mockEditor.getModel).toBeCalledTimes(1);
     expect(mockBreakpointManager.onDidChange).toBeCalledTimes(1);
   });
 

packages/debug/src/browser/debug-style.less

@@ -1,3 +1,9 @@
+@top_stack_frame_line_bg_color: #ffff6673;
+@dark_top_stack_frame_line_bg_color: #ffff0033;
+@focused_stack_frame_line_bg_color: #cee7ce73;
+@dark_focused_stack_frame_line_bg_color: #7abd7a4d;
+@dark_exception_line_bg_color: #6c2022;
+
 .sumi-breakpoint-icon-size {
   background-size: 16px 16px;
   cursor: pointer;
@@ -73,11 +79,34 @@
 }
 
 .monaco-editor .view-overlays .sumi-debug-top-stack-frame-line {
-  background: #ffff6673;
+  background-color: @top_stack_frame_line_bg_color;
 }
 
 .monaco-editor.vs-dark .view-overlays .sumi-debug-top-stack-frame-line {
-  background: #ffff0033;
+  background-color: @dark_top_stack_frame_line_bg_color;
+}
+
+@keyframes slide-out {
+  100% {
+    background-color: transparent;
+  }
+}
+
+.monaco-editor .view-overlays .sumi-focus-breakpoints-stack-frame-line,
+.monaco-editor.vs-dark .view-overlays .sumi-focus-breakpoints-stack-frame-line {
+  animation: slide-out 0.3s;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in;
+  animation-fill-mode: forwards;
+  -webkit-animation-fill-mode: forwards;
+}
+
+.monaco-editor .view-overlays .sumi-focus-breakpoints-stack-frame-line {
+  background-color: @top_stack_frame_line_bg_color;
+}
+
+.monaco-editor.vs-dark .view-overlays .sumi-focus-breakpoints-stack-frame-line {
+  background-color: @dark_top_stack_frame_line_bg_color;
 }
 
 .monaco-editor .sumi-debug-focused-stack-frame {
@@ -91,15 +120,15 @@
 }
 
 .monaco-editor .view-overlays .sumi-debug-focused-stack-frame-line {
-  background: #cee7ce73;
+  background-color: @focused_stack_frame_line_bg_color;
 }
 
 .monaco-editor.vs-dark .view-overlays .sumi-debug-focused-stack-frame-line {
-  background: #7abd7a4d;
+  background-color: @dark_focused_stack_frame_line_bg_color;
 }
 
 .monaco-editor.vs-dark .view-overlays .sumi-debug-top-stack-frame-exception-line {
-  background-color: #6c2022;
+  background-color: @dark_exception_line_bg_color;
 }
 
 .inline-breakpoint-widget.codicon {

packages/debug/src/browser/editor/debug-model.ts

@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce';
 
 import { Injector, Injectable, Autowired } from '@opensumi/di';
-import { DomListener, IContextKeyService, IReporterService } from '@opensumi/ide-core-browser';
+import { DomListener, IContextKeyService, IReporterService, PreferenceService } from '@opensumi/ide-core-browser';
 import {
   ICtxMenuRenderer,
   generateMergedCtxMenu,
@@ -26,6 +26,7 @@ import { BreakpointManager } from '../breakpoint';
 import { DebugBreakpoint, isDebugBreakpoint } from '../breakpoint';
 import { DebugDecorator } from '../breakpoint/breakpoint-decoration';
 import { DebugSessionManager } from '../debug-session-manager';
+import { DebugBreakpointsService } from '../view/breakpoints/debug-breakpoints.service';
 
 import { DebugBreakpointWidget } from './debug-breakpoint-widget';
 import { DebugHoverWidget } from './debug-hover-widget';
@@ -47,6 +48,9 @@ export class DebugModel implements IDebugModel {
   @Autowired(IDebugSessionManager)
   private debugSessionManager: DebugSessionManager;
 
+  @Autowired(DebugBreakpointsService)
+  private debugBreakpointsService: DebugBreakpointsService;
+
   @Autowired(BreakpointManager)
   private breakpointManager: BreakpointManager;
 
@@ -62,6 +66,9 @@ export class DebugModel implements IDebugModel {
   @Autowired(IReporterService)
   private readonly reporterService: IReporterService;
 
+  @Autowired(PreferenceService)
+  private readonly preferenceService: PreferenceService;
+
   protected frameDecorations: string[] = [];
   protected topFrameRange: monaco.Range | undefined;
 
@@ -115,13 +122,38 @@ export class DebugModel implements IDebugModel {
 
   async init() {
     const model = this.editor.getModel()!;
+    let timmer: number | undefined;
     this._uri = new URI(model.uri.toString());
     this.decorator = new DebugDecorator();
+
     this.toDispose.pushAll([
       this.breakpointWidget,
       this.editor.onKeyDown(() => this.debugHoverWidget.hide({ immediate: false })),
       this.editor.onDidChangeModelContent(() => this.renderFrames()),
       this.debugSessionManager.onDidChange(() => this.renderFrames()),
+      this.debugBreakpointsService.onDidFocusedBreakpoints(({ range }) => {
+        const enableHint = this.preferenceService.getValid('debug.breakpoint.editorHint', true);
+
+        if (!enableHint) {
+          return;
+        }
+
+        this.renderFrames([
+          {
+            options: options.FOCUS_BREAKPOINTS_STACK_FRAME_DECORATION,
+            range,
+          },
+        ]);
+
+        if (timmer) {
+          clearTimeout(timmer);
+        }
+
+        timmer = window.setTimeout(() => {
+          this.renderFrames();
+          clearTimeout(timmer);
+        }, 300);
+      }),
       this.editor.getModel()!.onDidChangeContent(() => this.updateBreakpoints()),
       this.editor.onDidChangeModel(() => {
         this.closeBreakpointView();
@@ -156,14 +188,14 @@ export class DebugModel implements IDebugModel {
    * @type {*}
    * @memberof DebugModel
    */
-  protected readonly renderFrames: any = debounce(() => {
+  protected readonly renderFrames: any = debounce((inflowDecorations: monaco.editor.IModelDeltaDecoration[] = []) => {
     if (this.toDispose.disposed) {
       return;
     }
     if (this.editor.getModel()?.uri.toString() !== this._uri.toString()) {
       return;
     }
-    const decorations = this.createFrameDecorations();
+    const decorations = this.createFrameDecorations().concat(inflowDecorations);
     this.frameDecorations = this.deltaDecorations(this.frameDecorations, decorations);
   }, 100);
 

packages/debug/src/browser/editor/debug-styles.ts

@@ -28,6 +28,13 @@ export const TOP_STACK_FRAME_DECORATION: monaco.editor.IModelDecorationOptions =
   stickiness: STICKINESS,
 };
 
+export const FOCUS_BREAKPOINTS_STACK_FRAME_DECORATION: monaco.editor.IModelDecorationOptions = {
+  description: 'focus-breakpoints-stack-frame-line',
+  isWholeLine: true,
+  className: 'sumi-focus-breakpoints-stack-frame-line',
+  stickiness: STICKINESS,
+};
+
 export const TOP_STACK_FRAME_EXCEPTION_DECORATION: monaco.editor.IModelDecorationOptions = {
   description: 'debug-top-stack-frame-exception-line',
   isWholeLine: true,

packages/debug/src/browser/view/breakpoints/debug-breakpoints.service.ts

@@ -10,6 +10,7 @@ import {
   Schemes,
   Emitter,
   Event,
+  IRange,
 } from '@opensumi/ide-core-browser';
 import { LabelService } from '@opensumi/ide-core-browser/lib/services';
 import { ICodeEditor, EditorCollectionService, getSimpleEditorOptions } from '@opensumi/ide-editor';
@@ -66,6 +67,9 @@ export class DebugBreakpointsService extends WithEventBus {
   readonly onDidChangeBreakpointsTreeNode: Event<Map<string, BreakpointsTreeNode[]>> =
     this._onDidChangeBreakpointsTreeNode.event;
 
+  private readonly _onDidFocusedBreakpoints = new Emitter<{ uri: URI; range: IRange }>();
+  readonly onDidFocusedBreakpoints: Event<{ uri: URI; range: IRange }> = this._onDidFocusedBreakpoints.event;
+
   private _inputEditor: ICodeEditor;
 
   public get inputEditor(): ICodeEditor {
@@ -87,6 +91,10 @@ export class DebugBreakpointsService extends WithEventBus {
     this.init();
   }
 
+  public launchFocusedBreakpoints(data: { uri: URI; range: IRange }): void {
+    this._onDidFocusedBreakpoints.fire(data);
+  }
+
   async init() {
     await this.updateRoots();
     this.workspaceService.onWorkspaceChanged(async () => {

packages/debug/src/browser/view/breakpoints/debug-breakpoints.view.tsx

@@ -14,7 +14,9 @@ import {
   ViewState,
   Event,
   isUndefined,
+  IRange,
 } from '@opensumi/ide-core-browser';
+import { IResourceOpenOptions } from '@opensumi/ide-editor';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
 
 import { IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
@@ -159,32 +161,39 @@ export const BreakpointItem = ({
     setEnabled(!enabled);
   };
 
-  const handleBreakpointClick = () => {
+  const handleBreakpointClick = async () => {
     if ((data.breakpoint as ISourceBreakpoint).uri) {
-      const options = {
+      const options: IResourceOpenOptions = {
         preview: true,
         focus: true,
       };
       if (status) {
-        options['range'] = {
+        options.range = {
           startColumn: status.column || 0,
           endColumn: status.column || 0,
           startLineNumber: status.line,
           endLineNumber: status.line,
         };
       } else {
-        options['range'] = {
-          startColumn: (data.breakpoint as IDebugBreakpoint).raw.column || 0,
-          endColumn: (data.breakpoint as IDebugBreakpoint).raw.column || 0,
-          startLineNumber: (data.breakpoint as IDebugBreakpoint).raw.line,
-          endLineNumber: (data.breakpoint as IDebugBreakpoint).raw.line,
+        const { raw } = data.breakpoint as IDebugBreakpoint;
+        options.range = {
+          startColumn: raw.column || 0,
+          endColumn: raw.column || 0,
+          startLineNumber: raw.line,
+          endLineNumber: raw.line,
         };
       }
-      commandService.executeCommand(
+
+      await commandService.executeCommand(
         EDITOR_COMMANDS.OPEN_RESOURCE.id,
         new URI((data.breakpoint as ISourceBreakpoint).uri),
         options,
       );
+
+      debugBreakpointsService.launchFocusedBreakpoints({
+        uri: new URI((data.breakpoint as ISourceBreakpoint).uri),
+        range: options.range as IRange,
+      });
     }
   };
 

packages/i18n/src/common/en-US.lang.ts

@@ -518,6 +518,8 @@ export const localizationBundle = {
     'preference.debug.console.filter.mode.matcher': 'matcher',
     'preference.debug.console.wordWrap': 'Controls if the lines should wrap in the debug console.',
     '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.',
 
     // workbench
     'preference.workbench.refactoringChanges.showPreviewStrategy':

packages/i18n/src/common/zh-CN.lang.ts

@@ -402,6 +402,9 @@ export const localizationBundle = {
     'preference.explorer.fileTree.indent.title': '资源管理器：文件树子节点缩进',
     'preference.explorer.fileTree.baseIndent.title': '资源管理器：文件树基础缩进',
     'preference.debug.toolbar.float.title': '运行与调试：浮层模式',
+    'preference.debug.breakpoint.editorHint.title': '控制是否开启编辑器断点闪烁提示',
+    'preference.debug.breakpoint.editorHint': '启用后，点击断点列表跳转到编辑器时，会有背景色闪烁提示',
+
     'preference.debug.console.filter.mode': '调试控制台筛选器模式',
     'preference.debug.console.filter.mode.filter': '过滤模式',
     'preference.debug.console.filter.mode.matcher': '匹配模式',

packages/preferences/src/browser/preference-settings.service.ts

@@ -755,6 +755,7 @@ export const defaultSettingSections: {
         { id: 'debug.console.wordWrap', localized: 'preference.debug.console.wordWrap' },
         { 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' },
       ],
     },
   ],

packages/search/src/browser/search.view.tsx

@@ -180,8 +180,9 @@ export const Search = memo(({ viewState }: PropsWithChildren<{ viewState: ViewSt
 
   const focusSearchInput = useCallback(
     (value: string) => {
-      searchInputRef.current?.focus();
       setSearch(value);
+      searchInputRef.current?.focus();
+      searchInputRef.current?.select();
     },
     [searchInputRef.current, search],
   );