@opensumi/ide-debug 2.21.13 → 2.22.0

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

@@ -0,0 +1,139 @@
+.debug_variables_node {
+  height: 22px;
+  line-height: 22px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--kt-tree-hoverForeground);
+    background: var(--kt-tree-hoverBackground);
+  }
+
+  &.mod_selected {
+    color: var(--kt-tree-inactiveSelectionForeground) !important;
+    background: var(--kt-tree-inactiveSelectionBackground);
+  }
+
+  &.mod_focused {
+    outline: 1px solid var(--list-focusOutline);
+    color: var(--kt-tree-activeSelectionForeground) !important;
+  }
+
+  &.mod_actived {
+    outline: 1px solid var(--list-focusOutline);
+    outline-offset: -1px;
+  }
+
+  &.mod_loading {
+    opacity: 0.8;
+  }
+}
+
+.debug_variables_node_content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  user-select: text;
+  match {
+    background-color: var(--editor-findMatchHighlightBackground);
+  }
+}
+
+.debug_variables_node_status {
+  opacity: 0.75;
+  text-align: center;
+  font-size: 12px;
+  padding-right: 0;
+}
+
+.debug_variables_node_segment {
+  flex-grow: 0;
+  white-space: nowrap;
+  color: inherit;
+}
+
+.debug_variables_node_displayname {
+  margin-right: 6px;
+  display: inline;
+  white-space: pre;
+}
+
+.debug_variables_node_description {
+  display: inline;
+  transform: scale(0.96);
+  color: var(--descriptionForeground);
+}
+
+.debug_variables_node_overflow_wrap {
+  flex: 1;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  color: var(--foreground);
+}
+
+.expansion_toggle {
+  min-width: 20px;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 16px;
+  color: var(--foreground);
+  &.mod_collapsed {
+    &:before {
+      display: block;
+    }
+  }
+
+  &:not(.mod_collapsed) {
+    &:before {
+      display: block;
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.debug_variables_node_tail {
+  text-align: center;
+  margin-right: 10px;
+  position: relative;
+  height: 22px;
+  display: flex;
+  align-items: center;
+}
+
+// variable
+.debug_variables_variable {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow: visible;
+  &.value {
+    color: var(--debugTokenExpression-value);
+  }
+
+  &.name {
+    color: var(--debugTokenExpression-name);
+  }
+
+  &.error {
+    color: var(--debugTokenExpression-error);
+  }
+
+  &.number {
+    color: var(--debugTokenExpression-number);
+  }
+
+  &.boolean {
+    color: var(--debugTokenExpression-boolean);
+  }
+
+  &.string {
+    color: var(--debugTokenExpression-string);
+  }
+}

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

@@ -0,0 +1,303 @@
+import cls from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import {
+  INodeRendererProps,
+  ClasslistComposite,
+  IRecycleTreeHandle,
+  TreeNodeType,
+  RecycleTree,
+  INodeRendererWrapProps,
+  TreeModel,
+  CompositeTreeNode,
+} from '@opensumi/ide-components';
+import { Loading } from '@opensumi/ide-components';
+import { useInjectable, getIcon } from '@opensumi/ide-core-browser';
+import { ViewState } from '@opensumi/ide-core-browser';
+
+import {
+  ExpressionContainer,
+  ExpressionNode,
+  DebugVariableContainer,
+  DebugVariable,
+  DebugScope,
+} from '../../tree/debug-tree-node.define';
+
+import { DebugVariablesModelService } from './debug-variables-tree.model.service';
+import styles from './debug-variables.module.less';
+
+export const DEBUG_VARIABLE_TREE_FIELD_NAME = 'DEBUG_VARIABLE_TREE_FIELD';
+
+export const DebugVariableView = observer(({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
+  const DEBUG_VARIABLE_ITEM_HEIGHT = 22;
+
+  const { width, height } = viewState;
+
+  const wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
+  const [model, setModel] = React.useState<TreeModel>();
+
+  const debugVariablesModelService = useInjectable<DebugVariablesModelService>(DebugVariablesModelService);
+
+  React.useEffect(() => {
+    const disposable = debugVariablesModelService.onDidUpdateTreeModel(async (nextModel: TreeModel) => {
+      setModel(nextModel);
+    });
+
+    return () => {
+      disposable.dispose();
+      debugVariablesModelService.removeNodeDecoration();
+      setModel(undefined);
+    };
+  }, []);
+
+  const handleTreeReady = (handle: IRecycleTreeHandle) => {
+    debugVariablesModelService.handleTreeHandler({
+      ...handle,
+      hasDirectFocus: () => wrapperRef.current === document.activeElement,
+    });
+  };
+
+  const handleTwistierClick = (
+    ev: React.MouseEvent,
+    item: ExpressionNode | ExpressionContainer,
+    type: TreeNodeType,
+  ) => {
+    // 阻止点击事件冒泡
+    ev.stopPropagation();
+
+    const { handleTwistierClick } = debugVariablesModelService;
+    if (!item) {
+      return;
+    }
+    handleTwistierClick(item, type);
+  };
+
+  const handlerContextMenu = (
+    ev: React.MouseEvent,
+    node: DebugScope | DebugVariable | DebugVariableContainer | undefined,
+  ) => {
+    const { handleContextMenu } = debugVariablesModelService;
+    handleContextMenu(ev, node);
+  };
+
+  const handleOuterContextMenu = (ev: React.MouseEvent) => {
+    const { handleContextMenu } = debugVariablesModelService;
+    // 空白区域右键菜单
+    handleContextMenu(ev);
+  };
+
+  const handleOuterClick = (ev: React.MouseEvent) => {
+    // 空白区域点击，取消焦点状态
+    const { enactiveNodeDecoration } = debugVariablesModelService;
+    enactiveNodeDecoration();
+  };
+
+  const handleOuterBlur = (ev: React.FocusEvent) => {
+    // 空白区域点击，取消焦点状态
+    const { enactiveNodeDecoration } = debugVariablesModelService;
+    enactiveNodeDecoration();
+  };
+
+  const renderVariableNode = React.useCallback(
+    (props: INodeRendererWrapProps) => {
+      const decorations = debugVariablesModelService.decorations.getDecorations(props.item as any);
+      return (
+        <DebugVariableRenderedNode
+          item={props.item}
+          itemType={props.itemType}
+          decorations={decorations}
+          onClick={handleTwistierClick}
+          onTwistierClick={handleTwistierClick}
+          onContextMenu={handlerContextMenu}
+          defaultLeftPadding={0}
+          leftPadding={8}
+        />
+      );
+    },
+    [model],
+  );
+
+  const renderContent = () => {
+    if (!model) {
+      return <span></span>;
+    } else {
+      return (
+        <RecycleTree
+          height={height}
+          width={width}
+          itemHeight={DEBUG_VARIABLE_ITEM_HEIGHT}
+          onReady={handleTreeReady}
+          model={model!}
+          placeholder={() => <span></span>}
+          overflow={'auto'}
+        >
+          {renderVariableNode}
+        </RecycleTree>
+      );
+    }
+  };
+
+  return (
+    <div
+      className={styles.debug_variables_container}
+      tabIndex={-1}
+      ref={wrapperRef}
+      onContextMenu={handleOuterContextMenu}
+      onClick={handleOuterClick}
+      onBlur={handleOuterBlur}
+      data-name={DEBUG_VARIABLE_TREE_FIELD_NAME}
+    >
+      {renderContent()}
+    </div>
+  );
+});
+
+export interface IDebugVariableNodeProps {
+  item: any;
+  defaultLeftPadding?: number;
+  leftPadding?: number;
+  decorations?: ClasslistComposite;
+  onClick: (ev: React.MouseEvent, item: ExpressionNode | ExpressionContainer, type: TreeNodeType) => void;
+  onTwistierClick: (ev: React.MouseEvent, item: ExpressionNode | ExpressionContainer, type: TreeNodeType) => void;
+  onContextMenu?: (
+    ev: React.MouseEvent,
+    item: DebugScope | DebugVariableContainer | DebugVariable | undefined,
+    type: TreeNodeType,
+  ) => void;
+}
+
+export type IDebugVariableNodeRenderedProps = IDebugVariableNodeProps & INodeRendererProps;
+
+export const DebugVariableRenderedNode: React.FC<IDebugVariableNodeRenderedProps> = ({
+  item,
+  decorations,
+  defaultLeftPadding,
+  leftPadding,
+  onClick,
+  onTwistierClick,
+  onContextMenu,
+  itemType,
+}: IDebugVariableNodeRenderedProps) => {
+  const handleClick = (ev: React.MouseEvent) => {
+    onClick(ev, item, CompositeTreeNode.is(item) ? TreeNodeType.CompositeTreeNode : TreeNodeType.TreeNode);
+  };
+
+  const handleContextMenu = (ev: React.MouseEvent) => {
+    if (ev.nativeEvent.which === 0) {
+      return;
+    }
+    if (itemType === TreeNodeType.TreeNode || itemType === TreeNodeType.CompositeTreeNode) {
+      onContextMenu && onContextMenu(ev, item, itemType);
+    }
+  };
+
+  const paddingLeft = `${
+    (defaultLeftPadding || 8) + (item.depth || 0) * (leftPadding || 0) + (ExpressionContainer.is(item) ? 0 : 16)
+  }px`;
+
+  const editorNodeStyle = {
+    height: DEBUG_VARIABLE_TREE_NODE_HEIGHT,
+    lineHeight: `${DEBUG_VARIABLE_TREE_NODE_HEIGHT}px`,
+    paddingLeft,
+  } as React.CSSProperties;
+
+  const renderDisplayName = (node: ExpressionContainer | ExpressionNode) => (
+    <div
+      className={cls(
+        styles.debug_variables_node_segment,
+        styles.debug_variables_node_displayname,
+        styles.debug_variables_variable,
+        (node as DebugVariable).description ? styles.name : '',
+      )}
+    >
+      {node.displayName}
+      {(node as DebugVariable).description ? ':' : ''}
+    </div>
+  );
+
+  const renderDescription = (node: ExpressionContainer | ExpressionNode) => {
+    const booleanRegex = /^true|false$/i;
+    const stringRegex = /^(['"]).*\1$/;
+    const description = (node as DebugVariableContainer).description
+      ? (node as DebugVariableContainer).description.replace('function', 'ƒ ')
+      : '';
+    const addonClass = [styles.debug_variables_variable];
+    if (item.variableType === 'number' || item.variableType === 'boolean' || item.variableType === 'string') {
+      addonClass.push(styles[item.variableType]);
+    } else if (!isNaN(+description)) {
+      addonClass.push(styles.number);
+    } else if (booleanRegex.test(description)) {
+      addonClass.push(styles.boolean);
+    } else if (stringRegex.test(description)) {
+      addonClass.push(styles.string);
+    }
+    return (
+      <div
+        className={cls(
+          styles.debug_variables_node_segment_grow,
+          styles.debug_variables_node_description,
+          ...addonClass,
+        )}
+      >
+        {description}
+      </div>
+    );
+  };
+
+  const renderStatusTail = () => (
+    <div className={cls(styles.debug_variables_node_segment, styles.debug_variables_node_tail)}>{renderBadge()}</div>
+  );
+
+  const renderBadge = () => <div className={styles.debug_variables_node_status}>{item.badge}</div>;
+
+  const renderToggle = (node: ExpressionContainer, clickHandler: any) => {
+    const handleTwiceClick = (ev: React.MouseEvent) => {
+      clickHandler(ev, node, itemType);
+    };
+    if (decorations && decorations?.classlist.indexOf(styles.mod_loading) > -1) {
+      return (
+        <div className={cls(styles.debug_variables_node_segment, styles.expansion_toggle)}>
+          <Loading />
+        </div>
+      );
+    }
+    return (
+      <div
+        onClick={handleTwiceClick}
+        className={cls(styles.debug_variables_node_segment, styles.expansion_toggle, getIcon('right'), {
+          [`${styles.mod_collapsed}`]: !(node as ExpressionContainer).expanded,
+        })}
+      />
+    );
+  };
+
+  const renderTwice = (item) => {
+    if (CompositeTreeNode.is(item)) {
+      return renderToggle(item as ExpressionContainer, onTwistierClick);
+    }
+  };
+
+  return (
+    <div
+      key={item.id}
+      onClick={handleClick}
+      onContextMenu={handleContextMenu}
+      title={item.description || ''}
+      className={cls(styles.debug_variables_node, decorations ? decorations.classlist : null)}
+      style={editorNodeStyle}
+      data-id={item.id}
+    >
+      <div className={cls(styles.debug_variables_node_content)}>
+        {renderTwice(item)}
+        <div className={styles.debug_variables_node_overflow_wrap}>
+          {renderDisplayName(item)}
+          {renderDescription(item)}
+        </div>
+        {renderStatusTail()}
+      </div>
+    </div>
+  );
+};
+
+export const DEBUG_VARIABLE_TREE_NODE_HEIGHT = 22;

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