[Breakpoints] Use the union of all mapped and unmapped regions when fetching original breakpoints. (firefox-devtools#8014)

Author: loganfsmyth

packages/devtools-source-map/src/index.js

@@ -77,6 +77,29 @@ export const getOriginalLocation = async (
   options: locationOptions = {}
 ): Promise<SourceLocation> => _getOriginalLocation(location, options);
 
+export const getGeneratedRangesForOriginal = async (
+  sourceId: SourceId,
+  url: string,
+  mergeUnmappedRegions?: boolean
+): Promise<
+  Array<{
+    start: {
+      line: number,
+      column: number
+    },
+    end: {
+      line: number,
+      column: number
+    }
+  }>
+> =>
+  dispatcher.invoke(
+    "getGeneratedRangesForOriginal",
+    sourceId,
+    url,
+    mergeUnmappedRegions
+  );
+
 export const getFileGeneratedRange = async (
   originalSource: Source
 ): Promise<?{ start: any, end: any }> =>

packages/devtools-source-map/src/source-map.js

@@ -326,6 +326,148 @@ async function getOriginalSourceText(
   };
 }
 
+/**
+ * Find the set of ranges on the generated file that map from the original
+ * file's locations.
+ *
+ * @param sourceId - The original ID of the file we are processing.
+ * @param url - The original URL of the file we are processing.
+ * @param mergeUnmappedRegions - If unmapped regions are encountered between
+ *   two mappings for the given original file, allow the two mappings to be
+ *   merged anyway. This is useful if you are more interested in the general
+ *   contiguous ranges associated with a file, rather than the specifics of
+ *   the ranges provided by the sourcemap.
+ */
+const GENERATED_MAPPINGS = new WeakMap();
+async function getGeneratedRangesForOriginal(
+  sourceId: SourceId,
+  url: string,
+  mergeUnmappedRegions: boolean = false
+): Promise<
+  Array<{
+    start: {
+      line: number,
+      column: number
+    },
+    end: {
+      line: number,
+      column: number
+    }
+  }>
+> {
+  assert(isOriginalId(sourceId), "Source is not an original source");
+
+  const map = await getSourceMap(originalToGeneratedId(sourceId));
+  if (!map) {
+    return [];
+  }
+
+  if (!COMPUTED_SPANS.has(map)) {
+    COMPUTED_SPANS.add(map);
+    map.computeColumnSpans();
+  }
+
+  const cachedGeneratedMappingsForOriginal = GENERATED_MAPPINGS.get(map);
+  if (cachedGeneratedMappingsForOriginal) {
+    return cachedGeneratedMappingsForOriginal;
+  }
+
+  // Gather groups of mappings on the generated file, with new groups created
+  // if we cross a mapping for a different file.
+  let currentGroup = [];
+  const originalGroups = [currentGroup];
+  map.eachMapping(
+    mapping => {
+      if (mapping.source === url) {
+        currentGroup.push({
+          start: {
+            line: mapping.generatedLine,
+            column: mapping.generatedColumn
+          },
+          end: {
+            line: mapping.generatedLine,
+            // The lastGeneratedColumn value is an inclusive value so we add
+            // one to it to get the exclusive end position.
+            column: mapping.lastGeneratedColumn + 1
+          }
+        });
+      } else if (
+        typeof mapping.source === "string" &&
+        currentGroup.length > 0
+      ) {
+        // If there is a URL, but it is for a _different_ file, we create a
+        // new group of mappings so that we can tell
+        currentGroup = [];
+        originalGroups.push(currentGroup);
+      }
+    },
+    null,
+    SourceMapConsumer.GENERATED_ORDER
+  );
+
+  const generatedMappingsForOriginal = [];
+  if (mergeUnmappedRegions) {
+    // If we don't care about excluding unmapped regions, then we just need to
+    // create a range that is the fully encompasses each group, ignoring the
+    // empty space between each individual range.
+    for (const group of originalGroups) {
+      if (group.length > 0) {
+        generatedMappingsForOriginal.push({
+          start: group[0].start,
+          end: group[group.length - 1].end
+        });
+      }
+    }
+  } else {
+    let lastEntry;
+    for (const group of originalGroups) {
+      lastEntry = null;
+      for (const { start, end } of group) {
+        const lastEnd = lastEntry
+          ? wrappedMappingPosition(lastEntry.end)
+          : null;
+
+        // If this entry comes immediately after the previous one, extend the
+        // range of the previous entry instead of adding a new one.
+        if (
+          lastEntry &&
+          lastEnd &&
+          lastEnd.line === start.line &&
+          lastEnd.column === start.column
+        ) {
+          lastEntry.end = end;
+        } else {
+          const newEntry = { start, end };
+          generatedMappingsForOriginal.push(newEntry);
+          lastEntry = newEntry;
+        }
+      }
+    }
+  }
+
+  GENERATED_MAPPINGS.set(map, generatedMappingsForOriginal);
+  return generatedMappingsForOriginal;
+}
+
+function wrappedMappingPosition(pos: {
+  line: number,
+  column: number
+}): {
+  line: number,
+  column: number
+} {
+  if (pos.column !== Infinity) {
+    return pos;
+  }
+
+  // If the end of the entry consumes the whole line, treat it as wrapping to
+  // the next line.
+  return {
+    line: pos.line + 1,
+    column: 0
+  };
+}
+
 async function getFileGeneratedRange(
   originalSource: Source
 ): Promise<?{ start: any, end: any }> {
@@ -394,6 +536,7 @@ module.exports = {
   getAllGeneratedLocations,
   getOriginalLocation,
   getOriginalSourceText,
+  getGeneratedRangesForOriginal,
   getFileGeneratedRange,
   applySourceMap,
   clearSourceMaps,

packages/devtools-source-map/src/tests/fixtures/intermingled-sources.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var decl = function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            console.log("2");
+
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, this);
+  }));
+
+  return function decl() {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
+
+console.log("1");
+
+console.log("3");

packages/devtools-source-map/src/tests/fixtures/intermingled-sources.js.map

@@ -9,6 +9,7 @@ const {
   getOriginalURLs,
   hasMappedSource,
   getOriginalLocation,
+  getGeneratedRangesForOriginal,
   clearSourceMaps
 } = require("../source-map");
 
@@ -51,6 +52,93 @@ describe("source maps", () => {
     });
   });
 
