@opensumi/ide-debug 2.23.4 → 2.23.5-rc-1681807382.0

package/src/browser/model/debug-stack-frame.ts

@@ -1,4 +1,4 @@
-import { IRange } from '@opensumi/ide-core-browser';
+import { formatLocalize, IRange } from '@opensumi/ide-core-browser';
 import { IResourceOpenOptions } from '@opensumi/ide-editor';
 import { Range } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/range';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
@@ -9,12 +9,15 @@ import { DebugScope, ExpressionContainer } from '../tree/debug-tree-node.define'
 import { DebugSource } from './debug-source';
 import { DebugThread } from './debug-thread';
 
-
 export class DebugStackFrameData {
   readonly raw: DebugProtocol.StackFrame;
 }
 
 export class DebugStackFrame extends DebugStackFrameData {
+  public static is(frame: any): frame is DebugStackFrame {
+    return !!frame && 'raw' in frame;
+  }
+
   constructor(readonly thread: DebugThread, readonly session: DebugSession) {
     super();
   }
@@ -109,3 +112,26 @@ export class DebugStackFrame extends DebugStackFrameData {
     return scopesContainingRange.length ? scopesContainingRange : nonExpensiveScopes;
   }
 }
+
+export class ShowMoreDebugStackFrame {
+  constructor(
+    // `undefined` 说明已经在末尾
+    public readonly nextFrame: DebugStackFrame | undefined,
+    public readonly frames: DebugStackFrame[],
+    readonly session: DebugSession,
+    readonly origin: string,
+    readonly _open: (showMoreFrame: ShowMoreDebugStackFrame) => void,
+  ) {}
+
+  get name() {
+    return formatLocalize('debug.stack.showMoreAndOrigin', this.frames.length, this.origin);
+  }
+
+  get id(): string {
+    return `${this.session.id}:showMore:${this.nextFrame?.id}`;
+  }
+
+  open = () => {
+    this._open(this);
+  };
+}

package/src/browser/model/debug-thread.ts

