@opensumi/ide-debug 2.23.2 → 2.23.3-next-1680528139.0

package/lib/browser/view/frames/debug-call-stack-thread.view.js.map

@@ -1 +1 @@
-{"version":3,"file":"debug-call-stack-thread.view.js","sourceRoot":"","sources":["../../../../src/browser/view/frames/debug-call-stack-thread.view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"debug-call-stack-thread.view.js","sourceRoot":"","sources":["../../../../src/browser/view/frames/debug-call-stack-thread.view.tsx"],"names":[],"mappings":"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"}

package/lib/browser/view/frames/debug-call-stack.module.less

@@ -126,7 +126,7 @@
   flex: 1;
   margin-right: 12px;
   &.label {
-    text-align: center;
+    text-align: left;
     min-width: fit-content;
     opacity: 0.7;
   }
@@ -148,7 +148,6 @@
   color: var(--badge-foreground);
   font-size: 12px;
   margin-left: 5px;
-  display: inline-block;
 }
 .debug_stack_frames_item_hidden {
   opacity: 0.4;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-debug",
-  "version": "2.23.2",
+  "version": "2.23.3-next-1680528139.0",
   "files": [
     "lib",
     "src"
@@ -17,33 +17,33 @@
     "url": "git@github.com:opensumi/core.git"
   },
   "dependencies": {
-    "@opensumi/ide-connection": "2.23.2",
-    "@opensumi/ide-core-common": "2.23.2",
-    "@opensumi/ide-core-node": "2.23.2",
-    "@opensumi/ide-file-service": "2.23.2",
-    "@opensumi/ide-task": "2.23.2",
-    "@opensumi/ide-terminal-next": "2.23.2",
+    "@opensumi/ide-connection": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-core-common": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-core-node": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-file-service": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-task": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-terminal-next": "2.23.3-next-1680528139.0",
     "anser": "^1.4.9",
     "btoa": "^1.2.1"
   },
   "devDependencies": {
-    "@opensumi/ide-components": "2.23.2",
-    "@opensumi/ide-core-browser": "2.23.2",
+    "@opensumi/ide-components": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-core-browser": "2.23.3-next-1680528139.0",
     "@opensumi/ide-dev-tool": "1.3.1",
-    "@opensumi/ide-editor": "2.23.2",
-    "@opensumi/ide-main-layout": "2.23.2",
-    "@opensumi/ide-monaco": "2.23.2",
-    "@opensumi/ide-monaco-enhance": "2.23.2",
-    "@opensumi/ide-output": "2.23.2",
-    "@opensumi/ide-overlay": "2.23.2",
-    "@opensumi/ide-preferences": "2.23.2",
-    "@opensumi/ide-quick-open": "2.23.2",
-    "@opensumi/ide-storage": "2.23.2",
-    "@opensumi/ide-theme": "2.23.2",
-    "@opensumi/ide-variable": "2.23.2",
-    "@opensumi/ide-workspace": "2.23.2",
-    "@opensumi/ide-workspace-edit": "2.23.2",
+    "@opensumi/ide-editor": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-main-layout": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-monaco": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-monaco-enhance": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-output": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-overlay": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-preferences": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-quick-open": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-storage": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-theme": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-variable": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-workspace": "2.23.3-next-1680528139.0",
+    "@opensumi/ide-workspace-edit": "2.23.3-next-1680528139.0",
     "@types/btoa": "^1.2.3"
   },
-  "gitHead": "e6f6c4f37dd140aeb525e21e8704d7b9e266ff57"
+  "gitHead": "a86212933bd0076f0bbb814628b77f6dd3eef9c8"
 }

package/src/browser/breakpoint/breakpoint-marker.ts

@@ -1,12 +1,14 @@
 import btoa from 'btoa';
 
-import { URI } from '@opensumi/ide-core-common';
+import { Schemes, URI } from '@opensumi/ide-core-common';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
 
 import { IRuntimeBreakpoint, IDebugBreakpoint } from '../../common';
 import { Marker } from '../markers';
 
 export const BREAKPOINT_KIND = 'breakpoint';
+export const EXCEPTION_BREAKPOINT_KIND = 'exception_breakpoint';
+export const EXCEPTION_BREAKPOINT_URI = URI.parse(EXCEPTION_BREAKPOINT_KIND).withScheme(Schemes.inMemory);
 
 function generateId(uri: string, line: number, column = 1) {
   return btoa(`${uri}:${line}:${column}`);

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

@@ -1,4 +1,4 @@
-import { IRange } from '@opensumi/ide-core-browser';
+import { formatLocalize, 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,12 +9,15 @@ 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();
   }
@@ -109,3 +112,26 @@ 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,10 +158,12 @@ export class DebugThread extends DebugThreadData {
     const result = new Map<number, DebugStackFrame>(this._frames);
     for (const raw of frames) {
       const id = raw.id;
-      const frame = this._frames.get(id) || new DebugStackFrame(this, this.session);
-      this._frames.set(id, frame);
-      frame.update({ raw });
-      result.set(id, frame);
+      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 values = [...result.values()];
     frontEndTime('doUpdateFrames');

package/src/browser/view/breakpoints/debug-breakpoints-tree.model.ts

@@ -0,0 +1,35 @@
+import { IBasicTreeData } from '@opensumi/ide-components';
+import { Emitter, URI } from '@opensumi/ide-core-common';
+
+import { isDebugBreakpoint } from '../../breakpoint';
+
+import { BreakpointItem } from './debug-breakpoints.view';
+
+export class BreakpointsTreeNode implements IBasicTreeData {
+  public label = '';
+  public rawData: BreakpointItem;
+  private _uri: URI;
+  private _onDescriptionChange = new Emitter<string>();
+
+  constructor(uri: URI, rawData: BreakpointItem) {
+    const { breakpoint } = rawData;
+
+    this._uri = uri;
+    this.label = isDebugBreakpoint(breakpoint) ? uri.displayName : '';
+    this.rawData = rawData;
+    this.rawData.onDescriptionChange = this._onDescriptionChange.event;
+  }
+
+  get breakpoint() {
+    return this.rawData.breakpoint;
+  }
+
+  get uri() {
+    return this._uri;
+  }
+
+  fireDescriptionChange(value: string): void {
+    this.rawData.description = value;
+    this._onDescriptionChange.fire(value);
+  }
+}

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

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

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

@@ -1,7 +1,16 @@
 import { observable, action, runInAction } from 'mobx';
 
 import { Injectable, Autowired } from '@opensumi/di';
-import { URI, WithEventBus, OnEvent, IContextKeyService, IReporterService, Schemes } from '@opensumi/ide-core-browser';
+import {
+  URI,
+  WithEventBus,
+  OnEvent,
+  IContextKeyService,
+  IReporterService,
+  Schemes,
+  Emitter,
+  Event,
+} 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';
@@ -16,10 +25,12 @@ 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()
@@ -51,14 +62,17 @@ 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;
   }
 
-  @observable
-  public nodes: BreakpointItem[] = [];
+  public treeNodeMap: Map<string, BreakpointsTreeNode[]> = new Map();
 
   @observable
   public enable: boolean;
@@ -139,38 +153,72 @@ export class DebugBreakpointsService extends WithEventBus {
     }
   }
 
-  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;
+  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,
+      };
+    }
   }
 
   @action
   private async updateBreakpoints() {
     await this.breakpoints.whenReady;
-    this.nodes = this.extractNodes([
-      ...this.breakpoints.getExceptionBreakpoints(),
-      ...this.breakpoints.getBreakpoints(),
-    ]);
+    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());
+      }
+    }
   }
 
   removeAllBreakpoints() {

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

@@ -1,14 +1,36 @@
 import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-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 {
+  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 { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
 
 import { IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
-import { DebugExceptionBreakpoint, isDebugBreakpoint, isRuntimeBreakpoint, getStatus } from '../../breakpoint';
+import {
+  DebugExceptionBreakpoint,
+  isDebugBreakpoint,
+  isRuntimeBreakpoint,
+  getStatus,
+  isDebugExceptionBreakpoint,
+  EXCEPTION_BREAKPOINT_URI,
+} from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 
 import styles from './debug-breakpoints.module.less';
@@ -18,29 +40,94 @@ 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 { nodes, enable, inDebugMode, toggleBreakpointEnable }: DebugBreakpointsService =
-    useInjectable(DebugBreakpointsService);
-  const template = ({ data }: { data: BreakpointItem }) => (
-    <BreakpointItem
-      toggle={() => toggleBreakpointEnable(data.breakpoint)}
-      breakpointEnabled={enable}
-      data={data}
-      isDebugMode={inDebugMode}
-    ></BreakpointItem>
-  );
+  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];
 
-  const containerStyle = {
-    height: viewState.height,
-    width: viewState.width,
-  } as React.CSSProperties;
+            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();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (treeData.length > 0) {
+      requestAnimationFrame(() => {
+        debugBreakpointsService.refreshBreakpointsInfo();
+      });
+    }
+  }, [treeData]);
+
+  const getItemClassName = useCallback((item: ICompositeTreeNode) => {
+    if (!item.children) {
+      return styles.debug_breakpoints_item_tree_node;
+    }
+  }, []);
 
   return (
     <div className={cls(styles.debug_breakpoints, !enable && styles.debug_breakpoints_disabled)}>
-      <RecycleList data={nodes} itemHeight={22} template={template} style={containerStyle} />
+      <BasicRecycleTree treeData={treeData} height={viewState.height} getItemClassName={getItemClassName} />
     </div>
   );
 });
