@opensumi/ide-debug 2.21.13 → 2.22.0

package/src/browser/tree/index.ts

@@ -0,0 +1,2 @@
+export * from './debug-tree-node.define';
+export * from './debug-console-tree-node.define';

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

@@ -0,0 +1,72 @@
+.debug_breakpoints {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.debug_breakpoints_disabled {
+  opacity: 0.7;
+}
+
+.debug_breakpoints_item {
+  height: 22px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  flex-direction: row;
+  &:hover {
+    background: var(--list-hoverBackground);
+    color: var(--list-hoverForeground);
+    .debug_remove_breakpoints_icon {
+      display: inline-block;
+      pointer-events: all;
+      margin-right: 6px;
+    }
+    .debug_breakpoints_badge {
+      display: none;
+    }
+  }
+  &.selected {
+    background: var(--list-activeSelectionBackground);
+    color: var(--list-activeSelectionForeground);
+  }
+}
+
+.debug_breakpoints_icon {
+  width: 19px;
+  height: 19px;
+  min-width: 19px;
+}
+
+.debug_remove_breakpoints_icon {
+  color: #c5c5c5;
+  display: none;
+  pointer-events: none;
+}
+
+.debug_breakpoints_badge {
+  display: block;
+  margin-right: 5px;
+}
+
+.debug_breakpoints_description {
+  display: block;
+  transform: scale(0.95);
+  opacity: 0.7;
+  margin-left: 5px;
+  display: inline;
+}
+
+.debug_breakpoints_name {
+  flex-grow: 0;
+  display: inline;
+}
+
+.debug_breakpoints_wrapper {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 5px;
+  flex: 1;
+}

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

@@ -0,0 +1,217 @@
+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 { LabelService } from '@opensumi/ide-core-browser/lib/services';
+import { ICodeEditor, EditorCollectionService, getSimpleEditorOptions } from '@opensumi/ide-editor';
+import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser';
+import { IWorkspaceService } from '@opensumi/ide-workspace';
+import { WorkspaceEditDidRenameFileEvent, WorkspaceEditDidDeleteFileEvent } from '@opensumi/ide-workspace-edit';
+
+import { DEBUG_REPORT_NAME, CONTEXT_IN_DEBUG_MODE_KEY, IDebugBreakpoint } from '../../../common';
+import { IDebugSessionManager } from '../../../common/debug-session';
+import {
+  DebugBreakpoint,
+  DebugExceptionBreakpoint,
+  isDebugBreakpoint,
+  isDebugExceptionBreakpoint,
+  BreakpointManager,
+  DebugDecorator,
+} from '../../breakpoint';
+import { DebugSessionManager } from '../../debug-session-manager';
+import { DebugViewModel } from '../debug-view-model';
+
+import { BreakpointItem } from './debug-breakpoints.view';
+
+@Injectable()
+export class DebugBreakpointsService extends WithEventBus {
+  @Autowired(DebugViewModel)
+  protected readonly model: DebugViewModel;
+
+  @Autowired(IWorkspaceService)
+  protected readonly workspaceService: IWorkspaceService;
+
+  @Autowired(BreakpointManager)
+  protected readonly breakpoints: BreakpointManager;
+
+  @Autowired(IDebugSessionManager)
+  protected readonly sessions: DebugSessionManager;
+
+  @Autowired(LabelService)
+  protected readonly labelProvider: LabelService;
+
+  @Autowired(IContextKeyService)
+  protected readonly contextKeyService: IContextKeyService;
+
+  @Autowired(IReporterService)
+  protected readonly reporterService: IReporterService;
+
+  @Autowired(EditorCollectionService)
+  protected readonly editorService: EditorCollectionService;
+
+  @Autowired(IEditorDocumentModelService)
+  protected readonly documentService: IEditorDocumentModelService;
+
+  private _inputEditor: ICodeEditor;
+
+  public get inputEditor(): ICodeEditor {
+    return this._inputEditor;
+  }
+
+  @observable
+  public nodes: BreakpointItem[] = [];
+
+  @observable
+  public enable: boolean;
+
+  @observable
+  public inDebugMode: boolean;
+
+  public roots: URI[];
+
+  constructor() {
+    super();
+    this.init();
+  }
+
+  async init() {
+    await this.updateRoots();
+    this.updateBreakpoints();
+    this.workspaceService.onWorkspaceChanged(async () => {
+      await this.updateRoots();
+      this.updateBreakpoints();
+    });
+    this.breakpoints.onDidChangeBreakpoints(() => {
+      this.updateBreakpoints();
+    });
+    this.breakpoints.onDidChangeExceptionsBreakpoints(() => {
+      this.updateBreakpoints();
+    });
+    this.contextKeyService.onDidChangeContext((e) => {
+      if (e.payload.affectsSome(new Set([CONTEXT_IN_DEBUG_MODE_KEY]))) {
+        runInAction(() => {
+          this.inDebugMode = this.contextKeyService.getContextValue(CONTEXT_IN_DEBUG_MODE_KEY) || false;
+        });
+      }
+    });
+  }
+
+  public getBreakpointDecoration(breakpoint: IDebugBreakpoint, isDebugMode = false, enabled = true) {
+    return new DebugDecorator().getDecoration(breakpoint, isDebugMode, enabled);
+  }
+
+  @OnEvent(WorkspaceEditDidRenameFileEvent)
+  onRenameFile(e: WorkspaceEditDidRenameFileEvent) {
+    this.removeBreakpoints(e.payload.oldUri);
+  }
+
+  @OnEvent(WorkspaceEditDidDeleteFileEvent)
+  onDeleteFile(e: WorkspaceEditDidDeleteFileEvent) {
+    this.removeBreakpoints(e.payload.oldUri);
+  }
+
+  private removeBreakpoints(uri: URI) {
+    this.breakpoints.cleanAllMarkers(uri);
+    this.updateBreakpoints();
+  }
+
+  @action
+  async updateRoots() {
+    this.enable = this.breakpoints.breakpointsEnabled;
+    this.inDebugMode = this.contextKeyService.getContextValue(CONTEXT_IN_DEBUG_MODE_KEY) || false;
+    const roots = await this.workspaceService.roots;
+    this.roots = roots.map((file) => new URI(file.uri));
+  }
+
+  @action.bound
+  toggleBreakpointEnable(data: IDebugBreakpoint | DebugExceptionBreakpoint) {
+    if (isDebugBreakpoint(data)) {
+      const real = this.breakpoints.getBreakpoint(URI.parse(data.uri), {
+        lineNumber: data.raw.line,
+        column: data.raw.column,
+      });
+      if (real) {
+        real.enabled = !real.enabled;
+        this.breakpoints.updateBreakpoint(real);
+      }
+    }
+    if (isDebugExceptionBreakpoint(data)) {
+      this.breakpoints.updateExceptionBreakpoints(data.filter, !data.default);
+    }
+  }
+
+  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 updateBreakpoints() {
+    this.nodes = this.extractNodes([
+      ...this.breakpoints.getExceptionBreakpoints(),
+      ...this.breakpoints.getBreakpoints(),
+    ]);
+  }
+
+  removeAllBreakpoints() {
+    this.breakpoints.clearBreakpoints();
+  }
+
+  delBreakpoint(bp: IDebugBreakpoint): void {
+    this.breakpoints.delBreakpoint(bp);
+  }
+
+  @action
+  toggleBreakpoints() {
+    this.breakpoints.breakpointsEnabled = !this.breakpoints.breakpointsEnabled;
+    this.enable = this.breakpoints.breakpointsEnabled;
+
+    if (this.enable) {
+      this.reporterService.point(DEBUG_REPORT_NAME?.DEBUG_BREAKPOINT, 'enabled');
+    } else {
+      this.reporterService.point(DEBUG_REPORT_NAME?.DEBUG_BREAKPOINT, 'unenabled');
+    }
+  }
+
+  public async createBreakpointInput(container: HTMLElement): Promise<ICodeEditor> {
+    this._inputEditor = await this.editorService.createCodeEditor(container!, {
+      ...getSimpleEditorOptions(),
+      lineHeight: 21,
+      scrollbar: {
+        horizontal: 'hidden',
+        vertical: 'hidden',
+        handleMouseWheel: false,
+      },
+      acceptSuggestionOnEnter: 'on',
+      renderIndentGuides: false,
+    });
+    const docModel = await this.documentService.createModelReference(
+      new URI('debug/breakpoint/expression/input').withScheme(Schemes.walkThroughSnippet),
+    );
+
+    const model = docModel.instance.getMonacoModel();
+    model.updateOptions({ tabSize: 2 });
+    this._inputEditor.monacoEditor.setModel(model);
+    return Promise.resolve(this.inputEditor);
+  }
+}

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

@@ -0,0 +1,174 @@
+import cls from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React 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 { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
+
+import { IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
+import {
+  DebugBreakpoint,
+  DebugExceptionBreakpoint,
+  isDebugBreakpoint,
+  isRuntimeBreakpoint,
+  getStatus,
+} from '../../breakpoint';
+import { DebugSessionManager } from '../../debug-session-manager';
+
+import styles from './debug-breakpoints.module.less';
+import { DebugBreakpointsService } from './debug-breakpoints.service';
+
+export interface BreakpointItem {
+  name: string;
+  id: string;
+  description: 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 containerStyle = {
+    height: viewState.height,
+    width: viewState.width,
+  } as React.CSSProperties;
+
+  return (
+    <div className={cls(styles.debug_breakpoints, !enable && styles.debug_breakpoints_disabled)}>
+      <RecycleList data={nodes} itemHeight={22} template={template} style={containerStyle} />
+    </div>
+  );
+});
+
+export const BreakpointItem = ({
+  data,
+  toggle,
+  isDebugMode,
+  breakpointEnabled,
+}: {
+  data: BreakpointItem;
+  toggle: () => void;
+  isDebugMode: boolean;
+  breakpointEnabled: boolean;
+}) => {
+  const defaultValue = isDebugBreakpoint(data.breakpoint) ? data.breakpoint.enabled : !!data.breakpoint.default;
+  const manager = useInjectable<DebugSessionManager>(IDebugSessionManager);
+  const commandService = useInjectable<CommandService>(CommandService);
+  const debugBreakpointsService = useInjectable<DebugBreakpointsService>(DebugBreakpointsService);
+  const [enabled, setEnabled] = React.useState<boolean>(defaultValue);
+  const [status, setStatus] = React.useState<DebugProtocol.Breakpoint | false | undefined>(undefined);
+
+  const handleBreakpointChange = () => {
+    toggle();
+    setEnabled(!enabled);
+  };
+
+  const handleBreakpointClick = () => {
+    if ((data.breakpoint as ISourceBreakpoint).uri) {
+      const options = {
+        preview: true,
+        focus: true,
+      };
+      if (status) {
+        options['range'] = {
+          startColumn: status.column || 0,
+          endColumn: status.column || 0,
+          startLineNumber: status.line,
+          endLineNumber: status.line,
+        };
+      } else {
+        options['range'] = {
+          startColumn: (data.breakpoint as IDebugBreakpoint).raw.column || 0,
+          endColumn: (data.breakpoint as IDebugBreakpoint).raw.column || 0,
+          startLineNumber: (data.breakpoint as IDebugBreakpoint).raw.line,
+          endLineNumber: (data.breakpoint as IDebugBreakpoint).raw.line,
+        };
+      }
+      commandService.executeCommand(
+        EDITOR_COMMANDS.OPEN_RESOURCE.id,
+        new URI((data.breakpoint as ISourceBreakpoint).uri),
+        options,
+      );
+    }
+  };
+
+  React.useEffect(() => {
+    const exec = () => {
+      if (isDebugBreakpoint(data.breakpoint) && isRuntimeBreakpoint(data.breakpoint)) {
+        const status = getStatus(data.breakpoint);
+        setStatus(status);
+      }
+    };
+
+    const disposable = manager.onDidChangeActiveDebugSession(() => exec());
+    exec();
+
+    return () => {
+      setStatus(undefined);
+      disposable.dispose();
+    };
+  }, []);
+
+  const verified = !isDebugMode ? true : isDebugBreakpoint(data.breakpoint) && isRuntimeBreakpoint(data.breakpoint);
+
+  const getBreakpointIcon = () => {
+    const { className } = debugBreakpointsService.getBreakpointDecoration(
+      data.breakpoint as IDebugBreakpoint,
+      isDebugMode,
+      breakpointEnabled && enabled,
+    );
+    return className;
+  };
+
+  const converBreakpointClsState = () => {
+    if (isDebugBreakpoint(data.breakpoint)) {
+      if (!verified) {
+        return 'sumi-debug-breakpoint-unverified';
+      }
+
+      return getBreakpointIcon();
+    }
+
+    return '';
+  };
+
+  const removeBreakpoint = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    event.stopPropagation();
+    debugBreakpointsService.delBreakpoint(data.breakpoint as IDebugBreakpoint);
+  };
+
+  return (
+    <div className={cls(styles.debug_breakpoints_item)}>
+      <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>
+      </div>
+      {isDebugBreakpoint(data.breakpoint) ? (
+        <>
+          <a
+            title='删除断点'
+            onClick={(event) => removeBreakpoint(event)}
+            className={cls(styles.debug_remove_breakpoints_icon, getIcon('close'))}
+          ></a>
+          <Badge className={styles.debug_breakpoints_badge}>
+            {(data.breakpoint as IDebugBreakpoint).raw.line}
+            {!!data.breakpoint.raw.column && `:${data.breakpoint.raw.column}`}
+          </Badge>
+        </>
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,110 @@
+@import '~@opensumi/ide-components/lib/style/mixins.less';
+
+.debug_action_bar {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  padding: 0px 8px;
+  margin-bottom: 8px;
+  justify-content: flex-start;
+  pointer-events: all;
+  overflow: hidden;
+
+  .debug_actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 124px;
+    & > *:not(:first-child) {
+      margin-left: 6px;
+    }
+  }
+
+  .debug_selection {
+    width: 100%;
+    min-width: 50px;
+    margin-right: 10px;
+    max-width: 200px;
+    &:focus-visible {
+      outline: 0;
+    }
+    :global(.kt-select-value) {
+      & > option {
+        min-width: 22px;
+      }
+    }
+  }
+}
+
+.debug_configuration_toolbar {
+  display: flex;
+  height: 28px;
+  padding-right: 8px;
+  margin-bottom: 8px;
+  align-items: center;
+
+  .debug_actions {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 58px;
+    max-width: 66px;
+  }
+
+  .debug_selection {
+    width: 100%;
+    min-width: 50px;
+    margin-left: 8px;
+    margin-right: 6px;
+
+    &:focus-visible {
+      outline: 0;
+    }
+    :global(.kt-select-value) {
+      & > option {
+        min-width: 22px;
+      }
+    }
+  }
+}
+
+.debug_toolbar_container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  z-index: 10;
+  user-select: none;
+
+  .debug_action_bar {
+    height: 100%;
+    padding: 0px 12px;
+  }
+}
+
+.debug_toolbar_wrapper {
+  display: flex;
+  height: 28px;
+  padding-left: 5px;
+  background-color: var(--debugToolBar-background);
+  border: 1px solid var(--debugToolBar-border);
+  .modal-shadow();
+}
+
+.debug_toolbar_wrapper_electron {
+  -webkit-app-region: none;
+}
+
+.debug_toolbar_drag {
+  pointer-events: all;
+  cursor: pointer;
+}
+
+.debug_toolbar_drag_wrapper {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}