@opensumi/ide-debug 2.24.4 → 2.24.5

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, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { BasicRecycleTree, CheckBox, IBasicTreeData } from '@opensumi/ide-components';
 import { Badge } from '@opensumi/ide-components';
@@ -13,23 +13,16 @@ 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 { DEBUG_COMMANDS, IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
+import { IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
 import {
   DebugExceptionBreakpoint,
   isDebugBreakpoint,
   isRuntimeBreakpoint,
   getStatus,
   EXCEPTION_BREAKPOINT_URI,
-  BreakpointManager,
 } from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 
@@ -98,19 +91,11 @@ 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,
-            renderLabel: (
-              <BreakpointFileItem
-                label={label}
-                breakpointItems={breakpointItems}
-                title={toURI.toString()}
-              ></BreakpointFileItem>
-            ),
+            label: parent ? parent.relative(toURI)?.toString() || '' : URI.parse(uri).displayName,
             expandable: true,
+            iconClassName: getIcon('file-text'),
             expanded: true,
             children: items.map((item) => ({
               ...item,
@@ -183,114 +168,46 @@ 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 = async () => {
+  const handleBreakpointClick = () => {
     if ((data.breakpoint as ISourceBreakpoint).uri) {
-      await commandService.executeCommand(
+      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(
         EDITOR_COMMANDS.OPEN_RESOURCE.id,
         new URI((data.breakpoint as ISourceBreakpoint).uri),
-        openOptions,
+        options,
       );
-
-      debugBreakpointsService.launchFocusedBreakpoints({
-        uri: new URI((data.breakpoint as ISourceBreakpoint).uri),
-        range: openOptions.range as IRange,
-      });
     }
   };
 
@@ -315,26 +232,11 @@ export const BreakpointItem = ({ data, toggle }: { data: BreakpointItem; toggle:
     };
   }, []);
 
-  const removeBreakpoint = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+  const removeBreakpoint = (event: React.MouseEvent<HTMLAnchorElement, 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
@@ -349,20 +251,11 @@ export const BreakpointItem = ({ data, toggle }: { data: BreakpointItem; toggle:
       </div>
       {isDebugBreakpoint(data.breakpoint) ? (
         <>
-          <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>
+          <a
+            title='删除断点'
+            onClick={(event) => removeBreakpoint(event)}
+            className={cls(styles.debug_remove_breakpoints_icon, getIcon('close'))}
+          ></a>
           <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,6 +9,7 @@ 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) {
@@ -16,6 +17,10 @@ export class DebugConsoleTreeModel extends TreeModel {
     this.init(root);
   }
 
+  get onWillUpdate(): Event<void> {
+    return this.onWillUpdateEmitter.event;
+  }
+
   /**
    * 判断是否滚动到了底部
    * TODO: //临时处理 by @Ricbet
@@ -35,6 +40,7 @@ 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,6 +251,16 @@ 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,12 +9,17 @@ 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;
     // 分支更新时通知树刷新, 不是立即更新，而是延迟更新，待树稳定后再更新
@@ -25,6 +30,7 @@ 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,6 +252,16 @@ 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,12 +9,17 @@ 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;
     // 分支更新时通知树刷新, 不是立即更新，而是延迟更新，待树稳定后再更新
@@ -25,6 +30,7 @@ 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,6 +225,16 @@ 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,12 +25,6 @@ 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,5 +79,3 @@ 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);