@opensumi/ide-debug 2.21.7-rc-1670246007.0 → 2.21.7

package/src/browser/view/watch/debug-watch.contribution.ts

@@ -1,167 +0,0 @@
-import { Autowired } from '@opensumi/di';
-import {
-  Domain,
-  CommandContribution,
-  CommandRegistry,
-  TabBarToolbarContribution,
-  localize,
-  ToolbarRegistry,
-  ClientAppContribution,
-  KeybindingContribution,
-  KeybindingRegistry,
-} from '@opensumi/ide-core-browser';
-import { MenuContribution } from '@opensumi/ide-core-browser/lib/menu/next';
-import { MenuId, IMenuRegistry } from '@opensumi/ide-core-browser/lib/menu/next';
-
-import { DEBUG_WATCH_ID } from '../../../common';
-import { DEBUG_COMMANDS } from '../../debug-contribution';
-import { DebugWatchNode } from '../../tree/debug-tree-node.define';
-
-import {
-  CONTEXT_IN_DEBUG_MODE,
-  CONTEXT_WATCH_EXPRESSIONS_FOCUSED,
-  CONTEXT_WATCH_ITEM_TYPE,
-} from './../../../common/constants';
-import { DebugWatchModelService } from './debug-watch-tree.model.service';
-
-@Domain(ClientAppContribution, MenuContribution, CommandContribution, TabBarToolbarContribution, KeybindingContribution)
-export class WatchPanelContribution
-  implements
-    ClientAppContribution,
-    MenuContribution,
-    CommandContribution,
-    TabBarToolbarContribution,
-    KeybindingContribution
-{
-  @Autowired(DebugWatchModelService)
-  private readonly debugWatchModelService: DebugWatchModelService;
-
-  registerCommands(registry: CommandRegistry) {
-    registry.registerCommand(DEBUG_COMMANDS.ADD_WATCHER, {
-      execute: () => {
-        this.debugWatchModelService.newDebugWatchNodePrompt();
-      },
-    });
-    registry.registerCommand(DEBUG_COMMANDS.COLLAPSE_ALL_WATCHER, {
-      execute: () => {
-        this.debugWatchModelService.collapsedAll();
-      },
-    });
-    registry.registerCommand(DEBUG_COMMANDS.REMOVE_ALL_WATCHER, {
-      execute: () => {
-        this.debugWatchModelService.clearAllExpression();
-      },
-    });
-    registry.registerCommand(DEBUG_COMMANDS.REMOVE_WATCHER, {
-      execute: (node: DebugWatchNode | unknown) => {
-        if (node instanceof DebugWatchNode) {
-          this.debugWatchModelService.removeDebugWatchNode(node);
-        }
-
-        const [selectedNode] = this.debugWatchModelService.selectedNodes;
-        if (selectedNode instanceof DebugWatchNode) {
-          this.debugWatchModelService.removeDebugWatchNode(selectedNode);
-        }
-      },
-    });
-    registry.registerCommand(DEBUG_COMMANDS.EDIT_WATCHER, {
-      execute: (node: DebugWatchNode) => {
-        this.debugWatchModelService.renameDebugWatchNodePrompt(node);
-      },
-    });
-    registry.registerCommand(DEBUG_COMMANDS.COPY_WATCHER_VALUE, {
-      execute: (node: DebugWatchNode) => {
-        this.debugWatchModelService.copyValue(node);
-      },
-    });
-  }
-
-  registerToolbarItems(registry: ToolbarRegistry) {
-    /**
-     * Watch 面板菜单
-     */
-    registry.registerItem({
-      id: DEBUG_COMMANDS.REMOVE_ALL_WATCHER.id,
-      command: DEBUG_COMMANDS.REMOVE_ALL_WATCHER.id,
-      viewId: DEBUG_WATCH_ID,
-      tooltip: localize('debug.watch.removeAll'),
-    });
-
-    registry.registerItem({
-      id: DEBUG_COMMANDS.COLLAPSE_ALL_WATCHER.id,
-      command: DEBUG_COMMANDS.COLLAPSE_ALL_WATCHER.id,
-      viewId: DEBUG_WATCH_ID,
-      tooltip: localize('debug.watch.collapseAll'),
-      when: CONTEXT_IN_DEBUG_MODE.raw,
-    });
-
-    registry.registerItem({
-      id: DEBUG_COMMANDS.ADD_WATCHER.id,
-      command: DEBUG_COMMANDS.ADD_WATCHER.id,
-      viewId: DEBUG_WATCH_ID,
-      tooltip: localize('debug.watch.add'),
-      when: CONTEXT_IN_DEBUG_MODE.raw,
-    });
-  }
-
-  registerMenus(registry: IMenuRegistry) {
-    registry.registerMenuItem(MenuId.DebugWatchContext, {
-      command: {
-        id: DEBUG_COMMANDS.ADD_WATCHER.id,
-        label: localize('debug.watch.add'),
-      },
-      order: 10,
-      group: '3_modification',
-    });
-    registry.registerMenuItem(MenuId.DebugWatchContext, {
-      command: {
-        id: DEBUG_COMMANDS.EDIT_WATCHER.id,
-        label: localize('debug.watch.edit'),
-      },
-      when: CONTEXT_WATCH_ITEM_TYPE.equalsTo('expression'),
-      order: 20,
-      group: '3_modification',
-    });
-    registry.registerMenuItem(MenuId.DebugWatchContext, {
-      command: {
-        id: DEBUG_COMMANDS.COPY_WATCHER_VALUE.id,
-        label: localize('debug.watch.copyValue'),
-      },
-      when: `${CONTEXT_WATCH_ITEM_TYPE.equalsTo('expression')} || ${CONTEXT_WATCH_ITEM_TYPE.equalsTo('variable')} && ${
-        CONTEXT_IN_DEBUG_MODE.raw
-      }`,
-      order: 30,
-      enabledWhen: CONTEXT_IN_DEBUG_MODE.raw,
-      group: '3_modification',
-    });
-    registry.registerMenuItem(MenuId.DebugWatchContext, {
-      command: {
-        id: DEBUG_COMMANDS.REMOVE_WATCHER.id,
-        label: localize('debug.watch.remove'),
-      },
-      when: CONTEXT_WATCH_ITEM_TYPE.equalsTo('expression'),
-      order: 10,
-      group: 'z_commands',
-    });
-    registry.registerMenuItem(MenuId.DebugWatchContext, {
-      command: {
-        id: DEBUG_COMMANDS.REMOVE_ALL_WATCHER.id,
-        label: localize('debug.watch.removeAll'),
-      },
-      order: 20,
-      group: 'z_commands',
-    });
-  }
-
-  registerKeybindings(keybindings: KeybindingRegistry) {
-    keybindings.registerKeybinding({
-      command: DEBUG_COMMANDS.REMOVE_WATCHER.id,
-      keybinding: 'ctrlcmd+backspace',
-      when: CONTEXT_WATCH_EXPRESSIONS_FOCUSED.raw,
-    });
-  }
-
-  onStart() {
-    this.debugWatchModelService.load();
-  }
-}

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

