@opensumi/ide-debug 2.21.8-rc-1670567192.0 → 2.21.8

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

@@ -1,149 +0,0 @@
-.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);
-    .expansion_toggle {
-      color: var(--kt-tree-inactiveSelectionForeground) !important;
-    }
-  }
-
-  &.mod_focused {
-    outline: 1px solid var(--list-focusOutline);
-    color: var(--kt-tree-activeSelectionForeground) !important;
-    background: var(--kt-tree-activeSelectionBackground);
-    .expansion_toggle {
-      color: var(--kt-tree-activeSelectionForeground) !important;
-    }
-  }
-
-  &.mod_actived {
-    outline: 1px solid var(--list-focusOutline);
-    outline-offset: -1px;
-    .expansion_toggle {
-      color: var(--kt-tree-activeSelectionForeground) !important;
-    }
-  }
-
-  &.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

@@ -1,303 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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();
-      });
-    });
-  }
-}