@@ -62,6 +149,7 @@ 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();
@@ -98,6 +186,8 @@ export const BreakpointItem = ({
   };
 
   React.useEffect(() => {
+    const disposable = new Disposable();
+
     const exec = () => {
       if (isDebugBreakpoint(data.breakpoint) && isRuntimeBreakpoint(data.breakpoint)) {
         const status = getStatus(data.breakpoint);
@@ -105,9 +195,11 @@ export const BreakpointItem = ({
       }
     };
 
-    const disposable = manager.onDidChangeActiveDebugSession(() => exec());
+    disposable.addDispose(manager.onDidChangeActiveDebugSession(() => exec()));
     exec();
 
+    disposable.addDispose(data.onDescriptionChange(setDescription));
+
     return () => {
       setStatus(undefined);
       disposable.dispose();
@@ -142,13 +234,15 @@ export const BreakpointItem = ({
     debugBreakpointsService.delBreakpoint(data.breakpoint as IDebugBreakpoint);
   };
 
+  const isExceptionBreakpoint = useMemo(() => isDebugExceptionBreakpoint(data.breakpoint), [data]);
+
   return (
     <div className={cls(styles.debug_breakpoints_item)}>
-      <div className={cls(converBreakpointClsState(), styles.debug_breakpoints_icon)}></div>
+      {!isExceptionBreakpoint && <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}>
-        <span className={styles.debug_breakpoints_name}>{data.name}</span>
-        <span className={styles.debug_breakpoints_description}>{data.description}</span>
+        {data.name && <span className={styles.debug_breakpoints_name}>{data.name}</span>}
+        <span className={styles.debug_breakpoints_description}>{description}</span>
       </div>
       {isDebugBreakpoint(data.breakpoint) ? (
         <>