@@ -158,10 +158,12 @@ export class DebugThread extends DebugThreadData {
     const result = new Map<number, DebugStackFrame>(this._frames);
     for (const raw of frames) {
       const id = raw.id;
-      const frame = this._frames.get(id) || new DebugStackFrame(this, this.session);
-      this._frames.set(id, frame);
-      frame.update({ raw });
-      result.set(id, frame);
+      if (!this._frames.has(id)) {
+        const frame = new DebugStackFrame(this, this.session);
+        this._frames.set(id, frame);
+        frame.update({ raw });
+        result.set(id, frame);
+      }
     }
     const values = [...result.values()];
     frontEndTime('doUpdateFrames');

package/src/browser/view/breakpoints/debug-breakpoints-tree.model.ts

@@ -0,0 +1,35 @@
+import { IBasicTreeData } from '@opensumi/ide-components';
+import { Emitter, URI } from '@opensumi/ide-core-common';
+
+import { isDebugBreakpoint } from '../../breakpoint';
+
+import { BreakpointItem } from './debug-breakpoints.view';
+
+export class BreakpointsTreeNode implements IBasicTreeData {
+  public label = '';
+  public rawData: BreakpointItem;
+  private _uri: URI;
+  private _onDescriptionChange = new Emitter<string>();
+
+  constructor(uri: URI, rawData: BreakpointItem) {
+    const { breakpoint } = rawData;
+
+    this._uri = uri;
+    this.label = isDebugBreakpoint(breakpoint) ? uri.displayName : '';
+    this.rawData = rawData;
+    this.rawData.onDescriptionChange = this._onDescriptionChange.event;
+  }
+
+  get breakpoint() {
+    return this.rawData.breakpoint;
+  }
+
+  get uri() {
+    return this._uri;
+  }
+
+  fireDescriptionChange(value: string): void {
+    this.rawData.description = value;
+    this._onDescriptionChange.fire(value);
+  }
+}

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

@@ -21,8 +21,6 @@
     pointer-events: none;
   }
   &:hover {
-    background: var(--list-hoverBackground);
-    color: var(--list-hoverForeground);
     .debug_remove_breakpoints_icon {
       display: inline-block;
       pointer-events: all;
@@ -42,6 +40,7 @@
   width: 19px;
   height: 19px;
   min-width: 19px;
+  margin-right: 3px;
 }
 
 .debug_breakpoints_badge {
@@ -51,9 +50,7 @@
 
 .debug_breakpoints_description {
   display: block;
-  transform: scale(0.95);
-  opacity: 0.7;
-  margin-left: 5px;
+  opacity: 0.85;
   display: inline;
 }
 
@@ -69,3 +66,7 @@
   margin-right: 5px;
   flex: 1;
 }
+
+.debug_breakpoints_item_tree_node {
+  padding-left: 27px !important;
+}

package/src/browser/view/breakpoints/debug-breakpoints.service.ts

@@ -1,7 +1,16 @@
 import { observable, action, runInAction } from 'mobx';
 
 import { Injectable, Autowired } from '@opensumi/di';
-import { URI, WithEventBus, OnEvent, IContextKeyService, IReporterService, Schemes } from '@opensumi/ide-core-browser';
+import {
+  URI,
+  WithEventBus,
+  OnEvent,
+  IContextKeyService,
+  IReporterService,
+  Schemes,
+  Emitter,
+  Event,
+} from '@opensumi/ide-core-browser';
 import { LabelService } from '@opensumi/ide-core-browser/lib/services';
 import { ICodeEditor, EditorCollectionService, getSimpleEditorOptions } from '@opensumi/ide-editor';
 import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser';
@@ -16,10 +25,12 @@ import {
   isDebugExceptionBreakpoint,
   BreakpointManager,
   DebugDecorator,
+  EXCEPTION_BREAKPOINT_URI,
 } from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 import { DebugViewModel } from '../debug-view-model';
 
+import { BreakpointsTreeNode } from './debug-breakpoints-tree.model';
 import { BreakpointItem } from './debug-breakpoints.view';
 
 @Injectable()
@@ -51,14 +62,17 @@ export class DebugBreakpointsService extends WithEventBus {
   @Autowired(IEditorDocumentModelService)
   protected readonly documentService: IEditorDocumentModelService;
 
+  private readonly _onDidChangeBreakpointsTreeNode = new Emitter<Map<string, BreakpointsTreeNode[]>>();
+  readonly onDidChangeBreakpointsTreeNode: Event<Map<string, BreakpointsTreeNode[]>> =
+    this._onDidChangeBreakpointsTreeNode.event;
+
   private _inputEditor: ICodeEditor;
 
   public get inputEditor(): ICodeEditor {
     return this._inputEditor;
   }
 
-  @observable
-  public nodes: BreakpointItem[] = [];
+  public treeNodeMap: Map<string, BreakpointsTreeNode[]> = new Map();
 
   @observable
   public enable: boolean;
@@ -75,7 +89,6 @@ export class DebugBreakpointsService extends WithEventBus {
 
   async init() {
     await this.updateRoots();
-    await this.updateBreakpoints();
     this.workspaceService.onWorkspaceChanged(async () => {
       this.updateRoots();
       this.updateBreakpoints();
@@ -86,6 +99,9 @@ export class DebugBreakpointsService extends WithEventBus {
     this.breakpoints.onDidChangeExceptionsBreakpoints(() => {
       this.updateBreakpoints();
     });
+    this.breakpoints.whenReady.then(() => {
+      this.updateBreakpoints();
+    });
     this.contextKeyService.onDidChangeContext((e) => {
       if (e.payload.affectsSome(new Set([CONTEXT_IN_DEBUG_MODE_KEY]))) {
         runInAction(() => {
@@ -139,38 +155,71 @@ export class DebugBreakpointsService extends WithEventBus {
     }
   }
 
-  extractNodes(items: (DebugExceptionBreakpoint | IDebugBreakpoint)[]) {
-    const nodes: BreakpointItem[] = [];
-    items.forEach((item) => {
-      if (isDebugBreakpoint(item)) {
-        const uri = URI.parse(item.uri);
-        const parent = this.roots.filter((root) => root.isEqualOrParent(uri))[0];
-        nodes.push({
-          id: item.id,
-          name: uri.displayName,
-          description: parent && parent.relative(uri)!.toString(),
-          breakpoint: item,
-        });
-      }
-      if (isDebugExceptionBreakpoint(item)) {
-        nodes.push({
-          id: item.filter,
-          name: item.label,
-          description: '',
-          breakpoint: item,
-        });
-      }
-    });
-    return nodes;
+  extractNodes(item: DebugExceptionBreakpoint | IDebugBreakpoint): BreakpointItem | undefined {
+    if (isDebugBreakpoint(item)) {
+      return {
+        id: item.id,
+        name: '',
+        description: '',
+        onDescriptionChange: Event.None,
+        breakpoint: item,
+      };
+    }
+    if (isDebugExceptionBreakpoint(item)) {
+      return {
+        id: item.filter,
+        name: item.label,
+        onDescriptionChange: Event.None,
+        description: '',
+        breakpoint: item,
+      };
+    }
   }
 
   @action
   private async updateBreakpoints() {
     await this.breakpoints.whenReady;
-    this.nodes = this.extractNodes([
-      ...this.breakpoints.getExceptionBreakpoints(),
-      ...this.breakpoints.getBreakpoints(),
-    ]);
+    this.treeNodeMap.clear();
+
+    const allBreakpoints = [...this.breakpoints.getExceptionBreakpoints(), ...this.breakpoints.getBreakpoints()];
+
+    allBreakpoints.forEach((item) => {
+      const extractNode = this.extractNodes(item);
+      if (extractNode) {
+        const uri = isDebugBreakpoint(item) ? URI.parse(item.uri) : EXCEPTION_BREAKPOINT_URI;
+        const getTreeNodes = this.treeNodeMap.get(uri.toString()) || [];
+        getTreeNodes.push(new BreakpointsTreeNode(uri, extractNode));
+        this.treeNodeMap.set(uri.toString(), getTreeNodes);
+      }
+    });
+    this._onDidChangeBreakpointsTreeNode.fire(this.treeNodeMap);
+  }
+
+  private async getDocumentModelRef(uri: URI) {
+    const document = this.documentService.getModelReference(uri);
+    if (!document) {
+      return this.documentService.createModelReference(uri);
+    }
+    return document;
+  }
+
+  public async refreshBreakpointsInfo() {
+    const treeNodeValues = this.treeNodeMap.values();
+    const allTreeNodes: BreakpointsTreeNode[] = Array.from(treeNodeValues).reduce((acc, cur) => acc.concat(cur), []);
+
+    for await (const node of allTreeNodes) {
+      const { rawData, uri } = node;
+      if (isDebugBreakpoint(rawData.breakpoint)) {
+        const line = rawData.breakpoint.raw.line;
+        const monacoModel = await this.getDocumentModelRef(uri);
+        if (!monacoModel) {
+          return;
+        }
+
+        const getContent = monacoModel.instance.getMonacoModel().getLineContent(line);
+        node.fireDescriptionChange(getContent.trim());
+      }
+    }
   }
 
   removeAllBreakpoints() {

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

@@ -1,16 +1,34 @@
 import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { CheckBox } from '@opensumi/ide-components';
-import { Badge, RecycleList } from '@opensumi/ide-components';
-import { useInjectable, ViewState, CommandService, EDITOR_COMMANDS, URI, getIcon } from '@opensumi/ide-core-browser';
+import { BasicRecycleTree, CheckBox, IBasicTreeData, ICompositeTreeNode } from '@opensumi/ide-components';
+import { Badge } from '@opensumi/ide-components';
+import {
+  useInjectable,
+  CommandService,
+  EDITOR_COMMANDS,
+  URI,
+  getIcon,
+  Disposable,
+  ViewState,
+  Event,
+  isUndefined,
+} from '@opensumi/ide-core-browser';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
 
 import { IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
-import { DebugExceptionBreakpoint, isDebugBreakpoint, isRuntimeBreakpoint, getStatus } from '../../breakpoint';
+import {
+  DebugExceptionBreakpoint,
+  isDebugBreakpoint,
+  isRuntimeBreakpoint,
+  getStatus,
+  isDebugExceptionBreakpoint,
+  EXCEPTION_BREAKPOINT_URI,
+} from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 
+import { BreakpointsTreeNode } from './debug-breakpoints-tree.model';
 import styles from './debug-breakpoints.module.less';
 import { DebugBreakpointsService } from './debug-breakpoints.service';
 
@@ -18,29 +36,101 @@ export interface BreakpointItem {
   name: string;
   id: string;
   description: string;
+  onDescriptionChange: Event<string>;
   breakpoint: IDebugBreakpoint | DebugExceptionBreakpoint;
 }
 
 export const DebugBreakpointView = observer(({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
-  const { nodes, enable, inDebugMode, toggleBreakpointEnable }: DebugBreakpointsService =
-    useInjectable(DebugBreakpointsService);
-  const template = ({ data }: { data: BreakpointItem }) => (
-    <BreakpointItem
-      toggle={() => toggleBreakpointEnable(data.breakpoint)}
-      breakpointEnabled={enable}
-      data={data}
-      isDebugMode={inDebugMode}
-    ></BreakpointItem>
+  const debugBreakpointsService: DebugBreakpointsService = useInjectable(DebugBreakpointsService);
+  const { enable, toggleBreakpointEnable } = debugBreakpointsService;
+  const isDisposed = useRef<boolean>(false);
+  const [treeData, setTreeData] = useState<IBasicTreeData[]>([]);
+
+  const updateTreeData = useCallback(
+    (nodes: [string, BreakpointsTreeNode[]][]) => {
+      const { roots } = debugBreakpointsService;
+      const breakpointTreeData: IBasicTreeData[] = [];
+      nodes.forEach(([uri, items]) => {
+        const isException = EXCEPTION_BREAKPOINT_URI.toString() === uri;
+        if (isException) {
+          items.forEach((item) => {
+            breakpointTreeData.push({
+              label: '',
+              expandable: false,
+              children: [],
+              description: (
+                <BreakpointItem
+                  toggle={() => toggleBreakpointEnable(item.breakpoint)}
+                  breakpointEnabled={enable}
+                  data={item.rawData}
+                  isDebugMode={debugBreakpointsService.inDebugMode}
+                ></BreakpointItem>
+              ),
+            });
+          });
+        } else {
+          const toURI = URI.parse(uri);
+          const parent = roots.filter((root) => root.isEqualOrParent(toURI))[0];
+
+          breakpointTreeData.push({
+            label: parent ? parent.relative(toURI)?.toString() || '' : URI.parse(uri).displayName,
+            expandable: true,
+            iconClassName: getIcon('file-text'),
+            expanded: true,
+            children: items.map((item) => ({
+              ...item,
+              label: '',
+              expandable: false,
+              description: (
+                <BreakpointItem
+                  toggle={() => toggleBreakpointEnable(item.breakpoint)}
+                  breakpointEnabled={enable}
+                  data={item.rawData}
+                  isDebugMode={debugBreakpointsService.inDebugMode}
+                ></BreakpointItem>
+              ),
+            })),
+          });
+        }
+      });
+      if (!isDisposed.current) {
+        setTreeData(breakpointTreeData);
+      }
+    },
+    [treeData],
   );
 
-  const containerStyle = {
-    height: viewState.height,
-    width: viewState.width,
-  } as React.CSSProperties;
+  useEffect(() => {
+    const dispose = new Disposable();
+    updateTreeData(Array.from(debugBreakpointsService.treeNodeMap.entries()));
+    dispose.addDispose(
+      debugBreakpointsService.onDidChangeBreakpointsTreeNode((nodes: Map<string, BreakpointsTreeNode[]>) => {
+        updateTreeData(Array.from(nodes.entries()));
+      }),
+    );
+
+    return () => {
+      isDisposed.current = true;
+      dispose.dispose();
+    };
+  }, []);
 
+  useEffect(() => {
+    if (treeData.length > 0) {
+      requestAnimationFrame(() => {
+        debugBreakpointsService.refreshBreakpointsInfo();
+      });
+    }
+  }, [treeData]);
+
+  const getItemClassName = useCallback((item: ICompositeTreeNode) => {
+    if (!item.children && isUndefined((item as any).expandable)) {
+      return styles.debug_breakpoints_item_tree_node;
+    }
+  }, []);
   return (
     <div className={cls(styles.debug_breakpoints, !enable && styles.debug_breakpoints_disabled)}>
-      <RecycleList data={nodes} itemHeight={22} template={template} style={containerStyle} />
+      <BasicRecycleTree treeData={treeData} height={viewState.height} getItemClassName={getItemClassName} />
     </div>
   );
 });
@@ -62,6 +152,7 @@ export const BreakpointItem = ({
   const debugBreakpointsService = useInjectable<DebugBreakpointsService>(DebugBreakpointsService);
   const [enabled, setEnabled] = React.useState<boolean>(defaultValue);
   const [status, setStatus] = React.useState<DebugProtocol.Breakpoint | false | undefined>(undefined);
+  const [description, setDescription] = React.useState<string>(data.description);
 
   const handleBreakpointChange = () => {
     toggle();
@@ -98,6 +189,8 @@ export const BreakpointItem = ({
   };
 
   React.useEffect(() => {
+    const disposable = new Disposable();
+
     const exec = () => {
       if (isDebugBreakpoint(data.breakpoint) && isRuntimeBreakpoint(data.breakpoint)) {
         const status = getStatus(data.breakpoint);
@@ -105,9 +198,11 @@ export const BreakpointItem = ({
       }
     };
 
-    const disposable = manager.onDidChangeActiveDebugSession(() => exec());
+    disposable.addDispose(manager.onDidChangeActiveDebugSession(() => exec()));
     exec();
 
+    disposable.addDispose(data.onDescriptionChange(setDescription));
+
     return () => {
       setStatus(undefined);
       disposable.dispose();
@@ -142,13 +237,15 @@ export const BreakpointItem = ({
     debugBreakpointsService.delBreakpoint(data.breakpoint as IDebugBreakpoint);
   };
 
+  const isExceptionBreakpoint = useMemo(() => isDebugExceptionBreakpoint(data.breakpoint), [data]);
+
   return (
     <div className={cls(styles.debug_breakpoints_item)}>
-      <div className={cls(converBreakpointClsState(), styles.debug_breakpoints_icon)}></div>
+      {!isExceptionBreakpoint && <div className={cls(converBreakpointClsState(), styles.debug_breakpoints_icon)}></div>}
       <CheckBox id={data.id} onChange={handleBreakpointChange} checked={enabled}></CheckBox>
       <div className={styles.debug_breakpoints_wrapper} onClick={handleBreakpointClick}>
-        <span className={styles.debug_breakpoints_name}>{data.name}</span>
-        <span className={styles.debug_breakpoints_description}>{data.description}</span>
+        {data.name && <span className={styles.debug_breakpoints_name}>{data.name}</span>}
+        <span className={styles.debug_breakpoints_description}>{description}</span>
       </div>
       {isDebugBreakpoint(data.breakpoint) ? (
         <>

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

@@ -1,11 +1,14 @@
 @import '~@opensumi/ide-components/lib/style/mixins.less';
 
+.debug_action_bar_internal {
+  padding: 0px 8px;
+  margin-bottom: 8px;
+}
+
 .debug_action_bar {
   height: 28px;
   display: flex;
   align-items: center;
-  padding: 0px 8px;
-  margin-bottom: 8px;
   justify-content: flex-start;
   pointer-events: all;
   overflow: hidden;
@@ -36,11 +39,14 @@
   }
 }
 
+.debug_configuration_container {
+  padding-right: 8px;
+  margin-bottom: 8px;
+}
+
 .debug_configuration_toolbar {
   display: flex;
   height: 28px;
-  padding-right: 8px;
-  margin-bottom: 8px;
   align-items: center;
 
   .debug_actions {

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

@@ -2,15 +2,15 @@ import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import { Select, Option } from '@opensumi/ide-components';
-import { useInjectable, localize, URI, AppConfig } from '@opensumi/ide-core-browser';
+import { Option, Select } from '@opensumi/ide-components';
+import { AppConfig, URI, localize, useInjectable } from '@opensumi/ide-core-browser';
 import { Select as NativeSelect } from '@opensumi/ide-core-browser/lib/components/select';
 
 import {
   DEFAULT_ADD_CONFIGURATION_KEY,
-  DEFAULT_NO_CONFIGURATION_KEY,
   DEFAULT_CONFIGURATION_INDEX_SEPARATOR,
   DEFAULT_CONFIGURATION_NAME_SEPARATOR,
+  DEFAULT_NO_CONFIGURATION_KEY,
   DebugSessionOptions,
 } from '../../../common';
 import { DebugAction } from '../../components';
@@ -198,7 +198,26 @@ export const DebugActionBar = React.memo(({ runDebug, openConfiguration, openDeb
   </div>
 ));
 
-export const DebugConfigurationView = observer((props) => {
+export const DebugConfigurationContainerView = observer(() => {
+  const { float } = useInjectable<DebugConfigurationService>(DebugConfigurationService);
+
+  return (
+    <>
+      <DebugControllerView className={styles.debug_configuration_container} />
+      {!float && <DebugToolbarView float={false} className={styles.debug_action_bar_internal} />}
+    </>
+  );
+});
+
+export interface DebugControllerViewProps {
+  className?: string;
+}
+
+/**
+ * 该组件支持用户导入
+ * 后续如果有一些改动需要考虑是否有 breakchange
+ */
+export const DebugControllerView = observer((props: DebugControllerViewProps) => {
   const {
     configurationOptions,
     toValue,
@@ -208,12 +227,12 @@ export const DebugConfigurationView = observer((props) => {
     openDebugConsole,
     updateConfiguration,
     start,
-    float,
     isMultiRootWorkspace,
     workspaceRoots,
   } = useInjectable<DebugConfigurationService>(DebugConfigurationService);
   const appConfig = useInjectable<AppConfig>(AppConfig);
   const addConfigurationLabel = localize('debug.action.add.configuration');
+
   const setCurrentConfiguration = React.useCallback((event: React.ChangeEvent<HTMLSelectElement> | string) => {
     let value: React.ChangeEvent<HTMLSelectElement> | string;
     if (typeof event === 'object') {
@@ -236,21 +255,18 @@ export const DebugConfigurationView = observer((props) => {
   }, []);
 
   return (
-    <div>
-      <div className={styles.debug_configuration_toolbar}>
-        <ConfigurationSelector
-          currentValue={currentValue}
-          options={configurationOptions}
-          onChangeConfiguration={setCurrentConfiguration}
-          isMultiRootWorkspace={isMultiRootWorkspace}
-          addConfigurationLabel={addConfigurationLabel}
-          toValue={toValue}
-          isElectronRenderer={appConfig.isElectronRenderer}
-          workspaceRoots={workspaceRoots}
-        />
-        <DebugActionBar runDebug={start} openConfiguration={openConfiguration} openDebugConsole={openDebugConsole} />
-      </div>
-      {!float && <DebugToolbarView float={false} />}
+    <div className={cls(styles.debug_configuration_toolbar, props.className || '')}>
+      <ConfigurationSelector
+        currentValue={currentValue}
+        options={configurationOptions}
+        onChangeConfiguration={setCurrentConfiguration}
+        isMultiRootWorkspace={isMultiRootWorkspace}
+        addConfigurationLabel={addConfigurationLabel}
+        toValue={toValue}
+        isElectronRenderer={appConfig.isElectronRenderer}
+        workspaceRoots={workspaceRoots}
+      />
+      <DebugActionBar runDebug={start} openConfiguration={openConfiguration} openDebugConsole={openDebugConsole} />
     </div>
   );
 });

package/src/browser/view/configuration/debug-toolbar.view.tsx

@@ -7,13 +7,13 @@ import { Injectable } from '@opensumi/di';
 import { Option, Select } from '@opensumi/ide-components';
 import {
   AppConfig,
-  getIcon,
-  localize,
-  PreferenceService,
-  useInjectable,
   DisposableCollection,
+  PreferenceService,
   electronEnv,
+  getIcon,
   isMacintosh,
+  localize,
+  useInjectable,
 } from '@opensumi/ide-core-browser';
 import { InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
 import { Select as NativeSelect } from '@opensumi/ide-core-browser/lib/components/select';
@@ -79,8 +79,13 @@ class FloatController {
 
 export interface DebugToolbarViewProps {
   float: boolean;
+  className?: string;
 }
 
+/**
+ * 该组件支持用户导入
+ * 后续如果有一些改动需要考虑是否有 breakchange
+ */
 export const DebugToolbarView = observer((props: DebugToolbarViewProps) => {
   const {
     state,
@@ -221,7 +226,7 @@ export const DebugToolbarView = observer((props: DebugToolbarViewProps) => {
   );
 
   return (
-    <div className={styles.debug_action_bar}>
+    <div className={cls(styles.debug_action_bar, props.className || '')}>
       {renderSelections(sessions.filter((s: DebugSession) => !s.parentSession))}
       <div className={styles.debug_actions}>
         {renderContinue(state)}