Bug 1592775 - Fix jumping behavior in frame timeline

Differential Revision: https://phabricator.services.mozilla.com/D51182

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/components/SecondaryPanes/FrameTimeline.js

@@ -4,13 +4,16 @@
 
 // @flow
 
-// import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { isEqual } from "lodash";
 
 import { connect } from "../../utils/connect";
-import { getFramePositions } from "../../selectors";
-import type { SourceLocation } from "../../types";
+import {
+  getFramePositions,
+  getSelectedFrame,
+  getThreadContext,
+} from "../../selectors";
+import type { SourceLocation, Frame } from "../../types";
 
 import { getSelectedLocation } from "../../reducers/sources";
 
@@ -24,6 +27,7 @@ type Props = {
   selectedLocation: ?SourceLocation,
   previewLocation: typeof actions.previewPausedLocation,
   seekToPosition: typeof actions.seekToPosition,
+  selectedFrame: Frame,
 };
 type OwnProps = {};
 
@@ -31,6 +35,7 @@ type State = {
   scrubbing: boolean,
   percentage: number,
   displayedLocation: any,
+  displayedFrame: Frame,
 };
 
 function isSameLocation(
@@ -68,6 +73,7 @@ class FrameTimeline extends Component<Props, State> {
     scrubbing: false,
     percentage: 0,
     displayedLocation: null,
+    displayedFrame: {},
   };
 
   getProgress(clientX: number) {
@@ -158,8 +164,16 @@ class FrameTimeline extends Component<Props, State> {
   };
 
   getProgressForNewFrame() {
-    const { framePositions, selectedLocation } = this.props;
-    this.setState({ displayedLocation: selectedLocation });
+    const { framePositions, selectedLocation, selectedFrame } = this.props;
+    this.setState({
+      displayedLocation: selectedLocation,
+      displayedFrame: selectedFrame,
+    });
+    let progress = 0;
+
+    if (!framePositions) {
+      return progress;
+    }
 
     const displayedPositions = framePositions.filter(
       point => point.position.kind === "OnStep"
@@ -168,8 +182,6 @@ class FrameTimeline extends Component<Props, State> {
       isSameLocation(pos.location, selectedLocation)
     );
 
-    let progress = 0;
-
     if (index != -1) {
       progress = Math.floor((index / displayedPositions.length) * 100);
       this.setState({ percentage: progress });
@@ -179,12 +191,21 @@ class FrameTimeline extends Component<Props, State> {
   }
 
   getVisibleProgress() {
-    const { percentage, displayedLocation, scrubbing } = this.state;
-    const { selectedLocation } = this.props;
+    const {
+      percentage,
+      displayedLocation,
+      displayedFrame,
+      scrubbing,
+    } = this.state;
+    const { selectedLocation, selectedFrame } = this.props;
 
     let progress = percentage;
 
-    if (!isEqual(displayedLocation, selectedLocation) && !scrubbing) {
+    if (
+      !isEqual(displayedLocation, selectedLocation) &&
+      displayedFrame.index !== selectedFrame.index &&
+      !scrubbing
+    ) {
       progress = this.getProgressForNewFrame();
     }
 
@@ -251,9 +272,15 @@ class FrameTimeline extends Component<Props, State> {
 }
 
 const mapStateToProps = state => {
+  const selectedFrame: Frame = (getSelectedFrame(
+    state,
+    getThreadContext(state).thread
+  ): any);
+
   return {
     framePositions: getFramePositions(state),
     selectedLocation: getSelectedLocation(state),
+    selectedFrame,
   };
 };