moved to root
This commit is contained in:
Andrew Zambazos
@@ -0,0 +1,295 @@
|
||||
/*
|
||||
* Copyright (C) 2020 Apple Inc. All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions
|
||||
* are met:
|
||||
* 1. Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* 2. Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
|
||||
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
|
||||
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
|
||||
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
||||
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
||||
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
||||
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
||||
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
||||
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
|
||||
* THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*/
|
||||
|
||||
WI.AnimationDetailsSidebarPanel = class AnimationDetailsSidebarPanel extends WI.DetailsSidebarPanel
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super("animation", WI.UIString("Animation"));
|
||||
|
||||
this._animation = null;
|
||||
|
||||
this._codeMirrorSectionMap = new Map;
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
inspect(objects)
|
||||
{
|
||||
if (!(objects instanceof Array))
|
||||
objects = [objects];
|
||||
|
||||
this.animation = objects.find((object) => object instanceof WI.Animation);
|
||||
|
||||
return !!this.animation;
|
||||
}
|
||||
|
||||
get animation()
|
||||
{
|
||||
return this._animation;
|
||||
}
|
||||
|
||||
set animation(animation)
|
||||
{
|
||||
if (animation === this._animation)
|
||||
return;
|
||||
|
||||
if (this._animation) {
|
||||
this._animation.removeEventListener(WI.Animation.Event.TargetChanged, this._handleAnimationTargetChanged, this);
|
||||
this._animation.removeEventListener(WI.Animation.Event.EffectChanged, this._handleAnimationEffectChanged, this);
|
||||
this._animation.removeEventListener(WI.Animation.Event.NameChanged, this._handleAnimationNameChanged, this);
|
||||
}
|
||||
|
||||
this._animation = animation || null;
|
||||
|
||||
if (this._animation) {
|
||||
this._animation.addEventListener(WI.Animation.Event.NameChanged, this._handleAnimationNameChanged, this);
|
||||
this._animation.addEventListener(WI.Animation.Event.EffectChanged, this._handleAnimationEffectChanged, this);
|
||||
this._animation.addEventListener(WI.Animation.Event.TargetChanged, this._handleAnimationTargetChanged, this);
|
||||
}
|
||||
|
||||
this.needsLayout();
|
||||
}
|
||||
|
||||
// Protected
|
||||
|
||||
initialLayout()
|
||||
{
|
||||
super.initialLayout();
|
||||
|
||||
this._idRow = new WI.DetailsSectionSimpleRow(WI.UIString("Identifier"));
|
||||
this._typeRow = new WI.DetailsSectionSimpleRow(WI.UIString("Type"));
|
||||
this._cssAnimationNameRow = new WI.DetailsSectionSimpleRow(WI.UIString("Name"));
|
||||
this._cssTransitionPropertyRow = new WI.DetailsSectionSimpleRow(WI.UIString("Property"));
|
||||
this._targetRow = new WI.DetailsSectionSimpleRow(WI.UIString("Target", "Web Animation Target Label", "Label for the current DOM node target of a web animation"));
|
||||
|
||||
const identitySectionTitle = WI.UIString("Identity", "Web Animation Identity Title", "Section title for information about a web animation");
|
||||
let identitySection = new WI.DetailsSection("animation-identity", identitySectionTitle, [new WI.DetailsSectionGroup([this._idRow, this._typeRow, this._cssAnimationNameRow, this._cssTransitionPropertyRow, this._targetRow])]);
|
||||
this.contentView.element.appendChild(identitySection.element);
|
||||
|
||||
this._iterationCountRow = new WI.DetailsSectionSimpleRow(WI.UIString("Iterations", "Web Animation Iteration Count Label", "Label for the number of iterations of a web animation"));
|
||||
this._iterationStartRow = new WI.DetailsSectionSimpleRow(WI.UIString("Start", "Web Animation Iteration Start Label", "Label for the number describing which iteration a web animation should start at"));
|
||||
this._iterationDurationRow = new WI.DetailsSectionSimpleRow(WI.UIString("Duration", "Web Animation Iteration Duration Label", "Label for the time duration of each iteration of a web animation"));
|
||||
let iterationsGroup = new WI.DetailsSectionGroup([this._iterationCountRow, this._iterationStartRow, this._iterationDurationRow]);
|
||||
|
||||
this._startDelayRow = new WI.DetailsSectionSimpleRow(WI.UIString("Start Delay", "Web Animation Start Delay Label", "Label for the start delay time of a web animation "));
|
||||
this._endDelayRow = new WI.DetailsSectionSimpleRow(WI.UIString("End Delay", "Web Animation End Delay Label", "Label for the end delay time of a web animation "));
|
||||
this._timingFunctionRow = new WI.DetailsSectionSimpleRow(WI.UIString("Easing", "Web Animation Easing Label", "Label for the cubic-bezier timing function of a web animation"));
|
||||
let timingGroup = new WI.DetailsSectionGroup([this._startDelayRow, this._endDelayRow, this._timingFunctionRow]);
|
||||
|
||||
this._playbackDirectionRow = new WI.DetailsSectionSimpleRow(WI.UIString("Direction", "Web Animation Playback Direction Label", "Label for the playback direction of a web animation"));
|
||||
this._fillModeRow = new WI.DetailsSectionSimpleRow(WI.UIString("Fill", "Web Animation Fill Mode Label", "Label for the fill mode of a web animation"));
|
||||
let fillDirectionGroup = new WI.DetailsSectionGroup([this._playbackDirectionRow, this._fillModeRow]);
|
||||
|
||||
const effectSectionTitle = WI.UIString("Effect", "Web Animation Effect Title", "Section title for information about the effect of a web animation");
|
||||
let effectSection = new WI.DetailsSection("animation-effect", effectSectionTitle, [iterationsGroup, timingGroup, fillDirectionGroup]);
|
||||
this.contentView.element.appendChild(effectSection.element);
|
||||
|
||||
this._keyframesGroup = new WI.DetailsSectionGroup;
|
||||
|
||||
const keyframesSectionTitle = WI.UIString("Keyframes", "Web Animation Keyframes Title", "Section title for information about the keyframes of a web animation");
|
||||
let keyframesSection = new WI.DetailsSection("animation-keyframes", keyframesSectionTitle, [this._keyframesGroup]);
|
||||
this.contentView.element.appendChild(keyframesSection.element);
|
||||
|
||||
const selectable = false;
|
||||
let backtraceTreeOutline = new WI.TreeOutline(selectable);
|
||||
backtraceTreeOutline.disclosureButtons = false;
|
||||
this._backtraceTreeController = new WI.StackTraceTreeController(backtraceTreeOutline);
|
||||
|
||||
let backtraceRow = new WI.DetailsSectionRow;
|
||||
backtraceRow.element.appendChild(backtraceTreeOutline.element);
|
||||
|
||||
const backtraceSectionTitle = WI.UIString("Backtrace", "Web Animation Backtrace Title", "Section title for the JavaScript backtrace of the creation of a web animation");
|
||||
this._backtraceSection = new WI.DetailsSection("animation-backtrace", backtraceSectionTitle, [new WI.DetailsSectionGroup([backtraceRow])]);
|
||||
this._backtraceSection.element.hidden = true;
|
||||
this.contentView.element.appendChild(this._backtraceSection.element);
|
||||
}
|
||||
|
||||
layout()
|
||||
{
|
||||
super.layout();
|
||||
|
||||
if (!this._animation)
|
||||
return;
|
||||
|
||||
this._refreshIdentitySection();
|
||||
this._refreshEffectSection();
|
||||
this._refreshBacktraceSection();
|
||||
|
||||
for (let codeMirror of this._codeMirrorSectionMap.values())
|
||||
codeMirror.refresh();
|
||||
}
|
||||
|
||||
attached()
|
||||
{
|
||||
super.attached();
|
||||
|
||||
for (let codeMirror of this._codeMirrorSectionMap.values())
|
||||
codeMirror.refresh();
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_refreshIdentitySection()
|
||||
{
|
||||
let animationType = this._animation.animationType;
|
||||
let displayName = this._animation.displayName;
|
||||
let cssAnimationName = this._animation.cssAnimationName;
|
||||
let cssTransitionProperty = this._animation.cssTransitionProperty;
|
||||
|
||||
switch (animationType) {
|
||||
case WI.Animation.Type.WebAnimation:
|
||||
this._idRow.value = this._animation.name;
|
||||
break;
|
||||
|
||||
case WI.Animation.Type.CSSAnimation:
|
||||
this._idRow.value = cssAnimationName !== displayName ? displayName : null;
|
||||
break;
|
||||
|
||||
case WI.Animation.Type.CSSTransition:
|
||||
this._idRow.value = cssTransitionProperty !== displayName ? displayName : null;
|
||||
break;
|
||||
}
|
||||
|
||||
this._typeRow.value = WI.Animation.displayNameForAnimationType(animationType);
|
||||
|
||||
this._cssAnimationNameRow.value = cssAnimationName;
|
||||
this._cssTransitionPropertyRow.value = cssTransitionProperty;
|
||||
|
||||
this._targetRow.value = null;
|
||||
this._animation.requestEffectTarget((styleable) => {
|
||||
this._targetRow.value = WI.linkifyStyleable(styleable);
|
||||
});
|
||||
}
|
||||
|
||||
_refreshEffectSection()
|
||||
{
|
||||
for (let section of this._codeMirrorSectionMap.keys())
|
||||
section.removeEventListener(WI.DetailsSection.Event.CollapsedStateChanged, this._handleDetailsSectionCollapsedStateChanged, this);
|
||||
this._codeMirrorSectionMap.clear();
|
||||
|
||||
const precision = 0;
|
||||
|
||||
this._iterationCountRow.value = !isNaN(this._animation.iterationCount) ? this._animation.iterationCount.toLocaleString() : null;
|
||||
this._iterationStartRow.value = !isNaN(this._animation.iterationStart) ? this._animation.iterationStart.toLocaleString() : null;
|
||||
this._iterationDurationRow.value = !isNaN(this._animation.iterationDuration) ? Number.secondsToString(this._animation.iterationDuration / 1000) : null;
|
||||
|
||||
this._startDelayRow.value = this._animation.startDelay ? Number.secondsToString(this._animation.startDelay / 1000) : null;
|
||||
this._endDelayRow.value = this._animation.endDelay ? Number.secondsToString(this._animation.endDelay / 1000) : null;
|
||||
this._timingFunctionRow.value = this._animation.timingFunction ? this._animation.timingFunction.toString() : null;
|
||||
|
||||
this._playbackDirectionRow.value = this._animation.playbackDirection ? WI.Animation.displayNameForPlaybackDirection(this._animation.playbackDirection) : null;
|
||||
this._fillModeRow.value = this._animation.fillMode ? WI.Animation.displayNameForFillMode(this._animation.fillMode) : null;
|
||||
|
||||
let keyframeSections = [];
|
||||
for (let keyframe of this._animation.keyframes) {
|
||||
let rows = [];
|
||||
|
||||
let keyframeSection = new WI.DetailsSection("animation-keyframe-offset-" + keyframe.offset, Number.percentageString(keyframe.offset, precision));
|
||||
keyframeSection.addEventListener(WI.DetailsSection.Event.CollapsedStateChanged, this._handleDetailsSectionCollapsedStateChanged, this);
|
||||
keyframeSections.push(keyframeSection);
|
||||
|
||||
if (keyframe.easing) {
|
||||
let subtitle = keyframeSection.headerElement.appendChild(document.createElement("span"));
|
||||
subtitle.className = "subtitle";
|
||||
subtitle.textContent = ` ${emDash} ${keyframe.easing.toString()}`;
|
||||
}
|
||||
|
||||
if (keyframe.style) {
|
||||
let codeMirrorElement = document.createElement("div");
|
||||
let codeMirror = WI.CodeMirrorEditor.create(codeMirrorElement, {
|
||||
mode: "css",
|
||||
readOnly: "nocursor",
|
||||
lineWrapping: true,
|
||||
});
|
||||
codeMirror.setValue(keyframe.style);
|
||||
|
||||
const range = null;
|
||||
function optionsForType(type) {
|
||||
return {
|
||||
allowedTokens: /\btag\b/,
|
||||
callback(marker, valueObject, valueString) {
|
||||
let swatch = new WI.InlineSwatch(type, valueObject, {readOnly: true});
|
||||
codeMirror.setUniqueBookmark(marker.range.startPosition().toCodeMirror(), swatch.element);
|
||||
}
|
||||
};
|
||||
}
|
||||
createCodeMirrorColorTextMarkers(codeMirror, range, optionsForType(WI.InlineSwatch.Type.Color));
|
||||
createCodeMirrorGradientTextMarkers(codeMirror, range, optionsForType(WI.InlineSwatch.Type.Gradient));
|
||||
createCodeMirrorCubicBezierTextMarkers(codeMirror, range, optionsForType(WI.InlineSwatch.Type.Bezier));
|
||||
createCodeMirrorSpringTextMarkers(codeMirror, range, optionsForType(WI.InlineSwatch.Type.Spring));
|
||||
|
||||
let row = new WI.DetailsSectionRow;
|
||||
row.element.classList.add("styles");
|
||||
row.element.appendChild(codeMirrorElement);
|
||||
rows.push(row);
|
||||
|
||||
this._codeMirrorSectionMap.set(keyframeSection, codeMirror);
|
||||
}
|
||||
|
||||
if (!rows.length) {
|
||||
let emptyRow = new WI.DetailsSectionRow(WI.UIString("No Styles"));
|
||||
emptyRow.showEmptyMessage();
|
||||
rows.push(emptyRow);
|
||||
}
|
||||
|
||||
keyframeSection.groups = [new WI.DetailsSectionGroup(rows)];
|
||||
}
|
||||
if (!keyframeSections.length) {
|
||||
let emptyRow = new WI.DetailsSectionRow(WI.UIString("No Keyframes"));
|
||||
emptyRow.showEmptyMessage();
|
||||
keyframeSections.push(emptyRow);
|
||||
}
|
||||
this._keyframesGroup.rows = keyframeSections;
|
||||
}
|
||||
|
||||
_refreshBacktraceSection()
|
||||
{
|
||||
let stackTrace = this._animation.stackTrace;
|
||||
this._backtraceTreeController.stackTrace = stackTrace;
|
||||
this._backtraceSection.element.hidden = !stackTrace?.callFrames.length;
|
||||
}
|
||||
|
||||
_handleAnimationNameChanged(event)
|
||||
{
|
||||
this._refreshIdentitySection();
|
||||
}
|
||||
|
||||
_handleAnimationEffectChanged(event)
|
||||
{
|
||||
this._refreshEffectSection();
|
||||
}
|
||||
|
||||
_handleAnimationTargetChanged(event)
|
||||
{
|
||||
this._refreshIdentitySection();
|
||||
}
|
||||
|
||||
_handleDetailsSectionCollapsedStateChanged(event)
|
||||
{
|
||||
let codeMirror = this._codeMirrorSectionMap.get(event.target);
|
||||
codeMirror.refresh();
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user