@@ -1,189 +0,0 @@
-@import '~@opensumi/ide-core-browser/lib/style/variable.less';
-
-.debug_watch_node {
-  height: 22px;
-  line-height: 22px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    color: var(--kt-tree-hoverForeground);
-    background: var(--kt-tree-hoverBackground);
-  }
-
-  .debug_watch_node_prompt_box {
-    :global(input) {
-      &.validate-error {
-        color: var(--inputValidation-errorForeground);
-        background-color: var(--inputValidation-errorBackground);
-        border: 1px solid var(--inputValidation-errorBorder);
-      }
-
-      &.validate-info {
-        background-color: var(--inputValidation-infoBackground);
-        border: 1px solid var(--inputValidation-infoBorder);
-        color: var(--inputValidation-infoForeground);
-      }
-
-      &.validate-warning {
-        background-color: var(--inputValidation-warningBackground);
-        border: 1px solid var(--inputValidation-warningBorder);
-        color: var(--inputValidation-warningForeground);
-      }
-    }
-  }
-
-  &.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);
-    outline-offset: -1px;
-    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_watch_node_content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  user-select: text;
-  match {
-    background-color: var(--editor-findMatchHighlightBackground);
-  }
-}
-
-.debug_watch_node_inputbox {
-  display: inline-block;
-  width: 100%;
-  input {
-    font-size: @base-font-size;
-  }
-}
-
-.debug_watch_node_status {
-  opacity: 0.75;
-  text-align: center;
-  font-size: 12px;
-  padding-right: 0;
-}
-
-.debug_watch_node_segment {
-  flex-grow: 0;
-  white-space: nowrap;
-  color: inherit;
-}
-
-.debug_watch_node_displayname {
-  margin-right: 6px;
-  display: inline;
-  white-space: pre;
-}
-
-.debug_watch_node_description {
-  display: inline;
-  transform: scale(0.96);
-  color: var(--descriptionForeground);
-}
-
-.debug_watch_node_overflow_wrap {
-  flex: 1;
-  flex-shrink: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: left;
-  color: var(--foreground);
-}
-
-.debug_watch_node_prompt_wrap {
-  flex: 1;
-}
-
-.expansion_toggle {
-  min-width: 20px;
-  display: flex;
-  justify-content: center;
-  flex-shrink: 0;
-  font-size: 16px;
-  color: var(--foreground);
-  position: absolute;
-  left: -20px;
-  &.mod_collapsed {
-    &:before {
-      display: block;
-    }
-  }
-
-  &:not(.mod_collapsed) {
-    &:before {
-      display: block;
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.debug_watch_node_tail {
-  text-align: center;
-  margin-right: 10px;
-  position: relative;
-  height: 22px;
-  display: flex;
-  align-items: center;
-}
-
-// variable
-.debug_watch_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/watch/debug-watch.view.tsx

@@ -1,337 +0,0 @@
-import cls from 'classnames';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-
-import {
-  INodeRendererProps,
-  ClasslistComposite,
-  IRecycleTreeHandle,
-  TreeNodeType,
-  RecycleTree,
-  INodeRendererWrapProps,
-  TreeModel,
-  PromptHandle,
-} from '@opensumi/ide-components';
-import { Loading } from '@opensumi/ide-components';
-import { useInjectable, getIcon, DisposableCollection, Disposable } from '@opensumi/ide-core-browser';
-import { ViewState } from '@opensumi/ide-core-browser';
-
-import {
-  ExpressionContainer,
-  ExpressionNode,
-  DebugVariableContainer,
-  DebugVariable,
-  DebugWatchNode,
-} from '../../tree/debug-tree-node.define';
-
-import { DebugWatchModelService, IWatchNode } from './debug-watch-tree.model.service';
-import styles from './debug-watch.module.less';
-
-export const DEBUG_WATCH_TREE_FIELD_NAME = 'DEBUG_WATCH_TREE_FIELD';
-
-export const DebugWatchView = observer(({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
-  const DEBUG_VARIABLE_ITEM_HEIGHT = 22;
-
-  const { height } = viewState;
-
-  const wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
-  const [model, setModel] = React.useState<TreeModel>();
-
-  const debugWatchModelService = useInjectable<DebugWatchModelService>(DebugWatchModelService);
-
-  React.useEffect(() => initTreeModel(), []);
-
-  const initTreeModel = () => {
-    const treeModel = debugWatchModelService.treeModel;
-    let shouldUpdate = true;
-    const disposableCollection = new DisposableCollection();
-    disposableCollection.push(
-      Disposable.create(() => {
-        shouldUpdate = false;
-      }),
-    );
-    if (treeModel) {
-      treeModel.ensureReady.then(() => {
-        if (shouldUpdate) {
-          setModel(treeModel);
-        }
-      });
-    }
-    disposableCollection.push(
-      debugWatchModelService.onDidUpdateTreeModel(async (model: TreeModel) => {
-        if (model) {
-          await model.ensureReady;
-        }
-        if (shouldUpdate) {
-          setModel(model);
-        }
-      }),
-    );
-    return () => {
-      debugWatchModelService.removeNodeDecoration();
-      disposableCollection.dispose();
-    };
-  };
-
-  const handleTreeReady = (handle: IRecycleTreeHandle) => {
-    debugWatchModelService.handleTreeHandler({
-      ...handle,
-      getModel: () => model!,
-      hasDirectFocus: () => wrapperRef.current === document.activeElement,
-    });
-  };
-
-  const handleTwistierClick = (ev: React.MouseEvent, item: IWatchNode, type: TreeNodeType) => {
-    // 阻止点击事件冒泡
-    ev.stopPropagation();
-
-    const { handleTwistierClick } = debugWatchModelService;
-    if (!item) {
-      return;
-    }
-    handleTwistierClick(item, type);
-  };
-
-  const handlerContextMenu = (ev: React.MouseEvent, node: IWatchNode) => {
-    const { handleContextMenu } = debugWatchModelService;
-    handleContextMenu(ev, node);
-  };
-
-  const handleOuterContextMenu = (ev: React.MouseEvent) => {
-    const { handleContextMenu } = debugWatchModelService;
-    handleContextMenu(ev);
-  };
-
-  const handleOuterClick = (ev: React.MouseEvent) => {
-    // 空白区域点击，取消焦点状态
-    const { enactiveNodeDecoration } = debugWatchModelService;
-    enactiveNodeDecoration();
-  };
-
-  const handleOuterBlur = (ev: React.FocusEvent) => {
-    // 空白区域点击，取消焦点状态
-    const { enactiveNodeDecoration } = debugWatchModelService;
-    enactiveNodeDecoration();
-  };
-
-  const renderWatchNode = React.useCallback(
-    (props: INodeRendererWrapProps) => {
-      const decorations = debugWatchModelService.decorations.getDecorations(props.item as any);
-      return (
-        <DebugWatchRenderedNode
-          item={props.item}
-          itemType={props.itemType}
-          decorations={decorations}
-          onClick={handleTwistierClick}
-          onTwistierClick={handleTwistierClick}
-          onContextMenu={handlerContextMenu}
-          defaultLeftPadding={12}
-          leftPadding={8}
-        />
-      );
-    },
-    [model],
-  );
-
-  const renderContent = () => {
-    if (!model) {
-      return <span />;
-    } else {
-      return (
-        <RecycleTree
-          height={height}
-          itemHeight={DEBUG_VARIABLE_ITEM_HEIGHT}
-          onReady={handleTreeReady}
-          model={model!}
-          placeholder={() => <span />}
-        >
-          {renderWatchNode}
-        </RecycleTree>
-      );
-    }
-  };
-
-  return (
-    <div
-      className={styles.debug_watch_container}
-      tabIndex={-1}
-      ref={wrapperRef}
-      onContextMenu={handleOuterContextMenu}
-      onClick={handleOuterClick}
-      onBlur={handleOuterBlur}
-      data-name={DEBUG_WATCH_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: ExpressionNode | ExpressionContainer, type: TreeNodeType) => void;
-}
-
-export type IDebugWatchNodeRenderedProps = IDebugVariableNodeProps & INodeRendererProps;
-
-export const DebugWatchRenderedNode: React.FC<IDebugWatchNodeRenderedProps> = ({
-  item,
-  decorations,
-  defaultLeftPadding,
-  leftPadding,
-  onClick,
-  onTwistierClick,
-  onContextMenu,
-  itemType,
-}: IDebugWatchNodeRenderedProps) => {
-  const isRenamePrompt = itemType === TreeNodeType.RenamePrompt;
-  const isNewPrompt = itemType === TreeNodeType.NewPrompt;
-  const isPrompt = isRenamePrompt || isNewPrompt;
-
-  const handleClick = (ev: React.MouseEvent) => {
-    const watch = (item as DebugWatchNode).getRawWatch();
-    if (watch) {
-      onClick(ev, item, watch.variablesReference > 0 ? 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 as ExpressionNode, itemType);
-    }
-  };
-
-  const editorNodeStyle = {
-    height: DEBUG_WATCH_TREE_NODE_HEIGHT,
-    lineHeight: `${DEBUG_WATCH_TREE_NODE_HEIGHT}px`,
-    paddingLeft: `${(defaultLeftPadding || 8) + (item.depth || 0) * (leftPadding || 0)}px`,
-  } as React.CSSProperties;
-
-  const renderDisplayName = (node: ExpressionContainer | ExpressionNode) => {
-    if (isPrompt && node instanceof PromptHandle) {
-      return (
-        <div className={cls(styles.debug_watch_node_segment, styles.debug_watch_node_inputbox)}>
-          <div className={cls('input-box', styles.debug_watch_node_prompt_box)}>
-            <node.ProxiedInput wrapperStyle={{ height: DEBUG_WATCH_TREE_NODE_HEIGHT, padding: '0 5px' }} />
-          </div>
-        </div>
-      );
-    }
-    return (
-      <div
-        className={cls(
-          styles.debug_watch_node_segment,
-          styles.debug_watch_node_displayname,
-          styles.debug_watch_variable,
-          (node as DebugVariable).description ? styles.name : '',
-        )}
-      >
-        {node.name}
-        {(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_watch_variable];
-    if (isPrompt) {
-      return null;
-    }
-    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_watch_node_segment_grow, styles.debug_watch_node_description, ...addonClass)}>
-        {description}
-      </div>
-    );
-  };
-
-  const renderStatusTail = () => (
-    <div className={cls(styles.debug_watch_node_segment, styles.debug_watch_node_tail)}>{renderBadge()}</div>
-  );
-
-  const renderBadge = () => <div className={styles.debug_watch_node_status}>{item.badge}</div>;
-
-  const getItemTooltip = () => {
-    const tooltip = item.tooltip;
-    return tooltip;
-  };
-
-  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_watch_node_segment, styles.expansion_toggle)}>
-          <Loading />
-        </div>
-      );
-    }
-    return (
-      <div
-        onClick={handleTwiceClick}
-        className={cls(styles.debug_watch_node_segment, styles.expansion_toggle, getIcon('right'), {
-          [`${styles.mod_collapsed}`]: !(node as ExpressionContainer).expanded,
-        })}
-      />
-    );
-  };
-
-  const renderTwice = (item) => {
-    if (DebugWatchNode.is(item)) {
-      if ((item as DebugWatchNode).available && (item as DebugWatchNode).variablesReference) {
-        return renderToggle(item as ExpressionContainer, onTwistierClick);
-      }
-    } else if (ExpressionContainer.is(item)) {
-      if ((item as ExpressionContainer).variablesReference) {
-        return renderToggle(item as ExpressionContainer, onTwistierClick);
-      }
-    }
-  };
-
-  return (
-    <div
-      key={item.id}
-      onClick={handleClick}
-      onContextMenu={handleContextMenu}
-      title={getItemTooltip()}
-      className={cls(styles.debug_watch_node, decorations ? decorations.classlist : null)}
-      style={editorNodeStyle}
-      data-id={item.id}
-    >
-      <div className={cls(styles.debug_watch_node_content)}>
-        {renderTwice(item)}
-        <div
-          style={{ height: DEBUG_WATCH_TREE_NODE_HEIGHT }}
-          className={isPrompt ? styles.debug_watch_node_prompt_wrap : styles.debug_watch_node_overflow_wrap}
-        >
-          {renderDisplayName(item)}
-          {renderDescription(item)}
-        </div>
-        {renderStatusTail()}
-      </div>
-    </div>
-  );
-};
-
-export const DEBUG_WATCH_TREE_NODE_HEIGHT = 22;