Devtools Animations: Basic animation inspection & control in Styles pane

Source/core/inspector/InspectorCSSAgent.cpp

 /*
  * Copyright (C) 2010, Google 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
@@ skipping 12 matching lines @@
  */
 
 #include "config.h"
 #include "core/inspector/InspectorCSSAgent.h"
 
 #include "bindings/core/v8/ExceptionState.h"
 #include "bindings/core/v8/ExceptionStatePlaceholder.h"
 #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"
 #include "core/css/CSSMediaRule.h"
 #include "core/css/CSSRule.h"
 #include "core/css/CSSRuleList.h"
 #include "core/css/CSSStyleRule.h"
 #include "core/css/CSSStyleSheet.h"
 #include "core/css/MediaList.h"
 #include "core/css/MediaQuery.h"
@@ skipping 16 matching lines @@
 #include "core/inspector/InspectorResourceContentLoader.h"
 #include "core/inspector/InspectorState.h"
 #include "core/inspector/InstrumentingAgents.h"
 #include "core/loader/DocumentLoader.h"
 #include "core/page/Page.h"
 #include "core/rendering/InlineTextBox.h"
 #include "core/rendering/RenderObject.h"
 #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"
 #include "platform/text/TextRun.h"
 #include "wtf/CurrentTime.h"
 #include "wtf/text/CString.h"
 #include "wtf/text/StringConcatenate.h"
 
 namespace CSSAgentState {
 static const char cssAgentEnabled[] = "cssAgentEnabled";
@@ skipping 746 matching lines @@
     if (!inspectorStyleSheet) {
         *errorString = "Style sheet with id " + styleSheetId + " not found";
         return;
     }
 
     TrackExceptionState exceptionState;
     m_domAgent->history()->perform(adoptRefWillBeNoop(new SetStyleSheetTextAction(inspectorStyleSheet, text)), exceptionState);
     *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;
     if (!range->getNumber(component, &parsedValue) || parsedValue < 0) {
         *errorString = "range." + component + " must be a non-negative integer";
         return false;
     }
     result = parsedValue;
     return true;
 }
@@ skipping 622 matching lines @@
     visitor->trace(m_invalidatedDocuments);
     visitor->trace(m_nodeToInspectorStyleSheet);
     visitor->trace(m_documentToViaInspectorStyleSheet);
 #endif
     visitor->trace(m_inspectorUserAgentStyleSheet);
     InspectorBaseAgent::trace(visitor);
 }
 
 } // namespace blink