@opensumi/ide-debug 2.23.4-rc-1681355069.0 → 2.23.4

package/src/browser/model/debug-stack-frame.ts

@@ -1,4 +1,4 @@
-import { formatLocalize, IRange } from '@opensumi/ide-core-browser';
+import { IRange } from '@opensumi/ide-core-browser';
 import { IResourceOpenOptions } from '@opensumi/ide-editor';
 import { Range } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/range';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
@@ -9,15 +9,12 @@ import { DebugScope, ExpressionContainer } from '../tree/debug-tree-node.define'
 import { DebugSource } from './debug-source';
 import { DebugThread } from './debug-thread';
 
+
 export class DebugStackFrameData {
   readonly raw: DebugProtocol.StackFrame;
 }
 
 export class DebugStackFrame extends DebugStackFrameData {
-  public static is(frame: any): frame is DebugStackFrame {
-    return !!frame && 'raw' in frame;
-  }
-
   constructor(readonly thread: DebugThread, readonly session: DebugSession) {
     super();
   }
@@ -112,26 +109,3 @@ export class DebugStackFrame extends DebugStackFrameData {
     return scopesContainingRange.length ? scopesContainingRange : nonExpensiveScopes;
   }
 }
-
-export class ShowMoreDebugStackFrame {
-  constructor(
-    // `undefined` 说明已经在末尾
-    public readonly nextFrame: DebugStackFrame | undefined,
-    public readonly frames: DebugStackFrame[],
-    readonly session: DebugSession,
-    readonly origin: string,
-    readonly _open: (showMoreFrame: ShowMoreDebugStackFrame) => void,
-  ) {}
-
-  get name() {
-    return formatLocalize('debug.stack.showMoreAndOrigin', this.frames.length, this.origin);
-  }
-
-  get id(): string {
-    return `${this.session.id}:showMore:${this.nextFrame?.id}`;
-  }
-
-  open = () => {
-    this._open(this);
-  };
-}

package/src/browser/model/debug-thread.ts

