@opensumi/ide-debug 2.21.3 → 2.21.4-rc-1668395886.0

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

@@ -0,0 +1,170 @@
+import { observable, action } from 'mobx';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { URI, PreferenceService, isUndefined } from '@opensumi/ide-core-browser';
+import { IWorkspaceService } from '@opensumi/ide-workspace';
+
+import {
+  DebugSessionOptions,
+  DEFAULT_ADD_CONFIGURATION_KEY,
+  DEFAULT_CONFIGURATION_NAME_SEPARATOR,
+  DEFAULT_CONFIGURATION_INDEX_SEPARATOR,
+} from '../../../common';
+import { IDebugSessionManager } from '../../../common/debug-session';
+import { DebugConfigurationManager } from '../../debug-configuration-manager';
+import { DebugSessionManager } from '../../debug-session-manager';
+import { DebugConsoleService } from '../console/debug-console.service';
+import { DebugViewModel } from '../debug-view-model';
+
+@Injectable()
+export class DebugConfigurationService {
+  @Autowired(IWorkspaceService)
+  protected workspaceService: IWorkspaceService;
+
+  @Autowired(DebugConfigurationManager)
+  protected debugConfigurationManager: DebugConfigurationManager;
+
+  @Autowired(IDebugSessionManager)
+  protected debugSessionManager: DebugSessionManager;
+
+  @Autowired(DebugViewModel)
+  protected debugViewModel: DebugViewModel;
+
+  @Autowired(DebugConsoleService)
+  protected debugConsoleService: DebugConsoleService;
+
+  @Autowired(PreferenceService)
+  private readonly preferenceService: PreferenceService;
+
+  private _whenReady: Promise<void>;
+
+  constructor() {
+    this._whenReady = this.init();
+  }
+
+  @observable
+  currentValue: string = DEFAULT_ADD_CONFIGURATION_KEY;
+
+  @observable
+  float = true;
+
+  @observable
+  isMultiRootWorkspace: boolean;
+
+  @observable
+  workspaceRoots: string[] = [];
+
+  @observable.shallow
+  configurationOptions: DebugSessionOptions[];
+
+  get whenReady() {
+    return this._whenReady;
+  }
+
+  async init() {
+    await this.debugConfigurationManager.whenReady;
+    await this.updateConfigurationOptions();
+    // await this.initCurrentConfiguration();
+    this.debugConfigurationManager.onDidChange(async () => {
+      this.updateConfigurationOptions();
+      // await this.initCurrentConfiguration();
+    });
+    this.preferenceService.onPreferenceChanged((event) => {
+      const { preferenceName, newValue } = event;
+      if (preferenceName === 'debug.toolbar.float') {
+        if (this.float !== newValue) {
+          this.updateFloat(newValue);
+        }
+      }
+    });
+    await this.updateWorkspaceState();
+    // onWorkspaceLocationChanged 事件不能满足实时更新workspaceRoots的需求
+    // onWorkspaceChanged 能获取到在工作区状态添加文件夹的节点变化
+    this.workspaceService.onWorkspaceChanged(async () => {
+      await this.updateWorkspaceState();
+    });
+    this.updateFloat(!!this.preferenceService.get<boolean>('debug.toolbar.float'));
+  }
+
+  @action
+  async updateWorkspaceState() {
+    this.isMultiRootWorkspace = this.workspaceService.isMultiRootWorkspaceOpened;
+    this.workspaceRoots = (await this.workspaceService.tryGetRoots()).map((root) => root.uri);
+  }
+
+  @action
+  updateFloat(value: boolean) {
+    this.float = value;
+  }
+
+  @action
+  updateCurrentValue(value: string) {
+    this.currentValue = value;
+  }
+
+  @action
+  updateConfigurationOptions() {
+    this.configurationOptions = this.debugConfigurationManager.all;
+    const { current } = this.debugConfigurationManager;
+    if (current) {
+      const currentValue = this.toValue(current);
+      this.updateCurrentValue(currentValue);
+    } else {
+      this.updateCurrentValue(DEFAULT_ADD_CONFIGURATION_KEY);
+    }
+  }
+
+  start = async () => {
+    const configuration = this.debugConfigurationManager.current;
+    if (configuration) {
+      this.debugSessionManager.start(configuration);
+    } else {
+      this.debugConfigurationManager.addConfiguration();
+    }
+  };
+
+  openConfiguration = () => {
+    const { current } = this.debugConfigurationManager;
+    const uri = current?.workspaceFolderUri;
+    this.debugConfigurationManager.openConfiguration(uri);
+  };
+
+  openDebugConsole = () => {
+    this.debugConsoleService.activate();
+  };
+
+  addConfiguration = (eventOrUri?: React.MouseEvent<HTMLElement, MouseEvent> | string) => {
+    this.debugConfigurationManager.addConfiguration(typeof eventOrUri === 'string' ? eventOrUri : undefined);
+  };
+
+  updateConfiguration = (name: string, workspaceFolderUri: string, index: number) => {
+    this.debugConfigurationManager.current = this.debugConfigurationManager.find(name, workspaceFolderUri, index);
+  };
+
+  toValue({ configuration, workspaceFolderUri, index }: DebugSessionOptions) {
+    if (!workspaceFolderUri) {
+      return configuration.name;
+    }
+    if (isUndefined(index)) {
+      const options = this.debugConfigurationManager.find(configuration.name, workspaceFolderUri);
+      if (options && options.index) {
+        return this.toValue(options);
+      }
+      return this.currentValue;
+    }
+    return (
+      configuration.name +
+      DEFAULT_CONFIGURATION_NAME_SEPARATOR +
+      workspaceFolderUri +
+      DEFAULT_CONFIGURATION_INDEX_SEPARATOR +
+      index
+    );
+  }
+
+  toName = ({ configuration, workspaceFolderUri }: DebugSessionOptions) => {
+    if (!workspaceFolderUri || !this.workspaceService.isMultiRootWorkspaceEnabled) {
+      return configuration.name;
+    }
+    return configuration.name + ' (' + new URI(workspaceFolderUri).path.base + ')';
+  };
+}

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

