@opensumi/ide-debug 2.21.13 → 2.22.0

package/src/browser/editor/debug-hover-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 DebugHoverModel extends TreeModel {
+  static DEFAULT_FLUSH_DELAY = 100;
+
+  private flushDispatchChangeDelayer = new ThrottledDelayer<void>(DebugHoverModel.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();
+      });
+    });
+  }
+}

package/src/browser/editor/debug-hover-source.ts

@@ -0,0 +1,107 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { Event, Emitter } from '@opensumi/ide-core-browser';
+
+import { IDebugSessionManager } from '../../common';
+import { DebugSessionManager } from '../debug-session-manager';
+import {
+  DebugVariable,
+  DebugScope,
+  DebugVariableContainer,
+  DebugHoverVariableRoot,
+} from '../tree/debug-tree-node.define';
+
+
+export type ExpressionVariable = DebugHoverVariableRoot | DebugVariable | DebugVariableContainer | undefined;
+
+@Injectable()
+export class DebugHoverSource {
+  @Autowired(IDebugSessionManager)
+  protected readonly sessions: DebugSessionManager;
+
+  private onDidChangeEmitter: Emitter<ExpressionVariable> = new Emitter();
+  onDidChange: Event<ExpressionVariable> = this.onDidChangeEmitter.event;
+
+  dispose(): void {
+    this._expression = undefined;
+  }
+
+  protected _expression: ExpressionVariable;
+  get expression(): ExpressionVariable {
+    return this._expression;
+  }
+
+  public clearEvaluate(): void {
+    this.onDidChangeEmitter.fire(undefined);
+  }
+
+  async evaluate(expression: string): Promise<ExpressionVariable> {
+    const evaluated = await this.doEvaluate(expression);
+    this._expression = evaluated;
+    this.onDidChangeEmitter.fire(evaluated);
+    return evaluated;
+  }
+
+  protected async doEvaluate(expression: string): Promise<ExpressionVariable> {
+    const { currentSession } = this.sessions;
+    if (!currentSession) {
+      return undefined;
+    }
+    if (currentSession.capabilities.supportsEvaluateForHovers) {
+      const item = new DebugHoverVariableRoot(expression, currentSession);
+      await item.evaluate('hover');
+      return (item.available && item) || undefined;
+    }
+    return this.findVariable(
+      expression
+        .split('.')
+        .map((word) => word.trim())
+        .filter((word) => !!word),
+    );
+  }
+
+  protected async findVariable(namesToFind: string[]): Promise<DebugVariable | DebugVariableContainer | undefined> {
+    const { currentFrame } = this.sessions;
+    if (!currentFrame) {
+      return undefined;
+    }
+    let variable: DebugVariable | undefined;
+    const scopes = await currentFrame.getScopes();
+    for (const scope of scopes) {
+      const found = await this.doFindVariable(scope, namesToFind);
+      if (!variable) {
+        variable = found;
+      } else if (found && found.value !== variable.value) {
+        // 仅显示找到的所有表达式是否具有相同的值
+        return undefined;
+      }
+    }
+    return variable;
+  }
+
+  protected async doFindVariable(
+    owner: DebugScope | DebugVariableContainer,
+    namesToFind: string[],
+  ): Promise<DebugVariable | undefined> {
+    await owner.ensureLoaded();
+    const elements = owner.children;
+    const variables: (DebugVariable | DebugVariableContainer)[] = [];
+    if (!elements) {
+      return;
+    }
+    for (const element of elements) {
+      if (element instanceof DebugVariableContainer || element instanceof DebugVariable) {
+        if (element.name === namesToFind[0]) {
+          variables.push(element);
+        }
+      }
+    }
+    if (variables.length !== 1) {
+      return undefined;
+    }
+    if (namesToFind.length === 1) {
+      return variables[0] as DebugVariable;
+    } else {
+      return this.doFindVariable(variables[0] as DebugVariableContainer, namesToFind.slice(1));
+    }
+  }
+}

