зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1592775 - Fix jumping behavior in frame timeline
Differential Revision: https://phabricator.services.mozilla.com/D51182 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Родитель
e2e1ec4d40
Коммит
ce02064d8a
|
@ -4,13 +4,16 @@
|
||||||
|
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
// import PropTypes from "prop-types";
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { isEqual } from "lodash";
|
import { isEqual } from "lodash";
|
||||||
|
|
||||||
import { connect } from "../../utils/connect";
|
import { connect } from "../../utils/connect";
|
||||||
import { getFramePositions } from "../../selectors";
|
import {
|
||||||
import type { SourceLocation } from "../../types";
|
getFramePositions,
|
||||||
|
getSelectedFrame,
|
||||||
|
getThreadContext,
|
||||||
|
} from "../../selectors";
|
||||||
|
import type { SourceLocation, Frame } from "../../types";
|
||||||
|
|
||||||
import { getSelectedLocation } from "../../reducers/sources";
|
import { getSelectedLocation } from "../../reducers/sources";
|
||||||
|
|
||||||
|
@ -24,6 +27,7 @@ type Props = {
|
||||||
selectedLocation: ?SourceLocation,
|
selectedLocation: ?SourceLocation,
|
||||||
previewLocation: typeof actions.previewPausedLocation,
|
previewLocation: typeof actions.previewPausedLocation,
|
||||||
seekToPosition: typeof actions.seekToPosition,
|
seekToPosition: typeof actions.seekToPosition,
|
||||||
|
selectedFrame: Frame,
|
||||||
};
|
};
|
||||||
type OwnProps = {};
|
type OwnProps = {};
|
||||||
|
|
||||||
|
@ -31,6 +35,7 @@ type State = {
|
||||||
scrubbing: boolean,
|
scrubbing: boolean,
|
||||||
percentage: number,
|
percentage: number,
|
||||||
displayedLocation: any,
|
displayedLocation: any,
|
||||||
|
displayedFrame: Frame,
|
||||||
};
|
};
|
||||||
|
|
||||||
function isSameLocation(
|
function isSameLocation(
|
||||||
|
@ -68,6 +73,7 @@ class FrameTimeline extends Component<Props, State> {
|
||||||
scrubbing: false,
|
scrubbing: false,
|
||||||
percentage: 0,
|
percentage: 0,
|
||||||
displayedLocation: null,
|
displayedLocation: null,
|
||||||
|
displayedFrame: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
getProgress(clientX: number) {
|
getProgress(clientX: number) {
|
||||||
|
@ -158,8 +164,16 @@ class FrameTimeline extends Component<Props, State> {
|
||||||
};
|
};
|
||||||
|
|
||||||
getProgressForNewFrame() {
|
getProgressForNewFrame() {
|
||||||
const { framePositions, selectedLocation } = this.props;
|
const { framePositions, selectedLocation, selectedFrame } = this.props;
|
||||||
this.setState({ displayedLocation: selectedLocation });
|
this.setState({
|
||||||
|
displayedLocation: selectedLocation,
|
||||||
|
displayedFrame: selectedFrame,
|
||||||
|
});
|
||||||
|
let progress = 0;
|
||||||
|
|
||||||
|
if (!framePositions) {
|
||||||
|
return progress;
|
||||||
|
}
|
||||||
|
|
||||||
const displayedPositions = framePositions.filter(
|
const displayedPositions = framePositions.filter(
|
||||||
point => point.position.kind === "OnStep"
|
point => point.position.kind === "OnStep"
|
||||||
|
@ -168,8 +182,6 @@ class FrameTimeline extends Component<Props, State> {
|
||||||
isSameLocation(pos.location, selectedLocation)
|
isSameLocation(pos.location, selectedLocation)
|
||||||
);
|
);
|
||||||
|
|
||||||
let progress = 0;
|
|
||||||
|
|
||||||
if (index != -1) {
|
if (index != -1) {
|
||||||
progress = Math.floor((index / displayedPositions.length) * 100);
|
progress = Math.floor((index / displayedPositions.length) * 100);
|
||||||
this.setState({ percentage: progress });
|
this.setState({ percentage: progress });
|
||||||
|
@ -179,12 +191,21 @@ class FrameTimeline extends Component<Props, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
getVisibleProgress() {
|
getVisibleProgress() {
|
||||||
const { percentage, displayedLocation, scrubbing } = this.state;
|
const {
|
||||||
const { selectedLocation } = this.props;
|
percentage,
|
||||||
|
displayedLocation,
|
||||||
|
displayedFrame,
|
||||||
|
scrubbing,
|
||||||
|
} = this.state;
|
||||||
|
const { selectedLocation, selectedFrame } = this.props;
|
||||||
|
|
||||||
let progress = percentage;
|
let progress = percentage;
|
||||||
|
|
||||||
if (!isEqual(displayedLocation, selectedLocation) && !scrubbing) {
|
if (
|
||||||
|
!isEqual(displayedLocation, selectedLocation) &&
|
||||||
|
displayedFrame.index !== selectedFrame.index &&
|
||||||
|
!scrubbing
|
||||||
|
) {
|
||||||
progress = this.getProgressForNewFrame();
|
progress = this.getProgressForNewFrame();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -251,9 +272,15 @@ class FrameTimeline extends Component<Props, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
|
const selectedFrame: Frame = (getSelectedFrame(
|
||||||
|
state,
|
||||||
|
getThreadContext(state).thread
|
||||||
|
): any);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
framePositions: getFramePositions(state),
|
framePositions: getFramePositions(state),
|
||||||
selectedLocation: getSelectedLocation(state),
|
selectedLocation: getSelectedLocation(state),
|
||||||
|
selectedFrame,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Загрузка…
Ссылка в новой задаче