commit 73fef1e0cc8cc4d7c57feb629c8c86281a66cfca
author graouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc> Wed Jan 26 17:41:07 2022 +0000
committer graouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc> Wed Jan 26 17:41:07 2022 +0000
tree 79520c797a69a4fb39e61db8f6877ebd4c3a3b49
parent 5526c0b1aad6c8325cc20301f46bb77dd7f909cf

[Web Inspector] Graphics tab should display pseudo-elements for more than ::before and ::after
https://bugs.webkit.org/show_bug.cgi?id=235234
<rdar://87766777>

Reviewed by Devin Rousso.

Source/JavaScriptCore:

Add a new `DOM.Styleable` type to be used as the parameter type for `requestEffectTarget()` callbacks.

* inspector/protocol/Animation.json:
* inspector/protocol/DOM.json:

Source/WebCore:

Until now, we would pass the result of KeyframeEffect::targetElementOrPseudoElement() to
InspectorAnimationAgent::willApplyKeyframeEffect(). This meant that the inspector would only
be told of an animation target as an Element or a PseudoElement but not as an Element / PseudoId
pair, thus only allowing ::before and ::after to be represented since only those pseudo-elements
create a PseudoElement.

We now pass a Styleable, which encapsulate an Element / PseudoId pair, to
InspectorAnimationAgent::willApplyKeyframeEffect(). Additionally, the Styleable target is read from
the effect for callbacks provided to requestEffectTarget().

Sadly, we still rely on PseudoElement, but this patch at least removes all use of PseudoElement
from KeyframeEffect and pushes it down to InspectorDOMAgent with a new static method
elementToPushForStyleable() which the new pushStyleableElementToFrontend() and pushStyleablePathToFrontend()
methods use to turn the Styleable to an Element or PseudoElement.

In the future, we would need to further remove PseudoElement from Web Inspector and expose something
similar to Styleable throughout the codebase, or find some other way to encapsulate an Element / PseudoId
pair.

* animation/KeyframeEffect.cpp:
(WebCore::KeyframeEffect::apply):
(WebCore::KeyframeEffect::targetElementOrPseudoElement const): Deleted.
* animation/KeyframeEffect.h:
(WebCore::KeyframeEffect::target const):
* inspector/InspectorInstrumentation.cpp:
(WebCore::InspectorInstrumentation::willApplyKeyframeEffectImpl):
* inspector/InspectorInstrumentation.h:
(WebCore::InspectorInstrumentation::willApplyKeyframeEffect):
* inspector/agents/InspectorAnimationAgent.cpp:
(WebCore::InspectorAnimationAgent::requestEffectTarget):
(WebCore::InspectorAnimationAgent::willApplyKeyframeEffect):
* inspector/agents/InspectorAnimationAgent.h:
* inspector/agents/InspectorCSSAgent.cpp:
(WebCore::InspectorCSSAgent::protocolValueForPseudoId):
(WebCore::protocolValueForPseudoId): Deleted.
* inspector/agents/InspectorCSSAgent.h:
* inspector/agents/InspectorDOMAgent.cpp:
(WebCore::elementToPushForStyleable):
(WebCore::InspectorDOMAgent::pushStyleableElementToFrontend):
(WebCore::InspectorDOMAgent::pushStyleablePathToFrontend):
* inspector/agents/InspectorDOMAgent.h:

Source/WebInspectorUI:

Add a new `DOMStyleable` model class to match the new `DOM.Styleable` protocol type.

When calling Animation.requestEffectTarget(), we now use this new DOMStyleable class
to display pseudo-elements other than ::before or ::after in the Graphics tab.

* UserInterface/Base/DOMUtilities.js:
(WI.linkifyStyleable):
* UserInterface/Main.html:
* UserInterface/Models/Animation.js:
(WI.Animation.prototype.requestEffectTarget):
* UserInterface/Models/DOMStyleable.js: Added.
(WI.DOMStyleable.prototype.fromPayload):
(WI.DOMStyleable.prototype.get node):
(WI.DOMStyleable.prototype.get pseudoId):
(WI.DOMStyleable.prototype.get displayName):
(WI.DOMStyleable):
* UserInterface/Test.html:
* UserInterface/Views/AnimationCollectionContentView.js:
(WI.AnimationCollectionContentView.prototype._handleContentViewMouseEnter):
* UserInterface/Views/AnimationContentView.js:
(WI.AnimationContentView.prototype._refreshSubtitle):
* UserInterface/Views/AnimationDetailsSidebarPanel.js:
(WI.AnimationDetailsSidebarPanel.prototype._refreshIdentitySection):

LayoutTests:

Check that requestEffectTarget() returns the correct Styleable by checking whether it's defined
or null, and checking its `node` and `pseudoId` members.

* inspector/animation/targetChanged-expected.txt:
* inspector/animation/targetChanged.html:


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@288623 268f45cc-cd09-0410-ab3c-d52691b4dbfc