Bug 1520957 - [release 119] [Breakpoints] include breakpoint in column breakpoint (#7718). r=dwalsh (1eab7508) · Commits · The Tor Project / Applications / Tor Browser

devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js

+15 −18

Original line number	Diff line number	Diff line
		@@ -6,6 +6,7 @@
		import React, { PureComponent } from "react";
		import ReactDOM from "react-dom";
		import classnames from "classnames";
		import actions from "../../actions";
		import { getDocument } from "../../utils/editor";
		import Svg from "../shared/Svg";

		@@ -20,23 +21,23 @@ type Props = {
		editor: Object,
		source: Object,
		enabled: boolean,
		toggleBreakpoint: (number, number) => void,
		toggleBreakpoint: typeof actions.toggleBreakpoint,
		columnBreakpoint: ColumnBreakpointType
		};

		const breakpointImg = document.createElement("div");
		ReactDOM.render(<Svg name={"column-marker"} />, breakpointImg);
		function makeBookmark(isActive, condition, { onClick }) {
		function makeBookmark({ breakpoint }, { onClick }) {
		const bp = breakpointImg.cloneNode(true);
		const className = isActive ? "active" : "disabled";

		bp.className = classnames(
		"column-breakpoint",
		{
		"has-condition": condition
		},
		className
		);
		const isActive = breakpoint && !breakpoint.disabled;
		const condition = breakpoint && breakpoint.condition;

		bp.className = classnames("column-breakpoint", {
		"has-condition": condition,
		active: isActive,
		disabled: !isActive
		});

		if (condition) {
		bp.setAttribute("title", condition);
		}
		@@ -59,13 +60,9 @@ export default class ColumnBreakpoint extends PureComponent<Props> {
		}

		const { line, column } = columnBreakpoint.location;
		const widget = makeBookmark(
		columnBreakpoint.enabled,
		columnBreakpoint.condition,
		{
		const widget = makeBookmark(columnBreakpoint, {
		onClick: this.toggleBreakpoint
		}
		);
		});

		this.bookmark = doc.setBookmark({ line: line - 1, ch: column }, { widget });
		};

devtools/client/debugger/new/src/selectors/test/snapshots/visibleColumnBreakpoints.spec.js.snap

+32 −16

Original line number	Diff line number	Diff line
		@@ -3,16 +3,20 @@
		exports[`visible column breakpoints duplicate generated locations 1`] = `
		Array [
		Object {
		"condition": undefined,
		"enabled": true,
		"breakpoint": Object {
		"location": Object {
		"column": 1,
		"line": 1,
		"sourceId": "foo",
		},
		},
		"location": Object {
		"column": 1,
		"line": 1,
		},
		},
		Object {
		"condition": null,
		"enabled": false,
		"breakpoint": undefined,
		"location": Object {
		"column": 3,
		"line": 1,
		@@ -24,16 +28,20 @@ Array [
		exports[`visible column breakpoints ignores single breakpoints 1`] = `
		Array [
		Object {
		"condition": undefined,
		"enabled": true,
		"breakpoint": Object {
		"location": Object {
		"column": 1,
		"line": 1,
		"sourceId": "foo",
		},
		},
		"location": Object {
		"column": 1,
		"line": 1,
		},
		},
		Object {
		"condition": null,
		"enabled": false,
		"breakpoint": undefined,
		"location": Object {
		"column": 3,
		"line": 1,
		@@ -45,16 +53,20 @@ Array [
		exports[`visible column breakpoints only shows visible breakpoints 1`] = `
		Array [
		Object {
		"condition": undefined,
		"enabled": true,
		"breakpoint": Object {
		"location": Object {
		"column": 1,
		"line": 1,
		"sourceId": "foo",
		},
		},
		"location": Object {
		"column": 1,
		"line": 1,
		},
		},
		Object {
		"condition": null,
		"enabled": false,
		"breakpoint": undefined,
		"location": Object {
		"column": 3,
		"line": 1,
		@@ -66,16 +78,20 @@ Array [
		exports[`visible column breakpoints simple 1`] = `
		Array [
		Object {
		"condition": undefined,
		"enabled": true,
		"breakpoint": Object {
		"location": Object {
		"column": 1,
		"line": 1,
		"sourceId": "foo",
		},
		},
		"location": Object {
		"column": 1,
		"line": 1,
		},
		},
		Object {
		"condition": null,
		"enabled": false,
		"breakpoint": undefined,
		"location": Object {
		"column": 5,
		"line": 1,

devtools/client/debugger/new/src/selectors/visibleColumnBreakpoints.js

+39 −24

Original line number	Diff line number	Diff line
		@@ -2,33 +2,46 @@
		* License, v. 2.0. If a copy of the MPL was not distributed with this
		* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

		import { groupBy, get, sortedUniqBy } from "lodash";
		// @flow

		import { groupBy, sortedUniqBy } from "lodash";
		import { createSelector } from "reselect";

		import { getViewport } from "../selectors";
		import { getVisibleBreakpoints } from "./visibleBreakpoints";
		import { getVisiblePausePoints } from "./visiblePausePoints";
		import { makeLocationId } from "../utils/breakpoint";
		import type { Selector, PausePoint } from "../reducers/types";

		import type { SourceLocation } from "../types";
		import type {
		SourceLocation,
		PartialPosition,
		Breakpoint,
		Range
		} from "../types";

		export type ColumnBreakpoint = {\|
		+location: SourceLocation,
		+enabled: boolean,
		+condition: ?string
		+breakpoint: ?Breakpoint
		\|};

		function contains(location, range) {
		export type ColumnBreakpoints = Array<ColumnBreakpoint>;

		function contains(location: PartialPosition, range: Range) {
		return (
		location.line >= range.start.line &&
		location.line <= range.end.line &&
		location.column >= range.start.column &&
		location.column <= range.end.column
		(!location.column \|\|
		(location.column >= range.start.column &&
		location.column <= range.end.column))
		);
		}

		function groupBreakpoints(breakpoints) {
		const map = groupBy(breakpoints, ({ location }) => location.line);
		if (!breakpoints) {
		return {};
		}
		const map: any = groupBy(breakpoints, ({ location }) => location.line);
		for (const line in map) {
		map[line] = groupBy(map[line], ({ location }) => location.column);
		}
		@@ -38,7 +51,7 @@ function groupBreakpoints(breakpoints) {

		function findBreakpoint(location, breakpointMap) {
		const { line, column } = location;
		const breakpoints = get(breakpointMap, [line, column]);
		const breakpoints = breakpointMap[line] && breakpointMap[line][column];

		if (breakpoints) {
		return breakpoints[0];
		@@ -58,19 +71,25 @@ function getLineCount(columnBreakpoints) {
		return lineCount;
		}

		export function formatColumnBreakpoints(columnBreakpoints) {
		export function formatColumnBreakpoints(columnBreakpoints: ColumnBreakpoints) {
		console.log(
		"Column Breakpoints\n\n",
		columnBreakpoints
		.map(
		({ location, enabled }) =>
		`(${location.line}, ${location.column}) ${enabled}`
		({ location, breakpoint }) =>
		`(${location.line}, ${location.column \|\| ""}) ${
		breakpoint && breakpoint.disabled ? "disabled" : ""
		}`
		)
		.join("\n")
		);
		}

		export function getColumnBreakpoints(pausePoints, breakpoints, viewport) {
		export function getColumnBreakpoints(
		pausePoints: ?(PausePoint[]),
		breakpoints: ?(Breakpoint[]),
		viewport: Range
		) {
		if (!pausePoints) {
		return [];
		}
		@@ -106,19 +125,15 @@ export function getColumnBreakpoints(pausePoints, breakpoints, viewport) {
		({ location: { line } }) => lineCount[line] > 1
		);

		return columnBreakpoints.map(({ location }) => {
		// Find the breakpoint so if we know it's enabled and has condition
		const foundBreakpoint = findBreakpoint(location, breakpointMap);

		return {
		return (columnBreakpoints: any).map(({ location }) => ({
		location,
		enabled: !!foundBreakpoint && !foundBreakpoint.disabled,
		condition: foundBreakpoint ? foundBreakpoint.condition : null
		};
		});
		breakpoint: findBreakpoint(location, breakpointMap)
		}));
		}

		export const visibleColumnBreakpoints = createSelector(
		export const visibleColumnBreakpoints: Selector<
		ColumnBreakpoints
		> = createSelector(
		getVisiblePausePoints,
		getVisibleBreakpoints,
		getViewport,