@opensumi/ide-debug 2.21.13 → 2.22.0

package/src/browser/debug-style.less

@@ -0,0 +1,128 @@
+.sumi-breakpoint-icon-size {
+  background-size: 16px 16px;
+  cursor: pointer;
+}
+// 全局调试样式
+.sumi-debug-breakpoint {
+  background: url('./assets/breakpoint.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.sumi-debug-breakpoint-disabled {
+  background: url('./assets/breakpoint-disabled.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.sumi-debug-breakpoint-unverified {
+  background: url('./assets/breakpoint-unverified.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.sumi-debug-breakpoint-unsupported {
+  background: url('./assets/breakpoint-unsupported.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.sumi-debug-conditional-breakpoint {
+  background: url('./assets/breakpoint-conditional.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.sumi-debug-conditional-breakpoint-disabled {
+  background: url('./assets/breakpoint-conditional-disabled.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.sumi-debug-conditional-breakpoint-unverified {
+  background: url('./assets/breakpoint-conditional-unverified.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.sumi-debug-logpoint {
+  background: url('./assets/breakpoint-log.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.sumi-debug-logpoint-disabled {
+  background: url('./assets/breakpoint-log-disabled.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.sumi-debug-logpoint-unverified {
+  background: url('./assets/breakpoint-log-unverified.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.monaco-editor .sumi-debug-breakpoint-hint {
+  background: url('./assets/breakpoint-hint.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.monaco-editor .sumi-debug-top-stack-frame {
+  background: url('./assets/current-arrow.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.monaco-editor .sumi-debug-top-stack-frame {
+  &.sumi-debug-breakpoint,
+  &.sumi-debug-conditional-breakpoint,
+  &.logpoint {
+    background: url('./assets/current-and-breakpoint.svg') center center no-repeat;
+    .sumi-breakpoint-icon-size;
+  }
+}
+
+.monaco-editor .view-overlays .sumi-debug-top-stack-frame-line {
+  background: #ffff6673;
+}
+
+.monaco-editor.vs-dark .view-overlays .sumi-debug-top-stack-frame-line {
+  background: #ffff0033;
+}
+
+.monaco-editor .sumi-debug-focused-stack-frame {
+  background: url('./assets/stackframe-arrow.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.monaco-editor .sumi-debug-focused-stack-frame.sumi-debug-breakpoint {
+  background: url('./assets/stackframe-and-breakpoint.svg') center center no-repeat;
+  .sumi-breakpoint-icon-size;
+}
+
+.monaco-editor .view-overlays .sumi-debug-focused-stack-frame-line {
+  background: #cee7ce73;
+}
+
+.monaco-editor.vs-dark .view-overlays .sumi-debug-focused-stack-frame-line {
+  background: #7abd7a4d;
+}
+
+.monaco-editor.vs-dark .view-overlays .sumi-debug-top-stack-frame-exception-line {
+  background-color: #6c2022;
+}
+
+.inline-breakpoint-widget.codicon {
+  display: flex !important;
+  align-items: center;
+}
+
+.inline-breakpoint-widget.codicon-debug-breakpoint-disabled {
+  opacity: 0.7;
+}
+
+.monaco-editor .inline-breakpoint-widget.line-start {
+  left: -8px !important;
+}
+
+.monaco-editor .inline-breakpoint-widget {
+  cursor: pointer;
+}
+
+.monaco-editor .debug-breakpoint-placeholder::before {
+  content: ' ';
+  width: 0.9em;
+  display: inline-flex;
+  vertical-align: middle;
+  margin-top: -1px;
+}

package/src/browser/debugUtils.ts

@@ -0,0 +1,110 @@
+import { strings } from '@opensumi/ide-core-browser';
+
+import { DebugConfiguration } from '../common';
+
+const { equalsIgnoreCase } = strings;
+
+export function isExtensionHostDebugging(config: DebugConfiguration) {
+  return (
+    config.type &&
+    equalsIgnoreCase(
+      config.type === 'vslsShare' ? (config as any).adapterProxy.configuration.type : config.type,
+      'extensionhost',
+    )
+  );
+}
+
+export function matchAll(str: string, regexp: RegExp) {
+  let match: RegExpExecArray | null;
+  const res: RegExpExecArray[] = [];
+  while ((match = regexp.exec(str)) !== null) {
+    res.push(match);
+  }
+  return res;
+}
+
+/**
+ * request 为 attach 时，排除连接非远程机器 ip 的情况
+ */
+export function isRemoteAttach(config: DebugConfiguration): boolean {
+  if (config.request === 'attach') {
+    /**
+     * key: 调试语言 type
+     * value: 不同语言的调试插件在 attach 模式下. 要 attach 上的 TCP/IP 地址所对应的 launch 属性
+     */
+    const map = {
+      node: 'address',
+      java: 'hostName',
+      go: 'host',
+      cppdbg: 'miDebuggerServerAddress',
+      python: 'host',
+    };
+
+    const { type } = config;
+    const host = config[map[type]];
+
+    if (host) {
+      return !['localhost', '0.0.0.0', '127.0.0.1', '::1'].includes(host);
+    }
+
+    return true;
+  }
+  return false;
+}
+
+export const USUAL_WORD_SEPARATORS = '`~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?';
+
+/**
+ * Create a word definition regular expression based on default word separators.
+ * Optionally provide allowed separators that should be included in words.
+ *
+ * The default would look like this:
+ * /(-?\d*\.\d\w*)|([^\`\~\!\@\#\$\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g
+ */
+function createWordRegExp(allowInWords = ''): RegExp {
+  let source = '(-?\\d*\\.\\d\\w*)|([^';
+  for (const sep of USUAL_WORD_SEPARATORS) {
+    if (allowInWords.indexOf(sep) >= 0) {
+      continue;
+    }
+    source += '\\' + sep;
+  }
+  source += '\\s]+)';
+  return new RegExp(source, 'g');
+}
+
+// catches numbers (including floating numbers) in the first group, and alphanum in the second
+export const DEFAULT_WORD_REGEXP = createWordRegExp();
+
+export class CharWidthReader {
+  private static _INSTANCE: CharWidthReader | null = null;
+
+  public static getInstance(): CharWidthReader {
+    if (!CharWidthReader._INSTANCE) {
+      CharWidthReader._INSTANCE = new CharWidthReader();
+    }
+    return CharWidthReader._INSTANCE;
+  }
+
+  private readonly _cache: Map<string, number>;
+  private readonly _canvas: HTMLCanvasElement;
+
+  private constructor() {
+    this._cache = new Map();
+    this._canvas = document.createElement('canvas');
+  }
+
+  public getCharWidth(char: string, font: string): number {
+    const cacheKey = char + font;
+    if (this._cache.has(cacheKey)) {
+      return this._cache.get(cacheKey)!;
+    }
+
+    const context = this._canvas.getContext('2d')!;
+    context.font = font;
+    const metrics = context.measureText(char);
+    const width = metrics.width;
+    this._cache.set(cacheKey, width);
+    return width;
+  }
+}

package/src/browser/editor/debug-breakpoint-widget.ts

@@ -0,0 +1,99 @@
+import { Injectable, Autowired, INJECTOR_TOKEN, Injector } from '@opensumi/di';
+import { IContextKey, IContextKeyService } from '@opensumi/ide-core-browser';
+import { Disposable, positionToRange } from '@opensumi/ide-core-common';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+
+import {
+  DebugBreakpointWidgetContext,
+  DebugEditor,
+  IDebugBreakpointWidget,
+  TSourceBrekpointProperties,
+} from '../../common';
+import { DebugBreakpointsService } from '../view/breakpoints/debug-breakpoints.service';
+
+import { CONTEXT_BREAKPOINT_INPUT_FOCUSED } from './../../common/constants';
+import { DebugBreakpointZoneWidget } from './debug-breakpoint-zone-widget';
+
+export enum TopStackType {
+  exception,
+  debugger,
+}
+
+@Injectable()
+export class DebugBreakpointWidget extends Disposable implements IDebugBreakpointWidget {
+  @Autowired(DebugEditor)
+  private readonly editor: DebugEditor;
+
+  @Autowired(DebugBreakpointsService)
+  protected debugBreakpointsService: DebugBreakpointsService;
+
+  @Autowired(IContextKeyService)
+  private readonly contextKeyService: IContextKeyService;
+
+  @Autowired(INJECTOR_TOKEN)
+  private readonly injector: Injector;
+
+  static LINE_HEIGHT_NUMBER = 2;
+
+  protected zone: DebugBreakpointZoneWidget;
+
+  private _position: monaco.Position | undefined;
+  private breakpointWidgetInputFocus: IContextKey<boolean>;
+
+  constructor() {
+    super();
+    this.breakpointWidgetInputFocus = CONTEXT_BREAKPOINT_INPUT_FOCUSED.bind(this.contextKeyService);
+  }
+
+  get position() {
+    return this._position;
+  }
+
+  get values() {
+    return this.zone?.values;
+  }
+
+  get breakpointType(): TSourceBrekpointProperties {
+    return this.zone?.breakpointType;
+  }
+
+  show(
+    position: monaco.Position,
+    contexts?: DebugBreakpointWidgetContext,
+    defaultContext: TSourceBrekpointProperties = 'condition',
+  ) {
+    this.dispose();
+    this._position = position;
+    this.addDispose(
+      (this.zone = this.injector.get(DebugBreakpointZoneWidget, [this.editor, { ...contexts }, defaultContext])),
+    );
+    this.addDispose(
+      this.zone.onDidChangeBreakpoint(({ context, value }) => {
+        if (contexts) {
+          contexts[context] = value;
+        }
+      }),
+    );
+    this.addDispose(
+      this.zone.onFocus(() => {
+        this.breakpointWidgetInputFocus.set(true);
+      }),
+    );
+    this.addDispose(
+      this.zone.onBlur(() => {
+        this.breakpointWidgetInputFocus.set(false);
+      }),
+    );
+    this.addDispose(
+      this.zone.onDispose(() => {
+        this._position = undefined;
+        this.breakpointWidgetInputFocus.set(false);
+      }),
+    );
+    this.zone.show(positionToRange(position), DebugBreakpointWidget.LINE_HEIGHT_NUMBER);
+  }
+
+  hide() {
+    this.zone?.hide();
+  }
+}

package/src/browser/editor/debug-breakpoint-zone-widget.tsx

@@ -0,0 +1,262 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { Select, Option } from '@opensumi/ide-components';
+import { localize, Emitter, Event } from '@opensumi/ide-core-common';
+import { ICodeEditor } from '@opensumi/ide-editor';
+import { ZoneWidget } from '@opensumi/ide-monaco-enhance';
+import { ICSSStyleService } from '@opensumi/ide-theme';
+import * as monacoLanguages from '@opensumi/monaco-editor-core/esm/vs/editor/common/languages';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+
+import {
+  BreakpointChangeData,
+  DebugBreakpointWidgetContext,
+  DebugEditor,
+  TSourceBrekpointProperties,
+} from '../../common';
+import { DebugBreakpointsService } from '../view/breakpoints/debug-breakpoints.service';
+
+import styles from './debug-breakpoint.module.less';
+
+@Injectable({ multiple: true })
+export class DebugBreakpointZoneWidget extends ZoneWidget {
+  protected _fillContainer(container: HTMLElement): void {}
+
+  static INPUT_PLACEHOLDER_AFTER = styles.input_placeholder + '::after';
+
+  @Autowired(DebugBreakpointsService)
+  protected debugBreakpointsService: DebugBreakpointsService;
+
+  @Autowired(ICSSStyleService)
+  protected readonly cssManager: ICSSStyleService;
+
+  private _wrapper: HTMLDivElement;
+  private _selection: HTMLDivElement;
+  private _input: HTMLDivElement;
+
+  protected readonly _onDidChangeBreakpoint = new Emitter<BreakpointChangeData>();
+  readonly onDidChangeBreakpoint: Event<BreakpointChangeData> = this._onDidChangeBreakpoint.event;
+
+  protected readonly _onFocus = new Emitter<void>();
+  readonly onFocus: Event<void> = this._onFocus.event;
+
+  protected readonly _onBlur = new Emitter<void>();
+  readonly onBlur: Event<void> = this._onBlur.event;
+
+  private input: ICodeEditor | undefined;
+
+  get values() {
+    return {
+      ...this.contexts,
+      [this.context]: this.input ? this.input.monacoEditor.getValue() || undefined : undefined,
+    };
+  }
+
+  get breakpointType(): TSourceBrekpointProperties {
+    return this.context;
+  }
+
+  constructor(
+    public editor: DebugEditor,
+    private readonly contexts: DebugBreakpointWidgetContext = {},
+    private context: TSourceBrekpointProperties = 'condition',
+  ) {
+    super(editor);
+
+    this._wrapper = document.createElement('div');
+    this._selection = document.createElement('div');
+    this._input = document.createElement('div');
+
+    this._container.appendChild(this._wrapper);
+    this._wrapper.appendChild(this._selection);
+    this._wrapper.appendChild(this._input);
+
+    ReactDOM.render(<></>, this._input);
+  }
+
+  public hide(): void {
+    if (this.input) {
+      this.input.dispose();
+      this.input = undefined;
+    }
+    super.dispose();
+  }
+
+  public show(where: monaco.IRange, heightInLines: number): void {
+    super.show(where, heightInLines);
+
+    this.debugBreakpointsService.createBreakpointInput(this._input).then((inputEditor: ICodeEditor) => {
+      this.input = inputEditor;
+
+      const { monacoEditor } = this.input;
+      this.setInputMode();
+
+      this.addDispose(
+        monacoEditor.onDidBlurEditorWidget(() => {
+          this.inputBlurHandler();
+        }),
+      );
+      this.addDispose(
+        monacoEditor.onDidFocusEditorWidget(() => {
+          this.inputFocusHandler();
+        }),
+      );
+      this.addDispose(
+        monacoEditor.onDidChangeModelContent((textModel: monaco.editor.IModelContentChangedEvent) => {
+          if (!this.input) {
+            return;
+          }
+
+          const value = monacoEditor.getValue();
+          if (value.length === 0) {
+            this.ensureRenderPlaceholder();
+          } else {
+            this.clearPlaceholder();
+          }
+
+          const lineNum = monacoEditor.getModel()!.getLineCount();
+          this._relayout(lineNum + 1);
+        }),
+      );
+
+      this.syncPreContent();
+    });
+  }
+
+  protected createDecorations(): void {
+    if (!this.input) {
+      return;
+    }
+
+    if (this.input.monacoEditor.getValue().length !== 0) {
+      return;
+    }
+
+    this.input.monacoEditor.deltaDecorations(
+      [],
+      [
+        {
+          range: {
+            startLineNumber: 1,
+            endLineNumber: 0,
+            startColumn: 0,
+            endColumn: 1,
+          },
+          options: {
+            description: 'debug-breakpoint-zone-widget',
+            afterContentClassName: styles.input_placeholder,
+          },
+        },
+      ],
+    );
+  }
+
+  protected renderOption(context: TSourceBrekpointProperties, label: string): JSX.Element {
+    return <Option value={context}>{label}</Option>;
+  }
+
+  protected readonly inputFocusHandler = () => {
+    this._onFocus.fire();
+  };
+
+  protected readonly inputBlurHandler = () => {
+    this._onBlur.fire();
+  };
+
+  protected readonly selectContextHandler = (value: TSourceBrekpointProperties) => {
+    if (this.input) {
+      this.contexts[this.context] = this.input.monacoEditor.getValue() || undefined;
+    }
+
+    this.context = value;
+    this.setInputMode();
+    this.render();
+  };
+
+  private setInputMode(): void {
+    const languageIdentifier = this.editor.getModel()?.getLanguageId();
+    const model = this.input?.monacoEditor.getModel();
+    if (model && languageIdentifier) {
+      model.setMode(this.context === 'logMessage' ? 'plaintext' : languageIdentifier);
+    }
+  }
+
+  private renderPlaceholder() {
+    if (!this.input) {
+      return;
+    }
+
+    this.clearPlaceholder();
+
+    const content = `'${this.placeholder}' !important`;
+    this.cssManager.addClass(DebugBreakpointZoneWidget.INPUT_PLACEHOLDER_AFTER, { content });
+  }
+
+  private ensureRenderPlaceholder() {
+    if (!this.input) {
+      return;
+    }
+
+    this.createDecorations();
+    this.renderPlaceholder();
+  }
+
+  private syncPreContent(): void {
+    if (this.input) {
+      this.input.focus();
+      const preContent = this.contexts[this.context] || '';
+      this.input.monacoEditor.setValue(preContent);
+    }
+  }
+
+  private clearPlaceholder() {
+    this.cssManager.removeClass(DebugBreakpointZoneWidget.INPUT_PLACEHOLDER_AFTER);
+  }
+
+  applyClass() {
+    this._wrapper.className = styles.debug_breakpoint_wrapper;
+    this._selection.className = styles.debug_breakpoint_selected;
+    this._input.className = styles.debug_breakpoint_input;
+  }
+
+  applyStyle() {
+    this.syncPreContent();
+
+    ReactDOM.render(
+      <Select
+        value={this.context}
+        selectedRenderer={() => <span className='kt-select-option'>{this.getContextToLocalize(this.context)}</span>}
+        onChange={this.selectContextHandler}
+      >
+        {this.renderOption('condition', this.getContextToLocalize('condition'))}
+        {this.renderOption('hitCondition', this.getContextToLocalize('hitCondition'))}
+        {this.renderOption('logMessage', this.getContextToLocalize('logMessage'))}
+      </Select>,
+      this._selection,
+    );
+  }
+
+  getContextToLocalize(ctx: TSourceBrekpointProperties) {
+    switch (ctx) {
+      case 'logMessage':
+        return localize('debug.expression.logMessage');
+      case 'hitCondition':
+        return localize('debug.expression.hitCondition');
+      default:
+        return localize('debug.expression.condition');
+    }
+  }
+
+  get placeholder() {
+    switch (this.context) {
+      case 'logMessage':
+        return localize('debug.expression.log.placeholder');
+      case 'hitCondition':
+        return localize('debug.expression.hit.placeholder');
+      default:
+        return localize('debug.expression.condition.placeholder');
+    }
+  }
+}

package/src/browser/editor/debug-breakpoint.module.less

@@ -0,0 +1,30 @@
+.debug_breakpoint_wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  border-top-color: rgb(0, 122, 204);
+  border-bottom-color: rgb(0, 122, 204);
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  overflow: hidden;
+  background: var(--editor-background);
+}
+
+.debug_breakpoint_selected {
+  padding: 0 10px;
+  flex: 1;
+  min-width: 120px;
+  margin: auto;
+}
+
+.debug_breakpoint_input {
+  width: 100%;
+  height: inherit;
+  margin-top: 7px;
+  .input_placeholder {
+    position: relative;
+  }
+}