@opensumi/ide-debug 2.23.3-next-1681270416.0 → 2.23.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/lib/browser/breakpoint/breakpoint-marker.d.ts +0 -2
  2. package/lib/browser/breakpoint/breakpoint-marker.d.ts.map +1 -1
  3. package/lib/browser/breakpoint/breakpoint-marker.js +1 -4
  4. package/lib/browser/breakpoint/breakpoint-marker.js.map +1 -1
  5. package/lib/browser/debug-session-connection.js +1 -1
  6. package/lib/browser/debug-session-connection.js.map +1 -1
  7. package/lib/browser/debug-session-manager.js +2 -2
  8. package/lib/browser/debug-session-manager.js.map +1 -1
  9. package/lib/browser/debug-session.d.ts +1 -1
  10. package/lib/browser/debug-session.d.ts.map +1 -1
  11. package/lib/browser/debug-session.js +3 -3
  12. package/lib/browser/debug-session.js.map +1 -1
  13. package/lib/browser/model/debug-stack-frame.d.ts +0 -12
  14. package/lib/browser/model/debug-stack-frame.d.ts.map +1 -1
  15. package/lib/browser/model/debug-stack-frame.js +1 -27
  16. package/lib/browser/model/debug-stack-frame.js.map +1 -1
  17. package/lib/browser/model/debug-thread.d.ts.map +1 -1
  18. package/lib/browser/model/debug-thread.js +4 -6
  19. package/lib/browser/model/debug-thread.js.map +1 -1
  20. package/lib/browser/view/breakpoints/debug-breakpoints.module.less +5 -5
  21. package/lib/browser/view/breakpoints/debug-breakpoints.service.d.ts +3 -8
  22. package/lib/browser/view/breakpoints/debug-breakpoints.service.d.ts.map +1 -1
  23. package/lib/browser/view/breakpoints/debug-breakpoints.service.js +32 -76
  24. package/lib/browser/view/breakpoints/debug-breakpoints.service.js.map +1 -1
  25. package/lib/browser/view/breakpoints/debug-breakpoints.view.d.ts +1 -2
  26. package/lib/browser/view/breakpoints/debug-breakpoints.view.d.ts.map +1 -1
  27. package/lib/browser/view/breakpoints/debug-breakpoints.view.js +12 -60
  28. package/lib/browser/view/breakpoints/debug-breakpoints.view.js.map +1 -1
  29. package/lib/browser/view/frames/debug-call-stack-frame.view.d.ts +0 -1
  30. package/lib/browser/view/frames/debug-call-stack-frame.view.d.ts.map +1 -1
  31. package/lib/browser/view/frames/debug-call-stack-frame.view.js +26 -136
  32. package/lib/browser/view/frames/debug-call-stack-frame.view.js.map +1 -1
  33. package/lib/browser/view/frames/debug-call-stack-session.view.d.ts.map +1 -1
  34. package/lib/browser/view/frames/debug-call-stack-session.view.js +10 -17
  35. package/lib/browser/view/frames/debug-call-stack-session.view.js.map +1 -1
  36. package/lib/browser/view/frames/debug-call-stack-thread.view.d.ts +0 -1
  37. package/lib/browser/view/frames/debug-call-stack-thread.view.d.ts.map +1 -1
  38. package/lib/browser/view/frames/debug-call-stack-thread.view.js +7 -10
  39. package/lib/browser/view/frames/debug-call-stack-thread.view.js.map +1 -1
  40. package/lib/browser/view/frames/debug-call-stack.module.less +2 -1
  41. package/lib/common/debug-session.d.ts +1 -1
  42. package/lib/common/debug-session.d.ts.map +1 -1
  43. package/package.json +23 -23
  44. package/src/browser/breakpoint/breakpoint-marker.ts +1 -3
  45. package/src/browser/debug-session-connection.ts +1 -1
  46. package/src/browser/debug-session-manager.ts +2 -2
  47. package/src/browser/debug-session.ts +3 -3
  48. package/src/browser/model/debug-stack-frame.ts +2 -28
  49. package/src/browser/model/debug-thread.ts +4 -6
  50. package/src/browser/view/breakpoints/debug-breakpoints.module.less +5 -5
  51. package/src/browser/view/breakpoints/debug-breakpoints.service.ts +30 -78
  52. package/src/browser/view/breakpoints/debug-breakpoints.view.tsx +24 -118
  53. package/src/browser/view/frames/debug-call-stack-frame.view.tsx +51 -184
  54. package/src/browser/view/frames/debug-call-stack-session.view.tsx +15 -29
  55. package/src/browser/view/frames/debug-call-stack-thread.view.tsx +8 -14
  56. package/src/browser/view/frames/debug-call-stack.module.less +2 -1
  57. package/src/common/debug-session.ts +1 -1
  58. package/lib/browser/view/breakpoints/debug-breakpoints-tree.model.d.ts +0 -14
  59. package/lib/browser/view/breakpoints/debug-breakpoints-tree.model.d.ts.map +0 -1
  60. package/lib/browser/view/breakpoints/debug-breakpoints-tree.model.js +0 -28
  61. package/lib/browser/view/breakpoints/debug-breakpoints-tree.model.js.map +0 -1
  62. package/src/browser/view/breakpoints/debug-breakpoints-tree.model.ts +0 -35