package/src/browser/editor/debug-hover-tree.model.service.ts

@@ -0,0 +1,332 @@
+import { Injectable, Autowired, INJECTOR_TOKEN, Injector } from '@opensumi/di';
+import {
+  DecorationsManager,
+  Decoration,
+  IRecycleTreeHandle,
+  WatchEvent,
+  TreeNodeEvent,
+} from '@opensumi/ide-components';
+import { Emitter, Deferred, Event, DisposableCollection, path, pSeries } from '@opensumi/ide-core-browser';
+
+import { DebugVariable, ExpressionContainer, ExpressionNode } from '../tree/debug-tree-node.define';
+import styles from '../view/variables/debug-variables.module.less';
+
+import { DebugHoverModel } from './debug-hover-model';
+import { ExpressionVariable, DebugHoverSource } from './debug-hover-source';
+
+const { Path } = path;
+
+export interface IDebugVariablesHandle extends IRecycleTreeHandle {
+  hasDirectFocus: () => boolean;
+}
+
+export interface IDebugHoverUpdateData {
+  treeModel?: DebugHoverModel;
+  variable?: DebugVariable;
+}
+
+@Injectable()
+export class DebugHoverTreeModelService {
+  private static DEFAULT_FLUSH_FILE_EVENT_DELAY = 100;
+
+  @Autowired(INJECTOR_TOKEN)
+  private readonly injector: Injector;
+
+  @Autowired(DebugHoverSource)
+  private readonly debugHoverSource: DebugHoverSource;
+
+  private _treeModel: DebugHoverModel;
+  private _whenReady: Promise<void>;
+
+  private _decorations: DecorationsManager;
+  private _debugHoverTreeHandle: IDebugVariablesHandle;
+
+  public flushEventQueueDeferred: Deferred<void> | null;
+  private _eventFlushTimeout: number;
+  private _changeEventDispatchQueue: string[] = [];
+
+  // 装饰器
+  private selectedDecoration: Decoration = new Decoration(styles.mod_selected); // 选中态
+  private focusedDecoration: Decoration = new Decoration(styles.mod_focused); // 焦点态
+  private loadingDecoration: Decoration = new Decoration(styles.mod_loading); // 加载态
+
+  // 即使选中态也是焦点态的节点
+  private _focusedNode: ExpressionContainer | ExpressionNode | undefined;
+  // 选中态的节点
+  private _selectedNodes: (ExpressionContainer | ExpressionNode)[] = [];
+
+  private preContextMenuFocusedNode: ExpressionContainer | ExpressionNode | null;
+
+  private onDidRefreshedEmitter: Emitter<void> = new Emitter();
+  private onDidUpdateTreeModelOrVariableEmitter: Emitter<IDebugHoverUpdateData | void> = new Emitter();
+
+  private disposableCollection: DisposableCollection = new DisposableCollection();
+
+  constructor() {
+    this.debugHoverSource.onDidChange(async (expression: ExpressionVariable | DebugVariable | undefined) => {
+      if (!expression) {
+        this.onDidUpdateTreeModelOrVariableEmitter.fire({ treeModel: undefined, variable: undefined });
+        return;
+      }
+
+      if (expression instanceof DebugVariable) {
+        this.dispose();
+        this.onDidUpdateTreeModelOrVariableEmitter.fire({ variable: expression });
+      } else {
+        await this.initTreeModel(expression);
+        this.onDidUpdateTreeModelOrVariableEmitter.fire({ treeModel: this.treeModel });
+      }
+    });
+  }
+
+  get onDidRefreshed(): Event<void> {
+    return this.onDidRefreshedEmitter.event;
+  }
+
+  get onDidUpdateTreeModelOrVariable(): Event<IDebugHoverUpdateData | void> {
+    return this.onDidUpdateTreeModelOrVariableEmitter.event;
+  }
+
+  get flushEventQueuePromise() {
+    return this.flushEventQueueDeferred && this.flushEventQueueDeferred.promise;
+  }
+
+  get treeHandle() {
+    return this._debugHoverTreeHandle;
+  }
+
+  get decorations() {
+    return this._decorations;
+  }
+
+  get treeModel() {
+    return this._treeModel;
+  }
+
+  get whenReady() {
+    return this._whenReady;
+  }
+
+  // 既是选中态，也是焦点态节点
+  get focusedNode() {
+    return this._focusedNode;
+  }
+  // 是选中态，非焦点态节点
+  get selectedNodes() {
+    return this._selectedNodes;
+  }
+
+  dispose() {
+    if (!this.disposableCollection.disposed) {
+      this.disposableCollection.dispose();
+    }
+  }
+
+  listenTreeViewChange() {
+    this.dispose();
+    this.disposableCollection.push(
+      this.treeModel?.root.watcher.on(TreeNodeEvent.WillResolveChildren, (target) => {
+        this.loadingDecoration.addTarget(target);
+      }),
+    );
+    this.disposableCollection.push(
+      this.treeModel?.root.watcher.on(TreeNodeEvent.DidResolveChildren, (target) => {
+        this.loadingDecoration.removeTarget(target);
+      }),
+    );
+    this.disposableCollection.push(
+      this.treeModel!.onWillUpdate(() => {
+        // 更新树前更新下选中节点
+        if (this.selectedNodes.length !== 0) {
+          // 仅处理一下单选情况
+          const node = this.treeModel?.root.getTreeNodeByPath(this.selectedNodes[0].path);
+          this.selectedDecoration.addTarget(node as ExpressionNode);
+        }
+      }),
+    );
+  }
+
+  async initTreeModel(root: ExpressionVariable) {
+    if (!root) {
+      return;
+    }
+    this._treeModel = this.injector.get<any>(DebugHoverModel, [root]);
+
+    this.initDecorations(root);
+    this.listenTreeViewChange();
+    return this._treeModel;
+  }
+
+  initDecorations(root) {
+    this._decorations = new DecorationsManager(root as any);
+    this._decorations.addDecoration(this.selectedDecoration);
+    this._decorations.addDecoration(this.focusedDecoration);
+    this._decorations.addDecoration(this.loadingDecoration);
+  }
+
+  // 清空其他选中/焦点态节点，更新当前焦点节点
+  activeNodeDecoration = (target: ExpressionContainer | ExpressionNode, dispatchChange = true) => {
+    if (this.preContextMenuFocusedNode) {
+      this.focusedDecoration.removeTarget(this.preContextMenuFocusedNode);
+      this.selectedDecoration.removeTarget(this.preContextMenuFocusedNode);
+      this.preContextMenuFocusedNode = null;
+    }
+    if (target) {
+      if (this.selectedNodes.length > 0) {
+        // 因为选择装饰器可能通过其他方式添加而不能及时在selectedNodes上更新
+        // 故这里遍历所有选中装饰器的节点进行一次统一清理
+        for (const target of this.selectedDecoration.appliedTargets.keys()) {
+          this.selectedDecoration.removeTarget(target);
+        }
+      }
+      if (this.focusedNode) {
+        this.focusedDecoration.removeTarget(this.focusedNode);
+      }
+      this.selectedDecoration.addTarget(target);
+      this.focusedDecoration.addTarget(target);
+      this._focusedNode = target;
+      this._selectedNodes = [target];
+
+      if (dispatchChange) {
+        // 通知视图更新
+        this.treeModel.dispatchChange();
+      }
+    }
+  };
+
+  // 清空其他焦点态节点，更新当前焦点节点，
+  // removePreFocusedDecoration 表示更新焦点节点时如果此前已存在焦点节点，之前的节点装饰器将会被移除
+  activeNodeFocusedDecoration = (target: ExpressionContainer | ExpressionNode, removePreFocusedDecoration = false) => {
+    if (this.focusedNode !== target) {
+      if (removePreFocusedDecoration) {
+        // 当存在上一次右键菜单激活的文件时，需要把焦点态的文件节点的装饰器全部移除
+        if (this.preContextMenuFocusedNode) {
+          this.focusedDecoration.removeTarget(this.preContextMenuFocusedNode);
+          this.selectedDecoration.removeTarget(this.preContextMenuFocusedNode);
+        } else if (this.focusedNode) {
+          // 多选情况下第一次切换焦点文件
+          this.focusedDecoration.removeTarget(this.focusedNode);
+        }
+        this.preContextMenuFocusedNode = target;
+      } else if (this.focusedNode) {
+        this.preContextMenuFocusedNode = null;
+        this.focusedDecoration.removeTarget(this.focusedNode);
+      }
+      if (target) {
+        this.selectedDecoration.addTarget(target);
+        this.focusedDecoration.addTarget(target);
+        this._focusedNode = target;
+        this._selectedNodes.push(target);
+      }
+    }
+    // 通知视图更新
+    this.treeModel.dispatchChange();
+  };
+
+  // 取消选中节点焦点
+  enactiveNodeDecoration = () => {
+    if (this.focusedNode) {
+      this.focusedDecoration.removeTarget(this.focusedNode);
+      this.treeModel.dispatchChange();
+    }
+    this._focusedNode = undefined;
+  };
+
+  removeNodeDecoration() {
+    if (!this.decorations) {
+      return;
+    }
+    this.decorations.removeDecoration(this.selectedDecoration);
+    this.decorations.removeDecoration(this.focusedDecoration);
+  }
+
+  handleTreeHandler(handle: IDebugVariablesHandle) {
+    this._debugHoverTreeHandle = handle;
+  }
+
+  handleTreeBlur = () => {
+    // 清空焦点状态
+    this.enactiveNodeDecoration();
+  };
+
+  handleTwistierClick = (item: ExpressionContainer | ExpressionNode) => {
+    // 单选操作默认先更新选中状态
+    if (!ExpressionContainer.is(item)) {
+      this.activeNodeDecoration(item);
+    } else {
+      this.activeNodeDecoration(item, false);
+      this.toggleDirectory(item as ExpressionContainer);
+    }
+  };
+
+  toggleDirectory = async (item: ExpressionContainer) => {
+    if (item.expanded) {
+      this.treeHandle.collapseNode(item);
+    } else {
+      this.treeHandle.expandNode(item);
+    }
+  };
+
+  /**
+   * 刷新指定下的所有子节点
+   */
+  async refresh(node: ExpressionContainer = this.treeModel.root as ExpressionContainer) {
+    if (!ExpressionContainer.is(node) && (node as ExpressionContainer).parent) {
+      node = (node as ExpressionContainer).parent as ExpressionContainer;
+    }
+    // 这里也可以直接调用node.refresh，但由于文件树刷新事件可能会较多
+    // 队列化刷新动作减少更新成本
+    this.queueChangeEvent(node.path, () => {
+      this.onDidRefreshedEmitter.fire();
+    });
+  }
+
+  // 队列化Changed事件
+  private queueChangeEvent(path: string, callback: any) {
+    if (!this.flushEventQueueDeferred) {
+      this.flushEventQueueDeferred = new Deferred<void>();
+      clearTimeout(this._eventFlushTimeout);
+      this._eventFlushTimeout = setTimeout(async () => {
+        await this.flushEventQueue()!;
+        this.flushEventQueueDeferred?.resolve();
+        this.flushEventQueueDeferred = null;
+        callback();
+      }, DebugHoverTreeModelService.DEFAULT_FLUSH_FILE_EVENT_DELAY) as any;
+    }
+    if (this._changeEventDispatchQueue.indexOf(path) === -1) {
+      this._changeEventDispatchQueue.push(path);
+    }
+  }
+
+  public flushEventQueue = () => {
+    let promise: Promise<any>;
+    if (!this._changeEventDispatchQueue || this._changeEventDispatchQueue.length === 0) {
+      return;
+    }
+    this._changeEventDispatchQueue.sort((pathA, pathB) => {
+      const pathADepth = Path.pathDepth(pathA);
+      const pathBDepth = Path.pathDepth(pathB);
+      return pathADepth - pathBDepth;
+    });
+    const roots = [this._changeEventDispatchQueue[0]];
+    for (const path of this._changeEventDispatchQueue) {
+      if (roots.some((root) => path.indexOf(root) === 0)) {
+        continue;
+      } else {
+        roots.push(path);
+      }
+    }
+    promise = pSeries(
+      roots.map((path) => async () => {
+        const watcher = this.treeModel.root?.watchEvents.get(path);
+        if (watcher && typeof watcher.callback === 'function') {
+          await watcher.callback({ type: WatchEvent.Changed, path });
+        }
+        return null;
+      }),
+    );
+    // 重置更新队列
+    this._changeEventDispatchQueue = [];
+    return promise;
+  };
+}

