Diff
Modified: trunk/LayoutTests/ChangeLog (262403 => 262404)
--- trunk/LayoutTests/ChangeLog 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/LayoutTests/ChangeLog 2020-06-02 01:12:01 UTC (rev 262404)
@@ -1,3 +1,20 @@
+2020-06-01 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Graphics: should use the `id` (name) of the animation if it exists
+ https://bugs.webkit.org/show_bug.cgi?id=212618
+
+ Reviewed by Timothy Hatcher.
+
+ * inspector/animation/nameChanged.html: Added.
+ * inspector/animation/nameChanged-expected.txt: Added.
+
+ * inspector/animation/resources/lifecycle-utilities.js:
+ * inspector/animation/lifecycle-css-animation-expected.txt:
+ * inspector/animation/lifecycle-css-transition-expected.txt:
+ * inspector/animation/lifecycle-web-animation.html:
+ * inspector/animation/lifecycle-web-animation-expected.txt:
+ Print out the name of the animation after it's created.
+
2020-06-01 Ryan Haddad <ryanhad...@apple.com>
[ macOS ] REGRESSION(r262366): webgl/1.0.3/conformance/canvas/buffer-offscreen-test.html & webgl/2.0.0/conformance/canvas/buffer-offscreen-test.html are constant failures
Modified: trunk/LayoutTests/inspector/animation/lifecycle-css-animation-expected.txt (262403 => 262404)
--- trunk/LayoutTests/inspector/animation/lifecycle-css-animation-expected.txt 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/LayoutTests/inspector/animation/lifecycle-css-animation-expected.txt 2020-06-02 01:12:01 UTC (rev 262404)
@@ -4,7 +4,7 @@
== Running test suite: Animation.Lifecycle
-- Running test case: Animation.Lifecycle.CSSAnimation
PASS: There should not be any animations.
-PASS: Animation created.
+PASS: Animation created 'fade-in'.
PASS: Animation type should be CSS Animation.
startDelay: 100
iterationCount: 2
Modified: trunk/LayoutTests/inspector/animation/lifecycle-css-transition-expected.txt (262403 => 262404)
--- trunk/LayoutTests/inspector/animation/lifecycle-css-transition-expected.txt 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/LayoutTests/inspector/animation/lifecycle-css-transition-expected.txt 2020-06-02 01:12:01 UTC (rev 262404)
@@ -4,7 +4,7 @@
== Running test suite: Animation.Lifecycle
-- Running test case: Animation.Lifecycle.CSSTransition
PASS: There should not be any animations.
-PASS: Animation created.
+PASS: Animation created 'opacity'.
PASS: Animation type should be CSS Transition.
startDelay: 100
iterationCount: 1
Modified: trunk/LayoutTests/inspector/animation/lifecycle-web-animation-expected.txt (262403 => 262404)
--- trunk/LayoutTests/inspector/animation/lifecycle-web-animation-expected.txt 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/LayoutTests/inspector/animation/lifecycle-web-animation-expected.txt 2020-06-02 01:12:01 UTC (rev 262404)
@@ -6,7 +6,7 @@
PASS: There should not be any animations.
Creating animation...
-PASS: Animation created.
+PASS: Animation created 'web-animation-test'.
0: animate - [native code]
1: createAnimation - inspector/animation/resources/lifecycle-utilities.js:7:35
2: Global Code - [program code]
Modified: trunk/LayoutTests/inspector/animation/lifecycle-web-animation.html (262403 => 262404)
--- trunk/LayoutTests/inspector/animation/lifecycle-web-animation.html 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/LayoutTests/inspector/animation/lifecycle-web-animation.html 2020-06-02 01:12:01 UTC (rev 262404)
@@ -31,6 +31,7 @@
},
],
options: {
+ id: "web-animation-test",
delay: 100,
endDelay: 200,
duration: 300,
Added: trunk/LayoutTests/inspector/animation/nameChanged-expected.txt (0 => 262404)
--- trunk/LayoutTests/inspector/animation/nameChanged-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/animation/nameChanged-expected.txt 2020-06-02 01:12:01 UTC (rev 262404)
@@ -0,0 +1,10 @@
+Tests for the Animation.nameChanged event.
+
+
+== Running test suite: Animation.nameChanged
+-- Running test case: Animation.nameChanged.NewString
+PASS: Animation should have the name 'OldName'.
+Changing name...
+
+PASS: Animation should have the name 'NewName'.
+
Added: trunk/LayoutTests/inspector/animation/nameChanged.html (0 => 262404)
--- trunk/LayoutTests/inspector/animation/nameChanged.html (rev 0)
+++ trunk/LayoutTests/inspector/animation/nameChanged.html 2020-06-02 01:12:01 UTC (rev 262404)
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script>
+function load() {
+ window.animation = document.body.animate([], {id: "OldName"});
+
+ runTest();
+}
+
+function test()
+{
+ let suite = InspectorTest.createAsyncSuite("Animation.nameChanged");
+
+ suite.addTestCase({
+ name: "Animation.nameChanged.NewString",
+ description: "Should send the new name to the frontend when `Animation.prototype.set id` is called.",
+ async test() {
+ let animations = Array.from(WI.animationManager.animationCollection);
+ InspectorTest.assert(animations.length === 1, "There should only be one animation.");
+
+ let animation = animations[0];
+ if (!animation) {
+ throw `Missing animation.`;
+ return;
+ }
+
+ InspectorTest.assert(animation.animationType === WI.Animation.Type.WebAnimation, "Animation should be a web animation.");
+
+ InspectorTest.expectEqual(animation.displayName, "OldName", "Animation should have the name 'OldName'.");
+
+ InspectorTest.log("Changing name...\n");
+ await Promise.all([
+ animation.awaitEvent(WI.Animation.Event.NameChanged),
+ InspectorTest.evaluateInPage(`window.animation.id = "NewName"`),
+ ]);
+
+ InspectorTest.expectEqual(animation.displayName, "NewName", "Animation should have the name 'NewName'.");
+ },
+ });
+
+ suite.runTestCasesAndFinish();
+}
+</script>
+</head>
+<body _onload_="load()">
+ <p>Tests for the Animation.nameChanged event.</p>
+</body>
+</html>
Modified: trunk/LayoutTests/inspector/animation/resources/lifecycle-utilities.js (262403 => 262404)
--- trunk/LayoutTests/inspector/animation/resources/lifecycle-utilities.js 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/LayoutTests/inspector/animation/resources/lifecycle-utilities.js 2020-06-02 01:12:01 UTC (rev 262404)
@@ -48,12 +48,18 @@
InspectorTest.AnimationLifecycleUtilities = {};
InspectorTest.AnimationLifecycleUtilities.awaitAnimationCreated = async function(animationType) {
+ let nameChangedPromise = null;
+ if (animationType === WI.Animation.Type.WebAnimation)
+ nameChangedPromise = WI.Animation.awaitEvent(WI.Animation.Event.NameChanged);
+
let animationCollectionItemAddedEvent = await WI.animationManager.animationCollection.awaitEvent(WI.Collection.Event.ItemAdded);
- InspectorTest.pass("Animation created.");
-
let animation = animationCollectionItemAddedEvent.data.item;
+ await nameChangedPromise;
+
+ InspectorTest.pass(`Animation created '${animation.displayName}'.`);
+
for (let i = 0; i < animation.backtrace.length; ++i) {
let callFrame = animation.backtrace[i];
let traceText = ` ${i}: `;
Modified: trunk/Source/_javascript_Core/ChangeLog (262403 => 262404)
--- trunk/Source/_javascript_Core/ChangeLog 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/_javascript_Core/ChangeLog 2020-06-02 01:12:01 UTC (rev 262404)
@@ -1,3 +1,14 @@
+2020-06-01 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Graphics: should use the `id` (name) of the animation if it exists
+ https://bugs.webkit.org/show_bug.cgi?id=212618
+
+ Reviewed by Timothy Hatcher.
+
+ * inspector/protocol/Animation.json:
+ - added an optional `name` property to the `Animation.Animation` type
+ - created a new `Animation.nameChanged` event
+
2020-06-01 Saam Barati <sbar...@apple.com>
Correct misunderstandings on how ThreadSpecific work
Modified: trunk/Source/_javascript_Core/inspector/protocol/Animation.json (262403 => 262404)
--- trunk/Source/_javascript_Core/inspector/protocol/Animation.json 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/_javascript_Core/inspector/protocol/Animation.json 2020-06-02 01:12:01 UTC (rev 262404)
@@ -29,6 +29,7 @@
"type": "object",
"properties": [
{ "name": "animationId", "$ref": "AnimationId" },
+ { "name": "name", "type": "string", "optional": true, "description": "Equal to `Animation.prototype.get id`." },
{ "name": "cssAnimationName", "type": "string", "optional": true, "description": "Equal to the corresponding `animation-name` CSS property. Should not be provided if `transitionProperty` is also provided." },
{ "name": "cssTransitionProperty", "type": "string", "optional": true, "description": "Equal to the corresponding `transition-property` CSS property. Should not be provided if `animationName` is also provided." },
{ "name": "effect", "$ref": "Effect", "optional": true },
@@ -119,6 +120,14 @@
]
},
{
+ "name": "nameChanged",
+ "description": "Dispatched whenever `Animation.prototype.set id` is called.",
+ "parameters": [
+ { "name": "animationId", "$ref": "AnimationId" },
+ { "name": "name", "type": "string", "optional": true, "description": "Equal to `Animation.prototype.get id`." }
+ ]
+ },
+ {
"name": "effectChanged",
"description": "Dispatched whenever the effect of any animation is changed in any way.",
"parameters": [
Modified: trunk/Source/WebCore/ChangeLog (262403 => 262404)
--- trunk/Source/WebCore/ChangeLog 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebCore/ChangeLog 2020-06-02 01:12:01 UTC (rev 262404)
@@ -1,3 +1,30 @@
+2020-06-01 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Graphics: should use the `id` (name) of the animation if it exists
+ https://bugs.webkit.org/show_bug.cgi?id=212618
+
+ Reviewed by Timothy Hatcher.
+
+ Test: inspector/animation/lifecycle-css-animation.html:
+ inspector/animation/lifecycle-css-transition.html:
+ inspector/animation/lifecycle-web-animation.html:
+ inspector/animation/nameChanged.html
+
+ * animation/WebAnimation.h:
+ (WebCore::WebAnimation::setId): Deleted.
+ * animation/WebAnimation.cpp:
+ (WebCore::WebAnimation::setId): Added.
+
+ * inspector/InspectorInstrumentation.h:
+ (WebCore::InspectorInstrumentation::didChangeWebAnimationName): Added.
+ * inspector/InspectorInstrumentation.cpp:
+ (WebCore::InspectorInstrumentation::didChangeWebAnimationNameImpl): Added.
+
+ * inspector/agents/InspectorAnimationAgent.h:
+ * inspector/agents/InspectorAnimationAgent.cpp:
+ (WebCore::InspectorAnimationAgent::didChangeWebAnimationName): Added.
+ (WebCore::InspectorAnimationAgent::bindAnimation):
+
2020-06-01 Andres Gonzalez <andresg...@apple.com>
[WebAccessibilityObjectWrapper subrole] should check for the nullity of the underlying AXCoreObject before dereferencing.
Modified: trunk/Source/WebCore/animation/WebAnimation.cpp (262403 => 262404)
--- trunk/Source/WebCore/animation/WebAnimation.cpp 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebCore/animation/WebAnimation.cpp 2020-06-02 01:12:01 UTC (rev 262404)
@@ -144,6 +144,13 @@
InspectorInstrumentation::didChangeWebAnimationEffectTiming(*this);
}
+void WebAnimation::setId(const String& id)
+{
+ m_id = id;
+
+ InspectorInstrumentation::didChangeWebAnimationName(*this);
+}
+
void WebAnimation::setBindingsEffect(RefPtr<AnimationEffect>&& newEffect)
{
setEffect(WTFMove(newEffect));
Modified: trunk/Source/WebCore/animation/WebAnimation.h (262403 => 262404)
--- trunk/Source/WebCore/animation/WebAnimation.h 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebCore/animation/WebAnimation.h 2020-06-02 01:12:01 UTC (rev 262404)
@@ -63,7 +63,7 @@
virtual bool isCSSTransition() const { return false; }
const String& id() const { return m_id; }
- void setId(const String& id) { m_id = id; }
+ void setId(const String&);
AnimationEffect* bindingsEffect() const { return effect(); }
virtual void setBindingsEffect(RefPtr<AnimationEffect>&&);
Modified: trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp (262403 => 262404)
--- trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp 2020-06-02 01:12:01 UTC (rev 262404)
@@ -1142,6 +1142,12 @@
animationAgent->willApplyKeyframeEffect(target, effect, computedTiming);
}
+void InspectorInstrumentation::didChangeWebAnimationNameImpl(InstrumentingAgents& instrumentingAgents, WebAnimation& animation)
+{
+ if (auto* animationAgent = instrumentingAgents.enabledInspectorAnimationAgent())
+ animationAgent->didChangeWebAnimationName(animation);
+}
+
void InspectorInstrumentation::didSetWebAnimationEffectImpl(InstrumentingAgents& instrumentingAgents, WebAnimation& animation)
{
if (auto* animationAgent = instrumentingAgents.enabledInspectorAnimationAgent())
Modified: trunk/Source/WebCore/inspector/InspectorInstrumentation.h (262403 => 262404)
--- trunk/Source/WebCore/inspector/InspectorInstrumentation.h 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebCore/inspector/InspectorInstrumentation.h 2020-06-02 01:12:01 UTC (rev 262404)
@@ -308,6 +308,7 @@
#endif
static void willApplyKeyframeEffect(Element&, KeyframeEffect&, ComputedEffectTiming);
+ static void didChangeWebAnimationName(WebAnimation&);
static void didSetWebAnimationEffect(WebAnimation&);
static void didChangeWebAnimationEffectTiming(WebAnimation&);
static void didChangeWebAnimationEffectTarget(WebAnimation&);
@@ -514,6 +515,7 @@
#endif
static void willApplyKeyframeEffectImpl(InstrumentingAgents&, Element&, KeyframeEffect&, ComputedEffectTiming);
+ static void didChangeWebAnimationNameImpl(InstrumentingAgents&, WebAnimation&);
static void didSetWebAnimationEffectImpl(InstrumentingAgents&, WebAnimation&);
static void didChangeWebAnimationEffectTimingImpl(InstrumentingAgents&, WebAnimation&);
static void didChangeWebAnimationEffectTargetImpl(InstrumentingAgents&, WebAnimation&);
@@ -1488,6 +1490,13 @@
willApplyKeyframeEffectImpl(*instrumentingAgents, target, effect, computedTiming);
}
+inline void InspectorInstrumentation::didChangeWebAnimationName(WebAnimation& animation)
+{
+ FAST_RETURN_IF_NO_FRONTENDS(void());
+ if (auto* instrumentingAgents = instrumentingAgentsForContext(animation.scriptExecutionContext()))
+ didChangeWebAnimationNameImpl(*instrumentingAgents, animation);
+}
+
inline void InspectorInstrumentation::didSetWebAnimationEffect(WebAnimation& animation)
{
FAST_RETURN_IF_NO_FRONTENDS(void());
Modified: trunk/Source/WebCore/inspector/agents/InspectorAnimationAgent.cpp (262403 => 262404)
--- trunk/Source/WebCore/inspector/agents/InspectorAnimationAgent.cpp 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebCore/inspector/agents/InspectorAnimationAgent.cpp 2020-06-02 01:12:01 UTC (rev 262404)
@@ -434,6 +434,17 @@
m_frontendDispatcher->trackingUpdate(m_environment.executionStopwatch().elapsedTime().seconds(), WTFMove(event));
}
+void InspectorAnimationAgent::didChangeWebAnimationName(WebAnimation& animation)
+{
+ // The `animationId` may be empty if Animation is tracking but not enabled.
+ auto animationId = findAnimationId(animation);
+ if (animationId.isEmpty())
+ return;
+
+ auto name = animation.id();
+ m_frontendDispatcher->nameChanged(animationId, !name.isEmpty() ? &name : nullptr);
+}
+
void InspectorAnimationAgent::didSetWebAnimationEffect(WebAnimation& animation)
{
if (is<DeclarativeAnimation>(animation))
@@ -531,6 +542,10 @@
.setAnimationId(animationId)
.release();
+ auto name = animation.id();
+ if (!name.isEmpty())
+ animationPayload->setName(name);
+
if (is<CSSAnimation>(animation))
animationPayload->setCssAnimationName(downcast<CSSAnimation>(animation).animationName());
else if (is<CSSTransition>(animation))
Modified: trunk/Source/WebCore/inspector/agents/InspectorAnimationAgent.h (262403 => 262404)
--- trunk/Source/WebCore/inspector/agents/InspectorAnimationAgent.h 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebCore/inspector/agents/InspectorAnimationAgent.h 2020-06-02 01:12:01 UTC (rev 262404)
@@ -67,6 +67,7 @@
// InspectorInstrumentation
void willApplyKeyframeEffect(Element&, KeyframeEffect&, ComputedEffectTiming);
+ void didChangeWebAnimationName(WebAnimation&);
void didSetWebAnimationEffect(WebAnimation&);
void didChangeWebAnimationEffectTiming(WebAnimation&);
void didChangeWebAnimationEffectTarget(WebAnimation&);
Modified: trunk/Source/WebInspectorUI/ChangeLog (262403 => 262404)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-06-02 01:12:01 UTC (rev 262404)
@@ -1,3 +1,49 @@
+2020-06-01 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Graphics: should use the `id` (name) of the animation if it exists
+ https://bugs.webkit.org/show_bug.cgi?id=212618
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Protocol/AnimationObserver.js:
+ (WI.AnimationObserver.prototype.nameChanged): Added.
+ * UserInterface/Controllers/AnimationManager.js:
+ (WI.AnimationManager.prototype.nameChanged): Added.
+
+ * UserInterface/Models/Animation.js:
+ (WI.Animation):
+ (WI.Animation.fromPayload):
+ (WI.Animation.prototype.get name): Added.
+ (WI.Animation.prototype.get cssAnimationName): Added.
+ (WI.Animation.prototype.get cssTransitionProperty): Added.
+ (WI.Animation.prototype.get displayName):
+ (WI.Animation.prototype.nameChanged): Added.
+
+ * UserInterface/Views/AnimationContentView.js:
+ (WI.AnimationContentView.prototype.initialLayout):
+ (WI.AnimationContentView.prototype.layout):
+ (WI.AnimationContentView.prototype.attached):
+ (WI.AnimationContentView.prototype.detached):
+ (WI.AnimationContentView.prototype._refreshTitle): Added.
+ (WI.AnimationContentView.prototype._handleNameChanged): Added.
+ * UserInterface/Views/AnimationContentView.css:
+ (.content-view.animation):
+ (.content-view.animation > header > .titles):
+ (.content-view.animation > header > .titles > .title > code): Added.
+ Show the `animation-name`/`transition-property`/count in parenthesis after the `id` (only if
+ it has been specified).
+ Drive-by: ensure that the `<header>` doesn't overflow.
+
+ * UserInterface/Views/AnimationDetailsSidebarPanel.js:
+ (WI.AnimationDetailsSidebarPanel.prototype.set animation):
+ (WI.AnimationDetailsSidebarPanel.prototype.initialLayout):
+ (WI.AnimationDetailsSidebarPanel.prototype._refreshIdentitySection):
+ (WI.AnimationDetailsSidebarPanel.prototype._handleAnimationNameChanged): Added.
+ Only show the "Identifier" row if an `id` is actually set. If there is a CSS
+ `animation-name`/`transition-property`, show it in a separate row.
+
+ * Localizations/en.lproj/localizedStrings.js:
+
2020-06-01 Nikita Vasilyev <nvasil...@apple.com>
Web Inspector: Timelines: Edit button has wrong outline
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (262403 => 262404)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2020-06-02 01:12:01 UTC (rev 262404)
@@ -70,6 +70,7 @@
localizedStrings["%s total"] = "%s total";
localizedStrings["%s transferred"] = "%s transferred";
localizedStrings["%s:"] = "%s:";
+localizedStrings["(%s)"] = "(%s)";
localizedStrings["(Action %s)"] = "(Action %s)";
localizedStrings["(Disk)"] = "(Disk)";
localizedStrings["(Index)"] = "(Index)";
@@ -661,6 +662,7 @@
localizedStrings["IP Address"] = "IP Address";
localizedStrings["ITML Context"] = "ITML Context";
localizedStrings["ITP Debug Mode"] = "ITP Debug Mode";
+localizedStrings["Identifier"] = "Identifier";
localizedStrings["Identity"] = "Identity";
localizedStrings["Idle"] = "Idle";
localizedStrings["If the URL of any script matches one of the regular _expression_ patterns below, any pauses that would have happened in that script will be deferred until execution has continued to outside of that script."] = "If the URL of any script matches one of the regular _expression_ patterns below, any pauses that would have happened in that script will be deferred until execution has continued to outside of that script.";
@@ -943,6 +945,7 @@
localizedStrings["Processing Instruction"] = "Processing Instruction";
localizedStrings["Program %d"] = "Program %d";
localizedStrings["Properties"] = "Properties";
+localizedStrings["Property"] = "Property";
localizedStrings["Protocol"] = "Protocol";
localizedStrings["Pseudo-Element"] = "Pseudo-Element";
localizedStrings["Query Parameters"] = "Query Parameters";
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/AnimationManager.js (262403 => 262404)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/AnimationManager.js 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/AnimationManager.js 2020-06-02 01:12:01 UTC (rev 262404)
@@ -107,6 +107,16 @@
this._animationIdMap.set(animation.animationId, animation);
}
+ nameChanged(animationId, name)
+ {
+ let animation = this._animationIdMap.get(animationId);
+ console.assert(animation);
+ if (!animation)
+ return;
+
+ animation.nameChanged(name);
+ }
+
effectChanged(animationId, effect)
{
let animation = this._animationIdMap.get(animationId);
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Animation.js (262403 => 262404)
--- trunk/Source/WebInspectorUI/UserInterface/Models/Animation.js 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Animation.js 2020-06-02 01:12:01 UTC (rev 262404)
@@ -25,7 +25,7 @@
WI.Animation = class Animation extends WI.Object
{
- constructor(animationId, {cssAnimationName, cssTransitionProperty, effect, backtrace} = {})
+ constructor(animationId, {name, cssAnimationName, cssTransitionProperty, effect, backtrace} = {})
{
super();
@@ -34,6 +34,7 @@
this._animationId = animationId;
+ this._name = name || null;
this._cssAnimationName = cssAnimationName || null;
this._cssTransitionProperty = cssTransitionProperty || null;
this._updateEffect(effect);
@@ -48,6 +49,7 @@
static fromPayload(payload)
{
return new WI.Animation(payload.animationId, {
+ name: payload.name,
cssAnimationName: payload.cssAnimationName,
cssTransitionProperty: payload.cssTransitionProperty,
effect: payload.effect,
@@ -114,6 +116,9 @@
// Public
get animationId() { return this._animationId; }
+ get name() { return this._name; }
+ get cssAnimationName() { return this._cssAnimationName; }
+ get cssTransitionProperty() { return this._cssTransitionProperty; }
get backtrace() { return this._backtrace; }
get animationType()
@@ -172,6 +177,9 @@
get displayName()
{
+ if (this._name)
+ return this._name;
+
if (this._cssAnimationName)
return this._cssAnimationName;
@@ -212,6 +220,13 @@
// AnimationManager
+ nameChanged(name)
+ {
+ this._name = name || null;
+
+ this.dispatchEventToListeners(WI.Animation.Event.NameChanged);
+ }
+
effectChanged(effect)
{
this._updateEffect(effect);
@@ -271,6 +286,7 @@
};
WI.Animation.Event = {
+ NameChanged: "animation-name-changed",
EffectChanged: "animation-effect-changed",
TargetChanged: "animation-target-changed",
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/AnimationObserver.js (262403 => 262404)
--- trunk/Source/WebInspectorUI/UserInterface/Protocol/AnimationObserver.js 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/AnimationObserver.js 2020-06-02 01:12:01 UTC (rev 262404)
@@ -32,6 +32,11 @@
WI.animationManager.animationCreated(animation);
}
+ nameChanged(animationId, name)
+ {
+ WI.animationManager.nameChanged(animationId, name);
+ }
+
effectChanged(animationId, effect)
{
WI.animationManager.effectChanged(animationId, effect);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AnimationContentView.css (262403 => 262404)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AnimationContentView.css 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AnimationContentView.css 2020-06-02 01:12:01 UTC (rev 262404)
@@ -25,7 +25,7 @@
.content-view.animation {
position: relative;
- width: 100%;
+ width: calc(100% - 8px);
margin: 4px;
background-color: var(--background-color-content);
border: 1px solid var(--border-color);
@@ -44,6 +44,8 @@
}
.content-view.animation > header > .titles {
+ overflow: hidden;
+ text-overflow: ellipsis;
white-space: nowrap;
}
@@ -51,6 +53,11 @@
color: var(--text-color-gray-dark);
}
+.content-view.animation > header > .titles > .title > code {
+ font-family: Menlo, monospace;
+ font-size: 11px;
+}
+
.content-view.animation > header > .titles > .subtitle {
color: var(--text-color-gray-medium);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AnimationContentView.js (262403 => 262404)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AnimationContentView.js 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AnimationContentView.js 2020-06-02 01:12:01 UTC (rev 262404)
@@ -62,9 +62,8 @@
let titlesContainer = headerElement.appendChild(document.createElement("div"));
titlesContainer.className = "titles";
- let titleElement = titlesContainer.appendChild(document.createElement("span"));
- titleElement.className = "title";
- titleElement.textContent = this.representedObject.displayName;
+ this._titleElement = titlesContainer.appendChild(document.createElement("span"));
+ this._titleElement.className = "title";
this._subtitleElement = titlesContainer.appendChild(document.createElement("span"));
this._subtitleElement.className = "subtitle";
@@ -87,6 +86,7 @@
{
super.layout();
+ this._refreshTitle();
this._refreshSubtitle();
this._refreshPreview();
}
@@ -102,6 +102,7 @@
{
super.attached();
+ this.representedObject.addEventListener(WI.Animation.Event.NameChanged, this._handleNameChanged, this);
this.representedObject.addEventListener(WI.Animation.Event.EffectChanged, this._handleEffectChanged, this);
this.representedObject.addEventListener(WI.Animation.Event.TargetChanged, this._handleTargetChanged, this);
}
@@ -110,6 +111,7 @@
{
this.representedObject.removeEventListener(WI.Animation.Event.TargetChanged, this._handleTargetChanged, this);
this.representedObject.removeEventListener(WI.Animation.Event.EffectChanged, this._handleEffectChanged, this);
+ this.representedObject.removeEventListener(WI.Animation.Event.NameChanged, this._handleNameChanged, this);
super.detached();
}
@@ -116,6 +118,48 @@
// Private
+ _refreshTitle()
+ {
+ this._titleElement.removeChildren();
+
+ let displayName = this.representedObject.displayName;
+
+ let showIdentifierIfDifferent = (cssName) => {
+ let formatString = "";
+ let substitutions = [];
+
+ if (cssName === displayName)
+ formatString = WI.UIString("(%s)");
+ else {
+ formatString = WI.UIString("%s (%s)");
+ substitutions.push(displayName);
+ }
+
+ let cssNameWrapper = document.createElement("code");
+ cssNameWrapper.textContent = cssName;
+ substitutions.push(cssNameWrapper);
+
+ String.format(formatString, substitutions, String.standardFormatters, this._titleElement, function(a, b) {
+ a.append(b);
+ return a;
+ });
+ };
+
+ switch (this.representedObject.animationType) {
+ case WI.Animation.Type.WebAnimation:
+ this._titleElement.textContent = this.representedObject.name || WI.UIString("(%s)").format(displayName);
+ break;
+
+ case WI.Animation.Type.CSSAnimation:
+ showIdentifierIfDifferent(this.representedObject.cssAnimationName);
+ break;
+
+ case WI.Animation.Type.CSSTransition:
+ showIdentifierIfDifferent(this.representedObject.cssTransitionProperty);
+ break;
+ }
+ }
+
_refreshSubtitle()
{
this.representedObject.requestEffectTarget((domNode) => {
@@ -271,6 +315,14 @@
}
}
+ _handleNameChanged(event)
+ {
+ if (!this.didInitialLayout)
+ return;
+
+ this._refreshTitle();
+ }
+
_handleEffectChanged(event)
{
this._refreshPreview();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.js (262403 => 262404)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.js 2020-06-02 01:09:08 UTC (rev 262403)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.js 2020-06-02 01:12:01 UTC (rev 262404)
@@ -59,11 +59,13 @@
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);
}
@@ -77,12 +79,14 @@
{
super.initialLayout();
- this._nameRow = new WI.DetailsSectionSimpleRow(WI.UIString("Name"));
+ 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._nameRow, this._typeRow, this._targetRow])]);
+ 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"));
@@ -150,9 +154,30 @@
_refreshIdentitySection()
{
- this._nameRow.value = this._animation.displayName;
- this._typeRow.value = WI.Animation.displayNameForAnimationType(this._animation.animationType);
+ 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((domNode) => {
this._targetRow.value = domNode ? WI.linkifyNodeReference(domNode) : null;
@@ -248,6 +273,11 @@
this._backtraceSection.element.hidden = !callFrames.length;
}
+ _handleAnimationNameChanged(event)
+ {
+ this._refreshIdentitySection();
+ }
+
_handleAnimationEffectChanged(event)
{
this._refreshEffectSection();
