mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 09:15:35 +00:00
Bug 1468343 - Part 1: Make graph to address infinity duration. r=pbro
MozReview-Commit-ID: Cc5a55Qglpi --HG-- extra : rebase_source : 188cbe344e3ae3a58b57fefced204952ccf5fead
This commit is contained in:
parent
7b326fba08
commit
cf0be17a9d
@ -44,6 +44,11 @@ class TimingPath extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
if (state.duration === Infinity) {
|
||||
this.renderInfinityDuration(pathList, state, mainIterationStartTime, helper);
|
||||
return pathList;
|
||||
}
|
||||
|
||||
// Append 1st section of iterations,
|
||||
// This section is only useful in cases where iterationStart has decimals.
|
||||
// e.g.
|
||||
@ -287,6 +292,32 @@ class TimingPath extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render infinity duration.
|
||||
*
|
||||
* @param {Array} pathList
|
||||
* Add rendered <path> elements to this array.
|
||||
* @param {Object} state
|
||||
* State of animation.
|
||||
* @param {Number} mainIterationStartTime
|
||||
* Starting time of main iteration.
|
||||
* @param {SummaryGraphHelper} helper
|
||||
* Instance of SummaryGraphHelper.
|
||||
*/
|
||||
renderInfinityDuration(pathList, state, mainIterationStartTime, helper) {
|
||||
const startSegment = helper.getSegment(mainIterationStartTime);
|
||||
const endSegment = { x: helper.totalDuration, y: startSegment.y };
|
||||
const segments = [startSegment, endSegment];
|
||||
pathList.push(
|
||||
dom.path(
|
||||
{
|
||||
className: "animation-iteration-path infinity-duration",
|
||||
d: helper.toPathString(segments),
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render 'endDelay' part in animation and add a <path> element to given pathList.
|
||||
*
|
||||
|
@ -40,10 +40,22 @@ class TimeScale {
|
||||
|
||||
const toRate = v => v / playbackRate;
|
||||
const startTime = createdTime + toRate(Math.min(delay, 0));
|
||||
const endTime = createdTime +
|
||||
let endTime = 0;
|
||||
|
||||
if (duration === Infinity) {
|
||||
// Set endTime so as to enable the scrubber with keeping the consinstency of UI
|
||||
// even the duration was Infinity. In case of delay is longer than zero, handle
|
||||
// the graph duration as double of the delay amount. In case of no delay, handle
|
||||
// the duration as 1ms which is short enough so as to make the scrubber movable
|
||||
// and the limited duration is prioritized.
|
||||
endTime = createdTime + (delay > 0 ? delay * 2 : 1);
|
||||
} else {
|
||||
endTime = createdTime +
|
||||
toRate(delay +
|
||||
duration * (iterationCount || 1) +
|
||||
Math.max(endDelay, 0));
|
||||
}
|
||||
|
||||
minStartTime = Math.min(minStartTime, startTime);
|
||||
maxEndTime = Math.max(maxEndTime, endTime);
|
||||
animationsCurrentTime =
|
||||
|
@ -265,6 +265,11 @@ select.playback-rate-selector.devtools-button:not(:empty):not(:disabled):not(.ch
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.animation-computed-timing-path path.infinity-duration,
|
||||
.animation-effect-timing-path path.infinity-duration {
|
||||
mask-image: linear-gradient(90deg, black, transparent);
|
||||
}
|
||||
|
||||
.animation-negative-delay-path path,
|
||||
.animation-negative-end-delay-path path {
|
||||
fill: none;
|
||||
|
Loading…
Reference in New Issue
Block a user