@@ -158,12 +158,10 @@ export class DebugThread extends DebugThreadData {
     const result = new Map<number, DebugStackFrame>(this._frames);
     for (const raw of frames) {
       const id = raw.id;
-      if (!this._frames.has(id)) {
-        const frame = new DebugStackFrame(this, this.session);
-        this._frames.set(id, frame);
-        frame.update({ raw });
-        result.set(id, frame);
-      }
+      const frame = this._frames.get(id) || new DebugStackFrame(this, this.session);
+      this._frames.set(id, frame);
+      frame.update({ raw });
+      result.set(id, frame);
     }
     const values = [...result.values()];
     frontEndTime('doUpdateFrames');

package/src/browser/view/breakpoints/debug-breakpoints.module.less

@@ -21,6 +21,8 @@
     pointer-events: none;
   }
   &:hover {
+    background: var(--list-hoverBackground);
+    color: var(--list-hoverForeground);
     .debug_remove_breakpoints_icon {
       display: inline-block;
       pointer-events: all;
@@ -49,7 +51,9 @@
 
 .debug_breakpoints_description {
   display: block;
-  opacity: 0.85;
+  transform: scale(0.95);
+  opacity: 0.7;
+  margin-left: 5px;
   display: inline;
 }
 
@@ -65,7 +69,3 @@
   margin-right: 5px;
   flex: 1;
 }
-
-.debug_breakpoints_item_tree_node {
-  padding-left: 22px !important;
-}

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

@@ -1,16 +1,7 @@
 import { observable, action, runInAction } from 'mobx';
 
 import { Injectable, Autowired } from '@opensumi/di';
-import {
-  URI,
-  WithEventBus,
-  OnEvent,
-  IContextKeyService,
-  IReporterService,
-  Schemes,
-  Emitter,
-  Event,
-} from '@opensumi/ide-core-browser';
+import { URI, WithEventBus, OnEvent, IContextKeyService, IReporterService, Schemes } from '@opensumi/ide-core-browser';
 import { LabelService } from '@opensumi/ide-core-browser/lib/services';
 import { ICodeEditor, EditorCollectionService, getSimpleEditorOptions } from '@opensumi/ide-editor';
 import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser';
@@ -25,12 +16,10 @@ import {
   isDebugExceptionBreakpoint,
   BreakpointManager,
   DebugDecorator,
-  EXCEPTION_BREAKPOINT_URI,
 } from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 import { DebugViewModel } from '../debug-view-model';
 
-import { BreakpointsTreeNode } from './debug-breakpoints-tree.model';
 import { BreakpointItem } from './debug-breakpoints.view';
 
 @Injectable()
@@ -62,17 +51,14 @@ export class DebugBreakpointsService extends WithEventBus {
   @Autowired(IEditorDocumentModelService)
   protected readonly documentService: IEditorDocumentModelService;
 
-  private readonly _onDidChangeBreakpointsTreeNode = new Emitter<Map<string, BreakpointsTreeNode[]>>();
-  readonly onDidChangeBreakpointsTreeNode: Event<Map<string, BreakpointsTreeNode[]>> =
-    this._onDidChangeBreakpointsTreeNode.event;
-
   private _inputEditor: ICodeEditor;
 
   public get inputEditor(): ICodeEditor {
     return this._inputEditor;
   }
 
-  public treeNodeMap: Map<string, BreakpointsTreeNode[]> = new Map();
+  @observable
+  public nodes: BreakpointItem[] = [];
 
   @observable
   public enable: boolean;
@@ -153,72 +139,38 @@ export class DebugBreakpointsService extends WithEventBus {
     }
   }
 
-  extractNodes(item: DebugExceptionBreakpoint | IDebugBreakpoint): BreakpointItem | undefined {
-    if (isDebugBreakpoint(item)) {
-      return {
-        id: item.id,
-        name: '',
-        description: '',
-        onDescriptionChange: Event.None,
-        breakpoint: item,
-      };
-    }
-    if (isDebugExceptionBreakpoint(item)) {
-      return {
-        id: item.filter,
-        name: item.label,
-        onDescriptionChange: Event.None,
-        description: '',
-        breakpoint: item,
-      };
-    }
+  extractNodes(items: (DebugExceptionBreakpoint | IDebugBreakpoint)[]) {
+    const nodes: BreakpointItem[] = [];
+    items.forEach((item) => {
+      if (isDebugBreakpoint(item)) {
+        const uri = URI.parse(item.uri);
+        const parent = this.roots.filter((root) => root.isEqualOrParent(uri))[0];
+        nodes.push({
+          id: item.id,
+          name: uri.displayName,
+          description: parent && parent.relative(uri)!.toString(),
+          breakpoint: item,
+        });
+      }
+      if (isDebugExceptionBreakpoint(item)) {
+        nodes.push({
+          id: item.filter,
+          name: item.label,
+          description: '',
+          breakpoint: item,
+        });
+      }
+    });
+    return nodes;
   }
 
   @action
   private async updateBreakpoints() {
     await this.breakpoints.whenReady;
-    this.treeNodeMap.clear();
-
-    const allBreakpoints = [...this.breakpoints.getExceptionBreakpoints(), ...this.breakpoints.getBreakpoints()];
-
-    allBreakpoints.forEach((item) => {
-      const extractNode = this.extractNodes(item);
-      if (extractNode) {
-        const uri = isDebugBreakpoint(item) ? URI.parse(item.uri) : EXCEPTION_BREAKPOINT_URI;
-        const getTreeNodes = this.treeNodeMap.get(uri.toString()) || [];
-        getTreeNodes.push(new BreakpointsTreeNode(uri, extractNode));
-        this.treeNodeMap.set(uri.toString(), getTreeNodes);
-      }
-    });
-
-    this._onDidChangeBreakpointsTreeNode.fire(this.treeNodeMap);
-  }
-
-  private async getDocumentModelRef(uri: URI) {
-    const document = this.documentService.getModelReference(uri);
-    if (!document) {
-      return this.documentService.createModelReference(uri);
-    }
-    return document;
-  }
-
-  public async refreshBreakpointsInfo() {
-    const treeNodeValues = this.treeNodeMap.values();
-    const allTreeNodes: BreakpointsTreeNode[] = Array.from(treeNodeValues).reduce((acc, cur) => acc.concat(cur), []);
-
-    for await (const node of allTreeNodes) {
-      const { rawData, uri } = node;
-      if (isDebugBreakpoint(rawData.breakpoint)) {
-        const line = rawData.breakpoint.raw.line;
-        const monacoModel = await this.getDocumentModelRef(uri);
-        if (!monacoModel) {
-          return;
-        }
-
-        const getContent = monacoModel.instance.getMonacoModel().getLineContent(line);
-        node.fireDescriptionChange(getContent.trim());
-      }
-    }
+    this.nodes = this.extractNodes([
+      ...this.breakpoints.getExceptionBreakpoints(),
+      ...this.breakpoints.getBreakpoints(),
+    ]);
   }
 
   removeAllBreakpoints() {

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

@@ -1,36 +1,14 @@
 import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React from 'react';
 
-import {
-  BasicRecycleTree,
-  CheckBox,
-  IBasicTreeData,
-  ICompositeTreeNode,
-  ITreeNodeOrCompositeTreeNode,
-} from '@opensumi/ide-components';
-import { Badge } from '@opensumi/ide-components';
-import {
-  useInjectable,
-  CommandService,
-  EDITOR_COMMANDS,
-  URI,
-  getIcon,
-  Disposable,
-  ViewState,
-  Event,
-} from '@opensumi/ide-core-browser';
+import { CheckBox } from '@opensumi/ide-components';
+import { Badge, RecycleList } from '@opensumi/ide-components';
+import { useInjectable, ViewState, CommandService, EDITOR_COMMANDS, URI, getIcon } from '@opensumi/ide-core-browser';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
 
 import { IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
-import {
-  DebugExceptionBreakpoint,
-  isDebugBreakpoint,
-  isRuntimeBreakpoint,
-  getStatus,
-  isDebugExceptionBreakpoint,
-  EXCEPTION_BREAKPOINT_URI,
-} from '../../breakpoint';
+import { DebugExceptionBreakpoint, isDebugBreakpoint, isRuntimeBreakpoint, getStatus } from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 
 import styles from './debug-breakpoints.module.less';
@@ -40,94 +18,29 @@ export interface BreakpointItem {
   name: string;
   id: string;
   description: string;
-  onDescriptionChange: Event<string>;
   breakpoint: IDebugBreakpoint | DebugExceptionBreakpoint;
 }
 
 export const DebugBreakpointView = observer(({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
-  const debugBreakpointsService: DebugBreakpointsService = useInjectable(DebugBreakpointsService);
-  const { enable, toggleBreakpointEnable } = debugBreakpointsService;
-  const [treeData, setTreeData] = useState<IBasicTreeData[]>([]);
-
-  useEffect(() => {
-    const dispose = new Disposable();
-
-    dispose.addDispose(
-      debugBreakpointsService.onDidChangeBreakpointsTreeNode((nodes) => {
-        const { roots } = debugBreakpointsService;
-        const breakpointTreeData: IBasicTreeData[] = [];
-
-        Array.from(nodes.entries()).forEach(([uri, items]) => {
-          const isException = EXCEPTION_BREAKPOINT_URI.toString() === uri;
-
-          if (isException) {
-            items.forEach((item) => {
-              breakpointTreeData.push({
-                label: '',
-                expandable: false,
-                children: [],
-                description: (
-                  <BreakpointItem
-                    toggle={() => toggleBreakpointEnable(item.breakpoint)}
-                    breakpointEnabled={enable}
-                    data={item.rawData}
-                    isDebugMode={debugBreakpointsService.inDebugMode}
-                  ></BreakpointItem>
-                ),
-              });
-            });
-          } else {
-            const toURI = URI.parse(uri);
-            const parent = roots.filter((root) => root.isEqualOrParent(toURI))[0];
-
-            breakpointTreeData.push({
-              label: parent ? parent.relative(toURI)!.toString() : URI.parse(uri).displayName,
-              expandable: true,
-              iconClassName: getIcon('file-text'),
-              expanded: true,
-              children: items.map((item) => ({
-                ...item,
-                label: '',
-                expandable: false,
-                description: (
-                  <BreakpointItem
-                    toggle={() => toggleBreakpointEnable(item.breakpoint)}
-                    breakpointEnabled={enable}
-                    data={item.rawData}
-                    isDebugMode={debugBreakpointsService.inDebugMode}
-                  ></BreakpointItem>
-                ),
-              })),
-            });
-          }
-        });
-
-        setTreeData(breakpointTreeData);
-      }),
-    );
-
-    return () => {
-      dispose.dispose();
-    };
-  }, []);
+  const { nodes, enable, inDebugMode, toggleBreakpointEnable }: DebugBreakpointsService =
+    useInjectable(DebugBreakpointsService);
+  const template = ({ data }: { data: BreakpointItem }) => (
+    <BreakpointItem
+      toggle={() => toggleBreakpointEnable(data.breakpoint)}
+      breakpointEnabled={enable}
+      data={data}
+      isDebugMode={inDebugMode}
+    ></BreakpointItem>
+  );
 
-  useEffect(() => {
-    if (treeData.length > 0) {
-      requestAnimationFrame(() => {
-        debugBreakpointsService.refreshBreakpointsInfo();
-      });
-    }
-  }, [treeData]);
-
-  const getItemClassName = useCallback((item: ICompositeTreeNode) => {
-    if (!item.children) {
-      return styles.debug_breakpoints_item_tree_node;
-    }
-  }, []);
+  const containerStyle = {
+    height: viewState.height,
+    width: viewState.width,
+  } as React.CSSProperties;
 
   return (
     <div className={cls(styles.debug_breakpoints, !enable && styles.debug_breakpoints_disabled)}>
-      <BasicRecycleTree treeData={treeData} height={viewState.height} getItemClassName={getItemClassName} />
+      <RecycleList data={nodes} itemHeight={22} template={template} style={containerStyle} />
     </div>
   );
 });
@@ -149,7 +62,6 @@ export const BreakpointItem = ({
   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 handleBreakpointChange = () => {
     toggle();
@@ -186,8 +98,6 @@ export const BreakpointItem = ({
   };
 
   React.useEffect(() => {
-    const disposable = new Disposable();
-
     const exec = () => {
       if (isDebugBreakpoint(data.breakpoint) && isRuntimeBreakpoint(data.breakpoint)) {
         const status = getStatus(data.breakpoint);
@@ -195,11 +105,9 @@ export const BreakpointItem = ({
       }
     };
 
-    disposable.addDispose(manager.onDidChangeActiveDebugSession(() => exec()));
+    const disposable = manager.onDidChangeActiveDebugSession(() => exec());
     exec();
 
-    disposable.addDispose(data.onDescriptionChange(setDescription));
-
     return () => {
       setStatus(undefined);
       disposable.dispose();
@@ -234,15 +142,13 @@ export const BreakpointItem = ({
     debugBreakpointsService.delBreakpoint(data.breakpoint as IDebugBreakpoint);
   };
 
-  const isExceptionBreakpoint = useMemo(() => isDebugExceptionBreakpoint(data.breakpoint), [data]);
-
   return (
     <div className={cls(styles.debug_breakpoints_item)}>
-      {!isExceptionBreakpoint && <div className={cls(converBreakpointClsState(), styles.debug_breakpoints_icon)}></div>}
+      <div className={cls(converBreakpointClsState(), styles.debug_breakpoints_icon)}></div>
       <CheckBox id={data.id} onChange={handleBreakpointChange} checked={enabled}></CheckBox>
       <div className={styles.debug_breakpoints_wrapper} onClick={handleBreakpointClick}>
-        {data.name && <span className={styles.debug_breakpoints_name}>{data.name}</span>}
-        <span className={styles.debug_breakpoints_description}>{description}</span>
+        <span className={styles.debug_breakpoints_name}>{data.name}</span>
+        <span className={styles.debug_breakpoints_description}>{data.description}</span>
       </div>
       {isDebugBreakpoint(data.breakpoint) ? (
         <>