Store the breakpoint text (#5823)

* Preserve breakpoint text from initial creation

* tweaks

Author: darkwing

src/actions/breakpoints/addBreakpoint.js

@@ -11,6 +11,7 @@ import {
 } from "../../utils/breakpoint";
 import { getSource, getSymbols } from "../../selectors";
 import { getGeneratedLocation } from "../../utils/source-maps";
+import { getTextAtPosition } from "../../utils/source";
 
 export default async function addBreakpoint(
   getState,
@@ -19,8 +20,8 @@ export default async function addBreakpoint(
   breakpoint
 ) {
   const state = getState();
-
   const source = getSource(state, breakpoint.location.sourceId);
+
   const location = { ...breakpoint.location, sourceUrl: source.url };
   const generatedLocation = await getGeneratedLocation(
     state,
@@ -29,6 +30,8 @@ export default async function addBreakpoint(
     sourceMaps
   );
 
+  const generatedSource = getSource(state, generatedLocation.sourceId);
+
   assertLocation(location);
   assertLocation(generatedLocation);
 
@@ -52,6 +55,9 @@ export default async function addBreakpoint(
   const symbols = getSymbols(getState(), source);
   const astLocation = await getASTLocation(source, symbols, newLocation);
 
+  const originalText = getTextAtPosition(source, location);
+  const text = getTextAtPosition(generatedSource, actualLocation);
+
   const newBreakpoint = {
     id,
     disabled: false,
@@ -61,7 +67,9 @@ export default async function addBreakpoint(
     location: newLocation,
     astLocation,
     hitCount,
-    generatedLocation: newGeneratedLocation
+    generatedLocation: newGeneratedLocation,
+    text,
+    originalText
   };
 
   assertBreakpoint(newBreakpoint);

src/actions/breakpoints/syncBreakpoint.js

@@ -12,6 +12,7 @@ import {
 } from "../../utils/breakpoint";
 
 import { getGeneratedLocation } from "../../utils/source-maps";
+import { getTextAtPosition } from "../../utils/source";
 import { originalToGeneratedId } from "devtools-source-map";
 import { getSource } from "../../selectors";
 import type {
@@ -50,9 +51,17 @@ function createSyncData(
   pendingBreakpoint: PendingBreakpoint,
   location: Location,
   generatedLocation: Location,
-  previousLocation: Location
+  previousLocation: Location,
+  text: string,
+  originalText: string
 ): BreakpointSyncData {
-  const overrides = { ...pendingBreakpoint, generatedLocation, id };
+  const overrides = {
+    ...pendingBreakpoint,
+    generatedLocation,
+    id,
+    text,
+    originalText
+  };
   const breakpoint = createBreakpoint(location, overrides);
 
   assertBreakpoint(breakpoint);
@@ -71,10 +80,13 @@ export async function syncClientBreakpoint(
   assertPendingBreakpoint(pendingBreakpoint);
 
   const source = getSource(getState(), sourceId);
+
   const generatedSourceId = sourceMaps.isOriginalId(sourceId)
     ? originalToGeneratedId(sourceId)
     : sourceId;
 
+  const generatedSource = getSource(getState(), generatedSourceId);
+
   const { location, astLocation } = pendingBreakpoint;
   const previousLocation = { ...location, sourceId };
 
@@ -110,12 +122,17 @@ export async function syncClientBreakpoint(
   // send update only to redux
   if (pendingBreakpoint.disabled || (existingClient && isSameLocation)) {
     const id = pendingBreakpoint.disabled ? "" : existingClient.id;
+    const originalText = getTextAtPosition(source, previousLocation);
+    const text = getTextAtPosition(generatedSource, generatedLocation);
+
     return createSyncData(
       id,
       pendingBreakpoint,
       scopedLocation,
       scopedGeneratedLocation,
-      previousLocation
+      previousLocation,
+      text,
+      originalText
     );
   }
 
@@ -145,11 +162,16 @@ export async function syncClientBreakpoint(
     newGeneratedLocation
   );
 
+  const originalText = getTextAtPosition(source, newLocation);
+  const text = getTextAtPosition(generatedSource, newGeneratedLocation);
+
   return createSyncData(
     id,
     pendingBreakpoint,
     newLocation,
     newGeneratedLocation,
-    previousLocation
+    previousLocation,
+    text,
+    originalText
   );
 }

src/actions/breakpoints/tests/__snapshots__/syncing.spec.js.snap

@@ -26,6 +26,7 @@ Object {
       "sourceId": "magic.js",
       "sourceUrl": "http://localhost:8000/examples/magic.js",
     },
+    "originalText": "",
     "text": "",
   },
   "previousLocation": Object {
@@ -63,6 +64,7 @@ Object {
       "sourceId": "magic.js",
       "sourceUrl": "http://localhost:8000/examples/magic.js",
     },
+    "originalText": "",
     "text": "",
   },
   "previousLocation": Object {
@@ -125,6 +127,7 @@ Object {
       "sourceId": "magic.js",
       "sourceUrl": "http://localhost:8000/examples/magic.js",
     },
+    "originalText": "",
     "text": "",
   },
   "previousLocation": Object {
@@ -162,6 +165,7 @@ Object {
       "sourceId": "magic.js",
       "sourceUrl": "http://localhost:8000/magic.js",
     },
+    "originalText": "",
     "text": "",
   },
   "previousLocation": Object {

src/actions/tests/__snapshots__/breakpoints.spec.js.snap

@@ -26,6 +26,8 @@ Object {
     "sourceId": "a",
     "sourceUrl": "http://localhost:8000/examples/a",
   },
+  "originalText": "",
+  "text": "",
 }
 `;
 
@@ -56,5 +58,7 @@ Object {
     "sourceId": "a.js/originalSource-d6d70368d5c252598541e693a7ad6c27",
     "sourceUrl": "http://localhost:8000/examples/a.js:formatted",
   },
+  "originalText": "function a() {",
+  "text": "function a() {",
 }
 `;

src/components/SecondaryPanes/Breakpoints.css

@@ -83,23 +83,6 @@ html .breakpoints-list .breakpoint.paused {
   order: 3;
 }
 
-:root.theme-light .breakpoint-snippet,
-:root.theme-firebug .breakpoint-snippet {
-  color: var(--theme-comment);
-}
-
-:root.theme-dark .breakpoint-snippet {
-  color: var(--theme-body-color);
-  opacity: 0.6;
-}
-
-.breakpoint-snippet {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-inline-start: 18px;
-  padding-inline-end: 18px;
-}
-
 .breakpoint .close-btn {
   position: absolute;
   offset-inline-end: 13px;

src/components/SecondaryPanes/Breakpoints.js

@@ -115,7 +115,6 @@ class Breakpoints extends Component<Props> {
   }
 
   renderBreakpoint(breakpoint) {
-    const snippet = breakpoint.text || "";
     const locationId = breakpoint.locationId;
     const line = breakpoint.location.line;
     const column = breakpoint.location.column;
@@ -152,7 +151,6 @@ class Breakpoints extends Component<Props> {
         <label className="breakpoint-label" title={breakpoint.text}>
           {renderSourceLocation(breakpoint.location.source, line, column)}
         </label>
-        <div className="breakpoint-snippet">{snippet}</div>
         <CloseButton
           handleClick={ev => this.removeBreakpoint(ev, breakpoint)}
           tooltip={L10N.getStr("breakpoints.removeBreakpointTooltip")}

src/utils/breakpoint/index.js

@@ -117,7 +117,9 @@ export function createBreakpoint(
     hidden,
     generatedLocation,
     astLocation,
-    id
+    id,
+    text,
+    originalText
   } = overrides;
 
   const defaultASTLocation = { name: undefined, offset: location };
@@ -127,10 +129,11 @@ export function createBreakpoint(
     disabled: disabled || false,
     hidden: hidden || false,
     loading: false,
-    text: "",
     astLocation: astLocation || defaultASTLocation,
     generatedLocation: generatedLocation || location,
-    location
+    location,
+    text,
+    originalText
   };
 
   return properties;

src/utils/source.js

@@ -16,7 +16,7 @@ import { basename } from "./path";
 import { parse as parseURL } from "url";
 export { isMinified } from "./isMinified";
 
-import type { Source, SourceRecord } from "../types";
+import type { Source, SourceRecord, Location } from "../types";
 import type { SymbolDeclarations } from "../workers/parser";
 
 type transformUrlCallback = string => string;
@@ -313,3 +313,19 @@ export function isLoaded(source: SourceRecord) {
 export function isLoading(source: SourceRecord) {
   return source.get("loadedState") === "loading";
 }
+
+export function getTextAtPosition(source: Source, location: Location) {
+  if (!source || !source.text) {
+    return "";
+  }
+
+  const line = location.line;
+  const column = location.column || 0;
+
+  const lineText = source.text.split("\n")[line - 1];
+  if (!lineText) {
+    return "";
+  }
+
+  return lineText.slice(column, column + 100).trim();
+}