feat: support flashing prompt for focus breakpoints in the editor

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 @@
+@sumi_top_stack_frame_line_color: #ffff6673;
+@dark_sumi_top_stack_frame_line_color: #ffff0033;
+@sumi_debug_focused_stack_frame_line_color: #cee7ce73;
+@dark_sumi_debug_focused_stack_frame_line_color: #7abd7a4d;
+@dark_sumi_debug_top_stack_frame_exception_line_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: @sumi_top_stack_frame_line_color;
 }
 
 .monaco-editor.vs-dark .view-overlays .sumi-debug-top-stack-frame-line {
-  background: #ffff0033;
+  background-color: @dark_sumi_top_stack_frame_line_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: @sumi_top_stack_frame_line_color;
+}
+
+.monaco-editor.vs-dark .view-overlays .sumi-focus-breakpoints-stack-frame-line {
+  background-color: @dark_sumi_top_stack_frame_line_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: @sumi_debug_focused_stack_frame_line_color;
 }
 
 .monaco-editor.vs-dark .view-overlays .sumi-debug-focused-stack-frame-line {
-  background: #7abd7a4d;
+  background-color: @dark_sumi_debug_focused_stack_frame_line_color;
 }
 
 .monaco-editor.vs-dark .view-overlays .sumi-debug-top-stack-frame-exception-line {
-  background-color: #6c2022;
+  background-color: @dark_sumi_debug_top_stack_frame_exception_line_color;
 }
 
 .inline-breakpoint-widget.codicon {

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

@@ -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;
 
@@ -115,13 +119,32 @@ export class DebugModel implements IDebugModel {
 
   async init() {
     const model = this.editor.getModel()!;
+    let timeOut: NodeJS.Timer;
     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 }) => {
+        this.renderFrames([
+          {
+            options: options.FOCUS_BREAKPOINTS_STACK_FRAME_DECORATION,
+            range,
+          },
+        ]);
+
+        if (timeOut) {
+          clearTimeout(timeOut);
+        }
+
+        timeOut = global.setTimeout(() => {
+          this.renderFrames();
+          clearTimeout(timeOut);
+        }, 300);
+      }),
       this.editor.getModel()!.onDidChangeContent(() => this.updateBreakpoints()),
       this.editor.onDidChangeModel(() => {
         this.closeBreakpointView();
@@ -156,14 +179,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,
+      });
     }
   };