@@ -0,0 +1,253 @@
+import cls from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+
+import { Select, Option } from '@opensumi/ide-components';
+import { useInjectable, localize, isElectronRenderer, URI } 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,
+  DebugSessionOptions,
+} from '../../../common';
+import { DebugAction } from '../../components';
+
+import styles from './debug-configuration.module.less';
+import { DebugConfigurationService } from './debug-configuration.service';
+import { DebugToolbarView } from './debug-toolbar.view';
+
+interface ConfigurationSelectorProps {
+  currentValue: string;
+  options: DebugSessionOptions[];
+  isMultiRootWorkspace: boolean;
+  addConfigurationLabel: string;
+  workspaceRoots: string[];
+  toValue: (option: DebugSessionOptions) => string;
+  onChangeConfiguration(event: React.ChangeEvent<HTMLSelectElement> | string): void;
+}
+
+const ConfigurationSelector = React.memo(
+  ({
+    currentValue,
+    options,
+    onChangeConfiguration,
+    isMultiRootWorkspace,
+    addConfigurationLabel,
+    toValue,
+    workspaceRoots,
+  }: ConfigurationSelectorProps) => {
+    const renderConfigurationOptions = React.useCallback(
+      (options) => {
+        if (options && options.length) {
+          return options.map((option, index) => {
+            const label = isMultiRootWorkspace
+              ? `${option.configuration.name} (${new URI(option.workspaceFolderUri).displayName})`
+              : option.configuration.name;
+            return isElectronRenderer() ? (
+              <option key={index} value={toValue(option)} label={label}>
+                {label}
+              </option>
+            ) : (
+              <Option key={index} value={toValue(option)} label={label}>
+                {label}
+              </Option>
+            );
+          });
+        } else {
+          return isElectronRenderer()
+            ? [
+                <option
+                  value={DEFAULT_NO_CONFIGURATION_KEY}
+                  key={DEFAULT_NO_CONFIGURATION_KEY}
+                  label={localize('debug.action.no.configuration')}
+                >
+                  {localize('debug.action.no.configuration')}
+                </option>,
+              ]
+            : [
+                <Option
+                  value={DEFAULT_NO_CONFIGURATION_KEY}
+                  key={DEFAULT_NO_CONFIGURATION_KEY}
+                  label={localize('debug.action.no.configuration')}
+                >
+                  {localize('debug.action.no.configuration')}
+                </Option>,
+              ];
+        }
+      },
+      [isMultiRootWorkspace],
+    );
+
+    const renderAddConfigurationOptions = React.useCallback(() => {
+      if (isMultiRootWorkspace) {
+        let longName: string = addConfigurationLabel;
+        const addonOptions = workspaceRoots.map((root, index) => {
+          const label = `${addConfigurationLabel} (${new URI(root).displayName})`;
+          if (longName.length < label.length) {
+            longName = label;
+          }
+          return isElectronRenderer() ? (
+            <option
+              value={`${DEFAULT_ADD_CONFIGURATION_KEY}${index}`}
+              key={`${DEFAULT_ADD_CONFIGURATION_KEY}${index}`}
+              label={label}
+            >
+              {label}
+            </option>
+          ) : (
+            <Option
+              value={`${DEFAULT_ADD_CONFIGURATION_KEY}${index}`}
+              key={`${DEFAULT_ADD_CONFIGURATION_KEY}${index}`}
+              label={label}
+            >
+              {label}
+            </Option>
+          );
+        });
+        const disabledOption = isElectronRenderer()
+          ? [
+              <option disabled key={'--'} value={longName!.replace(/./g, '-')}>
+                {longName!.replace(/./g, '-')}
+              </option>,
+            ]
+          : [
+              <Option disabled key={'--'} value={longName!.replace(/./g, '-')}>
+                {longName!.replace(/./g, '-')}
+              </Option>,
+            ];
+        return disabledOption.concat(addonOptions);
+      } else {
+        const label = addConfigurationLabel;
+        return isElectronRenderer()
+          ? [
+              <option disabled key={'--'} value={label!.replace(/./g, '-')}>
+                {label!.replace(/./g, '-')}
+              </option>,
+              <option value={DEFAULT_ADD_CONFIGURATION_KEY} key={DEFAULT_ADD_CONFIGURATION_KEY} label={label}>
+                {label}
+              </option>,
+            ]
+          : [
+              <Option disabled key={'--'} value={label!.replace(/./g, '-')}>
+                {label!.replace(/./g, '-')}
+              </Option>,
+              <Option value={DEFAULT_ADD_CONFIGURATION_KEY} key={DEFAULT_ADD_CONFIGURATION_KEY} label={label}>
+                {label}
+              </Option>,
+            ];
+      }
+    }, [isMultiRootWorkspace, addConfigurationLabel]);
+
+    if (isElectronRenderer()) {
+      return (
+        <NativeSelect
+          value={currentValue}
+          onChange={onChangeConfiguration}
+          className={cls(styles.debug_selection, styles.special_radius)}
+        >
+          {renderConfigurationOptions(options)}
+          {renderAddConfigurationOptions()}
+        </NativeSelect>
+      );
+    }
+
+    return (
+      <Select
+        value={currentValue}
+        onChange={onChangeConfiguration}
+        className={cls(styles.debug_selection, styles.special_radius)}
+      >
+        {renderConfigurationOptions(options)}
+        {renderAddConfigurationOptions()}
+      </Select>
+    );
+  },
+);
+
+interface DebugActionBarProps {
+  runDebug(): void;
+  openConfiguration(): void;
+  openDebugConsole(): void;
+}
+
+export const DebugActionBar = React.memo(({ runDebug, openConfiguration, openDebugConsole }: DebugActionBarProps) => (
+  <div className={styles.kt_debug_actions}>
+    <DebugAction
+      id='debug.action.start'
+      icon={'start'}
+      label={localize('debug.action.start')}
+      run={runDebug}
+    ></DebugAction>
+    <DebugAction
+      id='debug.action.open.configuration'
+      icon={'setting'}
+      label={localize('debug.action.open.configuration')}
+      run={openConfiguration}
+    ></DebugAction>
+    <DebugAction
+      id='debug.action.debug.console'
+      icon={'terminal'}
+      label={localize('debug.action.debug.console')}
+      run={openDebugConsole}
+    ></DebugAction>
+  </div>
+));
+
+export const DebugConfigurationView = observer((props) => {
+  const {
+    configurationOptions,
+    toValue,
+    currentValue,
+    openConfiguration,
+    addConfiguration,
+    openDebugConsole,
+    updateConfiguration,
+    start,
+    float,
+    isMultiRootWorkspace,
+    workspaceRoots,
+  } = useInjectable<DebugConfigurationService>(DebugConfigurationService);
+  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') {
+      value = event.target.value;
+    } else {
+      value = event;
+    }
+    if (value.startsWith(DEFAULT_ADD_CONFIGURATION_KEY)) {
+      const index = value.slice(DEFAULT_ADD_CONFIGURATION_KEY.length);
+      if (index) {
+        addConfiguration(workspaceRoots[index]);
+      } else {
+        addConfiguration(workspaceRoots[0]);
+      }
+    } else {
+      const [name, workspaceAndIndex] = value.split(DEFAULT_CONFIGURATION_NAME_SEPARATOR);
+      const [workspaceFolderUri, index] = workspaceAndIndex.split(DEFAULT_CONFIGURATION_INDEX_SEPARATOR);
+      updateConfiguration(name, workspaceFolderUri, +index);
+    }
+  }, []);
+
+  return (
+    <div>
+      <div className={styles.debug_configuration_toolbar}>
+        <ConfigurationSelector
+          currentValue={currentValue}
+          options={configurationOptions}
+          onChangeConfiguration={setCurrentConfiguration}
+          isMultiRootWorkspace={isMultiRootWorkspace}
+          addConfigurationLabel={addConfigurationLabel}
+          toValue={toValue}
+          workspaceRoots={workspaceRoots}
+        />
+        <DebugActionBar runDebug={start} openConfiguration={openConfiguration} openDebugConsole={openDebugConsole} />
+      </div>
+      {!float && <DebugToolbarView float={false} />}
+    </div>
+  );
+});

