@opensumi/ide-debug 2.21.13 → 2.22.0

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

@@ -0,0 +1,230 @@
+import cls from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { RecycleList } from '@opensumi/ide-components';
+import {
+  ViewState,
+  isUndefined,
+  useInjectable,
+  localize,
+  DisposableCollection,
+  getIcon,
+} from '@opensumi/ide-core-browser';
+
+import { IDebugSessionManager } from '../../../common';
+import { DebugSession } from '../../debug-session';
+import { DebugSessionManager } from '../../debug-session-manager';
+import { DebugStackFrame } from '../../model';
+import { DebugThread } from '../../model/debug-thread';
+
+import styles from './debug-call-stack.module.less';
+import { DebugCallStackService } from './debug-call-stack.service';
+
+export interface DebugStackSessionViewProps {
+  frames: DebugStackFrame[];
+  session: DebugSession;
+  thread: DebugThread;
+  viewState: ViewState;
+  indent?: number;
+}
+
+export const DebugStackFramesView = observer((props: DebugStackSessionViewProps) => {
+  const { viewState, frames: rawFrames, thread, indent = 0, session } = props;
+  const [selected, setSelected] = useState<number | undefined>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [frames, setFrames] = useState<DebugStackFrame[]>([]);
+  const [framesErrorMessage, setFramesErrorMessage] = useState<string>('');
+  const [canLoadMore, setCanLoadMore] = useState<boolean>(false);
+  const manager = useInjectable<DebugSessionManager>(IDebugSessionManager);
+  const debugCallStackService = useInjectable<DebugCallStackService>(DebugCallStackService);
+
+  const loadMore = useCallback(async () => {
+    if (!thread) {
+      return;
+    }
+    const remainingFramesCount =
+      typeof thread.stoppedDetails?.totalFrames === 'number'
+        ? thread.stoppedDetails?.totalFrames - thread.frameCount
+        : undefined;
+    const frames = await thread.fetchFrames(remainingFramesCount);
+    updateFrames(frames);
+  }, [frames]);
+
+  const frameOpenSource = (frame: DebugStackFrame) => {
+    if (frame && frame.source) {
+      frame.source.open({}, frame);
+    }
+  };
+
+  const updateFrames = useCallback(
+    (frames: DebugStackFrame[]) => {
+      setFrames(frames);
+    },
+    [frames],
+  );
+
+  const updateSelected = useCallback(
+    (value: number | undefined) => {
+      setSelected(value);
+    },
+    [selected],
+  );
+
+  useEffect(() => {
+    updateFrames([...rawFrames]);
+
+    const disposable = new DisposableCollection();
+
+    disposable.push(
+      manager.onDidChangeActiveDebugSession(({ previous }) => {
+        if (previous && previous !== thread.session) {
+          updateSelected(undefined);
+        }
+      }),
+    );
+
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (thread) {
+      const hasSourceFrame = thread.frames.find((e: DebugStackFrame) => !!e.source);
+      if (hasSourceFrame) {
+        updateSelected(hasSourceFrame.raw.id);
+        frameOpenSource(hasSourceFrame);
+      }
+    }
+  }, [thread.frameCount]);
+
+  useEffect(() => {
+    if (thread) {
+      if (thread.stoppedDetails) {
+        const { framesErrorMessage, totalFrames } = thread.stoppedDetails;
+        setFramesErrorMessage(framesErrorMessage || '');
+        if (totalFrames && totalFrames > thread.frameCount) {
+          setCanLoadMore(true);
+        } else {
+          setCanLoadMore(false);
+        }
+      } else {
+        setCanLoadMore(false);
+      }
+    } else {
+      setCanLoadMore(false);
+    }
+  }, [frames]);
+
+  const template = ({ data }) => {
+    const frame: DebugStackFrame = data;
+    const isLabel = frame.raw.presentationHint === 'label';
+    const isSubtle = frame.raw.presentationHint === 'subtle';
+    const clickHandler = useCallback(() => {
+      if (isLabel || isSubtle) {
+        return;
+      }
+      manager.updateCurrentSession(frame.session);
+
+      frame.session.currentThread = frame.thread;
+      updateSelected(frame.raw.id);
+      frameOpenSource(frame);
+    }, [data]);
+
+    const restartFrame = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (frame.canRestart) {
+        frame.restart();
+      }
+    };
+
+    return (
+      <div
+        style={{ paddingLeft: `${indent}px` }}
+        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,
+        )}
+        onClick={clickHandler}
+        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>
+        </>
+      </div>
+    );
+  };
+
+  const renderLoadMoreStackFrames = () => {
+    const clickHandler = async () => {
+      setIsLoading(true);
+      await loadMore();
+      setIsLoading(false);
+    };
+    return (
+      <div className={styles.debug_stack_frames_item} onClick={clickHandler}>
+        <span className={styles.debug_stack_frames_load_more}>{localize('debug.stack.loadMore')}</span>
+      </div>
+    );
+  };
+
+  const renderLoading = () => (
+    <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>
+  );
+
+  if (framesErrorMessage) {
+    return <div className={styles.debug_stack_frames}>{renderFramesErrorMessage(framesErrorMessage)}</div>;
+  }
+
+  const footer = () => {
+    if (isLoading) {
+      return renderLoading();
+    } else if (canLoadMore) {
+      return renderLoadMoreStackFrames();
+    }
+    return null;
+  };
+
+  return (
+    <RecycleList
+      data={frames}
+      template={template}
+      itemHeight={22}
+      width={viewState.width}
+      paddingBottomSize={0}
+      height={isLoading || canLoadMore ? (frames.length + 1) * 22 : frames.length * 22}
+      footer={isLoading || canLoadMore ? footer : undefined}
+    />
+  );
+});

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

