Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

Commit feade09

Browse files
darkwingjasonLaster
darkwing
authored and
jasonLaster
committed
[Breakpoints] Extract BreakpointItem component (#5852)
1 parent 0c5eeda commit feade09

File tree

3 files changed

+121
-78
lines changed

3 files changed

+121
-78
lines changed

‎src/components/SecondaryPanes/BreakpointItem.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this
3+
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
4+
5+
// @flow
6+
import React, { Component } from "react";
7+
import classnames from "classnames";
8+
9+
import CloseButton from "../shared/Button/Close";
10+
11+
import { features } from "../../utils/prefs";
12+
import type { LocalBreakpoint } from "./Breakpoints";
13+
14+
type Props = {
15+
breakpoint: LocalBreakpoint,
16+
onClick: Function,
17+
onContextMenu: Function,
18+
onChange: Function,
19+
onCloseClick: Function
20+
};
21+
22+
function getBreakpointLocation(source, line, column) {
23+
const isWasm = source && source.isWasm;
24+
const columnVal = features.columnBreakpoints && column ? `:${column}` : "";
25+
const bpLocation = isWasm
26+
? `0x${line.toString(16).toUpperCase()}`
27+
: `${line}${columnVal}`;
28+
29+
return bpLocation;
30+
}
31+
32+
class BreakpointItem extends Component<Props> {
33+
render() {
34+
const {
35+
breakpoint,
36+
onClick,
37+
onChange,
38+
onContextMenu,
39+
onCloseClick
40+
} = this.props;
41+
42+
const locationId = breakpoint.locationId;
43+
const line = breakpoint.location.line;
44+
const column = breakpoint.location.column;
45+
const isCurrentlyPaused = breakpoint.isCurrentlyPaused;
46+
const isDisabled = breakpoint.disabled;
47+
const isConditional = !!breakpoint.condition;
48+
49+
return (
50+
<div
51+
className={classnames({
52+
breakpoint,
53+
paused: isCurrentlyPaused,
54+
disabled: isDisabled,
55+
"is-conditional": isConditional
56+
})}
57+
key={locationId}
58+
onClick={onClick}
59+
onContextMenu={onContextMenu}
60+
>
61+
<input
62+
type="checkbox"
63+
className="breakpoint-checkbox"
64+
checked={!isDisabled}
65+
onChange={onChange}
66+
onClick={ev => ev.stopPropagation()}
67+
/>
68+
<label className="breakpoint-label" title={breakpoint.text}>
69+
{breakpoint.text}
70+
</label>
71+
<div className="breakpoint-line-close">
72+
<div className="breakpoint-line">
73+
{getBreakpointLocation(breakpoint.source, line, column)}
74+
</div>
75+
<CloseButton
76+
handleClick={onCloseClick}
77+
tooltip={L10N.getStr("breakpoints.removeBreakpointTooltip")}
78+
/>
79+
</div>
80+
</div>
81+
);
82+
}
83+
}
84+
85+
export default BreakpointItem;

‎src/components/SecondaryPanes/Breakpoints.js‎

Lines changed: 35 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
44

55
// @flow
6+
67
import React, { Component } from "react";
78
import { bindActionCreators } from "redux";
89
import { connect } from "react-redux";
910
import * as I from "immutable";
10-
import classnames from "classnames";
1111
import { createSelector } from "reselect";
1212
import { groupBy, sortBy } from "lodash";
1313

14+
import BreakpointItem from "./BreakpointItem";
15+
1416
import actions from "../../actions";
15-
import CloseButton from "../shared/Button/Close";
16-
import { features } from "../../utils/prefs";
1717
import { getFilename } from "../../utils/source";
1818
import {
1919
getSources,
@@ -26,14 +26,15 @@ import { isInterrupted } from "../../utils/pause";
2626
import { makeLocationId } from "../../utils/breakpoint";
2727
import showContextMenu from "./BreakpointsContextMenu";
2828

29-
import type { Breakpoint, Location } from "../../types";
29+
import type { Breakpoint, Location, Source, Frame, Why } from "../../types";
3030

3131
import "./Breakpoints.css";
3232

33-
type LocalBreakpoint = Breakpoint & {
34-
location: any,
33+
export type LocalBreakpoint = Breakpoint & {
34+
location: Location,
3535
isCurrentlyPaused: boolean,
36-
locationId: string
36+
locationId: string,
37+
source: Source
3738
};
3839

3940
type BreakpointsMap = I.Map<string, LocalBreakpoint>;
@@ -53,7 +54,11 @@ type Props = {
5354
openConditionalPanel: number => void
5455
};
5556

56-
function isCurrentlyPausedAtBreakpoint(frame, why, breakpoint) {
57+
function isCurrentlyPausedAtBreakpoint(
58+
frame: Frame,
59+
why: Why,
60+
breakpoint: LocalBreakpoint
61+
) {
5762
if (!frame || !isInterrupted(why)) {
5863
return false;
5964
}
@@ -63,18 +68,8 @@ function isCurrentlyPausedAtBreakpoint(frame, why, breakpoint) {
6368
return bpId === pausedId;
6469
}
6570

66-
function getBreakpointFilename(source) {
67-
return source && source.toJS ? getFilename(source.toJS()) : "";
68-
}
69-
70-
function getBreakpointLocation(source, line, column) {
71-
const isWasm = source && source.isWasm;
72-
const columnVal = features.columnBreakpoints && column ? `:${column}` : "";
73-
const bpLocation = isWasm
74-
? `0x${line.toString(16).toUpperCase()}`
75-
: `${line}${columnVal}`;
76-
77-
return bpLocation;
71+
function getBreakpointFilename(source: Source) {
72+
return source ? getFilename(source) : "";
7873
}
7974

8075
class Breakpoints extends Component<Props> {
@@ -104,53 +99,18 @@ class Breakpoints extends Component<Props> {
10499
this.props.removeBreakpoint(breakpoint.location);
105100
}
106101

107-
renderBreakpoint(breakpoint) {
108-
const locationId = breakpoint.locationId;
109-
const line = breakpoint.location.line;
110-
const column = breakpoint.location.column;
111-
const isCurrentlyPaused = breakpoint.isCurrentlyPaused;
112-
const isDisabled = breakpoint.disabled;
113-
const isConditional = !!breakpoint.condition;
114-
const isHidden = breakpoint.hidden;
115-
116-
if (isHidden) {
117-
return;
118-
}
119-
102+
renderBreakpoint(breakpoint, key) {
120103
return (
121-
<div
122-
className={classnames({
123-
breakpoint,
124-
paused: isCurrentlyPaused,
125-
disabled: isDisabled,
126-
"is-conditional": isConditional
127-
})}
128-
key={locationId}
104+
<BreakpointItem
105+
key={key}
106+
breakpoint={breakpoint}
129107
onClick={() => this.selectBreakpoint(breakpoint)}
130108
onContextMenu={e =>
131109
showContextMenu({ ...this.props, breakpoint, contextMenuEvent: e })
132110
}
133-
>
134-
<input
135-
type="checkbox"
136-
className="breakpoint-checkbox"
137-
checked={!isDisabled}
138-
onChange={() => this.handleCheckbox(breakpoint)}
139-
onClick={ev => ev.stopPropagation()}
140-
/>
141-
<label className="breakpoint-label" title={breakpoint.text}>
142-
{breakpoint.text}
143-
</label>
144-
<div className="breakpoint-line-close">
145-
<div className="breakpoint-line">
146-
{getBreakpointLocation(breakpoint.location.source, line, column)}
147-
</div>
148-
<CloseButton
149-
handleClick={ev => this.removeBreakpoint(ev, breakpoint)}
150-
tooltip={L10N.getStr("breakpoints.removeBreakpointTooltip")}
151-
/>
152-
</div>
153-
</div>
111+
onChange={() => this.handleCheckbox(breakpoint)}
112+
onCloseClick={ev => this.removeBreakpoint(ev, breakpoint)}
113+
/>
154114
);
155115
}
156116

@@ -163,20 +123,20 @@ class Breakpoints extends Component<Props> {
163123

164124
const groupedBreakpoints = groupBy(
165125
sortBy([...breakpoints.valueSeq()], bp => bp.location.line),
166-
bp => getBreakpointFilename(bp.location.source)
126+
bp => getBreakpointFilename(bp.source)
167127
);
168128

169129
return [
170-
...Object.keys(groupedBreakpoints)
171-
.sort()
172-
.map(filename => {
173-
return [
174-
<div className="breakpoint-heading" title={filename} key={filename}>
175-
{filename}
176-
</div>,
177-
...groupedBreakpoints[filename].map(bp => this.renderBreakpoint(bp))
178-
];
179-
})
130+
...Object.keys(groupedBreakpoints).map(filename => {
131+
return [
132+
<div className="breakpoint-heading" title={filename} key={filename}>
133+
{filename}
134+
</div>,
135+
...groupedBreakpoints[filename]
136+
.filter(bp => !bp.hidden)
137+
.map((bp, i) => this.renderBreakpoint(bp, `${filename}-${i}`))
138+
];
139+
})
180140
];
181141
}
182142

@@ -195,9 +155,7 @@ function updateLocation(sources, frame, why, bp): LocalBreakpoint {
195155
const source = getSourceInSources(sources, bp.location.sourceId);
196156
const isCurrentlyPaused = isCurrentlyPausedAtBreakpoint(frame, why, bp);
197157
const locationId = makeLocationId(bp.location);
198-
199-
const location = { ...bp.location, source };
200-
const localBP = { ...bp, location, locationId, isCurrentlyPaused };
158+
const localBP = { ...bp, locationId, isCurrentlyPaused, source };
201159

202160
return localBP;
203161
}
@@ -210,7 +168,7 @@ const _getBreakpoints = createSelector(
210168
(breakpoints, sources, frame, why) =>
211169
breakpoints
212170
.map(bp => updateLocation(sources, frame, why, bp))
213-
.filter(bp => bp.location.source && !bp.location.source.isBlackBoxed)
171+
.filter(bp => bp.source && !bp.source.isBlackBoxed)
214172
);
215173

216174
export default connect(

‎src/workers/parser/getSymbols.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ function extractSymbol(path: SimplePath, symbols) {
210210
}
211211

212212
if (t.isStringLiteral(path) && t.isProperty(path.parentPath)) {
213-
let { start, end } = path.node.loc;
213+
const { start, end } = path.node.loc;
214214
return symbols.identifiers.push({
215215
name: path.node.value,
216216
expression: getObjectExpressionValue(path.parent),

0 commit comments

Comments
 (0)