mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Backed out changeset 2227adce7ea6 (bug 1210795)

This commit is contained in:
Carsten "Tomcat" Book 2016-10-25 10:09:58 +02:00
Родитель e8aef78670
Коммит 583fd6dc6e
4 изменённых файлов: 77 добавлений и 259 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

184
devtools/client/animationinspector/components/animation-time-block.js
Просмотреть файл

@ -100,7 +100,7 @@ AnimationTimeBlock.prototype = {
${ 1 + strokeHeightForViewBox * 2 }`);
// Get a helper function that returns the path segment of timing-function.
const segmentHelper = getSegmentHelper(state, this.win);
const segmentHelperFn = getSegmentHelper(state, this.win);
// Minimum segment duration is the duration of one pixel.
const minSegmentDuration =
@ -121,7 +121,7 @@ AnimationTimeBlock.prototype = {
// Append delay.
if (state.delay > 0) {
renderDelay(summaryEl, state, segmentHelper);
renderDelay(summaryEl, state, segmentHelperFn);
mainIterationStartTime = state.delay;
} else {
const negativeDelayCount = -state.delay / state.duration;
@ -143,7 +143,7 @@ AnimationTimeBlock.prototype = {
if (firstSectionCount) {
renderFirstIteration(summaryEl, state, mainIterationStartTime,
firstSectionCount, minSegmentDuration,
minProgressThreshold, segmentHelper);
minProgressThreshold, segmentHelperFn);
}
if (iterationCount === Infinity) {
@ -151,7 +151,7 @@ AnimationTimeBlock.prototype = {
// we fill the remaining area with iteration paths.
renderInfinity(summaryEl, state, mainIterationStartTime,
firstSectionCount, totalDisplayedDuration,
minSegmentDuration, minProgressThreshold, segmentHelper);
minSegmentDuration, minProgressThreshold, segmentHelperFn);
} else {
// Otherwise, we show remaining iterations, endDelay and fill.
@ -159,7 +159,7 @@ AnimationTimeBlock.prototype = {
if (state.fill === "both" || state.fill === "forwards") {
renderForwardsFill(summaryEl, state, mainIterationStartTime,
iterationCount, totalDisplayedDuration,
segmentHelper);
segmentHelperFn);
}
// Append middle section of iterations.
@ -170,7 +170,7 @@ AnimationTimeBlock.prototype = {
renderMiddleIterations(summaryEl, state, mainIterationStartTime,
firstSectionCount, middleSectionCount,
minSegmentDuration, minProgressThreshold,
segmentHelper);
segmentHelperFn);
// Append last section of iterations, if there is remaining iteration.
// e.g.
@ -181,35 +181,16 @@ AnimationTimeBlock.prototype = {
renderLastIteration(summaryEl, state, mainIterationStartTime,
firstSectionCount, middleSectionCount,
lastSectionCount, minSegmentDuration,
minProgressThreshold, segmentHelper);
minProgressThreshold, segmentHelperFn);
}
// Append endDelay.
if (state.endDelay > 0) {
renderEndDelay(summaryEl, state,
mainIterationStartTime, iterationCount, segmentHelper);
mainIterationStartTime, iterationCount, segmentHelperFn);
}
}
// Append negative delay (which overlap the animation).
if (state.delay < 0) {
segmentHelper.animation.effect.timing.fill = "both";
segmentHelper.asOriginalBehavior = false;
renderNegativeDelayHiddenProgress(summaryEl, state, minSegmentDuration,
minProgressThreshold, segmentHelper);
}
// Append negative endDelay (which overlap the animation).
if (state.iterationCount && state.endDelay < 0) {
if (segmentHelper.asOriginalBehavior) {
segmentHelper.animation.effect.timing.fill = "both";
segmentHelper.asOriginalBehavior = false;
}
renderNegativeEndDelayHiddenProgress(summaryEl, state,
minSegmentDuration,
minProgressThreshold,
segmentHelper);
}
// The animation name is displayed over the iterations.
// Note that in case of negative delay, it is pushed towards the right so
// the delay element does not overlap.
@ -234,24 +215,18 @@ AnimationTimeBlock.prototype = {
createNode({
parent: this.containerEl,
attributes: {
"class": "delay"
+ (state.delay < 0 ? " negative" : " positive")
+ (state.fill === "both" ||
state.fill === "backwards" ? " fill" : ""),
"class": "delay" + (state.delay < 0 ? " negative" : ""),
"style": `left:${ delayX }%; width:${ delayW }%;`
}
});
}
// endDelay
if (state.iterationCount && state.endDelay) {
if (state.endDelay) {
createNode({
parent: this.containerEl,
attributes: {
"class": "end-delay"
+ (state.endDelay < 0 ? " negative" : " positive")
+ (state.fill === "both" ||
state.fill === "forwards" ? " fill" : ""),
"class": "end-delay" + (state.endDelay < 0 ? " negative" : ""),
"style": `left:${ endDelayX }%; width:${ endDelayW }%;`
}
});
@ -366,10 +341,10 @@ function getFormattedAnimationTitle({state}) {
* Render delay section.
* @param {Element} parentEl - Parent element of this appended path element.
* @param {Object} state - State of animation.
* @param {Object} segmentHelper - The object returned by getSegmentHelper.
* @param {function} getSegment - The function of getSegmentHelper.
*/
function renderDelay(parentEl, state, segmentHelper) {
const startSegment = segmentHelper.getSegment(0);
function renderDelay(parentEl, state, getSegment) {
const startSegment = getSegment(0);
const endSegment = { x: state.delay, y: startSegment.y };
appendPathElement(parentEl, [startSegment, endSegment], "delay-path");
}
@ -382,16 +357,16 @@ function renderDelay(parentEl, state, segmentHelper) {
* @param {Number} firstSectionCount - Iteration count of first section.
* @param {Number} minSegmentDuration - Minimum segment duration.
* @param {Number} minProgressThreshold - Minimum progress threshold.
* @param {Object} segmentHelper - The object returned by getSegmentHelper.
* @param {function} getSegment - The function of getSegmentHelper.
*/
function renderFirstIteration(parentEl, state, mainIterationStartTime,
firstSectionCount, minSegmentDuration,
minProgressThreshold, segmentHelper) {
minProgressThreshold, getSegment) {
const startTime = mainIterationStartTime;
const endTime = startTime + firstSectionCount * state.duration;
const segments =
createPathSegments(startTime, endTime, minSegmentDuration,
minProgressThreshold, segmentHelper);
minProgressThreshold, getSegment);
appendPathElement(parentEl, segments, "iteration-path");
}
@ -404,12 +379,12 @@ function renderFirstIteration(parentEl, state, mainIterationStartTime,
* @param {Number} middleSectionCount - Iteration count of middle section.
* @param {Number} minSegmentDuration - Minimum segment duration.
* @param {Number} minProgressThreshold - Minimum progress threshold.
* @param {Object} segmentHelper - The object returned by getSegmentHelper.
* @param {function} getSegment - The function of getSegmentHelper.
*/
function renderMiddleIterations(parentEl, state, mainIterationStartTime,
firstSectionCount, middleSectionCount,
minSegmentDuration, minProgressThreshold,
segmentHelper) {
getSegment) {
const offset = mainIterationStartTime + firstSectionCount * state.duration;
for (let i = 0; i < middleSectionCount; i++) {
// Get the path segments of each iteration.
@ -417,7 +392,7 @@ function renderMiddleIterations(parentEl, state, mainIterationStartTime,
const endTime = startTime + state.duration;
const segments =
createPathSegments(startTime, endTime, minSegmentDuration,
minProgressThreshold, segmentHelper);
minProgressThreshold, getSegment);
appendPathElement(parentEl, segments, "iteration-path");
}
}
@ -432,18 +407,18 @@ function renderMiddleIterations(parentEl, state, mainIterationStartTime,
* @param {Number} lastSectionCount - Iteration count of last section.
* @param {Number} minSegmentDuration - Minimum segment duration.
* @param {Number} minProgressThreshold - Minimum progress threshold.
* @param {Object} segmentHelper - The object returned by getSegmentHelper.
* @param {function} getSegment - The function of getSegmentHelper.
*/
function renderLastIteration(parentEl, state, mainIterationStartTime,
firstSectionCount, middleSectionCount,
lastSectionCount, minSegmentDuration,
minProgressThreshold, segmentHelper) {
minProgressThreshold, getSegment) {
const startTime = mainIterationStartTime +
(firstSectionCount + middleSectionCount) * state.duration;
const endTime = startTime + lastSectionCount * state.duration;
const segments =
createPathSegments(startTime, endTime, minSegmentDuration,
minProgressThreshold, segmentHelper);
minProgressThreshold, getSegment);
appendPathElement(parentEl, segments, "iteration-path");
}
@ -456,11 +431,11 @@ function renderLastIteration(parentEl, state, mainIterationStartTime,
* @param {Number} totalDuration - Displayed max duration.
* @param {Number} minSegmentDuration - Minimum segment duration.
* @param {Number} minProgressThreshold - Minimum progress threshold.
* @param {Object} segmentHelper - The object returned by getSegmentHelper.
* @param {function} getSegment - The function of getSegmentHelper.
*/
function renderInfinity(parentEl, state, mainIterationStartTime,
firstSectionCount, totalDuration, minSegmentDuration,
minProgressThreshold, segmentHelper) {
minProgressThreshold, getSegment) {
// Calculate the number of iterations to display,
// with a maximum of MAX_INFINITE_ANIMATIONS_ITERATIONS
const infinityIterationCount =
@ -474,7 +449,7 @@ function renderInfinity(parentEl, state, mainIterationStartTime,
const firstEndTime = firstStartTime + state.duration;
const firstSegments =
createPathSegments(firstStartTime, firstEndTime, minSegmentDuration,
minProgressThreshold, segmentHelper);
minProgressThreshold, getSegment);
appendPathElement(parentEl, firstSegments, "iteration-path infinity");
// Append other iterations. We can copy first segments.
@ -503,12 +478,12 @@ function renderInfinity(parentEl, state, mainIterationStartTime,
* @param {Object} state - State of animation.
* @param {Number} mainIterationStartTime - Starting time of main iteration.
* @param {Number} iterationCount - Whole iteration count.
* @param {Object} segmentHelper - The object returned by getSegmentHelper.
* @param {function} getSegment - The function of getSegmentHelper.
*/
function renderEndDelay(parentEl, state,
mainIterationStartTime, iterationCount, segmentHelper) {
mainIterationStartTime, iterationCount, getSegment) {
const startTime = mainIterationStartTime + iterationCount * state.duration;
const startSegment = segmentHelper.getSegment(startTime);
const startSegment = getSegment(startTime);
const endSegment = { x: startTime + state.endDelay, y: startSegment.y };
appendPathElement(parentEl, [startSegment, endSegment], "enddelay-path");
}
@ -520,70 +495,22 @@ function renderEndDelay(parentEl, state,
* @param {Number} mainIterationStartTime - Starting time of main iteration.
* @param {Number} iterationCount - Whole iteration count.
* @param {Number} totalDuration - Displayed max duration.
* @param {Object} segmentHelper - The object returned by getSegmentHelper.
* @param {function} getSegment - The function of getSegmentHelper.
*/
function renderForwardsFill(parentEl, state, mainIterationStartTime,
iterationCount, totalDuration, segmentHelper) {
iterationCount, totalDuration, getSegment) {
const startTime = mainIterationStartTime + iterationCount * state.duration +
(state.endDelay > 0 ? state.endDelay : 0);
const startSegment = segmentHelper.getSegment(startTime);
const startSegment = getSegment(startTime);
const endSegment = { x: totalDuration, y: startSegment.y };
appendPathElement(parentEl, [startSegment, endSegment], "fill-forwards-path");
}
/**
* Render hidden progress of negative delay.
* @param {Element} parentEl - Parent element of this appended path element.
* @param {Object} state - State of animation.
* @param {Number} minSegmentDuration - Minimum segment duration.
* @param {Number} minProgressThreshold - Minimum progress threshold.
* @param {Object} segmentHelper - The object returned by getSegmentHelper.
*/
function renderNegativeDelayHiddenProgress(parentEl, state, minSegmentDuration,
minProgressThreshold,
segmentHelper) {
const startTime = state.delay;
const endTime = 0;
const segments =
createPathSegments(startTime, endTime, minSegmentDuration,
minProgressThreshold, segmentHelper);
appendPathElement(parentEl, segments, "delay-path negative");
}
/**
* Render hidden progress of negative endDelay.
* @param {Element} parentEl - Parent element of this appended path element.
* @param {Object} state - State of animation.
* @param {Number} minSegmentDuration - Minimum segment duration.
* @param {Number} minProgressThreshold - Minimum progress threshold.
* @param {Object} segmentHelper - The object returned by getSegmentHelper.
*/
function renderNegativeEndDelayHiddenProgress(parentEl, state,
minSegmentDuration,
minProgressThreshold,
segmentHelper) {
const endTime = state.delay + state.iterationCount * state.duration;
const startTime = endTime + state.endDelay;
const segments =
createPathSegments(startTime, endTime, minSegmentDuration,
minProgressThreshold, segmentHelper);
appendPathElement(parentEl, segments, "enddelay-path negative");
}
/**
* Get a helper function which returns the segment coord from given time.
* @param {Object} state - animation state
* @param {Object} win - window object
* @return {Object} A segmentHelper object that has the following properties:
* - animation: The script animation used to get the progress
* - endTime: The end time of the animation
* - asOriginalBehavior: The spec is that the progress of animation is changed
* if the time of setCurrentTime is during the endDelay.
* Likewise, in case the time is less than 0.
* If this flag is true, we prevent the time
* to make the same animation behavior as the original.
* - getSegment: Helper function that, given a time,
* will calculate the progress through the dummy animation.
* @return {function} getSegmentHelper
*/
function getSegmentHelper(state, win) {
// Create a dummy Animation timing data as the
@ -591,30 +518,21 @@ function getSegmentHelper(state, win) {
const timing = Object.assign({}, state, {
iterations: state.iterationCount ? state.iterationCount : Infinity
});
// Create a dummy Animation with the given timing.
const dummyAnimation =
new win.Animation(new win.KeyframeEffect(null, null, timing), null);
// Returns segment helper object.
return {
animation: dummyAnimation,
endTime: dummyAnimation.effect.getComputedTiming().endTime,
asOriginalBehavior: true,
getSegment: function (time) {
if (this.asOriginalBehavior) {
// If the given time is less than 0, returned progress is 0.
if (time < 0) {
return { x: time, y: 0 };
}
// Avoid to apply over endTime.
this.animation.currentTime = time < this.endTime ? time : this.endTime;
} else {
this.animation.currentTime = time;
}
const progress = this.animation.effect.getComputedTiming().progress;
return { x: time, y: Math.max(progress, 0) };
const endTime = dummyAnimation.effect.getComputedTiming().endTime;
// Return a helper function that, given a time,
// will calculate the progress through the dummy animation.
return time => {
// If the given time is less than 0, returned progress is 0.
if (time < 0) {
return { x: time, y: 0 };
}
dummyAnimation.currentTime =
time < endTime ? time : endTime;
const progress = dummyAnimation.effect.getComputedTiming().progress;
return { x: time, y: Math.max(progress, 0) };
};
}
@ -624,23 +542,22 @@ function getSegmentHelper(state, win) {
* @param {Number} endTime - Ending time of animation.
* @param {Number} minSegmentDuration - Minimum segment duration.
* @param {Number} minProgressThreshold - Minimum progress threshold.
* @param {Object} segmentHelper - The object of getSegmentHelper.
* @param {function} getSegment - The function of getSegmentHelper.
* @return {Array} path segments -
* [{x: {Number} time, y: {Number} progress}, ...]
*/
function createPathSegments(startTime, endTime, minSegmentDuration,
minProgressThreshold, segmentHelper) {
minProgressThreshold, getSegment) {
// If the duration is too short, early return.
if (endTime - startTime < minSegmentDuration) {
return [segmentHelper.getSegment(startTime),
segmentHelper.getSegment(endTime)];
return [getSegment(startTime), getSegment(endTime)];
}
// Otherwise, start creating segments.
let pathSegments = [];
// Append the segment for the startTime position.
const startTimeSegment = segmentHelper.getSegment(startTime);
const startTimeSegment = getSegment(startTime);
pathSegments.push(startTimeSegment);
let previousSegment = startTimeSegment;
@ -649,8 +566,7 @@ function createPathSegments(startTime, endTime, minSegmentDuration,
const interval = (endTime - startTime) / DURATION_RESOLUTION;
for (let index = 1; index <= DURATION_RESOLUTION; index++) {
// Create a segment for this interval.
const currentSegment =
segmentHelper.getSegment(startTime + index * interval);
const currentSegment = getSegment(startTime + index * interval);
// If the distance between the Y coordinate (the animation's progress) of
// the previous segment and the Y coordinate of the current segment is too
@ -662,7 +578,7 @@ function createPathSegments(startTime, endTime, minSegmentDuration,
pathSegments = pathSegments.concat(
createPathSegments(previousSegment.x + 1, currentSegment.x - 1,
minSegmentDuration, minProgressThreshold,
segmentHelper));
getSegment));
}
pathSegments.push(currentSegment);

48
devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
Просмотреть файл

@ -19,23 +19,14 @@ add_task(function* () {
yield selectNodeAndWaitForAnimations(".delayed", inspector);
let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
checkDelayAndName(timelineEl, true);
let animationEl = timelineEl.querySelector(".animation");
let state = panel.animationsTimelineComponent.timeBlocks[0].animation.state;
checkPath(animationEl, state);
info("Selecting a no-delay animated node");
yield selectNodeAndWaitForAnimations(".animated", inspector);
checkDelayAndName(timelineEl, false);
animationEl = timelineEl.querySelector(".animation");
state = panel.animationsTimelineComponent.timeBlocks[0].animation.state;
checkPath(animationEl, state);
info("Selecting a negative-delay animated node");
yield selectNodeAndWaitForAnimations(".negative-delay", inspector);
checkDelayAndName(timelineEl, true);
animationEl = timelineEl.querySelector(".animation");
state = panel.animationsTimelineComponent.timeBlocks[0].animation.state;
checkPath(animationEl, state);
});
function checkDelayAndName(timelineEl, hasDelay) {
@ -62,42 +53,3 @@ function checkDelayAndName(timelineEl, hasDelay) {
"The delay element does not span over the name element");
}
}
function checkPath(animationEl, state) {
// Check existance of delay path.
const delayPathEl = animationEl.querySelector(".delay-path");
if (!state.iterationCount && state.delay < 0) {
// Infinity
ok(!delayPathEl, "The delay path for Infinity should not exist");
return;
}
if (state.delay === 0) {
ok(!delayPathEl, "The delay path for zero delay should not exist");
return;
}
ok(delayPathEl, "The delay path should exist");
// Check delay path coordinates.
const pathSegList = delayPathEl.pathSegList;
const startingPathSeg = pathSegList.getItem(0);
const endingPathSeg = pathSegList.getItem(pathSegList.numberOfItems - 2);
if (state.delay < 0) {
ok(delayPathEl.classList.contains("negative"),
"The delay path should have 'negative' class");
const startingX = state.delay;
const endingX = 0;
is(startingPathSeg.x, startingX,
`The x of starting point should be ${ startingX }`);
is(endingPathSeg.x, endingX,
`The x of ending point should be ${ endingX }`);
} else {
ok(!delayPathEl.classList.contains("negative"),
"The delay path should not have 'negative' class");
const startingX = 0;
const endingX = state.delay;
is(startingPathSeg.x, startingX,
`The x of starting point should be ${ startingX }`);
is(endingPathSeg.x, endingX,
`The x of ending point should be ${ endingX }`);
}
}

36
devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js
Просмотреть файл

@ -20,11 +20,8 @@ add_task(function* () {
let selector = selectors[i];
yield selectNode(selector, inspector);
let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
let animationEl = timelineEl.querySelector(".animation");
let animationEl = timelineEl.querySelectorAll(".animation")[0];
checkEndDelayAndName(animationEl);
const state =
panel.animationsTimelineComponent.timeBlocks[0].animation.state;
checkPath(animationEl, state);
}
});
@ -45,34 +42,3 @@ function checkEndDelayAndName(animationEl) {
ok(endDelayRight >= nameLeft,
"The endDelay element does not span over the name element");
}
function checkPath(animationEl, state) {
// Check existance of enddelay path.
const endDelayPathEl = animationEl.querySelector(".enddelay-path");
ok(endDelayPathEl, "The endDelay path should exist");
// Check enddelay path coordinates.
const pathSegList = endDelayPathEl.pathSegList;
const startingPathSeg = pathSegList.getItem(0);
const endingPathSeg = pathSegList.getItem(pathSegList.numberOfItems - 2);
if (state.endDelay < 0) {
ok(endDelayPathEl.classList.contains("negative"),
"The endDelay path should have 'negative' class");
const endingX = state.delay + state.iterationCount * state.duration;
const startingX = endingX + state.endDelay;
is(startingPathSeg.x, startingX,
`The x of starting point should be ${ startingX }`);
is(endingPathSeg.x, endingX,
`The x of ending point should be ${ endingX }`);
} else {
ok(!endDelayPathEl.classList.contains("negative"),
"The endDelay path should not have 'negative' class");
const startingX =
state.delay + state.iterationCount * state.duration;
const endingX = startingX + state.endDelay;
is(startingPathSeg.x, startingX,
`The x of starting point should be ${ startingX }`);
is(endingPathSeg.x, endingX,
`The x of ending point should be ${ endingX }`);
}
}

68
devtools/client/themes/animationinspector.css
Просмотреть файл

@ -45,12 +45,6 @@
.animation {
--timeline-border-color: var(--theme-body-color);
--timeline-background-color: var(--theme-splitter-color);
/* The color of the endDelay hidden progress */
--enddelay-hidden-progress-color: var(--theme-graphs-grey);
/* The color of none fill mode */
--fill-none-color: var(--theme-highlight-gray);
/* The color of enable fill mode */
--fill-enable-color: var(--timeline-border-color);
}
.animation.cssanimation {
@ -366,13 +360,6 @@ body {
opacity: .3;
}
.animation-timeline .animation .summary path.delay-path.negative,
.animation-timeline .animation .summary path.enddelay-path.negative {
fill: none;
stroke: var(--enddelay-hidden-progress-color);
stroke-dasharray: 2, 2;
}
.animation-timeline .animation .name {
position: absolute;
color: var(--theme-selection-color);
@ -425,41 +412,38 @@ body {
.animation-timeline .animation .delay,
.animation-timeline .animation .end-delay {
position: absolute;
border-bottom: 3px solid var(--fill-none-color);
bottom: -0.5px;
height: 100%;
border: 1px solid var(--timeline-border-color);
box-sizing: border-box;
}
.animation-timeline .animation .delay::after,
.animation-timeline .animation .end-delay::after {
content: "";
position: absolute;
top: -2px;
width: 3px;
height: 3px;
border: 2px solid var(--fill-none-color);
background-color: var(--fill-none-color);
border-radius: 50%;
.animation-timeline .animation .delay {
border-width: 1px 0 1px 1px;
background-image: repeating-linear-gradient(45deg,
transparent,
transparent 1px,
var(--theme-selection-color) 1px,
var(--theme-selection-color) 4px);
background-color: var(--timeline-border-color);
}
.animation-timeline .animation .negative.delay::after,
.animation-timeline .animation .positive.end-delay::after {
right: -3px;
.animation-timeline .animation .end-delay {
border-width: 1px 1px 1px 0;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 3px,
var(--timeline-border-color) 3px,
var(--timeline-border-color) 4px);
}
.animation-timeline .animation .positive.delay::after,
.animation-timeline .animation .negative.end-delay::after {
left: -3px;
}
.animation-timeline .animation .fill.delay,
.animation-timeline .animation .fill.end-delay {
border-color: var(--fill-enable-color);
}
.animation-timeline .animation .fill.delay::after,
.animation-timeline .animation .fill.end-delay::after {
border-color: var(--fill-enable-color);
background-color: var(--fill-enable-color);
.animation-timeline .animation .delay.negative,
.animation-timeline .animation .end-delay.negative {
/* Negative delays are displayed on top of the animation, so they need a
right border. Whereas normal delays are displayed just before the
animation, so there's already the animation's left border that serves as
a separation. */
border-width: 1px;
}
/* Animation target node gutter, contains a preview of the dom node */