[Editor] Stop highlighting the line being left when stepping (#5650)

Author: Alexis Deschamps

src/components/Editor/HighlightLine.js

@@ -12,12 +12,15 @@ import { connect } from "react-redux";
 import {
   getVisibleSelectedFrame,
   getSelectedLocation,
-  getSelectedSource
+  getSelectedSource,
+  getPauseCommand
 } from "../../selectors";
 
 import type { Frame, Location, SourceRecord } from "../../types";
+import type { Command } from "../../reducers/types";
 
 type Props = {
+  pauseCommand: Command,
   selectedFrame: Frame,
   selectedLocation: Location,
   selectedSource: SourceRecord
@@ -43,14 +46,47 @@ function isDocumentReady(selectedSource, selectedLocation) {
 }
 
 export class HighlightLine extends PureComponent<Props> {
+  isStepping: boolean = false;
+  previousEditorLine: ?number = null;
+
+  shouldComponentUpdate(nextProps: Props) {
+    const { selectedLocation, selectedSource } = nextProps;
+    return this.shouldSetHighlightLine(selectedLocation, selectedSource);
+  }
+
+  shouldSetHighlightLine(
+    selectedLocation: Location,
+    selectedSource: SourceRecord
+  ) {
+    const { sourceId, line } = selectedLocation;
+    const editorLine = toEditorLine(sourceId, line);
+
+    if (!isDocumentReady(selectedSource, selectedLocation)) {
+      return false;
+    }
+
+    if (this.isStepping && editorLine === this.previousEditorLine) {
+      return false;
+    }
+
+    return true;
+  }
+
   componentDidUpdate(prevProps: Props) {
-    const { selectedLocation, selectedFrame, selectedSource } = this.props;
+    const {
+      pauseCommand,
+      selectedLocation,
+      selectedFrame,
+      selectedSource
+    } = this.props;
+    if (pauseCommand) {
+      this.isStepping = true;
+    }
 
     this.clearHighlightLine(
       prevProps.selectedLocation,
       prevProps.selectedSource
     );
-
     this.setHighlightLine(selectedLocation, selectedFrame, selectedSource);
   }
 
@@ -59,17 +95,18 @@ export class HighlightLine extends PureComponent<Props> {
     selectedFrame: Frame,
     selectedSource: SourceRecord
   ) {
-    if (!isDocumentReady(selectedSource, selectedLocation)) {
+    const { sourceId, line } = selectedLocation;
+    if (!this.shouldSetHighlightLine(selectedLocation, selectedSource)) {
       return;
     }
-
-    const { sourceId, line } = selectedLocation;
+    this.isStepping = false;
+    const editorLine = toEditorLine(sourceId, line);
+    this.previousEditorLine = editorLine;
 
     if (!line || isDebugLine(selectedFrame, selectedLocation)) {
       return;
     }
 
-    const editorLine = toEditorLine(sourceId, line);
     const doc = getDocument(sourceId);
     doc.addLineClass(editorLine, "line", "highlight-line");
   }
@@ -91,6 +128,7 @@ export class HighlightLine extends PureComponent<Props> {
 }
 
 export default connect(state => ({
+  pauseCommand: getPauseCommand(state),
   selectedFrame: getVisibleSelectedFrame(state),
   selectedLocation: getSelectedLocation(state),
   selectedSource: getSelectedSource(state)