@@ -485,11 +485,11 @@ export class DebugSessionManager implements IDebugSessionManager {
485
485
  return session && this.doRestart(session);
486
486
  }
487
487
  protected async doRestart(session: DebugSession, restart?: any): Promise<DebugSession | undefined> {
488
- if (await session.restart()) {
488
+ const { options, configuration } = session;
489
+ if (await session.restart({ arguments: configuration })) {
489
490
  return session;
490
491
  }
491
492
  await session.terminate(true);
492
- const { options, configuration } = session;
493
493
  configuration.__restart = restart;
494
494
  return this.start(options);
495
495
  }
@@ -948,14 +948,14 @@ export class DebugSession implements IDebugSession {
948
948
  ]);
949
949
  }
950
950
 
951
- async restart(): Promise<boolean> {
951
+ async restart(args: DebugProtocol.RestartArguments): Promise<boolean> {
952
952
  this.cancelAllRequests();
953
953
  if (this.capabilities.supportsRestartRequest) {
954
954
  this.terminated = false;
955
955
  if (this.lifecycleManagedByParent && this.parentSession) {
956
- await this.parentSession.restart();
956
+ await this.parentSession.restart({ arguments: (this.parentSession as DebugSession).configuration });
957
957
  } else {
958
- await this.sendRequest('restart', {});
958
+ await this.sendRequest('restart', args);
959
959
  }
960
960
  return true;
961
961
  }
@@ -1,4 +1,4 @@
1
- import { formatLocalize, IRange } from '@opensumi/ide-core-browser';
1
+ import { IRange } from '@opensumi/ide-core-browser';
2
2
  import { IResourceOpenOptions } from '@opensumi/ide-editor';
3
3
  import { Range } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/range';
4
4
  import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
@@ -9,15 +9,12 @@ import { DebugScope, ExpressionContainer } from '../tree/debug-tree-node.define'
9
9
  import { DebugSource } from './debug-source';
10
10
  import { DebugThread } from './debug-thread';
11
11
 
12
+
12
13
  export class DebugStackFrameData {
13
14
  readonly raw: DebugProtocol.StackFrame;
14
15
  }
15
16
 
16
17
  export class DebugStackFrame extends DebugStackFrameData {
17
- public static is(frame: any): frame is DebugStackFrame {
18
- return !!frame && 'raw' in frame;
19
- }
20
-
21
18
  constructor(readonly thread: DebugThread, readonly session: DebugSession) {
22
19
  super();
23
20
  }
@@ -112,26 +109,3 @@ export class DebugStackFrame extends DebugStackFrameData {
112
109
  return scopesContainingRange.length ? scopesContainingRange : nonExpensiveScopes;
113
110
  }
114
111
  }
115
-
116
- export class ShowMoreDebugStackFrame {
117
- constructor(
118
- // `undefined` 说明已经在末尾
119
- public readonly nextFrame: DebugStackFrame | undefined,
120
- public readonly frames: DebugStackFrame[],
121
- readonly session: DebugSession,
122
- readonly origin: string,
123
- readonly _open: (showMoreFrame: ShowMoreDebugStackFrame) => void,
124
- ) {}
125
-
126
- get name() {
127
- return formatLocalize('debug.stack.showMoreAndOrigin', this.frames.length, this.origin);
128
- }
129
-
130
- get id(): string {
131
- return `${this.session.id}:showMore:${this.nextFrame?.id}`;
132
- }
133
-
134
- open = () => {
135
- this._open(this);
136
- };
137
- }
@@ -158,12 +158,10 @@ export class DebugThread extends DebugThreadData {
158
158
  const result = new Map<number, DebugStackFrame>(this._frames);
159
159
  for (const raw of frames) {
160
160
  const id = raw.id;
161
- if (!this._frames.has(id)) {
162
- const frame = new DebugStackFrame(this, this.session);
163
- this._frames.set(id, frame);
164
- frame.update({ raw });
165
- result.set(id, frame);
166
- }
161
+ const frame = this._frames.get(id) || new DebugStackFrame(this, this.session);
162
+ this._frames.set(id, frame);
163
+ frame.update({ raw });
164
+ result.set(id, frame);
167
165
  }
168
166
  const values = [...result.values()];
169
167
  frontEndTime('doUpdateFrames');
@@ -21,6 +21,8 @@
21
21
  pointer-events: none;
22
22
  }
23
23
  &:hover {
24
+ background: var(--list-hoverBackground);
25
+ color: var(--list-hoverForeground);
24
26
  .debug_remove_breakpoints_icon {
25
27
  display: inline-block;
26
28
  pointer-events: all;
@@ -49,7 +51,9 @@
49
51
 
50
52
  .debug_breakpoints_description {
51
53
  display: block;
52
- opacity: 0.85;
54
+ transform: scale(0.95);
55
+ opacity: 0.7;
56
+ margin-left: 5px;
53
57
  display: inline;
54
58
  }
55
59
 
@@ -65,7 +69,3 @@
65
69
  margin-right: 5px;
66
70
  flex: 1;
67
71
  }
68
-
69
- .debug_breakpoints_item_tree_node {
70
- padding-left: 22px !important;
71
- }
@@ -1,16 +1,7 @@
1
1
  import { observable, action, runInAction } from 'mobx';
2
2
 
3
3
  import { Injectable, Autowired } from '@opensumi/di';
4
- import {
5
- URI,
6
- WithEventBus,
7
- OnEvent,
8
- IContextKeyService,
9
- IReporterService,
10
- Schemes,
11
- Emitter,
12
- Event,
13
- } from '@opensumi/ide-core-browser';
4
+ import { URI, WithEventBus, OnEvent, IContextKeyService, IReporterService, Schemes } from '@opensumi/ide-core-browser';
14
5
  import { LabelService } from '@opensumi/ide-core-browser/lib/services';
15
6
  import { ICodeEditor, EditorCollectionService, getSimpleEditorOptions } from '@opensumi/ide-editor';
16
7
  import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser';
@@ -25,12 +16,10 @@ import {
25
16
  isDebugExceptionBreakpoint,
26
17
  BreakpointManager,
27
18
  DebugDecorator,
28
- EXCEPTION_BREAKPOINT_URI,
29
19
  } from '../../breakpoint';
30
20
  import { DebugSessionManager } from '../../debug-session-manager';
31
21
  import { DebugViewModel } from '../debug-view-model';
32
22
 
33
- import { BreakpointsTreeNode } from './debug-breakpoints-tree.model';
34
23
  import { BreakpointItem } from './debug-breakpoints.view';
35
24
 
36
25
  @Injectable()
@@ -62,17 +51,14 @@ export class DebugBreakpointsService extends WithEventBus {
62
51
  @Autowired(IEditorDocumentModelService)
63
52
  protected readonly documentService: IEditorDocumentModelService;
64
53
 
65
- private readonly _onDidChangeBreakpointsTreeNode = new Emitter<Map<string, BreakpointsTreeNode[]>>();
66
- readonly onDidChangeBreakpointsTreeNode: Event<Map<string, BreakpointsTreeNode[]>> =
67
- this._onDidChangeBreakpointsTreeNode.event;
68
-
69
54
  private _inputEditor: ICodeEditor;
70
55
 
71
56
  public get inputEditor(): ICodeEditor {
72
57
  return this._inputEditor;
73
58
  }
74
59
 
75
- public treeNodeMap: Map<string, BreakpointsTreeNode[]> = new Map();
60
+ @observable
61
+ public nodes: BreakpointItem[] = [];
76
62
 
77
63
  @observable
78
64
  public enable: boolean;
@@ -153,72 +139,38 @@ export class DebugBreakpointsService extends WithEventBus {
153
139
  }
154
140
  }
155
141
 
156
- extractNodes(item: DebugExceptionBreakpoint | IDebugBreakpoint): BreakpointItem | undefined {
157
- if (isDebugBreakpoint(item)) {
158
- return {
159
- id: item.id,
160
- name: '',
161
- description: '',
162
- onDescriptionChange: Event.None,
163
- breakpoint: item,
164
- };
165
- }
166
- if (isDebugExceptionBreakpoint(item)) {
167
- return {
168
- id: item.filter,
169
- name: item.label,
170
- onDescriptionChange: Event.None,
171
- description: '',
172
- breakpoint: item,
173
- };
174
- }
142
+ extractNodes(items: (DebugExceptionBreakpoint | IDebugBreakpoint)[]) {
143
+ const nodes: BreakpointItem[] = [];
144
+ items.forEach((item) => {
145
+ if (isDebugBreakpoint(item)) {
146
+ const uri = URI.parse(item.uri);
147
+ const parent = this.roots.filter((root) => root.isEqualOrParent(uri))[0];
148
+ nodes.push({
149
+ id: item.id,
150
+ name: uri.displayName,
151
+ description: parent && parent.relative(uri)!.toString(),
152
+ breakpoint: item,
153
+ });
154
+ }
155
+ if (isDebugExceptionBreakpoint(item)) {
156
+ nodes.push({
157
+ id: item.filter,
158
+ name: item.label,
159
+ description: '',
160
+ breakpoint: item,
161
+ });
162
+ }
163
+ });
164
+ return nodes;
175
165
  }
176
166
 
177
167
  @action
178
168
  private async updateBreakpoints() {
179
169
  await this.breakpoints.whenReady;
180
- this.treeNodeMap.clear();
181
-
182
- const allBreakpoints = [...this.breakpoints.getExceptionBreakpoints(), ...this.breakpoints.getBreakpoints()];
183
-
184
- allBreakpoints.forEach((item) => {
185
- const extractNode = this.extractNodes(item);
186
- if (extractNode) {
187
- const uri = isDebugBreakpoint(item) ? URI.parse(item.uri) : EXCEPTION_BREAKPOINT_URI;
188
- const getTreeNodes = this.treeNodeMap.get(uri.toString()) || [];
189
- getTreeNodes.push(new BreakpointsTreeNode(uri, extractNode));
190
- this.treeNodeMap.set(uri.toString(), getTreeNodes);
191
- }
192
- });
193
-
194
- this._onDidChangeBreakpointsTreeNode.fire(this.treeNodeMap);
195
- }
196
-
197
- private async getDocumentModelRef(uri: URI) {
198
- const document = this.documentService.getModelReference(uri);
199
- if (!document) {
200
- return this.documentService.createModelReference(uri);
201
- }
202
- return document;
203
- }
204
-
205
- public async refreshBreakpointsInfo() {
206
- const treeNodeValues = this.treeNodeMap.values();
207
- const allTreeNodes: BreakpointsTreeNode[] = Array.from(treeNodeValues).reduce((acc, cur) => acc.concat(cur), []);
208
-
209
- for await (const node of allTreeNodes) {
210
- const { rawData, uri } = node;
211
- if (isDebugBreakpoint(rawData.breakpoint)) {
212
- const line = rawData.breakpoint.raw.line;
213
- const monacoModel = await this.getDocumentModelRef(uri);
214
- if (!monacoModel) {
215
- return;
216
- }
217
-
218
- const getContent = monacoModel.instance.getMonacoModel().getLineContent(line);
219
- node.fireDescriptionChange(getContent.trim());
220
- }
221
- }
170
+ this.nodes = this.extractNodes([
171
+ ...this.breakpoints.getExceptionBreakpoints(),
172
+ ...this.breakpoints.getBreakpoints(),
173
+ ]);
222
174
  }
223
175
 
224
176
  removeAllBreakpoints() {
@@ -1,36 +1,14 @@
1
1
  import cls from 'classnames';
2
2
  import { observer } from 'mobx-react-lite';
3
- import React, { useCallback, useEffect, useMemo, useState } from 'react';
3
+ import React from 'react';
4
4
 
5
- import {
6
- BasicRecycleTree,
7
- CheckBox,
8
- IBasicTreeData,
9
- ICompositeTreeNode,
10
- ITreeNodeOrCompositeTreeNode,
11
- } from '@opensumi/ide-components';
12
- import { Badge } from '@opensumi/ide-components';
13
- import {
14
- useInjectable,
15
- CommandService,
16
- EDITOR_COMMANDS,
17
- URI,
18
- getIcon,
19
- Disposable,
20
- ViewState,
21
- Event,
22
- } from '@opensumi/ide-core-browser';
5
+ import { CheckBox } from '@opensumi/ide-components';
6
+ import { Badge, RecycleList } from '@opensumi/ide-components';
7
+ import { useInjectable, ViewState, CommandService, EDITOR_COMMANDS, URI, getIcon } from '@opensumi/ide-core-browser';
23
8
  import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
24
9
 
25
10
  import { IDebugBreakpoint, IDebugSessionManager, ISourceBreakpoint } from '../../../common';
26
- import {
27
- DebugExceptionBreakpoint,
28
- isDebugBreakpoint,
29
- isRuntimeBreakpoint,
30
- getStatus,
31
- isDebugExceptionBreakpoint,
32
- EXCEPTION_BREAKPOINT_URI,
33
- } from '../../breakpoint';
11
+ import { DebugExceptionBreakpoint, isDebugBreakpoint, isRuntimeBreakpoint, getStatus } from '../../breakpoint';
34
12
  import { DebugSessionManager } from '../../debug-session-manager';
35
13
 
36
14
  import styles from './debug-breakpoints.module.less';
@@ -40,94 +18,29 @@ export interface BreakpointItem {
40
18
  name: string;
41
19
  id: string;
42
20
  description: string;
43
- onDescriptionChange: Event<string>;
44
21
  breakpoint: IDebugBreakpoint | DebugExceptionBreakpoint;
45
22
  }
46
23
 
47
24
  export const DebugBreakpointView = observer(({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
48
- const debugBreakpointsService: DebugBreakpointsService = useInjectable(DebugBreakpointsService);
49
- const { enable, toggleBreakpointEnable } = debugBreakpointsService;
50
- const [treeData, setTreeData] = useState<IBasicTreeData[]>([]);
51
-
52
- useEffect(() => {
53
- const dispose = new Disposable();
54
-
55
- dispose.addDispose(
56
- debugBreakpointsService.onDidChangeBreakpointsTreeNode((nodes) => {
57
- const { roots } = debugBreakpointsService;
58
- const breakpointTreeData: IBasicTreeData[] = [];
59
-
60
- Array.from(nodes.entries()).forEach(([uri, items]) => {
61
- const isException = EXCEPTION_BREAKPOINT_URI.toString() === uri;
62
-
63
- if (isException) {
64
- items.forEach((item) => {
65
- breakpointTreeData.push({
66
- label: '',
67
- expandable: false,
68
- children: [],
69
- description: (
70
- <BreakpointItem
71
- toggle={() => toggleBreakpointEnable(item.breakpoint)}
72
- breakpointEnabled={enable}
73
- data={item.rawData}
74
- isDebugMode={debugBreakpointsService.inDebugMode}
75
- ></BreakpointItem>
76
- ),
77
- });
78
- });
79
- } else {
80
- const toURI = URI.parse(uri);
81
- const parent = roots.filter((root) => root.isEqualOrParent(toURI))[0];
82
-
83
- breakpointTreeData.push({
84
- label: parent ? parent.relative(toURI)!.toString() : URI.parse(uri).displayName,
85
- expandable: true,
86
- iconClassName: getIcon('file-text'),
87
- expanded: true,
88
- children: items.map((item) => ({
89
- ...item,
90
- label: '',
91
- expandable: false,
92
- description: (
93
- <BreakpointItem
94
- toggle={() => toggleBreakpointEnable(item.breakpoint)}
95
- breakpointEnabled={enable}
96
- data={item.rawData}
97
- isDebugMode={debugBreakpointsService.inDebugMode}
98
- ></BreakpointItem>
99
- ),
100
- })),
101
- });
102
- }
103
- });
104
-
105
- setTreeData(breakpointTreeData);
106
- }),
107
- );
108
-
109
- return () => {
110
- dispose.dispose();
111
- };
112
- }, []);
25
+ const { nodes, enable, inDebugMode, toggleBreakpointEnable }: DebugBreakpointsService =
26
+ useInjectable(DebugBreakpointsService);
27
+ const template = ({ data }: { data: BreakpointItem }) => (
28
+ <BreakpointItem
29
+ toggle={() => toggleBreakpointEnable(data.breakpoint)}
30
+ breakpointEnabled={enable}
31
+ data={data}
32
+ isDebugMode={inDebugMode}
33
+ ></BreakpointItem>
34
+ );
113
35
 
114
- useEffect(() => {
115
- if (treeData.length > 0) {
116
- requestAnimationFrame(() => {
117
- debugBreakpointsService.refreshBreakpointsInfo();
118
- });
119
- }
120
- }, [treeData]);
121
-
122
- const getItemClassName = useCallback((item: ICompositeTreeNode) => {
123
- if (!item.children) {
124
- return styles.debug_breakpoints_item_tree_node;
125
- }
126
- }, []);
36
+ const containerStyle = {
37
+ height: viewState.height,
38
+ width: viewState.width,
39
+ } as React.CSSProperties;
127
40
 
128
41
  return (
129
42
  <div className={cls(styles.debug_breakpoints, !enable && styles.debug_breakpoints_disabled)}>
130
- <BasicRecycleTree treeData={treeData} height={viewState.height} getItemClassName={getItemClassName} />
43
+ <RecycleList data={nodes} itemHeight={22} template={template} style={containerStyle} />
131
44
  </div>
132
45
  );
133
46
  });
@@ -149,7 +62,6 @@ export const BreakpointItem = ({
149
62
  const debugBreakpointsService = useInjectable<DebugBreakpointsService>(DebugBreakpointsService);
150
63
  const [enabled, setEnabled] = React.useState<boolean>(defaultValue);
151
64
  const [status, setStatus] = React.useState<DebugProtocol.Breakpoint | false | undefined>(undefined);
152
- const [description, setDescription] = React.useState<string>(data.description);
153
65
 
154
66
  const handleBreakpointChange = () => {
155
67
  toggle();
@@ -186,8 +98,6 @@ export const BreakpointItem = ({
186
98
  };
187
99
 
188
100
  React.useEffect(() => {
189
- const disposable = new Disposable();
190
-
191
101
  const exec = () => {
192
102
  if (isDebugBreakpoint(data.breakpoint) && isRuntimeBreakpoint(data.breakpoint)) {
193
103
  const status = getStatus(data.breakpoint);
@@ -195,11 +105,9 @@ export const BreakpointItem = ({
195
105
  }
196
106
  };
197
107
 
198
- disposable.addDispose(manager.onDidChangeActiveDebugSession(() => exec()));
108
+ const disposable = manager.onDidChangeActiveDebugSession(() => exec());
199
109
  exec();
200
110
 
201
- disposable.addDispose(data.onDescriptionChange(setDescription));
202
-
203
111
  return () => {
204
112
  setStatus(undefined);
205
113
  disposable.dispose();
@@ -234,15 +142,13 @@ export const BreakpointItem = ({
234
142
  debugBreakpointsService.delBreakpoint(data.breakpoint as IDebugBreakpoint);
235
143
  };
236
144
 
237
- const isExceptionBreakpoint = useMemo(() => isDebugExceptionBreakpoint(data.breakpoint), [data]);
238
-
239
145
  return (
240
146
  <div className={cls(styles.debug_breakpoints_item)}>
241
- {!isExceptionBreakpoint && <div className={cls(converBreakpointClsState(), styles.debug_breakpoints_icon)}></div>}
147
+ <div className={cls(converBreakpointClsState(), styles.debug_breakpoints_icon)}></div>
242
148
  <CheckBox id={data.id} onChange={handleBreakpointChange} checked={enabled}></CheckBox>
243
149
  <div className={styles.debug_breakpoints_wrapper} onClick={handleBreakpointClick}>
244
- {data.name && <span className={styles.debug_breakpoints_name}>{data.name}</span>}
245
- <span className={styles.debug_breakpoints_description}>{description}</span>
150
+ <span className={styles.debug_breakpoints_name}>{data.name}</span>
151
+ <span className={styles.debug_breakpoints_description}>{data.description}</span>
246
152
  </div>
247
153
  {isDebugBreakpoint(data.breakpoint) ? (
248
154
  <>