package/src/browser/editor/debug-hover-widget.tsx

@@ -0,0 +1,200 @@
+import debounce from 'lodash/debounce';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import {
+  DisposableCollection,
+  Disposable,
+  AppConfig,
+  ConfigProvider,
+  IReporterService,
+} from '@opensumi/ide-core-browser';
+import type { ITextModel } from '@opensumi/monaco-editor-core/esm/vs/editor/common/model';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+
+import {
+  DebugEditor,
+  IDebugSessionManager,
+  DEBUG_REPORT_NAME,
+  IDebugHoverWidget,
+  ShowDebugHoverOptions,
+  HideDebugHoverOptions,
+} from '../../common';
+import { DebugSessionManager } from '../debug-session-manager';
+
+import { DebugExpressionProvider } from './debug-expression-provider';
+import { DebugHoverSource } from './debug-hover-source';
+import { DebugHoverView } from './debug-hover.view';
+
+@Injectable()
+export class DebugHoverWidget implements IDebugHoverWidget {
+  static ID = 'debug-hover-widget';
+
+  protected readonly toDispose = new DisposableCollection();
+
+  public allowEditorOverflow = true;
+
+  @Autowired(DebugEditor)
+  protected readonly editor: DebugEditor;
+
+  @Autowired(IDebugSessionManager)
+  protected readonly sessions: DebugSessionManager;
+
+  @Autowired(DebugExpressionProvider)
+  protected readonly expressionProvider: DebugExpressionProvider;
+
+  @Autowired(DebugHoverSource)
+  protected readonly hoverSource: DebugHoverSource;
+
+  @Autowired(AppConfig)
+  private configContext: AppConfig;
+
+  @Autowired(IReporterService)
+  protected readonly reporterService: IReporterService;
+
+  protected domNode: HTMLElement;
+
+  constructor() {
+    this.init();
+  }
+
+  protected init(): void {
+    this.toDispose.pushAll([
+      Disposable.create(() => this.editor.removeContentWidget(this)),
+      Disposable.create(() => this.hide()),
+      this.sessions.onDidChange(() => {
+        if (!this.isEditorFrame()) {
+          this.hide();
+        }
+      }),
+    ]);
+    this.renderView();
+  }
+
+  handleWindowWheel(event) {
+    event.stopPropagation();
+  }
+
+  getId(): string {
+    return DebugHoverWidget.ID;
+  }
+
+  getDomNode() {
+    if (!this.domNode) {
+      this.domNode = document.createElement('div');
+      this.domNode.classList.add(DebugHoverWidget.ID);
+    }
+    return this.domNode;
+  }
+
+  getPosition(): monaco.editor.IContentWidgetPosition | null {
+    const position = this.options && this.options.selection.getStartPosition();
+    const word = position && this.editor.getModel()?.getWordAtPosition(position);
+    return position && word
+      ? {
+          position: new monaco.Position(position.lineNumber, word.startColumn),
+          preference: [
+            monaco.editor.ContentWidgetPositionPreference.BELOW,
+            monaco.editor.ContentWidgetPositionPreference.ABOVE,
+          ],
+        }
+      : null;
+  }
+
+  dispose(): void {
+    this.toDispose.dispose();
+  }
+
+  show(options?: ShowDebugHoverOptions): void {
+    this.schedule(() => this.doShow(options), options && options.immediate);
+  }
+
+  hide(options?: HideDebugHoverOptions): void {
+    this.schedule(() => this.doHide(), options && options.immediate);
+  }
+
+  protected options: ShowDebugHoverOptions | undefined;
+
+  protected schedule(fn: () => void, immediate = true): void {
+    if (immediate) {
+      this.doSchedule.cancel();
+      fn();
+    } else {
+      this.doSchedule(fn);
+    }
+  }
+  protected readonly doSchedule: any = debounce((fn: () => void) => fn(), 300);
+
+  protected isEditorFrame(): boolean {
+    const { currentFrame } = this.sessions;
+    return (
+      !!currentFrame &&
+      !!currentFrame.source &&
+      !!this.editor.getModel() &&
+      this.editor.getModel()!.uri.toString() === currentFrame.source.uri.toString()
+    );
+  }
+
+  protected doHide(): void {
+    window.removeEventListener('mousewheel', this.handleWindowWheel, true);
+    if (this.getDomNode().contains(document.activeElement)) {
+      this.editor.focus();
+    }
+    this.hoverSource.dispose();
+    this.hoverSource.clearEvaluate();
+    this.options = undefined;
+    this.editor.removeContentWidget(this);
+  }
+
+  protected layoutContentWidget(): void {
+    this.editor.layoutContentWidget(this);
+  }
+
+  private renderView(): void {
+    ReactDOM.render(
+      <ConfigProvider value={this.configContext}>
+        <DebugHoverView />
+      </ConfigProvider>,
+      this.getDomNode(),
+      () => {
+        this.layoutContentWidget();
+      },
+    );
+  }
+
+  protected async doShow(options: ShowDebugHoverOptions | undefined = this.options): Promise<void> {
+    if (!this.isEditorFrame()) {
+      return;
+    }
+
+    if (!options) {
+      return;
+    }
+
+    if (this.options && this.options.selection.equalsRange(options.selection)) {
+      return;
+    }
+
+    this.options = options;
+    const expression = await this.expressionProvider.get(
+      this.editor.getModel()! as unknown as ITextModel,
+      options.selection,
+    );
+    if (!expression) {
+      return;
+    }
+
+    this.hoverSource.clearEvaluate();
+
+    if (!(await this.hoverSource.evaluate(expression))) {
+      return;
+    }
+
+    this.reporterService.point(DEBUG_REPORT_NAME?.DEBUG_VARIABLES, 'hover', expression);
+
+    this.editor.addContentWidget(this);
+    // 展示变量面板时临时屏蔽滚轮事件
+    window.addEventListener('mousewheel', this.handleWindowWheel, true);
+  }
+}

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

@@ -0,0 +1,29 @@
+/** Hover */
+.debug_hover {
+  font-family: 'Menlo for Powerline', Menlo, Monaco, 'Courier New', monospace;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 21px;
+  letter-spacing: 0px;
+  background-color: var(--editor-background);
+  border: 1px solid rgb(79, 180, 216);
+  position: relative;
+}
+
+.debug_hover_title {
+  padding-left: 10px;
+  padding-right: 10px;
+  line-height: 18px;
+  font-size: 12px;
+  word-break: normal;
+  text-overflow: ellipsis;
+  height: 18px;
+  overflow: hidden;
+  white-space: pre;
+  &.has_complex_value {
+    max-width: 700px;
+    min-width: 400px;
+    border-bottom: 1px solid hsla(0, 0%, 50%, 0.35);
+    padding-left: 16px;
+  }
+}