+  describe("getGeneratedRangesForOriginal", () => {
+    test("the overall generated ranges on the source", async () => {
+      const urls = await setupBundleFixture("intermingled-sources");
+
+      const ranges = await getGeneratedRangesForOriginal(
+        "intermingled-sources.js/originalSource-01",
+        urls[0]
+      );
+
+      expect(ranges).toEqual([
+        {
+          start: {
+            line: 4,
+            column: 69
+          },
+          end: {
+            line: 9,
+            column: Infinity
+          }
+        },
+        {
+          start: {
+            line: 11,
+            column: 0
+          },
+          end: {
+            line: 17,
+            column: 3
+          }
+        },
+        {
+          start: {
+            line: 19,
+            column: 18
+          },
+          end: {
+            line: 19,
+            column: 22
+          }
+        },
+        {
+          start: {
+            line: 26,
+            column: 0
+          },
+          end: {
+            line: 26,
+            column: Infinity
+          }
+        },
+        {
+          start: {
+            line: 28,
+            column: 0
+          },
+          end: {
+            line: 28,
+            column: Infinity
+          }
+        }
+      ]);
+    });
+
+    test("the merged generated ranges on the source", async () => {
+      const urls = await setupBundleFixture("intermingled-sources");
+
+      const ranges = await getGeneratedRangesForOriginal(
+        "intermingled-sources.js/originalSource-01",
+        urls[0],
+        true
+      );
+
+      expect(ranges).toEqual([
+        {
+          start: {
+            line: 4,
+            column: 69
+          },
+          end: {
+            line: 28,
+            column: Infinity
+          }
+        }
+      ]);
+    });
+  });
+
   describe("hasMappedSource", async () => {
     test("has original location", async () => {
       await setupBundleFixture("bundle");

packages/devtools-source-map/src/tests/source-map.js

@@ -12,6 +12,7 @@ const {
   getAllGeneratedLocations,
   getOriginalLocation,
   getOriginalSourceText,
+  getGeneratedRangesForOriginal,
   getFileGeneratedRange,
   hasMappedSource,
   clearSourceMaps,
@@ -38,6 +39,7 @@ self.onmessage = workerHandler({
   getOriginalLocation,
   getOriginalSourceText,
   getOriginalStackFrames,
+  getGeneratedRangesForOriginal,
   getFileGeneratedRange,
   hasMappedSource,
   applySourceMap,

packages/devtools-source-map/src/worker.js

@@ -50,17 +50,39 @@ export function setBreakpointPositions(location: SourceLocation) {
 
     let source = getSourceFromId(getState(), sourceId);
 
-    let range;
+    let results = {};
     if (isOriginalId(sourceId)) {
-      range = await sourceMaps.getFileGeneratedRange(source);
+      const ranges = await sourceMaps.getGeneratedRangesForOriginal(
+        sourceId,
+        source.url,
+        true
+      );
       sourceId = originalToGeneratedId(sourceId);
       source = getSourceFromId(getState(), sourceId);
-    }
 
-    const results = await client.getBreakpointPositions(
-      source.actors[0],
-      range
-    );
+      // Note: While looping here may not look ideal, in the vast majority of
+      // cases, the number of ranges here should be very small, and is quite
+      // likely to only be a single range.
+      for (const range of ranges) {
+        // Wrap infinite end positions to the next line to keep things simple
+        // and because we know we don't care about the end-line whitespace
+        // in this case.
+        if (range.end.column === Infinity) {
+          range.end.line += 1;
+          range.end.column = 0;
+        }
+
+        const bps = await client.getBreakpointPositions(
+          source.actors[0],
+          range
+        );
+        for (const line in bps) {
+          results[line] = (results[line] || []).concat(bps[line]);
+        }
+      }
+    } else {
+      results = await client.getBreakpointPositions(source.actors[0]);
+    }
 
     let positions = convertToList(results, sourceId);
     positions = await mapLocations(positions, getState(), source, sourceMaps);