@@ -0,0 +1,253 @@
+import cls from 'classnames';
+import React, { useCallback, useState, useEffect } from 'react';
+
+import { ViewState, getIcon, useInjectable, DisposableCollection, localize } from '@opensumi/ide-core-browser';
+
+import { DebugState, IDebugSessionManager } from '../../../common';
+import { DebugSession } from '../../debug-session';
+import { DebugSessionManager } from '../../debug-session-manager';
+import { DebugThread } from '../../model/debug-thread';
+
+import { DebugStackThreadView } from './debug-call-stack-thread.view';
+import styles from './debug-call-stack.module.less';
+import { DebugStackOperationView } from './debug-call-stack.operation';
+import { DebugCallStackService } from './debug-call-stack.service';
+
+export interface DebugStackSessionViewProps {
+  session: DebugSession;
+  viewState: ViewState;
+  indent: number;
+}
+
+export const DebugStackSessionView = (props: DebugStackSessionViewProps) => {
+  const { session, viewState } = props;
+  const manager = useInjectable<DebugSessionManager>(IDebugSessionManager);
+  const debugCallStackService = useInjectable<DebugCallStackService>(DebugCallStackService);
+  const [threads, setThreads] = useState<DebugThread[]>([]);
+  const [otherThreads, setOtherThreads] = useState<DebugThread[]>([]);
+  const [multipleThreadPaused, setMultipleThreadPaused] = useState<DebugThread[]>([]);
+  const [subSession, setSubSession] = useState<DebugSession[]>([]);
+  const [unfold, setUnfold] = useState<boolean>(true);
+  const [hover, setHover] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(true);
+  // 多 session 调试
+  const mutipleSession = manager.sessions.length > 1;
+  const supportsThreadIdCorrespond = session.supportsThreadIdCorrespond;
+
+  // 从 manager.sessions 中找出 parentSession id 是当前 session id 的 session
+  const findSubSessions = () => {
+    const hasParentSessions = manager.sessions.filter((s) => s.parentSession);
+    const subSession: DebugSession[] = [];
+    while (hasParentSessions[0]) {
+      if (manager.getSession(hasParentSessions[0].parentSession?.id)?.id === session.id) {
+        subSession.push(hasParentSessions[0]);
+      }
+      hasParentSessions.shift();
+    }
+
+    return subSession;
+  };
+
+  // 加载更多线程信息
+  const fetchOtherThreads = async () => {
+    setLoading(true);
+    const _threads = await session.fetchThreads();
+    setLoading(false);
+    setOtherThreads(_threads);
+  };
+
+  useEffect(() => {
+    const createDispose = manager.onDidCreateDebugSession(() => {
+      const sub = findSubSessions();
+      setSubSession(sub);
+    });
+
+    const destroyDispose = manager.onDidDestroyDebugSession(() => {
+      const sub = findSubSessions();
+      setSubSession(sub);
+    });
+
+    return () => {
+      createDispose.dispose();
+      destroyDispose.dispose();
+      setSubSession([]);
+    };
+  }, []);
+
+  const updateThreads = useCallback(
+    (threads: DebugThread[]) => {
+      setThreads(threads);
+    },
+    [threads],
+  );
+
+  const updateMultipleThreadPaused = useCallback(
+    (threads: DebugThread[]) => {
+      setMultipleThreadPaused(threads);
+    },
+    [multipleThreadPaused],
+  );
+
+  useEffect(() => {
+    updateThreads(Array.from(session.threads));
+
+    const disposable = new DisposableCollection();
+
+    disposable.push(
+      session.onDidChange(() => {
+        updateThreads([...session.threads]);
+      }),
+    );
+
+    disposable.push(
+      session.onDidThread(async ({ body: { reason } }) => {
+        if (!session.supportsThreadIdCorrespond) {
+          return;
+        }
+
+        if (session.state === DebugState.Stopped && reason === 'started') {
+          await fetchOtherThreads();
+        }
+      }),
+    );
+
+    disposable.push(
+      session.onDidStop(async () => {
+        if (!session.supportsThreadIdCorrespond) {
+          return;
+        }
+
+        const multipleThreads = Array.from(session.multipleThreadPaused.values());
+        updateMultipleThreadPaused(multipleThreads);
+
+        await fetchOtherThreads();
+      }),
+    );
+
+    disposable.push(
+      session.onDidContinued(async () => {
+        if (!session.supportsThreadIdCorrespond) {
+          return;
+        }
+
+        const multipleThreads = Array.from(session.multipleThreadPaused.values());
+        updateMultipleThreadPaused(multipleThreads);
+      }),
+    );
+
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  // 渲染 "加载更多线程"
+  const renderLoadMoreThread = () => {
+    if (session.state !== DebugState.Stopped) {
+      return null;
+    }
+
+    if (supportsThreadIdCorrespond && unfold) {
+      return loading ? (
+        <div className={styles.debug_stack_item_loading}>
+          <span>{localize('debug.stack.loading')}</span>
+        </div>
+      ) : (
+        otherThreads.map(
+          (thread) =>
+            !session.hasInMultipleThreadPaused(thread.raw.id) && (
+              <DebugStackThreadView
+                key={thread.id}
+                indent={mutipleSession ? 16 : 0}
+                viewState={viewState}
+                thread={thread}
+                session={session}
+              />
+            ),
+        )
+      );
+    }
+  };
+
+  const isIncompressible = (stat: DebugSession) => {
+    if (stat.threads.some((t) => t.frameCount > 0)) {
+      return false;
+    }
+
+    const sub = findSubSessions();
+    if (sub.length !== 1) {
+      return false;
+    }
+
+    if (!sub[0].compact) {
+      return false;
+    }
+
+    return true;
+  };
+
+  if (isIncompressible(session)) {
+    const sub = findSubSessions();
+    return (
+      <div className={styles.debug_stack_item}>
+        {sub.map((s) => (
+          <DebugStackSessionView key={s.id} viewState={viewState} session={s} indent={1} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={styles.debug_stack_item}
+      onContextMenu={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+        debugCallStackService.handleContextMenu(event, session)
+      }
+    >
+      {mutipleSession && (
+        <div
+          className={styles.debug_stack_item_label}
+          onMouseEnter={() => setHover(true)}
+          onMouseLeave={() => setHover(false)}
+        >
+          {supportsThreadIdCorrespond || threads.length > 0 ? (
+            <>
+              <div className={unfold ? getIcon('down') : getIcon('right')} onClick={() => setUnfold(!unfold)}></div>
+              <div className={cls([getIcon('debug'), styles.debug_session_icon])}></div>
+            </>
+          ) : (
+            <div style={{ width: 30 }}></div>
+          )}
+          <div className={styles.debug_stack_item_label_title}>{session.label}</div>
+          {hover && <DebugStackOperationView session={session} />}
+        </div>
+      )}
+      {supportsThreadIdCorrespond && unfold
+        ? multipleThreadPaused.map((t) => (
+            <DebugStackThreadView
+              key={t.id}
+              indent={mutipleSession ? 16 : 0}
+              viewState={viewState}
+              thread={t}
+              session={session}
+            />
+          ))
+        : null}
+      {!supportsThreadIdCorrespond &&
+        (!mutipleSession || unfold) &&
+        threads.map((thread) => (
+          <DebugStackThreadView
+            key={thread.id}
+            indent={mutipleSession ? 16 : 0}
+            viewState={viewState}
+            thread={thread}
+            session={session}
+          />
+        ))}
+      {subSession.length > 0 &&
+        subSession.map(
+          (s) => unfold && <DebugStackSessionView key={s.id} viewState={viewState} session={s} indent={1} />,
+        )}
+      {renderLoadMoreThread()}
+    </div>
+  );
+};

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

@@ -0,0 +1,103 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { ViewState, getIcon, useInjectable, localize, DisposableCollection } from '@opensumi/ide-core-browser';
+
+import { IDebugSessionManager } from '../../../common';
+import { DebugSession } from '../../debug-session';
+import { DebugSessionManager } from '../../debug-session-manager';
+import { DebugStackFrame } from '../../model';
+import { DebugThread } from '../../model/debug-thread';
+
+import { DebugStackFramesView } from './debug-call-stack-frame.view';
+import styles from './debug-call-stack.module.less';
+import { DebugStackOperationView } from './debug-call-stack.operation';
+import { DebugCallStackService } from './debug-call-stack.service';
+
+export interface DebugStackThreadViewProps {
+  session: DebugSession;
+  viewState: ViewState;
+  thread: DebugThread;
+  indent?: number;
+}
+
+export const DebugStackThreadView = (props: DebugStackThreadViewProps) => {
+  const { thread, viewState, indent, session } = props;
+  const manager = useInjectable<DebugSessionManager>(IDebugSessionManager);
+  const debugCallStackService = useInjectable<DebugCallStackService>(DebugCallStackService);
+  const [expanded, setExpanded] = useState<boolean>(true);
+  const [frames, setFrames] = useState<DebugStackFrame[]>(thread.frames);
+
+  const mutipleS = manager.sessions.length > 1;
+  const mutiple = manager.currentSession?.supportsThreadIdCorrespond
+    ? true
+    : manager.sessions.length > 1 || (manager.sessions[0] && manager.sessions[0].threadCount > 1);
+
+  const updateExpanded = useCallback(
+    (value: boolean) => {
+      setExpanded(value);
+    },
+    [expanded],
+  );
+
+  useEffect(() => {
+    const disposable = new DisposableCollection();
+
+    disposable.push(
+      session.onDidChangeCallStack(() => {
+        setFrames(thread.frames);
+        if (thread.stopped && manager.currentThread && manager.currentThread.id === thread.id) {
+          updateExpanded(true);
+        } else {
+          updateExpanded(false);
+        }
+      }),
+    );
+
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  return (
+    <div
+      className={styles.debug_stack_item}
+      onContextMenu={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+        debugCallStackService.handleContextMenu(event, thread)
+      }
+    >
+      {mutiple && (
+        <div style={{ paddingLeft: `${indent}px` }} className={styles.debug_stack_item_label}>
+          {thread.frames.length > 0 ? (
+            <div className={expanded ? getIcon('down') : getIcon('right')} onClick={() => setExpanded(!expanded)}></div>
+          ) : (
+            <div style={{ width: 14 }}></div>
+          )}
+          <div className={styles.debug_threads_item}>{thread.raw.name}</div>
+          <>
+            <div className={styles.debug_threads_operation}>
+              <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')}
+            </span>
+          </>
+        </div>
+      )}
+      {(!mutiple || expanded) && thread.frames.length > 0 && (
+        <DebugStackFramesView
+          indent={mutiple ? (mutipleS ? 24 + 14 : 16 + 14) : 8}
+          viewState={viewState}
+          thread={thread}
+          frames={frames}
+          session={session}
+        />
+      )}
+    </div>
+  );
+};

package/src/browser/view/frames/debug-call-stack.contribution.ts

@@ -0,0 +1,88 @@
+import { Autowired } from '@opensumi/di';
+import { Domain, CommandContribution, CommandRegistry, localize, IClipboardService } from '@opensumi/ide-core-browser';
+import { MenuContribution, IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+
+import { DEBUG_COMMANDS } from '../../../common';
+
+import {
+  CONTEXT_CALLSTACK_ITEM_TYPE,
+  CONTEXT_RESTART_FRAME_SUPPORTED,
+  CONTEXT_STACK_FRAME_SUPPORTS_RESTART,
+} from './../../../common/constants';
+import { IDebugSessionManager } from './../../../common/debug-session';
+import { CallStackContext } from './../../../common/types';
+import { DebugSessionManager } from './../../debug-session-manager';
+import { DebugStackFrame } from './../../model/debug-stack-frame';
+import { DebugThread } from './../../model/debug-thread';
+
+function isStackFrameContext(obj: any): obj is CallStackContext {
+  return (
+    obj && typeof obj.sessionId === 'string' && typeof obj.threadId === 'string' && typeof obj.frameId === 'string'
+  );
+}
+
+function getFrame(debugService: DebugSessionManager, context: CallStackContext | unknown): DebugStackFrame | undefined {
+  if (isStackFrameContext(context)) {
+    const session = debugService.getSession(context.sessionId);
+    if (session) {
+      const thread = [session.currentThread, ...session.threads].find((t: DebugThread) => t.id === context.threadId);
+      if (thread) {
+        return thread.frames.find((sf: DebugStackFrame) => sf.id === context.frameId);
+      }
+    }
+  }
+
+  return undefined;
+}
+
+@Domain(MenuContribution, CommandContribution)
+export class DebugCallStackContribution implements MenuContribution, CommandContribution {
+  @Autowired(IDebugSessionManager)
+  protected readonly debugSessionManager: DebugSessionManager;
+
+  @Autowired(IClipboardService)
+  private readonly clipboardService: IClipboardService;
+
+  registerCommands(registry: CommandRegistry) {
+    registry.registerCommand(DEBUG_COMMANDS.RESTART_FRAME, {
+      execute: async (_: string, context: CallStackContext) => {
+        const frame = getFrame(this.debugSessionManager, context);
+        if (frame) {
+          await frame.restart();
+        }
+      },
+    });
+    registry.registerCommand(DEBUG_COMMANDS.COPY_STACK_TRACE, {
+      execute: async (_: string, context: CallStackContext) => {
+        const frame = getFrame(this.debugSessionManager, context);
+        if (frame) {
+          const callStacks = frame.thread.frames.map(
+            (e: DebugStackFrame) =>
+              `${e.raw && e.raw.name} (${e.raw && e.raw.source && e.raw.source.path}:${e.raw && e.raw.line})`,
+          );
+          this.clipboardService.writeText(callStacks.join('\n'));
+        }
+      },
+    });
+  }
+
+  registerMenus(registry: IMenuRegistry) {
+    registry.registerMenuItem(MenuId.DebugCallStackContext, {
+      command: {
+        id: DEBUG_COMMANDS.RESTART_FRAME.id,
+        label: localize('debugger.menu.restartFrame'),
+      },
+      when: `${CONTEXT_CALLSTACK_ITEM_TYPE.equalsTo('stackFrame')} && ${CONTEXT_RESTART_FRAME_SUPPORTED.raw}`,
+      enabledWhen: CONTEXT_STACK_FRAME_SUPPORTS_RESTART.raw,
+      order: 10,
+    });
+    registry.registerMenuItem(MenuId.DebugCallStackContext, {
+      command: {
+        id: DEBUG_COMMANDS.COPY_STACK_TRACE.id,
+        label: localize('debugger.menu.copyCallstack'),
+      },
+      when: CONTEXT_CALLSTACK_ITEM_TYPE.equalsTo('stackFrame'),
+      order: 20,
+    });
+  }
+}