@opensumi/ide-debug 2.21.13 → 2.22.0

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

@@ -0,0 +1,193 @@
+.debug_stack_item_label {
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  height: 22px;
+  width: 100%;
+  cursor: pointer;
+  &:hover {
+    background: var(--list-hoverBackground);
+    color: var(--list-hoverForeground);
+    .debug_threads_operation {
+      display: block;
+    }
+    .debug_threads_description {
+      display: none;
+    }
+  }
+  &.selected {
+    background: var(--list-activeSelectionBackground);
+    color: var(--list-activeSelectionForeground);
+  }
+}
+
+.debug_threads_operation {
+  display: none;
+}
+.debug_threads_description {
+  display: block;
+}
+
+.debug_stack_item_label_title {
+  flex: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.debug_stack_item {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  .debug_stack_item_loading {
+    text-align: center;
+    font-size: 12px;
+    color: #868c91;
+    margin-top: 8px;
+  }
+}
+
+.debug_stack_space {
+  width: 16px;
+}
+
+.debug_stack_item_next_panel {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.debug_session_icon {
+  padding: 0px 4px;
+}
+
+.debug_stack_frames {
+  display: flex;
+  align-items: baseline;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.debug_stack_frames_item {
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  height: 22px;
+  width: 100%;
+  cursor: pointer;
+  &:hover {
+    background: var(--list-hoverBackground);
+    color: var(--list-hoverForeground);
+    .debug_restart_frame_icon {
+      display: inline-block;
+      pointer-events: all;
+    }
+    .debug_stack_frames_item_badge {
+      display: none;
+    }
+  }
+  &.selected {
+    background: var(--list-activeSelectionBackground);
+    color: var(--list-activeSelectionForeground);
+  }
+  .debug_restart_frame_icon {
+    color: var(--debugIcon-restartForeground);
+    display: none;
+    pointer-events: none;
+    margin: 0 4px;
+    border-radius: 4px;
+    line-height: 1;
+    padding: 2px;
+    &:hover {
+      background-color: rgba(90, 93, 94, 1);
+    }
+  }
+}
+.debug_stack_frames_load_more {
+  display: block;
+  text-align: center;
+  font-size: 12px;
+  color: #167cdb;
+  width: 100%;
+}
+.debug_stack_frames_error_message {
+  display: block;
+  text-align: center;
+  width: 100%;
+  cursor: default;
+  color: var(--list-errorForeground);
+  &.hover {
+    color: var(--list-errorForeground);
+  }
+}
+
+.debug_stack_frames_item_label {
+  flex: 1;
+  margin-right: 12px;
+  &.label {
+    text-align: center;
+    min-width: fit-content;
+    opacity: 0.7;
+  }
+  &.subtle {
+    opacity: 0.7;
+  }
+}
+.debug_stack_frames_item_description {
+  opacity: 0.6;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.debug_stack_frames_item_badge {
+  display: inline-block;
+  border-radius: 2px;
+  padding: 0px 5px;
+  background: var(--badge-background);
+  color: var(--badge-foreground);
+  font-size: 12px;
+  margin-left: 5px;
+  display: inline-block;
+}
+.debug_stack_frames_item_hidden {
+  opacity: 0.4;
+}
+
+.debug_threads_item {
+  flex: 1;
+  align-items: center;
+  padding: 0 5px;
+  // height: 22px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  cursor: pointer;
+}
+.debug_threads_item_label {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.debug_threads_item_description {
+  font-size: 12px !important;
+  opacity: 0.8;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.debug_stack_thread_operations {
+  display: flex;
+  div:not(:first-child) {
+    margin-left: 4px;
+  }
+}
+
+.debug_stack_session_operations {
+  display: flex;
+  margin-right: 5px;
+  div {
+    padding: 0px 10px;
+  }
+}

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

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { localize, useInjectable } from '@opensumi/ide-core-browser';
+
+import { DebugAction } from '../../components';
+import { DebugSession } from '../../debug-session';
+import { DebugThread } from '../../model/debug-thread';
+import { DebugToolbarService } from '../configuration/debug-toolbar.service';
+
+import styles from './debug-call-stack.module.less';
+
+export interface DebugStackOperationViewProps {
+  session?: DebugSession;
+  thread?: DebugThread;
+}
+
+export const DebugStackOperationView = (props: DebugStackOperationViewProps) => {
+  const { session, thread } = props;
+  const {
+    doStop,
+    doStepIn,
+    doStepOut,
+    doStepOver,
+    doContinue,
+    doRestart,
+    doPause,
+    updateCurrentSession,
+  }: DebugToolbarService = useInjectable(DebugToolbarService);
+
+  if (session && !thread) {
+    const selectSession = (callback: () => any) => {
+      updateCurrentSession(session);
+      callback();
+    };
+
+    return (
+      <div className={styles.debug_stack_session_operations}>
+        <DebugAction run={() => selectSession(doRestart)} icon={'reload'} label={localize('debug.action.restart')} />
+        <DebugAction run={() => selectSession(doStop)} icon={'stop'} label={localize('debug.action.stop')} />
+      </div>
+    );
+  }
+
+  if (!session && thread) {
+    const { stopped } = thread;
+    const selectThread = (callback: () => any) => {
+      thread.session.currentThread = thread;
+      callback();
+    };
+
+    const renderContinue = (isStop: boolean): React.ReactNode => {
+      if (isStop) {
+        return (
+          <DebugAction
+            run={() => selectThread(doContinue)}
+            icon={'continue'}
+            label={localize('debug.action.continue')}
+          />
+        );
+      }
+      return (
+        <DebugAction
+          run={() => selectThread(doPause)}
+          enabled={true}
+          icon={'pause'}
+          label={localize('debug.action.pause')}
+        />
+      );
+    };
+
+    return (
+      <div className={styles.debug_stack_thread_operations}>
+        {renderContinue(stopped)}
+        <DebugAction
+          run={() => selectThread(doStepOver)}
+          enabled={stopped}
+          icon={'step'}
+          label={localize('debug.action.step-over')}
+        />
+        <DebugAction
+          run={() => selectThread(doStepIn)}
+          enabled={stopped}
+          icon={'step-in'}
+          label={localize('debug.action.step-into')}
+        />
+        <DebugAction
+          run={() => selectThread(doStepOut)}
+          enabled={stopped}
+          icon={'step-out'}
+          label={localize('debug.action.step-out')}
+        />
+      </div>
+    );
+  }
+
+  return null;
+};

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

@@ -0,0 +1,105 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { IContextKey } from '@opensumi/ide-core-browser';
+import { AbstractContextMenuService, ICtxMenuRenderer, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+
+import { DebugStackFrame, DebugThread } from '../../model';
+
+import { CONTEXT_STACK_FRAME_SUPPORTS_RESTART, CONTEXT_CALLSTACK_ITEM_TYPE } from './../../../common/constants';
+import { DebugContextKey } from './../../contextkeys/debug-contextkey.service';
+import { DebugSession } from './../../debug-session';
+
+@Injectable()
+export class DebugCallStackService {
+  @Autowired(AbstractContextMenuService)
+  private readonly contextMenuService: AbstractContextMenuService;
+
+  @Autowired(ICtxMenuRenderer)
+  private readonly ctxMenuRenderer: ICtxMenuRenderer;
+
+  @Autowired(DebugContextKey)
+  private readonly debugContextKey: DebugContextKey;
+
+  private stackFrameSupportsRestart: IContextKey<boolean>;
+  private callStackItemType: IContextKey<string>;
+
+  constructor() {
+    if (!this.stackFrameSupportsRestart) {
+      this.stackFrameSupportsRestart = CONTEXT_STACK_FRAME_SUPPORTS_RESTART.bind(this.debugContextKey.contextKeyScoped);
+    }
+    if (!this.callStackItemType) {
+      this.callStackItemType = CONTEXT_CALLSTACK_ITEM_TYPE.bind(this.debugContextKey.contextKeyScoped);
+    }
+  }
+
+  public handleContextMenu = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    data: DebugSession | DebugStackFrame | DebugThread,
+  ): void => {
+    this.stackFrameSupportsRestart.reset();
+    event.stopPropagation();
+    event.preventDefault();
+
+    if (data instanceof DebugSession) {
+      this.callStackItemType.set('session');
+    } else if (data instanceof DebugThread) {
+      this.callStackItemType.set('thread');
+    } else if (data instanceof DebugStackFrame) {
+      this.callStackItemType.set('stackFrame');
+      this.stackFrameSupportsRestart.set(data.canRestart);
+    } else {
+      this.callStackItemType.reset();
+    }
+
+    const { x, y } = event.nativeEvent;
+
+    const menus = this.contextMenuService.createMenu({
+      id: MenuId.DebugCallStackContext,
+      contextKeyService: this.debugContextKey.contextKeyScoped,
+    });
+    const menuNodes = menus.getMergedMenuNodes();
+    menus.dispose();
+
+    const toArgs = () => {
+      if (data instanceof DebugStackFrame) {
+        if (data.source?.inMemory) {
+          return data.source.raw.path || data.source.reference || data.source.name;
+        }
+
+        return data.source ? data.source.uri.toString() : '';
+      }
+      if (data instanceof DebugThread) {
+        return data.id;
+      }
+      if (data instanceof DebugSession) {
+        return data.id;
+      }
+
+      return '';
+    };
+
+    const toAgrsContext = () =>
+      data instanceof DebugStackFrame
+        ? {
+            sessionId: data.session.id,
+            threadId: data.thread.id,
+            frameId: data.id,
+          }
+        : data instanceof DebugThread
+        ? {
+            sessionId: data.session.id,
+            threadId: data.id,
+          }
+        : data instanceof DebugSession
+        ? {
+            sessionId: data.id,
+          }
+        : undefined;
+
+    this.ctxMenuRenderer.show({
+      anchor: { x, y },
+      menuNodes,
+      args: [toArgs(), toAgrsContext()],
+      contextKeyService: this.debugContextKey.contextKeyScoped,
+    });
+  };
+}

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

@@ -0,0 +1,43 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useInjectable, ViewState } from '@opensumi/ide-core-browser';
+
+import { IDebugSessionManager, IDebugSession } from '../../../common';
+import { DebugSession } from '../../debug-session';
+import { DebugSessionManager } from '../../debug-session-manager';
+
+import { DebugStackSessionView } from './debug-call-stack-session.view';
+
+export const DebugCallStackView = observer(({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
+  const manager = useInjectable<DebugSessionManager>(IDebugSessionManager);
+  const [sessions, setSessions] = React.useState<DebugSession[]>([]);
+
+  React.useEffect(() => {
+    const createDispose = manager.onDidStartDebugSession((session) => {
+      sessions.push(session);
+      setSessions([...sessions]);
+    });
+
+    const destroyDispose = manager.onDidDestroyDebugSession((session) => {
+      const index = sessions.findIndex((s) => s.id === session.id);
+      sessions.splice(index, 1);
+      setSessions([...sessions]);
+    });
+
+    return () => {
+      createDispose.dispose();
+      destroyDispose.dispose();
+    };
+  }, []);
+
+  return (
+    <div style={{ width: viewState.width }}>
+      {sessions
+        .filter((s: IDebugSession) => !s.parentSession)
+        .map((session) => (
+          <DebugStackSessionView key={session.id} viewState={viewState} session={session} indent={0} />
+        ))}
+    </div>
+  );
+});

package/src/browser/view/variables/debug-variables-model.ts

@@ -0,0 +1,38 @@
+import { Injectable, Optional } from '@opensumi/di';
+import { TreeModel, TreeNodeEvent, CompositeTreeNode } from '@opensumi/ide-components';
+import { ThrottledDelayer, Emitter, Event } from '@opensumi/ide-core-browser';
+
+import { ExpressionContainer } from '../../tree/debug-tree-node.define';
+
+@Injectable({ multiple: true })
+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;
+    // 分支更新时通知树刷新, 不是立即更新，而是延迟更新，待树稳定后再更新
+    // 100ms的延迟并不能保证树稳定，特别是在node_modules展开的情况下
+    // 但在普通使用上已经足够可用，即不会有渲染闪烁问题
+    this.root.watcher.on(TreeNodeEvent.BranchDidUpdate, () => {
+      if (!this.flushDispatchChangeDelayer.isTriggered()) {
+        this.flushDispatchChangeDelayer.cancel();
+      }
+      this.flushDispatchChangeDelayer.trigger(async () => {
+        await this.onWillUpdateEmitter.fireAndAwait();
+        this.dispatchChange();
+      });
+    });
+  }
+}