@opensumi/ide-debug 2.24.3 → 2.24.4

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

@@ -1,6 +1,6 @@
 import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { BasicRecycleTree, CheckBox, IBasicTreeData } from '@opensumi/ide-components';
 import { Badge } from '@opensumi/ide-components';
@@ -13,16 +13,23 @@ import {
   Disposable,
   ViewState,
   Event,
+  isUndefined,
+  IRange,
+  localize,
 } from '@opensumi/ide-core-browser';
+import { getExternalIcon } from '@opensumi/ide-core-browser';
+import { IResourceOpenOptions } from '@opensumi/ide-editor';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
 
-import { IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
+import { DEBUG_COMMANDS, IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
 import {
   DebugExceptionBreakpoint,
   isDebugBreakpoint,
   isRuntimeBreakpoint,
   getStatus,
   EXCEPTION_BREAKPOINT_URI,
+  BreakpointManager,
 } from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 
@@ -91,11 +98,19 @@ export const DebugBreakpointView = observer(({ viewState }: React.PropsWithChild
         } else {
           const toURI = URI.parse(uri);
           const parent = roots.filter((root) => root.isEqualOrParent(toURI))[0];
+          const label = parent ? parent.relative(toURI)?.toString() || '' : URI.parse(uri).displayName;
+          const breakpointItems = items.map((item) => item.breakpoint as IDebugBreakpoint);
 
           breakpointTreeData.push({
-            label: parent ? parent.relative(toURI)?.toString() || '' : URI.parse(uri).displayName,
+            label,
+            renderLabel: (
+              <BreakpointFileItem
+                label={label}
+                breakpointItems={breakpointItems}
+                title={toURI.toString()}
+              ></BreakpointFileItem>
+            ),
             expandable: true,
-            iconClassName: getIcon('file-text'),
             expanded: true,
             children: items.map((item) => ({
               ...item,
@@ -168,46 +183,114 @@ export const DebugBreakpointView = observer(({ viewState }: React.PropsWithChild
   );
 });
 
+interface BreakpointFileItemProps {
+  label: string;
+  breakpointItems: IDebugBreakpoint[];
+  title?: string;
+}
+
+export const BreakpointFileItem = ({ label, title, breakpointItems }: BreakpointFileItemProps) => {
+  const debugBreakpointsService: DebugBreakpointsService = useInjectable(DebugBreakpointsService);
+
+  /**
+   * 只要断点列表有一个是启用的，那么就认为是启用状态
+   */
+  const defaultEnabled = useMemo(() => breakpointItems.some((item) => item.enabled), [breakpointItems]);
+  const [enabled, setEnabled] = React.useState<boolean>(defaultEnabled);
+
+  const handleCheckBoxChange = useCallback(
+    (preEnabled: boolean) => {
+      const matchBreakpoints = breakpointItems.filter((item) => item.enabled === preEnabled);
+      matchBreakpoints.forEach((breakpoint) => {
+        debugBreakpointsService.toggleBreakpointEnable(breakpoint);
+      });
+      setEnabled(!enabled);
+    },
+    [enabled],
+  );
+
+  const removeBreakpoint = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    breakpointItems.forEach((breakpoint) => {
+      debugBreakpointsService.delBreakpoint(breakpoint);
+    });
+  }, []);
+
+  return (
+    <div className={styles.debug_breakpoints_file_item}>
+      <div className={styles.file_item_control}>
+        <CheckBox
+          className={styles.file_item_checkbox}
+          onChange={() => handleCheckBoxChange(enabled)}
+          checked={enabled}
+        ></CheckBox>
+        <i className={cls(getIcon('file-text'), styles.file_item_icon)}></i>
+        <span title={title}>{label}</span>
+      </div>
+      <div className={styles.file_item_control_right}>
+        <i className={cls(getIcon('close'), styles.close_icon)} onClick={(event) => removeBreakpoint(event)}></i>
+      </div>
+    </div>
+  );
+};
+
 export const BreakpointItem = ({ data, toggle }: { data: BreakpointItem; toggle: () => void }) => {
   const defaultValue = isDebugBreakpoint(data.breakpoint) ? data.breakpoint.enabled : !!data.breakpoint.default;
   const manager = useInjectable<DebugSessionManager>(IDebugSessionManager);
+  const breakpointManager = useInjectable<BreakpointManager>(BreakpointManager);
   const commandService = useInjectable<CommandService>(CommandService);
   const debugBreakpointsService = useInjectable<DebugBreakpointsService>(DebugBreakpointsService);
   const [enabled, setEnabled] = React.useState<boolean>(defaultValue);
   const [status, setStatus] = React.useState<DebugProtocol.Breakpoint | false | undefined>(undefined);
   const [description, setDescription] = React.useState<string>(data.description);
 
+  const openOptions = useMemo(() => {
+    const options: IResourceOpenOptions = {
+      preview: true,
+      focus: true,
+    };
+
+    if (!isDebugBreakpoint(data.breakpoint)) {
+      return options;
+    }
+
+    if (status) {
+      options.range = {
+        startColumn: status.column || 0,
+        endColumn: status.column || 0,
+        startLineNumber: status.line,
+        endLineNumber: status.line,
+      };
+    } else {
+      const { raw } = data.breakpoint as IDebugBreakpoint;
+      options.range = {
+        startColumn: raw.column || 0,
+        endColumn: raw.column || 0,
+        startLineNumber: raw.line,
+        endLineNumber: raw.line,
+      };
+    }
+
+    return options;
+  }, [status, data.breakpoint]);
+
   const handleBreakpointChange = () => {
     toggle();
     setEnabled(!enabled);
   };
 
-  const handleBreakpointClick = () => {
+  const handleBreakpointClick = async () => {
     if ((data.breakpoint as ISourceBreakpoint).uri) {
-      const options = {
-        preview: true,
-        focus: true,
-      };
-      if (status) {
-        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,
-        };
-      }
-      commandService.executeCommand(
+      await commandService.executeCommand(
         EDITOR_COMMANDS.OPEN_RESOURCE.id,
         new URI((data.breakpoint as ISourceBreakpoint).uri),
-        options,
+        openOptions,
       );
+
+      debugBreakpointsService.launchFocusedBreakpoints({
+        uri: new URI((data.breakpoint as ISourceBreakpoint).uri),
+        range: openOptions.range as IRange,
+      });
     }
   };
 
@@ -232,11 +315,26 @@ export const BreakpointItem = ({ data, toggle }: { data: BreakpointItem; toggle:
     };
   }, []);
 
-  const removeBreakpoint = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+  const removeBreakpoint = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
     event.stopPropagation();
     debugBreakpointsService.delBreakpoint(data.breakpoint as IDebugBreakpoint);
   };
 
+  const editBreakpoint = async (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    event.stopPropagation();
+
+    await commandService.executeCommand(
+      EDITOR_COMMANDS.OPEN_RESOURCE.id,
+      new URI((data.breakpoint as ISourceBreakpoint).uri),
+      openOptions,
+    );
+
+    const { range } = openOptions;
+
+    const position = new monaco.Position(range?.startLineNumber || 1, range?.startColumn || 1);
+    await commandService.executeCommand(DEBUG_COMMANDS.EDIT_BREAKPOINT.id, position);
+  };
+
   return (
     <div className={cls(styles.debug_breakpoints_item)}>
       <CheckBox
@@ -251,11 +349,20 @@ export const BreakpointItem = ({ data, toggle }: { data: BreakpointItem; toggle:
       </div>
       {isDebugBreakpoint(data.breakpoint) ? (
         <>
-          <a
-            title='删除断点'
-            onClick={(event) => removeBreakpoint(event)}
-            className={cls(styles.debug_remove_breakpoints_icon, getIcon('close'))}
-          ></a>
+          <div className={styles.debug_breakpoints_item_control}>
+            {openOptions.range && (
+              <i
+                title={localize('debug.menu.edit.breakpoint')}
+                onClick={(event) => editBreakpoint(event)}
+                className={cls(styles.debug_edit_breakpoints_icon, getExternalIcon('edit'))}
+              ></i>
+            )}
+            <i
+              title={localize('debug.menu.delete.breakpoint')}
+              onClick={(event) => removeBreakpoint(event)}
+              className={cls(styles.debug_remove_breakpoints_icon, getIcon('close'))}
+            ></i>
+          </div>
           <Badge className={styles.debug_breakpoints_badge}>
             {(data.breakpoint as IDebugBreakpoint).raw.line}
             {!!data.breakpoint.raw.column && `:${data.breakpoint.raw.column}`}

package/src/browser/view/console/debug-console-model.ts

@@ -9,7 +9,6 @@ export class DebugConsoleTreeModel extends TreeModel {
   static DEFAULT_FLUSH_DELAY = 100;
 
   private flushDispatchChangeDelayer = new ThrottledDelayer<void>(DebugConsoleTreeModel.DEFAULT_FLUSH_DELAY);
-  private onWillUpdateEmitter: Emitter<void> = new Emitter();
   private _tempScrollOffset = 0;
 
   constructor(@Optional() root: ExpressionContainer) {
@@ -17,10 +16,6 @@ export class DebugConsoleTreeModel extends TreeModel {
     this.init(root);
   }
 
-  get onWillUpdate(): Event<void> {
-    return this.onWillUpdateEmitter.event;
-  }
-
   /**
    * 判断是否滚动到了底部
    * TODO: //临时处理 by @Ricbet
@@ -40,7 +35,6 @@ export class DebugConsoleTreeModel extends TreeModel {
         this.flushDispatchChangeDelayer.cancel();
       }
       this.flushDispatchChangeDelayer.trigger(async () => {
-        await this.onWillUpdateEmitter.fireAndAwait();
         this.dispatchChange();
       });
     });

package/src/browser/view/console/debug-console-tree.model.service.ts

@@ -251,16 +251,6 @@ export class DebugConsoleModelService implements IDebugConsoleModelService {
         this.loadingDecoration.removeTarget(target);
       }),
     );
-    this.treeModelDisposableCollection.push(
-      this.treeModel.onWillUpdate(() => {
-        // 更新树前更新下选中节点
-        if (this.selectedNodes.length !== 0) {
-          // 仅处理一下单选情况
-          const node = this.treeModel?.root.getTreeNodeByPath(this.selectedNodes[0].path);
-          this.selectedDecoration.addTarget(node as ExpressionNode);
-        }
-      }),
-    );
   }
 
   async initTreeModel(session?: DebugSession, force?: boolean) {

package/src/browser/view/variables/debug-variables-model.ts

@@ -9,17 +9,12 @@ export class DebugVariablesModel extends TreeModel {
   static DEFAULT_FLUSH_DELAY = 100;
 
   private flushDispatchChangeDelayer = new ThrottledDelayer<void>(DebugVariablesModel.DEFAULT_FLUSH_DELAY);
-  private onWillUpdateEmitter: Emitter<void> = new Emitter();
 
   constructor(@Optional() root: ExpressionContainer) {
     super();
     this.init(root);
   }
 
-  get onWillUpdate(): Event<void> {
-    return this.onWillUpdateEmitter.event;
-  }
-
   init(root: CompositeTreeNode) {
     this.root = root;
     // 分支更新时通知树刷新, 不是立即更新，而是延迟更新，待树稳定后再更新
@@ -30,7 +25,6 @@ export class DebugVariablesModel extends TreeModel {
         this.flushDispatchChangeDelayer.cancel();
       }
       this.flushDispatchChangeDelayer.trigger(async () => {
-        await this.onWillUpdateEmitter.fireAndAwait();
         this.dispatchChange();
       });
     });

package/src/browser/view/variables/debug-variables-tree.model.service.ts

@@ -252,16 +252,6 @@ export class DebugVariablesModelService {
         this.loadingDecoration.removeTarget(target);
       }),
     );
-    this.disposableCollection.push(
-      this.treeModel.onWillUpdate(() => {
-        // 更新树前更新下选中节点
-        if (this.selectedNodes.length !== 0) {
-          // 仅处理一下单选情况
-          const node = this.treeModel?.root.getTreeNodeByPath(this.selectedNodes[0].path);
-          this.selectedDecoration.addTarget(node as ExpressionNode);
-        }
-      }),
-    );
   }
 
   async initTreeModel(session?: DebugSession) {

package/src/browser/view/watch/debug-watch-model.ts

@@ -9,17 +9,12 @@ export class DebugWatchModel extends TreeModel {
   static DEFAULT_FLUSH_DELAY = 100;
 
   private flushDispatchChangeDelayer = new ThrottledDelayer<void>(DebugWatchModel.DEFAULT_FLUSH_DELAY);
-  private onWillUpdateEmitter: Emitter<void> = new Emitter();
 
   constructor(@Optional() root: ExpressionContainer) {
     super();
     this.init(root);
   }
 
-  get onWillUpdate(): Event<void> {
-    return this.onWillUpdateEmitter.event;
-  }
-
   init(root: CompositeTreeNode) {
     this.root = root;
     // 分支更新时通知树刷新, 不是立即更新，而是延迟更新，待树稳定后再更新
@@ -30,7 +25,6 @@ export class DebugWatchModel extends TreeModel {
         this.flushDispatchChangeDelayer.cancel();
       }
       this.flushDispatchChangeDelayer.trigger(async () => {
-        await this.onWillUpdateEmitter.fireAndAwait();
         this.dispatchChange();
       });
     });

package/src/browser/view/watch/debug-watch-tree.model.service.ts

@@ -225,16 +225,6 @@ export class DebugWatchModelService {
         this.loadingDecoration.removeTarget(target);
       }),
     );
-    this.disposableCollection.push(
-      this.treeModel.onWillUpdate(() => {
-        // 更新树前更新下选中节点
-        if (this.selectedNodes.length !== 0) {
-          // 仅处理一下单选情况
-          const node = this.treeModel?.root.getTreeNodeByPath(this.selectedNodes[0].path);
-          this.selectedDecoration.addTarget(node as ExpressionNode);
-        }
-      }),
-    );
   }
 
   async initTreeModel() {

package/src/common/commands.ts

@@ -25,6 +25,12 @@ export namespace DEBUG_COMMANDS {
   export const TOGGLE_BREAKPOINTS: Command = {
     id: 'debug.breakpoints.toggle',
   };
+  export const ACTIVE_BREAKPOINTS: Command = {
+    id: 'debug.breakpoints.active',
+  };
+  export const DEACTIVE_BREAKPOINTS: Command = {
+    id: 'debug.breakpoints.deactive',
+  };
   export const START: Command = {
     id: 'debug.start',
   };

package/src/common/constants.ts

@@ -79,3 +79,5 @@ export const CONTEXT_EXCEPTION_WIDGET_VISIBLE = new RawContextKey<boolean>('exce
 export const CONTEXT_MULTI_SESSION_REPL = new RawContextKey<boolean>('multiSessionRepl', false);
 export const CONTEXT_MULTI_SESSION_DEBUG = new RawContextKey<boolean>('multiSessionDebug', false);
 export const CONTEXT_CAN_VIEW_MEMORY = new RawContextKey<boolean>('canViewMemory', undefined);
+
+export const CONTEXT_ACTIVE_BREAKPOINTS = new RawContextKey<boolean>('activateBreakpoints', true);