@opensumi/ide-debug 2.21.13 → 2.22.0

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

@@ -0,0 +1,170 @@
+import { Autowired } from '@opensumi/di';
+import {
+  Domain,
+  CommandContribution,
+  CommandRegistry,
+  TabBarToolbarContribution,
+  localize,
+  ToolbarRegistry,
+  ClientAppContribution,
+  KeybindingContribution,
+  KeybindingRegistry,
+  getIcon,
+} 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, DEBUG_COMMANDS } from '../../../common';
+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,
+      iconClass: getIcon('close-all'),
+      viewId: DEBUG_WATCH_ID,
+      tooltip: localize('debug.watch.removeAll'),
+    });
+
+    registry.registerItem({
+      id: DEBUG_COMMANDS.COLLAPSE_ALL_WATCHER.id,
+      iconClass: getIcon('collapse-all'),
+      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,
+      iconClass: getIcon('plus'),
+      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

@@ -0,0 +1,178 @@
+@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);
+  }
+
+  &.mod_focused {
+    outline: 1px solid var(--list-focusOutline);
+    outline-offset: -1px;
+  }
+
+  &.mod_actived {
+    outline: 1px solid var(--list-focusOutline);
+    outline-offset: -1px;
+  }
+
+  &.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

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