@opensumi/ide-debug 2.23.3 → 2.23.4-next-1681455781.0

package/src/browser/view/frames/debug-call-stack-frame.view.tsx

@@ -1,6 +1,6 @@
 import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useRef } from 'react';
 
 import { RecycleList } from '@opensumi/ide-components';
 import {
@@ -15,7 +15,7 @@ import {
 import { IDebugSessionManager } from '../../../common';
 import { DebugSession } from '../../debug-session';
 import { DebugSessionManager } from '../../debug-session-manager';
-import { DebugStackFrame } from '../../model';
+import { DebugStackFrame, ShowMoreDebugStackFrame } from '../../model';
 import { DebugThread } from '../../model/debug-thread';
 
 import styles from './debug-call-stack.module.less';
@@ -27,16 +27,18 @@ export interface DebugStackSessionViewProps {
   thread: DebugThread;
   viewState: ViewState;
   indent?: number;
+  isBottom?: boolean;
 }
 
 export const DebugStackFramesView = observer((props: DebugStackSessionViewProps) => {
-  const { viewState, frames: rawFrames, thread, indent = 0, session } = props;
+  const { viewState, frames: rawFrames, thread, indent = 0, session, isBottom } = props;
   const [selected, setSelected] = useState<number | undefined>();
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [frames, setFrames] = useState<DebugStackFrame[]>([]);
+  const [frames, setFrames] = useState<(DebugStackFrame | ShowMoreDebugStackFrame)[]>([]);
   const [framesErrorMessage, setFramesErrorMessage] = useState<string>('');
   const [canLoadMore, setCanLoadMore] = useState<boolean>(false);
   const manager = useInjectable<DebugSessionManager>(IDebugSessionManager);
+  const currentFrames = useRef<(DebugStackFrame | ShowMoreDebugStackFrame)[]>([]);
   const debugCallStackService = useInjectable<DebugCallStackService>(DebugCallStackService);
 
   const loadMore = useCallback(async () => {
@@ -57,11 +59,99 @@ export const DebugStackFramesView = observer((props: DebugStackSessionViewProps)
     }
   };
 
+  const expandFrame = useCallback(
+    (frame: ShowMoreDebugStackFrame) => {
+      const expanedFrames = currentFrames.current.slice(0);
+      let index = -1;
+      if (!frame.nextFrame) {
+        index = expanedFrames.length;
+      } else {
+        index = expanedFrames.findIndex((f) => DebugStackFrame.is(f) && f.id === frame.nextFrame?.id);
+      }
+      if (index > -1) {
+        expanedFrames.splice(index - 1, 1, ...frame.frames);
+        currentFrames.current = expanedFrames;
+        setFrames(expanedFrames);
+      }
+    },
+    [currentFrames.current],
+  );
+
+  const mergeFrames = useCallback(
+    (current: (DebugStackFrame | ShowMoreDebugStackFrame)[], frames: DebugStackFrame[]) => {
+      const len = frames.length;
+      let offset = -1;
+      let lastFrame = current.length > 0 ? current[current.length + offset] : undefined;
+      while (lastFrame && !DebugStackFrame.is(lastFrame)) {
+        offset -= 1;
+        lastFrame = current[current.length + offset];
+      }
+      // 合并位置调整，方便将进一步加载的含 `frames[i].source?.raw.origin` 进行合并
+      const results: (DebugStackFrame | ShowMoreDebugStackFrame)[] = current.slice(0, current.length + offset + 1);
+
+      const startIndex = lastFrame ? frames.findIndex((frame) => frame.id === lastFrame?.id) + 1 : 0;
+      let showMoreFrames: DebugStackFrame[] = [];
+      let showMoreOrigin;
+      let hasOrigin = false;
+      for (let i = startIndex; i < len; i++) {
+        if (frames[i].source?.raw.origin) {
+          if (hasOrigin) {
+            if (showMoreOrigin === frames[i].source?.raw.origin) {
+              showMoreFrames.push(frames[i]);
+              continue;
+            } else {
+              if (showMoreFrames.length > 1) {
+                results.push(
+                  new ShowMoreDebugStackFrame(frames[i], showMoreFrames, session, showMoreOrigin, expandFrame),
+                );
+                offset -= showMoreFrames.length - 1;
+              } else {
+                results.push(showMoreFrames[0]);
+              }
+              showMoreFrames = [];
+              hasOrigin = false;
+              showMoreOrigin = frames[i].source?.raw.origin;
+              showMoreFrames.push(frames[i]);
+            }
+          } else {
+            hasOrigin = true;
+            showMoreFrames.push(frames[i]);
+            showMoreOrigin = frames[i].source?.raw.origin;
+          }
+        } else {
+          if (hasOrigin && showMoreFrames.length > 0) {
+            if (showMoreFrames.length > 1) {
+              results.push(
+                new ShowMoreDebugStackFrame(frames[i], showMoreFrames, session, showMoreOrigin, expandFrame),
+              );
+              offset -= showMoreFrames.length - 1;
+            } else {
+              results.push(showMoreFrames[0]);
+            }
+            showMoreFrames = [];
+            hasOrigin = false;
+          }
+          results.push(frames[i]);
+        }
+      }
+      if (hasOrigin && showMoreFrames.length > 0) {
+        if (showMoreFrames.length > 1) {
+          results.push(new ShowMoreDebugStackFrame(undefined, showMoreFrames, session, showMoreOrigin, expandFrame));
+        } else {
+          results.push(showMoreFrames[0]);
+        }
+      }
+      return results;
+    },
+    [],
+  );
+
   const updateFrames = useCallback(
     (frames: DebugStackFrame[]) => {
-      setFrames(frames);
+      currentFrames.current = mergeFrames(currentFrames.current, frames);
+      setFrames(currentFrames.current);
     },
-    [frames],
+    [frames, mergeFrames],
   );
 
   const updateSelected = useCallback(
@@ -118,13 +208,18 @@ export const DebugStackFramesView = observer((props: DebugStackSessionViewProps)
   }, [frames]);
 
   const template = ({ data }) => {
-    const frame: DebugStackFrame = data;
-    const isLabel = frame.raw.presentationHint === 'label';
-    const isSubtle = frame.raw.presentationHint === 'subtle';
-    const clickHandler = useCallback(() => {
+    const frame: DebugStackFrame | ShowMoreDebugStackFrame = data;
+    const isLabel = DebugStackFrame.is(frame) && frame.raw.presentationHint === 'label';
+    const isSubtle = DebugStackFrame.is(frame) && frame.raw.presentationHint === 'subtle';
+    const isDeemphasize = DebugStackFrame.is(frame) && frame.raw?.source?.presentationHint === 'deemphasize';
+    const onClickHandler = useCallback(() => {
       if (isLabel || isSubtle) {
         return;
       }
+      if (!DebugStackFrame.is(frame)) {
+        frame.open();
+        return;
+      }
       manager.updateCurrentSession(frame.session);
 
       frame.session.currentThread = frame.thread;
@@ -135,86 +230,125 @@ export const DebugStackFramesView = observer((props: DebugStackSessionViewProps)
     const restartFrame = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
       event.preventDefault();
       event.stopPropagation();
-
+      if (!DebugStackFrame.is(frame)) {
+        return;
+      }
       if (frame.canRestart) {
         frame.restart();
       }
     };
 
+    const frameItemStyle = {
+      paddingLeft: `${indent}px`,
+    };
+
+    if (DebugStackFrame.is(frame) && isDeemphasize) {
+      frameItemStyle['color'] = 'var(--list-deemphasizedForeground)';
+    }
+
+    const renderFrame = useCallback((frame) => {
+      if (DebugStackFrame.is(frame)) {
+        return (
+          <>
+            <span
+              className={cls(styles.debug_stack_frames_item_label, isLabel && styles.label, isSubtle && styles.subtle)}
+            >
+              {frame.raw && frame.raw.name}
+            </span>
+            {!isLabel && (
+              <span className={styles.debug_stack_frames_item_description}>
+                {(frame.raw && frame.raw.source && frame.raw.source.name) || localize('debug.stack.frame.noSource')}
+              </span>
+            )}
+            <>
+              {frame.canRestart && (
+                <a
+                  title=''
+                  onClick={(event) => restartFrame(event)}
+                  className={cls(styles.debug_restart_frame_icon, getIcon('debug-restart-frame'))}
+                ></a>
+              )}
+              {!isLabel && !isDeemphasize && (
+                <div className={cls(!isUndefined(frame.raw.line) && styles.debug_stack_frames_item_badge)}>
+                  {frame.raw && frame.raw.line}
+                  {!isUndefined(frame.raw.line) && ':'}
+                  {frame.raw && frame.raw.column}
+                </div>
+              )}
+            </>
+          </>
+        );
+      } else {
+        return <span className={styles.debug_stack_frames_load_more}>{frame.name}</span>;
+      }
+    }, []);
+
     return (
       <div
-        style={{ paddingLeft: `${indent}px` }}
+        style={frameItemStyle}
         className={cls(
           styles.debug_stack_frames_item,
-          selected === frame.raw.id && styles.selected,
-          !(frame.raw && frame.raw.source && frame.raw.source.name) && styles.debug_stack_frames_item_hidden,
+          isLabel && styles.is_label,
+          DebugStackFrame.is(frame) && selected === frame.raw.id && styles.selected,
+          DebugStackFrame.is(frame) &&
+            !(frame.raw && frame.raw.source && frame.raw.source.name) &&
+            styles.debug_stack_frames_item_hidden,
         )}
-        onClick={clickHandler}
+        onClick={onClickHandler}
         onContextMenu={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
           debugCallStackService.handleContextMenu(event, data)
         }
       >
-        <span className={cls(styles.debug_stack_frames_item_label, isLabel && styles.label, isSubtle && styles.subtle)}>
-          {frame.raw && frame.raw.name}
-        </span>
-        <span className={styles.debug_stack_frames_item_description}>
-          {(frame.raw && frame.raw.source && frame.raw.source.name) || localize('debug.stack.frame.noSource')}
-        </span>
-        <>
-          <a
-            title=''
-            onClick={(event) => restartFrame(event)}
-            className={cls(styles.debug_restart_frame_icon, getIcon('debug-restart-frame'))}
-          ></a>
-          <div className={cls(!isUndefined(frame.raw.line) && styles.debug_stack_frames_item_badge)}>
-            {frame.raw && frame.raw.line}
-            {!isUndefined(frame.raw.line) && ':'}
-            {frame.raw && frame.raw.column}
-          </div>
-        </>
+        {renderFrame(frame)}
       </div>
     );
   };
 
-  const renderLoadMoreStackFrames = () => {
-    const clickHandler = async () => {
+  const renderLoadMoreStackFrames = useCallback(() => {
+    const onClickHandler = async () => {
       setIsLoading(true);
       await loadMore();
       setIsLoading(false);
     };
     return (
-      <div className={styles.debug_stack_frames_item} onClick={clickHandler}>
+      <div className={styles.debug_stack_frames_item} onClick={onClickHandler}>
         <span className={styles.debug_stack_frames_load_more}>{localize('debug.stack.loadMore')}</span>
       </div>
     );
-  };
+  }, [isLoading, loadMore]);
 
-  const renderLoading = () => (
-    <div className={styles.debug_stack_frames_item}>
-      <span className={styles.debug_stack_frames_load_more}>{localize('debug.stack.loading')}</span>
-    </div>
+  const renderLoading = useCallback(
+    () => (
+      <div className={styles.debug_stack_frames_item}>
+        <span className={styles.debug_stack_frames_load_more}>{localize('debug.stack.loading')}</span>
+      </div>
+    ),
+    [],
   );
 
-  const renderFramesErrorMessage = (message: string) => (
-    <div className={styles.debug_stack_frames_item}>
-      <span className={styles.debug_stack_frames_error_message} title={message}>
-        {message}
-      </span>
-    </div>
+  const renderFramesErrorMessage = useCallback(
+    (message: string) => (
+      <div className={styles.debug_stack_frames_item}>
+        <span className={styles.debug_stack_frames_error_message} title={message}>
+          {message}
+        </span>
+      </div>
+    ),
+    [],
   );
 
   if (framesErrorMessage) {
     return <div className={styles.debug_stack_frames}>{renderFramesErrorMessage(framesErrorMessage)}</div>;
   }
 
-  const footer = () => {
+  const footer = useCallback(() => {
     if (isLoading) {
       return renderLoading();
     } else if (canLoadMore) {
       return renderLoadMoreStackFrames();
     }
     return null;
-  };
+  }, [isLoading, canLoadMore]);
 
   return (
     <RecycleList
@@ -222,8 +356,7 @@ export const DebugStackFramesView = observer((props: DebugStackSessionViewProps)
       template={template}
       itemHeight={22}
       width={viewState.width}
-      paddingBottomSize={0}
-      height={isLoading || canLoadMore ? (frames.length + 1) * 22 : frames.length * 22}
+      height={(isLoading || canLoadMore ? (frames.length + 1) * 22 : frames.length * 22) + (isBottom ? 10 : 0)}
       footer={isLoading || canLoadMore ? footer : undefined}
     />
   );

package/src/browser/view/frames/debug-call-stack-session.view.tsx

@@ -1,5 +1,5 @@
 import cls from 'classnames';
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 
 import { ViewState, getIcon, useInjectable, DisposableCollection, localize } from '@opensumi/ide-core-browser';
 
@@ -34,6 +34,7 @@ export const DebugStackSessionView = (props: DebugStackSessionViewProps) => {
   const mutipleSession = manager.sessions.length > 1;
   const supportsThreadIdCorrespond = session.supportsThreadIdCorrespond;
 
+  const disposed = useRef<boolean>(false);
   // 从 manager.sessions 中找出 parentSession id 是当前 session id 的 session
   const findSubSessions = () => {
     const hasParentSessions = manager.sessions.filter((s) => s.parentSession);
@@ -57,20 +58,30 @@ export const DebugStackSessionView = (props: DebugStackSessionViewProps) => {
   };
 
   useEffect(() => {
-    const createDispose = manager.onDidCreateDebugSession(() => {
-      const sub = findSubSessions();
-      setSubSession(sub);
-    });
+    const disposables = new DisposableCollection();
+    disposables.push(
+      manager.onDidCreateDebugSession(() => {
+        if (disposed.current) {
+          return;
+        }
+        const sub = findSubSessions();
+        setSubSession(sub);
+      }),
+    );
 
-    const destroyDispose = manager.onDidDestroyDebugSession(() => {
-      const sub = findSubSessions();
-      setSubSession(sub);
-    });
+    disposables.push(
+      manager.onDidDestroyDebugSession(() => {
+        if (disposed.current) {
+          return;
+        }
+        const sub = findSubSessions();
+        setSubSession(sub);
+      }),
+    );
 
     return () => {
-      createDispose.dispose();
-      destroyDispose.dispose();
-      setSubSession([]);
+      disposed.current = true;
+      disposables.dispose();
     };
   }, []);
 
@@ -153,7 +164,7 @@ export const DebugStackSessionView = (props: DebugStackSessionViewProps) => {
         </div>
       ) : (
         otherThreads.map(
-          (thread) =>
+          (thread: DebugThread, index: number) =>
             !session.hasInMultipleThreadPaused(thread.raw.id) && (
               <DebugStackThreadView
                 key={thread.id}
@@ -161,6 +172,7 @@ export const DebugStackSessionView = (props: DebugStackSessionViewProps) => {
                 viewState={viewState}
                 thread={thread}
                 session={session}
+                isBottom={index === otherThreads.length - 1}
               />
             ),
         )
@@ -225,25 +237,27 @@ export const DebugStackSessionView = (props: DebugStackSessionViewProps) => {
         </div>
       )}
       {supportsThreadIdCorrespond && unfold
-        ? multipleThreadPaused.map((t) => (
+        ? multipleThreadPaused.map((t: DebugThread, index: number) => (
             <DebugStackThreadView
               key={t.id}
               indent={mutipleSession ? 16 : 0}
               viewState={viewState}
               thread={t}
               session={session}
+              isBottom={index === multipleThreadPaused.length - 1}
             />
           ))
         : null}
       {!supportsThreadIdCorrespond &&
         (!mutipleSession || unfold) &&
-        threads.map((thread) => (
+        threads.map((thread: DebugThread, index: number) => (
           <DebugStackThreadView
             key={thread.id}
             indent={mutipleSession ? 16 : 0}
             viewState={viewState}
             thread={thread}
             session={session}
+            isBottom={index === threads.length - 1}
           />
         ))}
       {subSession.length > 0 &&

package/src/browser/view/frames/debug-call-stack-thread.view.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { Badge } from '@opensumi/ide-components';
 import { ViewState, getIcon, useInjectable, localize, DisposableCollection } from '@opensumi/ide-core-browser';
 
 import { IDebugSessionManager } from '../../../common';
@@ -18,10 +19,11 @@ export interface DebugStackThreadViewProps {
   viewState: ViewState;
   thread: DebugThread;
   indent?: number;
+  isBottom?: boolean;
 }
 
 export const DebugStackThreadView = (props: DebugStackThreadViewProps) => {
-  const { thread, viewState, indent, session } = props;
+  const { thread, viewState, indent, session, isBottom } = props;
   const manager = useInjectable<DebugSessionManager>(IDebugSessionManager);
   const debugCallStackService = useInjectable<DebugCallStackService>(DebugCallStackService);
   const [expanded, setExpanded] = useState<boolean>(true);
@@ -58,6 +60,15 @@ export const DebugStackThreadView = (props: DebugStackThreadViewProps) => {
     };
   }, []);
 
+  const statusDescription =
+    thread.stopped && thread.stoppedDetails
+      ? thread.raw.id === thread.stoppedDetails.threadId
+        ? `${localize('debug.stack.frame.because')} ${thread.stoppedDetails.reason} ${localize(
+            'debug.stack.frame.stopped',
+          )}`
+        : localize('debug.stack.frame.stopped')
+      : localize('debug.stack.frame.running');
+
   return (
     <div
       className={styles.debug_stack_item}
@@ -81,13 +92,7 @@ export const DebugStackThreadView = (props: DebugStackThreadViewProps) => {
               <DebugStackOperationView thread={thread} />
             </div>
             <span className={styles.debug_threads_description}>
-              {thread.stopped && thread.stoppedDetails
-                ? thread.raw.id === thread.stoppedDetails.threadId
-                  ? `${localize('debug.stack.frame.because')} ${thread.stoppedDetails.reason} ${localize(
-                      'debug.stack.frame.stopped',
-                    )}`
-                  : localize('debug.stack.frame.stopped')
-                : localize('debug.stack.frame.running')}
+              <Badge>{statusDescription.toUpperCase()}</Badge>
             </span>
           </>
         </div>
@@ -95,6 +100,7 @@ export const DebugStackThreadView = (props: DebugStackThreadViewProps) => {
       {(!mutiple || expanded) && thread.frames.length > 0 && (
         <DebugStackFramesView
           indent={mutiple ? (mutipleS ? 24 + 14 : 16 + 14) : 8}
+          isBottom={isBottom}
           viewState={viewState}
           thread={thread}
           frames={frames}

package/src/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;