Devtools Animations: Basic animation inspection & control in Styles pane

Source/core/inspector/InspectorCSSAgent.cpp

Index: Source/core/inspector/InspectorCSSAgent.cpp
diff --git a/Source/core/inspector/InspectorCSSAgent.cpp b/Source/core/inspector/InspectorCSSAgent.cpp
index 2d18ad58ca26b5b471aa29937c595664a74622c3..f42b6df6084b050dff5eee54de36d2beef6d3bc5 100644
--- a/Source/core/inspector/InspectorCSSAgent.cpp
+++ b/Source/core/inspector/InspectorCSSAgent.cpp
@@ -30,6 +30,12 @@
 #include "core/CSSPropertyNames.h"
 #include "core/InspectorTypeBuilder.h"
 #include "core/StylePropertyShorthand.h"
+#include "core/animation/Animation.h"
+#include "core/animation/AnimationEffect.h"
+#include "core/animation/AnimationNode.h"
+#include "core/animation/AnimationPlayer.h"
+#include "core/animation/ElementAnimation.h"
+#include "core/animation/KeyframeEffectModel.h"
 #include "core/css/CSSComputedStyleDeclaration.h"
 #include "core/css/CSSDefaultStyleSheets.h"
 #include "core/css/CSSImportRule.h"
@@ -66,6 +72,7 @@
 #include "core/rendering/RenderObjectInlines.h"
 #include "core/rendering/RenderText.h"
 #include "core/rendering/RenderTextFragment.h"
+#include "platform/Decimal.h"
 #include "platform/fonts/Font.h"
 #include "platform/fonts/GlyphBuffer.h"
 #include "platform/fonts/SimpleShaper.h"
@@ -832,6 +839,58 @@ void InspectorCSSAgent::setStyleSheetText(ErrorString* errorString, const String
     *errorString = InspectorDOMAgent::toErrorString(exceptionState);
 }
 
+void InspectorCSSAgent::getKeyframeStylesForNode(ErrorString* errorString, const String& id, RefPtr<TypeBuilder::Array<TypeBuilder::CSS::CSSRule> >& keyframeStyles)
+{
+    AnimationPlayer* player = m_domAgent->assertAnimationPlayer(errorString, id);
+    if (!player)
+        return;
+
+    ASSERT(player->source());

[vsevik, 2014/10/06 16:00:54]

Why do you ASSERT that source is not null? Looks like it is possible to create
an animation player without source, so this ASSERT is not correct. I think what
you want to do here is to check that all this conditions are held and return
protocol error otherwise, but you should not crash otherwise.

[samli, 2014/10/07 05:25:43]

Done.

+    // FIXME: Needs to consider AnimationGroup once added.
+    ASSERT(player->source()->isAnimation());
+    const Animation& animation = *toAnimation(player->source());
+    // FIXME: Needs to consider custom effects once added.
+    ASSERT(animation.effect()->isKeyframeEffectModel());
+    const KeyframeEffectModelBase& effect = *toKeyframeEffectModelBase(animation.effect());
+    WillBeHeapVector<RefPtrWillBeMember<Keyframe> > keyframes = KeyframeEffectModelBase::normalizedKeyframes(effect.getFrames());
+    keyframeStyles = TypeBuilder::Array<TypeBuilder::CSS::CSSRule>::create();

[vsevik, 2014/10/06 16:00:54]

This seems wrong. Not only you are abusing CSSRule for storing keyframes rules,
you are also losing all the source data information (properties ranges in the
original css file) while doing this.
I think the right way would be to track source data for keyframes as part of our
css support. In this case to implement this method you will need to
1. Get a css animation name by player id (you could use a map in CSSAnimation
for that)
2. Extract CSSKeyframesRule using code similar to
CSSAnimations::matchScopedKeyframesRule

This would be in line with the way we support other CSS related features.
However this seems quite complex, so I'd suggest that you moved
keyframes-related code out of this patch and implement keyframes inspection
support separately.

[samli, 2014/10/07 05:25:43]

These keyframe styles are only shown for JS instantiated animations (via the Web
Animations API). As a result, these animations don't have source data
information. Web Anim uses StringKeyframe while CSS Animations uses
AnimatableValueKeyframe, hence the early exit below. Implementing it the way you
suggest would only work for CSS Animations and not Web Animations so I would
prefer to leave this in this patch and implement CSS Animation keyframes
separately since they are independent.

+
+    for (WillBeHeapVector<RefPtrWillBeMember<Keyframe> >::const_iterator i = keyframes.begin(); i != keyframes.end(); ++i) {
+        if (!i->get()->isStringKeyframe())
+            continue;
+
+        // Convert keyframe into CSSStyleRule
+        const StringKeyframe& stringKeyframe = *toStringKeyframe(i->get());
+        RefPtr<StyleRule> styleRule = StyleRule::create();
+        styleRule->setProperties(stringKeyframe.propertySet());
+        if (!m_inspectorUserAgentStyleSheet)
+            m_inspectorUserAgentStyleSheet = CSSStyleSheet::create(CSSDefaultStyleSheets::instance().defaultStyleSheet());
+        RefPtr<CSSStyleRule> cssStyleRule = CSSStyleRule::create(styleRule.get(), m_inspectorUserAgentStyleSheet.get());
+
+        // Convert offset
+        Decimal decimal = Decimal::fromDouble(stringKeyframe.offset() * 100);
+        String offset = decimal.toString();
+        offset.append("%");
+
+        // Cannot set selector text directly since keyframe offset is not a valid
+        // selector and will be discarded. Instead, construct CSSRule from scratch
+        RefPtr<TypeBuilder::Array<TypeBuilder::CSS::Selector> > selectors = TypeBuilder::Array<TypeBuilder::CSS::Selector>::create();
+        selectors->addItem(TypeBuilder::CSS::Selector::create().setValue(offset).release());
+        RefPtr<TypeBuilder::CSS::SelectorList> selectorList = TypeBuilder::CSS::SelectorList::create()
+            .setSelectors(selectors)
+            .setText("")
+            .release();
+
+        RefPtr<TypeBuilder::CSS::CSSRule> cssRule = TypeBuilder::CSS::CSSRule::create()
+            .setSelectorList(selectorList)
+            .setOrigin(TypeBuilder::CSS::StyleSheetOrigin::Inspector)
+            .setStyle(bindStyleSheet(cssStyleRule->parentStyleSheet())->buildObjectForStyle(cssStyleRule->style()))
+            .release();
+
+        keyframeStyles->addItem(cssRule);
+    }
+}
+
 static bool extractRangeComponent(ErrorString* errorString, const RefPtr<JSONObject>& range, const String& component, unsigned& result)
 {
     int parsedValue = 0;