@opensumi/ide-debug 2.21.13 → 2.22.0

package/src/browser/view/configuration/debug-toolbar.view.tsx

@@ -0,0 +1,335 @@
+import cls from 'classnames';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useState } from 'react';
+
+import { Injectable } from '@opensumi/di';
+import { Option, Select } from '@opensumi/ide-components';
+import {
+  AppConfig,
+  getIcon,
+  localize,
+  PreferenceService,
+  useInjectable,
+  DisposableCollection,
+  electronEnv,
+  isMacintosh,
+} from '@opensumi/ide-core-browser';
+import { InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
+import { Select as NativeSelect } from '@opensumi/ide-core-browser/lib/components/select';
+import { LAYOUT_VIEW_SIZE } from '@opensumi/ide-core-browser/lib/layout/constants';
+import { IElectronMainUIService } from '@opensumi/ide-core-common/lib/electron';
+
+import { DebugState } from '../../../common';
+import { DebugAction } from '../../components';
+import { DebugSession } from '../../debug-session';
+import { isExtensionHostDebugging } from '../../debugUtils';
+
+import styles from './debug-configuration.module.less';
+import { DebugConfigurationService } from './debug-configuration.service';
+import { DebugToolbarService } from './debug-toolbar.service';
+
+@Injectable()
+class FloatController {
+  @observable
+  x: number;
+
+  @observable
+  line: number;
+
+  @observable
+  enable: boolean;
+
+  private _origin: number;
+  private _last: number;
+
+  private _y: number;
+
+  constructor() {
+    this.x = 0;
+    this.line = 0;
+    this.enable = false;
+    this._origin = 0;
+    this._last = 0;
+    this._y = 0;
+  }
+
+  @action.bound
+  onMouseDown(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    this.enable = true;
+    this._origin = e.clientX;
+    this._y = e.clientY;
+  }
+
+  @action.bound
+  onMouseMove(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    e.stopPropagation();
+    if (this.enable) {
+      this.x = e.clientX - this._origin + this._last;
+      this.line = e.clientY - this._y > 10 ? 1 : 0;
+    }
+  }
+
+  @action.bound
+  onMouseUp() {
+    this.enable = false;
+    this._last = this.x;
+  }
+}
+
+export interface DebugToolbarViewProps {
+  float: boolean;
+}
+
+export const DebugToolbarView = observer((props: DebugToolbarViewProps) => {
+  const {
+    state,
+    toolBarMenuMap,
+    doStop,
+    doStepIn,
+    doStepOut,
+    doStepOver,
+    doContinue,
+    doRestart,
+    doPause,
+    currentSession,
+    sessions,
+    updateCurrentSession,
+  } = useInjectable<DebugToolbarService>(DebugToolbarService);
+  const { isElectronRenderer } = useInjectable<AppConfig>(AppConfig);
+  const isAttach =
+    !!currentSession &&
+    currentSession.configuration.request === 'attach' &&
+    !isExtensionHostDebugging(currentSession.configuration);
+
+  const currentSessionId = currentSession && currentSession.id;
+
+  const renderToolBar = (session: DebugSession | undefined): React.ReactNode => {
+    if (session && session.id && toolBarMenuMap.has(session.id)) {
+      return <InlineMenuBar menus={toolBarMenuMap.get(session.id)!} />;
+    }
+    return null;
+  };
+  const renderStop = (state: DebugState): React.ReactNode => {
+    if (isAttach) {
+      return (
+        <DebugAction
+          run={doStop}
+          enabled={typeof state === 'number' && state !== DebugState.Inactive}
+          icon={'disconnect'}
+          label={localize('debug.action.disattach')}
+        />
+      );
+    }
+    return (
+      <DebugAction
+        run={doStop}
+        enabled={typeof state === 'number' && state !== DebugState.Inactive}
+        icon={'stop'}
+        label={localize('debug.action.stop')}
+      />
+    );
+  };
+  const renderContinue = (state: DebugState): React.ReactNode => {
+    if (state === DebugState.Stopped) {
+      return <DebugAction run={doContinue} icon={'continue'} label={localize('debug.action.continue')} />;
+    }
+    return (
+      <DebugAction
+        run={doPause}
+        enabled={typeof state === 'number' && state === DebugState.Running}
+        icon={'pause'}
+        label={localize('debug.action.pause')}
+      />
+    );
+  };
+
+  const renderSessionOptions = (sessions: DebugSession[]) =>
+    sessions.map((session: DebugSession) => {
+      if (isElectronRenderer) {
+        return (
+          <option key={session.id} value={session.id}>
+            {session.label}
+          </option>
+        );
+      }
+      return (
+        <Option key={session.id} label={session.label} value={session.id}>
+          {session.label}
+        </Option>
+      );
+    });
+
+  const renderSelections = (sessions: DebugSession[]) => {
+    if (sessions.length > 1) {
+      return (
+        <div className={cls(styles.debug_selection)}>
+          {isElectronRenderer ? (
+            <NativeSelect value={currentSessionId} onChange={setCurrentSession}>
+              {renderSessionOptions(sessions)}
+            </NativeSelect>
+          ) : (
+            <Select
+              className={cls(styles.debug_selection, styles.special_radius)}
+              size={props.float ? 'small' : 'default'}
+              value={currentSessionId}
+              options={sessions.map((s) => ({ label: s.label, value: s.id }))}
+              onChange={setCurrentSession}
+            >
+              {renderSessionOptions(sessions)}
+            </Select>
+          )}
+        </div>
+      );
+    }
+  };
+
+  const setCurrentSession = (event: React.ChangeEvent<HTMLSelectElement> | string | number) => {
+    let value = event;
+    if (isElectronRenderer) {
+      value = (event as React.ChangeEvent<HTMLSelectElement>).target.value;
+    }
+
+    if (!sessions) {
+      return;
+    }
+    for (const session of sessions) {
+      if (session.id === value) {
+        updateCurrentSession(session);
+      }
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <div className={styles.debug_action_bar}>
+        {renderSelections(sessions.filter((s: DebugSession) => !s.parentSession))}
+        <div className={styles.debug_actions}>
+          {renderContinue(state)}
+          <DebugAction
+            run={doStepOver}
+            enabled={typeof state === 'number' && state === DebugState.Stopped}
+            icon={'step'}
+            label={localize('debug.action.step-over')}
+          />
+          <DebugAction
+            run={doStepIn}
+            enabled={typeof state === 'number' && state === DebugState.Stopped}
+            icon={'step-in'}
+            label={localize('debug.action.step-into')}
+          />
+          <DebugAction
+            run={doStepOut}
+            enabled={typeof state === 'number' && state === DebugState.Stopped}
+            icon={'step-out'}
+            label={localize('debug.action.step-out')}
+          />
+          <DebugAction
+            run={doRestart}
+            enabled={typeof state === 'number' && state !== DebugState.Inactive}
+            icon={'reload'}
+            label={localize('debug.action.restart')}
+          />
+          {renderStop(state)}
+          {renderToolBar(currentSession)}
+        </div>
+      </div>
+    </React.Fragment>
+  );
+});
+
+const DebugPreferenceTopKey = 'debug.toolbar.top';
+const DebugPreferenceHeightKey = 'debug.toolbar.height';
+
+const FloatDebugToolbarView = observer(() => {
+  const controller = useInjectable<FloatController>(FloatController);
+  const preference = useInjectable<PreferenceService>(PreferenceService);
+  const { isElectronRenderer } = useInjectable<AppConfig>(AppConfig);
+  const debugToolbarService = useInjectable<DebugToolbarService>(DebugToolbarService);
+  const [toolbarOffsetTop, setToolbarOffsetTop] = useState<number>(0);
+  const { state } = debugToolbarService;
+
+  useEffect(() => {
+    const disposableCollection = new DisposableCollection();
+    const value = preference.get<number>(DebugPreferenceTopKey) || 0;
+    if (isElectronRenderer) {
+      const uiService: IElectronMainUIService = debugToolbarService.mainUIService;
+      const isNewMacHeaderBar = () => isMacintosh && parseFloat(electronEnv.osRelease) >= 20;
+      // Electron 环境下需要在非全屏情况下追加 Header 高度
+      uiService.isFullScreen(electronEnv.currentWindowId).then((fullScreen) => {
+        fullScreen
+          ? setToolbarOffsetTop(value)
+          : setToolbarOffsetTop(
+              value +
+                (isNewMacHeaderBar() ? LAYOUT_VIEW_SIZE.TITLEBAR_HEIGHT : LAYOUT_VIEW_SIZE.BIG_SUR_TITLEBAR_HEIGHT),
+            );
+      });
+      disposableCollection.push(
+        uiService.on('fullScreenStatusChange', (windowId, fullScreen) => {
+          if (windowId === electronEnv.currentWindowId) {
+            fullScreen
+              ? setToolbarOffsetTop(value)
+              : setToolbarOffsetTop(
+                  value +
+                    (isNewMacHeaderBar() ? LAYOUT_VIEW_SIZE.TITLEBAR_HEIGHT : LAYOUT_VIEW_SIZE.BIG_SUR_TITLEBAR_HEIGHT),
+                );
+          }
+        }),
+      );
+    } else {
+      setToolbarOffsetTop(value);
+    }
+    return () => {
+      disposableCollection.dispose();
+    };
+  }, []);
+
+  const customHeight = preference.get<number>(DebugPreferenceHeightKey) || 0;
+
+  const debugToolbarWrapperClass = cls({
+    [styles.debug_toolbar_wrapper]: true,
+    [styles.debug_toolbar_wrapper_electron]: isElectronRenderer,
+  });
+
+  if (state) {
+    return (
+      <div
+        style={{ pointerEvents: controller.enable ? 'all' : 'none' }}
+        className={styles.debug_toolbar_container}
+        onMouseMove={(e) => controller.onMouseMove(e)}
+        onMouseUp={(e) => controller.onMouseUp()}
+      >
+        <div
+          style={{
+            transform: `translateX(${controller.x}px) translateY(${
+              toolbarOffsetTop + controller.line * customHeight
+            }px)`,
+            height: `${customHeight}px`,
+          }}
+          className={debugToolbarWrapperClass}
+        >
+          <div className={cls(styles.debug_toolbar_drag_wrapper)}>
+            <div
+              className={cls(getIcon('drag'), styles.debug_toolbar_drag)}
+              onMouseDown={(e) => controller.onMouseDown(e)}
+              onMouseMove={(e) => controller.onMouseMove(e)}
+            ></div>
+          </div>
+          <DebugToolbarView float />
+        </div>
+      </div>
+    );
+  }
+
+  controller.enable = false;
+  return null;
+});
+
+export const DebugToolbarOverlayWidget = observer(() => {
+  const { float } = useInjectable<DebugConfigurationService>(DebugConfigurationService);
+  if (!float) {
+    return null;
+  }
+
+  return <FloatDebugToolbarView />;
+});

package/src/browser/view/console/debug-console-filter.model.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@opensumi/di';
+import { splitGlobAware, matchesFuzzy } from '@opensumi/ide-core-browser';
+
+interface ParsedQuery {
+  type: 'include' | 'exclude';
+  query: string;
+}
+
+@Injectable({ multiple: true })
+export class DebugConsoleFilterModel {
+  static matchQuery = matchesFuzzy;
+
+  private _parsedQueries: ParsedQuery[] = [];
+  set filterQuery(query: string) {
+    this._parsedQueries = [];
+    query = query.trim();
+
+    if (query && query !== '') {
+      const filters = splitGlobAware(query, ',')
+        .map((s) => s.trim())
+        .filter((s) => !!s.length);
+      for (const f of filters) {
+        if (f.startsWith('!')) {
+          this._parsedQueries.push({ type: 'exclude', query: f.slice(1) });
+        } else {
+          this._parsedQueries.push({ type: 'include', query: f });
+        }
+      }
+    }
+  }
+
+  filter(text: string): boolean {
+    let includeQueryPresent = false;
+    let includeQueryMatched = false;
+
+    for (const { type, query } of this._parsedQueries) {
+      if (type === 'exclude' && DebugConsoleFilterModel.matchQuery(query, text)) {
+        return false;
+      } else if (type === 'include') {
+        includeQueryPresent = true;
+        if (DebugConsoleFilterModel.matchQuery(query, text)) {
+          includeQueryMatched = true;
+        }
+      }
+    }
+
+    return includeQueryPresent && includeQueryMatched;
+  }
+}

package/src/browser/view/console/debug-console-filter.service.ts

@@ -0,0 +1,81 @@
+import { Injectable } from '@opensumi/di';
+import { Emitter, Event, strings } from '@opensumi/ide-core-browser';
+
+import { matchAll } from '../../debugUtils';
+
+import { DebugConsoleFilterModel } from './debug-console-filter.model';
+
+const Ansi = require('anser');
+const { convertSimple2RegExpPattern } = strings;
+
+export interface IDebugConsoleFilter {
+  filter: (t: string) => boolean;
+}
+
+export interface IFilterMatches {
+  startIndex: number;
+  count: number;
+}
+
+@Injectable()
+export class DebugConsoleFilterService implements IDebugConsoleFilter {
+  private readonly filterModel: DebugConsoleFilterModel;
+
+  constructor() {
+    this.filterModel = new DebugConsoleFilterModel();
+  }
+
+  private readonly _onDidValueChange: Emitter<string> = new Emitter<string>();
+  get onDidValueChange(): Event<string> {
+    return this._onDidValueChange.event;
+  }
+
+  private readonly _onDidFocus: Emitter<void> = new Emitter<void>();
+  get onDidFocus(): Event<void> {
+    return this._onDidFocus.event;
+  }
+
+  private _filterText = '';
+
+  public focusInput(): void {
+    this._onDidFocus.fire();
+  }
+
+  public get filterText(): string {
+    return this._filterText;
+  }
+
+  public setFilterText(v: string): this {
+    if (this._filterText !== v) {
+      this._filterText = v;
+      this.filterModel.filterQuery = this._filterText;
+      this._onDidValueChange.fire(this._filterText);
+    }
+    return this;
+  }
+
+  public filter(text: string): boolean {
+    const ansiToText = Ansi.ansiToText(text);
+    return this._filterText === '' || this.filterModel.filter(ansiToText);
+  }
+
+  public findMatches(text: string): IFilterMatches[] {
+    const regexp = new RegExp(convertSimple2RegExpPattern(this._filterText.toLowerCase()), 'g');
+    if (this._filterText.trim() === '') {
+      return [];
+    }
+
+    const matchs = matchAll(text.toLowerCase(), regexp);
+    const textLen = this._filterText.length;
+    if (textLen === 0) {
+      return [];
+    }
+
+    const res: IFilterMatches[] = matchs.map((m) => ({
+      startIndex: m.index !== undefined ? m.index : -1,
+      count: textLen,
+    }));
+
+    return res.filter((r) => r.startIndex >= 0);
+  }
+}

package/src/browser/view/console/debug-console-filter.view.tsx

@@ -0,0 +1,78 @@
+import debounce from 'lodash/debounce';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { HistoryInputBox, IHistoryInputBoxHandler } from '@opensumi/ide-components/lib/input/HistoryInputBox';
+import { localize } from '@opensumi/ide-core-browser';
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { Key } from '@opensumi/ide-core-browser';
+
+import { DebugConsoleFilterService } from './debug-console-filter.service';
+import styles from './debug-console.module.less';
+
+/**
+ * 调试控制台筛选器
+ */
+export const DebugConsoleFilterView = observer(() => {
+  const debugConsoleFilterService = useInjectable<DebugConsoleFilterService>(DebugConsoleFilterService);
+  const [filterValue, setFilterValue] = React.useState<string>('');
+  const [historyApi, setHistoryApi] = React.useState<IHistoryInputBoxHandler>();
+
+  const onDebounceValueChange = debounce((value: string) => {
+    setFilterValue(value);
+    debugConsoleFilterService.setFilterText(value);
+    if (historyApi) {
+      historyApi.addToHistory(value);
+    }
+  }, 400);
+
+  React.useEffect(() => {
+    const filterDispose = debugConsoleFilterService.onDidValueChange((value: string) => {
+      setFilterValue(value);
+    });
+    return () => {
+      filterDispose.dispose();
+    };
+  }, []);
+
+  const onReady = (api: IHistoryInputBoxHandler) => {
+    setHistoryApi(api);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!historyApi) {
+      return;
+    }
+
+    if (e.keyCode === Key.ARROW_UP.keyCode) {
+      historyApi.showPreviousValue();
+    } else if (e.keyCode === Key.ARROW_DOWN.keyCode) {
+      historyApi.showNextValue();
+    }
+  };
+
+  React.useEffect(() => {
+    const focusDispose = debugConsoleFilterService.onDidFocus(() => {
+      if (historyApi) {
+        historyApi.focus();
+      }
+    });
+    return () => {
+      focusDispose.dispose();
+    };
+  }, [historyApi]);
+
+  return (
+    <div className={styles.debug_console_filter}>
+      <HistoryInputBox
+        hasClear
+        className={styles.filter_input}
+        value={filterValue}
+        placeholder={localize('debug.console.filter.placeholder')}
+        onValueChange={onDebounceValueChange}
+        onReady={onReady}
+        onKeyDown={onKeyDown}
+      ></HistoryInputBox>
+    </div>
+  );
+});

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

@@ -0,0 +1,48 @@
+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 DebugConsoleTreeModel extends TreeModel {
+  static DEFAULT_FLUSH_DELAY = 100;
+
+  private flushDispatchChangeDelayer = new ThrottledDelayer<void>(DebugConsoleTreeModel.DEFAULT_FLUSH_DELAY);
+  private onWillUpdateEmitter: Emitter<void> = new Emitter();
+  private _tempScrollOffset = 0;
+
+  constructor(@Optional() root: ExpressionContainer) {
+    super();
+    this.init(root);
+  }
+
+  get onWillUpdate(): Event<void> {
+    return this.onWillUpdateEmitter.event;
+  }
+
+  /**
+   * 判断是否滚动到了底部
+   * TODO: //临时处理 by @Ricbet
+   */
+  get isScrollBottom(): boolean {
+    this._tempScrollOffset = Math.max(this.state.scrollOffset, this._tempScrollOffset);
+    return this._tempScrollOffset === this.state.scrollOffset;
+  }
+
+  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();
+      });
+    });
+  }
+}