package/src/browser/view/configuration/debug-toolbar.service.ts

@@ -0,0 +1,167 @@
+import { observable, action } from 'mobx';
+
+import { Injectable, Autowired, INJECTOR_TOKEN, Injector } from '@opensumi/di';
+import { IContextKeyService, IReporterService, memoize } from '@opensumi/ide-core-browser';
+import { AbstractContextMenuService, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+import { IContextMenu } from '@opensumi/ide-core-browser/lib/menu/next';
+import { IElectronMainUIService } from '@opensumi/ide-core-common/lib/electron';
+
+import { DebugState, DEBUG_REPORT_NAME } from '../../../common';
+import { DebugSession } from '../../debug-session';
+import { DebugViewModel } from '../debug-view-model';
+
+@Injectable()
+export class DebugToolbarService {
+  @Autowired(IContextKeyService)
+  private readonly contextKeyService: IContextKeyService;
+
+  @Autowired(AbstractContextMenuService)
+  private readonly contextMenuService: AbstractContextMenuService;
+
+  @Autowired(DebugViewModel)
+  protected readonly model: DebugViewModel;
+
+  @Autowired(IReporterService)
+  protected readonly reporterService: IReporterService;
+
+  @Autowired(INJECTOR_TOKEN)
+  private readonly injector: Injector;
+
+  @observable
+  state: DebugState;
+
+  @observable
+  sessionCount: number;
+
+  @observable
+  currentSession: DebugSession | undefined;
+
+  @observable.shallow
+  sessions: DebugSession[] = [];
+
+  public readonly toolBarMenuMap: Map<string, IContextMenu> = new Map();
+
+  constructor() {
+    this.model.onDidChange(() => {
+      this.updateToolBarMenu();
+      this.updateModel();
+    });
+  }
+
+  @memoize
+  get mainUIService() {
+    return this.injector.get(IElectronMainUIService);
+  }
+
+  @action
+  updateModel() {
+    this.state = this.model.state;
+    this.currentSession = this.model.currentSession;
+    this.sessions = Array.from(this.model.sessions).filter(
+      (session: DebugSession) => session && session.state > DebugState.Inactive,
+    );
+    this.sessionCount = this.sessions.length;
+  }
+
+  @action
+  updateToolBarMenu() {
+    if (this.currentSession && this.currentSession.id && !this.toolBarMenuMap.has(this.currentSession.id)) {
+      const contextMenu = this.contextMenuService.createMenu({
+        id: MenuId.DebugToolBar,
+        contextKeyService: this.contextKeyService.createScoped(),
+      });
+      this.currentSession.on('terminated', () => {
+        this.toolBarMenuMap.delete(this.currentSession?.id!);
+      });
+
+      this.toolBarMenuMap.set(this.currentSession.id, contextMenu);
+    }
+  }
+
+  private instrumentReporter(name: string): () => void {
+    const session = this.model.currentSession!;
+    const languageType = session.configuration?.type;
+    const currentThread = this.model.currentThread;
+    const threadId = currentThread?.raw?.id;
+    this.model.reportAction(session.id, threadId, name);
+    const extra = {
+      type: languageType,
+      request: this.currentSession?.configuration.request,
+      sessionId: session.id,
+      threadId,
+    };
+    this.model.report(DEBUG_REPORT_NAME.DEBUG_TOOLBAR_OPERATION, name, extra);
+    const reportTime = this.model.reportTime(DEBUG_REPORT_NAME.DEBUG_TOOLBAR_OPERATION_TIME, extra);
+    return () => {
+      reportTime(name);
+    };
+  }
+
+  doStart = () => this.model.start();
+
+  doRestart = async () => {
+    const reportTimeEnd = this.instrumentReporter('restart');
+    const terminated = await this.model.restart();
+    reportTimeEnd();
+    return terminated;
+  };
+
+  doStop = async () => {
+    if (!this.model.currentSession) {
+      return;
+    }
+    const reportTimeEnd = this.instrumentReporter('stop');
+    const terminated = await this.model.currentSession.terminate();
+    reportTimeEnd();
+    return terminated;
+  };
+  doContinue = async () => {
+    if (!this.model.currentThread) {
+      return;
+    }
+    const reportTimeEnd = this.instrumentReporter('continue');
+    const terminated = await this.model.currentThread.continue();
+    reportTimeEnd();
+    return terminated;
+  };
+  doPause = async () => {
+    if (!this.model.currentThread) {
+      return;
+    }
+    const reportTimeEnd = this.instrumentReporter('pause');
+    const terminated = await this.model.currentThread.pause();
+    reportTimeEnd();
+    return terminated;
+  };
+  doStepOver = async () => {
+    if (!this.model.currentThread) {
+      return;
+    }
+    const reportTimeEnd = this.instrumentReporter('stepOver');
+    const terminated = await this.model.currentThread.stepOver();
+    reportTimeEnd();
+    return terminated;
+  };
+  doStepIn = async () => {
+    if (!this.model.currentThread) {
+      return;
+    }
+    const reportTimeEnd = this.instrumentReporter('stepIn');
+    const terminated = await this.model.currentThread.stepIn();
+    reportTimeEnd();
+    return terminated;
+  };
+  doStepOut = async () => {
+    if (!this.model.currentThread) {
+      return;
+    }
+    const reportTimeEnd = this.instrumentReporter('stepOut');
+    const terminated = await this.model.currentThread.stepOut();
+    reportTimeEnd();
+    return terminated;
+  };
+
+  updateCurrentSession = (session: DebugSession) => {
+    this.model.currentSession = session;
+  };
+}