[Preview] stop showing preview for the wrong original files (#5878)

Author: jasonLaster

src/actions/preview.js

@@ -14,6 +14,7 @@ import { getExpressionFromCoords } from "../utils/editor/get-expression";
 import {
   getPreview,
   isLineInScope,
+  isSelectedFrameVisible,
   getSelectedSource,
   getSelectedFrame,
   getSymbols,
@@ -145,7 +146,10 @@ export function updatePreview(target: HTMLElement, editor: any) {
       return;
     }
 
-    if (!isLineInScope(getState(), tokenPos.line)) {
+    if (
+      !isSelectedFrameVisible(getState()) ||
+      !isLineInScope(getState(), tokenPos.line)
+    ) {
       return;
     }
 

src/components/Editor/Preview/index.js

@@ -10,11 +10,7 @@ import { debounce } from "lodash";
 
 import Popup from "./Popup";
 
-import {
-  getPreview,
-  getSelectedSource,
-  isSelectedFrameVisible
-} from "../../../selectors";
+import { getPreview, getSelectedSource } from "../../../selectors";
 import actions from "../../../actions";
 import { toEditorRange } from "../../../utils/editor";
 
@@ -69,9 +65,7 @@ class Preview extends PureComponent<Props, State> {
 
   onMouseOver = e => {
     const { target } = e;
-    if (this.props.selectedFrameVisible) {
-      this.props.updatePreview(target, this.props.editor);
-    }
+    this.props.updatePreview(target, this.props.editor);
   };
 
   onMouseUp = () => {
@@ -136,8 +130,7 @@ const {
 export default connect(
   state => ({
     preview: getPreview(state),
-    selectedSource: getSelectedSource(state),
-    selectedFrameVisible: isSelectedFrameVisible(state)
+    selectedSource: getSelectedSource(state)
   }),
   {
     addExpression,

src/selectors/isSelectedFrameVisible.js

@@ -6,10 +6,12 @@ import { originalToGeneratedId, isOriginalId } from "devtools-source-map";
 import { getSelectedFrame } from "../reducers/pause";
 import { getSelectedLocation } from "../reducers/sources";
 
-function visibleSourceId(location) {
-  return isOriginalId(location.sourceId)
-    ? originalToGeneratedId(location.sourceId)
-    : location.sourceId;
+function getGeneratedId(sourceId) {
+  if (isOriginalId(sourceId)) {
+    return originalToGeneratedId(sourceId);
+  }
+
+  return sourceId;
 }
 
 /*
@@ -24,8 +26,12 @@ export function isSelectedFrameVisible(state) {
     return false;
   }
 
+  if (isOriginalId(selectedLocation.sourceId)) {
+    return selectedLocation.sourceId === selectedFrame.location.sourceId;
+  }
+
   return (
-    visibleSourceId(selectedLocation) ===
-    visibleSourceId(selectedFrame.location)
+    selectedLocation.sourceId ===
+    getGeneratedId(selectedFrame.location.sourceId)
   );
 }

src/test/mochitest/browser_dbg-preview-source-maps.js

@@ -1,24 +1,11 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-function getCoordsFromPosition(cm, { line, ch }) {
-  return cm.charCoords({ line: ~~line, ch: ~~ch });
-}
 
-function hoverAtPos(dbg, { line, ch }) {
-  info(`Hovering at (${line}, ${ch})\n`);
-  const cm = getCM(dbg);
-  const coords = getCoordsFromPosition(cm, { line: line - 1, ch });
-  const tokenEl = dbg.win.document.elementFromPoint(coords.left, coords.top);
-  const previewed = waitForDispatch(dbg, "SET_PREVIEW");
-  tokenEl.dispatchEvent(
-    new MouseEvent("mouseover", {
-      bubbles: true,
-      cancelable: true,
-      view: dbg.win
-    })
-  );
-  return previewed;
+async function assertNoTooltip(dbg) {
+  await waitForTime(200);
+  const el = findElement(dbg, "tooltip");
+  is(el, null, "Tooltip should not exist")
 }
 
 function assertPreviewTooltip(dbg, { result, expression }) {
@@ -58,12 +45,21 @@ add_task(async function() {
   await waitForPaused(dbg);
   await waitForSelectedSource(dbg, "times2");
 
-  await hoverAtPos(dbg, { line: 2, ch: 9 });
-  assertPreviewTooltip(dbg, { result: 4, expression: "x" });
+  info(`Test previewing in the original location`)
+  await assertPreviews(dbg, [
+    { line: 2, column: 10, result: 4, expression: "x" }
+  ]);
 
+  info(`Test previewing in the generated location`)
   await dbg.actions.jumpToMappedSelectedLocation();
   await waitForSelectedSource(dbg, "bundle.js");
+  await assertPreviews(dbg, [
+    { line: 70, column: 11, result: 4, expression: "x" }
+  ]);
+
 
-  await hoverAtPos(dbg, { line: 70, ch: 10 });
-  assertPreviewTooltip(dbg, { result: 4, expression: "x" });
+  info(`Test that you can not preview in another original file`);
+  await selectSource(dbg, "output");
+  await hoverAtPos(dbg, { line: 2, ch: 16 });
+  await assertNoTooltip(dbg)
 });