Changeset 288623 in webkit


Ignore:
Timestamp:
Jan 26, 2022 9:41:07 AM (6 months ago)
Author:
graouts@webkit.org
Message:

[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:
Location:
trunk
Files:
1 added
25 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r288622 r288623  
     12022-01-26  Antoine Quint  <graouts@webkit.org>
     2
     3        [Web Inspector] Graphics tab should display pseudo-elements for more than ::before and ::after
     4        https://bugs.webkit.org/show_bug.cgi?id=235234
     5        <rdar://87766777>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Check that requestEffectTarget() returns the correct Styleable by checking whether it's defined
     10        or null, and checking its `node` and `pseudoId` members.
     11
     12        * inspector/animation/targetChanged-expected.txt:
     13        * inspector/animation/targetChanged.html:
     14
    1152022-01-26  J Pascoe  <j_pascoe@apple.com>
    216

  • trunk/LayoutTests/inspector/animation/targetChanged-expected.txt

    r255396 r288623  
    44== Running test suite: Animation.targetChanged
    55-- Running test case: Animation.targetChanged.NewTarget
    6 PASS: Animation should have a target.
     6PASS: Animation effect should have a target element.
     7PASS: Animation effect should not have a target pseudo-element.
    78Changing target...
    89
    9 PASS: Animation should have a target.
    10 PASS: Animation effect should have changed.
     10PASS: Animation effect should have a target element.
     11PASS: Animation effect should not have a target pseudo-element.
     12PASS: Animation effect target should have changed.
     13PASS: Animation effect target element should have changed.
    1114
    1215-- Running test case: Animation.targetChanged.NullTarget
    13 PASS: Animation should have a target.
     16PASS: Animation effect should have a target element.
     17PASS: Animation effect should not have a target pseudo-element.
    1418Changing target...
    1519
    16 PASS: Animation should not have a target.
    17 PASS: Animation effect should have changed.
     20PASS: Animation effect should not have a target element.
     21PASS: Animation effect target should have changed.
    1822
     23-- Running test case: Animation.targetChanged.NewTargetWithPseudoId
     24PASS: Animation effect should not have a target.
     25Changing target...
     26
     27PASS: Animation effect should have a target element.
     28PASS: Animation effect should not have a target pseudo-element.
     29Changing target again...
     30
     31PASS: Animation effect should have a target element.
     32PASS: Animation effect should have a target pseudo-element.
     33PASS: Animation effect target should have changed.
     34PASS: Animation effect target element should not have changed.
     35

  • trunk/LayoutTests/inspector/animation/targetChanged.html

    r255396 r288623  
    3030
    3131            let [oldTarget] = await promisify((callback) => { animation.requestEffectTarget(callback); });
    32             InspectorTest.expectThat(oldTarget instanceof WI.DOMNode, "Animation should have a target.");
     32            InspectorTest.expectThat(oldTarget.node instanceof WI.DOMNode, "Animation effect should have a target element.");
     33            InspectorTest.expectNull(oldTarget.pseudoId, "Animation effect should not have a target pseudo-element.");
    3334
    3435            InspectorTest.log("Changing target...\n");
    … …  
    3940
    4041            let [newTarget] = await promisify((callback) => { animation.requestEffectTarget(callback); });
    41             InspectorTest.expectThat(newTarget instanceof WI.DOMNode, "Animation should have a target.");
     42            InspectorTest.expectThat(newTarget.node instanceof WI.DOMNode, "Animation effect should have a target element.");
     43            InspectorTest.expectNull(newTarget.pseudoId, "Animation effect should not have a target pseudo-element.");
    4244
    43             InspectorTest.expectNotEqual(newTarget, oldTarget, "Animation effect should have changed.");
     45            InspectorTest.expectNotEqual(newTarget, oldTarget, "Animation effect target should have changed.");
     46            InspectorTest.expectNotEqual(newTarget.node, oldTarget.node, "Animation effect target element should have changed.");
    4447        },
    4548    });
    … …  
    6164
    6265            let [oldTarget] = await promisify((callback) => { animation.requestEffectTarget(callback); });
    63             InspectorTest.expectThat(oldTarget instanceof WI.DOMNode, "Animation should have a target.");
     66            InspectorTest.expectThat(oldTarget.node instanceof WI.DOMNode, "Animation effect should have a target element.");
     67            InspectorTest.expectNull(oldTarget.pseudoId, "Animation effect should not have a target pseudo-element.");
    6468
    6569            InspectorTest.log("Changing target...\n");
    … …  
    7074
    7175            let [newTarget] = await promisify((callback) => { animation.requestEffectTarget(callback); });
    72             InspectorTest.expectNull(newTarget, "Animation should not have a target.");
     76            InspectorTest.expectNull(newTarget, "Animation effect should not have a target element.");
    7377
    74             InspectorTest.expectNotEqual(newTarget, oldTarget, "Animation effect should have changed.");
     78            InspectorTest.expectNotEqual(newTarget, oldTarget, "Animation effect target should have changed.");
     79        },
     80    });
     81
     82    suite.addTestCase({
     83        name: "Animation.targetChanged.NewTargetWithPseudoId",
     84        description: "Should return a valid object for the given animation identifier.",
     85        async test() {
     86            let animations = Array.from(WI.animationManager.animationCollection);
     87            InspectorTest.assert(animations.length === 1, "There should only be one animation.");
     88
     89            let animation = animations[0];
     90            if (!animation) {
     91                throw `Missing animation.`;
     92                return;
     93            }
     94
     95            InspectorTest.assert(animation.animationType === WI.Animation.Type.WebAnimation, "Animation should be a web animation.");
     96
     97            let [oldTarget] = await promisify((callback) => { animation.requestEffectTarget(callback); });
     98            InspectorTest.expectNull(oldTarget, "Animation effect should not have a target.");
     99
     100            InspectorTest.log("Changing target...\n");
     101            await Promise.all([
     102                animation.awaitEvent(WI.Animation.Event.TargetChanged),
     103                InspectorTest.evaluateInPage(`window.animation.effect.target = document.createElement("div")`),
     104            ]);
     105
     106            let [newTarget] = await promisify((callback) => { animation.requestEffectTarget(callback); });
     107            InspectorTest.expectThat(newTarget.node instanceof WI.DOMNode, "Animation effect should have a target element.");
     108            InspectorTest.expectNull(newTarget.pseudoId, "Animation effect should not have a target pseudo-element.");
     109
     110            InspectorTest.log("Changing target again...\n");
     111            await Promise.all([
     112                animation.awaitEvent(WI.Animation.Event.TargetChanged),
     113                InspectorTest.evaluateInPage(`window.animation.effect.pseudoElement = "::before"`),
     114            ]);
     115
     116            let [newestTarget] = await promisify((callback) => { animation.requestEffectTarget(callback); });
     117            InspectorTest.expectThat(newestTarget.node instanceof WI.DOMNode, "Animation effect should have a target element.");
     118            InspectorTest.expectEqual(newestTarget.pseudoId, "before", "Animation effect should have a target pseudo-element.");
     119
     120            InspectorTest.expectNotEqual(newTarget, newestTarget, "Animation effect target should have changed.");
     121            InspectorTest.expectEqual(newTarget.node, newestTarget.node, "Animation effect target element should not have changed.");
    75122        },
    76123    });

  • trunk/Source/JavaScriptCore/ChangeLog

    r288612 r288623  
     12022-01-26  Antoine Quint  <graouts@webkit.org>
     2
     3        [Web Inspector] Graphics tab should display pseudo-elements for more than ::before and ::after
     4        https://bugs.webkit.org/show_bug.cgi?id=235234
     5        <rdar://87766777>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Add a new `DOM.Styleable` type to be used as the parameter type for `requestEffectTarget()` callbacks.
     10
     11        * inspector/protocol/Animation.json:
     12        * inspector/protocol/DOM.json:
     13
    1142022-01-26  Yusuke Suzuki  <ysuzuki@apple.com>
    215

  • trunk/Source/JavaScriptCore/inspector/protocol/Animation.json

    r263400 r288623  
    8989            ],
    9090            "returns": [
    91                 { "name": "nodeId", "$ref": "DOM.NodeId" }
     91                { "name": "nodeId", "$ref": "DOM.Styleable" }
    9292            ]
    9393        },

  • trunk/Source/JavaScriptCore/inspector/protocol/DOM.json

    r278785 r288623  
    169169                { "name": "marginColor", "$ref": "RGBAColor", "optional": true, "description": "The margin highlight fill color (default: transparent)." }
    170170            ]
     171        },
     172        {
     173            "id": "Styleable",
     174            "type": "object",
     175            "properties": [
     176                { "name": "nodeId", "$ref": "NodeId" },
     177                { "name": "pseudoId", "$ref": "CSS.PseudoId", "optional": true }
     178            ],
     179            "description": "An object referencing a node and a pseudo-element, primarily used to identify an animation effect target."
    171180        }
    172181    ],

  • trunk/Source/WebCore/ChangeLog

    r288622 r288623  
     12022-01-26  Antoine Quint  <graouts@webkit.org>
     2
     3        [Web Inspector] Graphics tab should display pseudo-elements for more than ::before and ::after
     4        https://bugs.webkit.org/show_bug.cgi?id=235234
     5        <rdar://87766777>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Until now, we would pass the result of KeyframeEffect::targetElementOrPseudoElement() to
     10        InspectorAnimationAgent::willApplyKeyframeEffect(). This meant that the inspector would only
     11        be told of an animation target as an Element or a PseudoElement but not as an Element / PseudoId
     12        pair, thus only allowing ::before and ::after to be represented since only those pseudo-elements
     13        create a PseudoElement.
     14
     15        We now pass a Styleable, which encapsulate an Element / PseudoId pair, to
     16        InspectorAnimationAgent::willApplyKeyframeEffect(). Additionally, the Styleable target is read from
     17        the effect for callbacks provided to requestEffectTarget().
     18
     19        Sadly, we still rely on PseudoElement, but this patch at least removes all use of PseudoElement
     20        from KeyframeEffect and pushes it down to InspectorDOMAgent with a new static method
     21        elementToPushForStyleable() which the new pushStyleableElementToFrontend() and pushStyleablePathToFrontend()
     22        methods use to turn the Styleable to an Element or PseudoElement.
     23
     24        In the future, we would need to further remove PseudoElement from Web Inspector and expose something
     25        similar to Styleable throughout the codebase, or find some other way to encapsulate an Element / PseudoId
     26        pair.
     27
     28        * animation/KeyframeEffect.cpp:
     29        (WebCore::KeyframeEffect::apply):
     30        (WebCore::KeyframeEffect::targetElementOrPseudoElement const): Deleted.
     31        * animation/KeyframeEffect.h:
     32        (WebCore::KeyframeEffect::target const):
     33        * inspector/InspectorInstrumentation.cpp:
     34        (WebCore::InspectorInstrumentation::willApplyKeyframeEffectImpl):
     35        * inspector/InspectorInstrumentation.h:
     36        (WebCore::InspectorInstrumentation::willApplyKeyframeEffect):
     37        * inspector/agents/InspectorAnimationAgent.cpp:
     38        (WebCore::InspectorAnimationAgent::requestEffectTarget):
     39        (WebCore::InspectorAnimationAgent::willApplyKeyframeEffect):
     40        * inspector/agents/InspectorAnimationAgent.h:
     41        * inspector/agents/InspectorCSSAgent.cpp:
     42        (WebCore::InspectorCSSAgent::protocolValueForPseudoId):
     43        (WebCore::protocolValueForPseudoId): Deleted.
     44        * inspector/agents/InspectorCSSAgent.h:
     45        * inspector/agents/InspectorDOMAgent.cpp:
     46        (WebCore::elementToPushForStyleable):
     47        (WebCore::InspectorDOMAgent::pushStyleableElementToFrontend):
     48        (WebCore::InspectorDOMAgent::pushStyleablePathToFrontend):
     49        * inspector/agents/InspectorDOMAgent.h:
     50
    1512022-01-26  J Pascoe  <j_pascoe@apple.com>
    252

  • trunk/Source/WebCore/animation/KeyframeEffect.cpp

    r288560 r288623  
    4949#include "Logging.h"
    5050#include "PropertyAllowlist.h"
    51 #include "PseudoElement.h"
    5251#include "RenderBox.h"
    5352#include "RenderBoxModelObject.h"
    … …  
    11831182}
    11841183
    1185 Element* KeyframeEffect::targetElementOrPseudoElement() const
    1186 {
    1187     if (m_target) {
    1188         if (m_pseudoId == PseudoId::Before)
    1189             return m_target->beforePseudoElement();
    1190 
    1191         if (m_pseudoId == PseudoId::After)
    1192             return m_target->afterPseudoElement();
    1193     }
    1194 
    1195     return m_target.get();
    1196 }
    1197 
    11981184void KeyframeEffect::setTarget(RefPtr<Element>&& newTarget)
    11991185{
    … …  
    12891275    if (!startTime) {
    12901276        m_phaseAtLastApplication = computedTiming.phase;
    1291         if (auto* target = targetElementOrPseudoElement())
     1277        if (auto target = targetStyleable())
    12921278            InspectorInstrumentation::willApplyKeyframeEffect(*target, *this, computedTiming);
    12931279    }

  • trunk/Source/WebCore/animation/KeyframeEffect.h

    r288560 r288623  
    102102
    103103    Element* target() const { return m_target.get(); }
    104     Element* targetElementOrPseudoElement() const;
    105104    void setTarget(RefPtr<Element>&&);
    106105

  • trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp

    r287684 r288623  
    11211121#endif
    11221122
    1123 void InspectorInstrumentation::willApplyKeyframeEffectImpl(InstrumentingAgents& instrumentingAgents, Element& target, KeyframeEffect& effect, ComputedEffectTiming computedTiming)
     1123void InspectorInstrumentation::willApplyKeyframeEffectImpl(InstrumentingAgents& instrumentingAgents, const Styleable& target, KeyframeEffect& effect, ComputedEffectTiming computedTiming)
    11241124{
    11251125    if (auto* animationAgent = instrumentingAgents.trackingAnimationAgent())

  • trunk/Source/WebCore/inspector/InspectorInstrumentation.h

    r287684 r288623  
    100100class WorkerOrWorkletGlobalScope;
    101101
     102struct Styleable;
     103
    102104#if ENABLE(WEBGL)
    103105class WebGLProgram;
    … …  
    300302#endif
    301303
    302     static void willApplyKeyframeEffect(Element&, KeyframeEffect&, ComputedEffectTiming);
     304    static void willApplyKeyframeEffect(const Styleable&, KeyframeEffect&, ComputedEffectTiming);
    303305    static void didChangeWebAnimationName(WebAnimation&);
    304306    static void didSetWebAnimationEffect(WebAnimation&);
    … …  
    503505#endif
    504506
    505     static void willApplyKeyframeEffectImpl(InstrumentingAgents&, Element&, KeyframeEffect&, ComputedEffectTiming);
     507    static void willApplyKeyframeEffectImpl(InstrumentingAgents&, const Styleable&, KeyframeEffect&, ComputedEffectTiming);
    506508    static void didChangeWebAnimationNameImpl(InstrumentingAgents&, WebAnimation&);
    507509    static void didSetWebAnimationEffectImpl(InstrumentingAgents&, WebAnimation&);
    … …  
    14561458#endif
    14571459
    1458 inline void InspectorInstrumentation::willApplyKeyframeEffect(Element& target, KeyframeEffect& effect, ComputedEffectTiming computedTiming)
    1459 {
    1460     FAST_RETURN_IF_NO_FRONTENDS(void());
    1461     if (auto* agents = instrumentingAgents(target.document()))
     1460inline void InspectorInstrumentation::willApplyKeyframeEffect(const Styleable& target, KeyframeEffect& effect, ComputedEffectTiming computedTiming)
     1461{
     1462    FAST_RETURN_IF_NO_FRONTENDS(void());
     1463    if (auto* agents = instrumentingAgents(target.element.document()))
    14621464        willApplyKeyframeEffectImpl(*agents, target, effect, computedTiming);
    14631465}

  • trunk/Source/WebCore/inspector/agents/InspectorAnimationAgent.cpp

    r278340 r288623  
    3939#include "FillMode.h"
    4040#include "Frame.h"
     41#include "InspectorCSSAgent.h"
    4142#include "InspectorDOMAgent.h"
    4243#include "InstrumentingAgents.h"
    … …  
    4849#include "PlaybackDirection.h"
    4950#include "RenderElement.h"
     51#include "Styleable.h"
    5052#include "TimingFunction.h"
    5153#include "WebAnimation.h"
    … …  
    280282}
    281283
    282 Protocol::ErrorStringOr<Protocol::DOM::NodeId> InspectorAnimationAgent::requestEffectTarget(const Protocol::Animation::AnimationId& animationId)
     284Protocol::ErrorStringOr<Ref<Protocol::DOM::Styleable>> InspectorAnimationAgent::requestEffectTarget(const Protocol::Animation::AnimationId& animationId)
    283285{
    284286    Protocol::ErrorString errorString;
    … …  
    298300    auto& keyframeEffect = downcast<KeyframeEffect>(*effect);
    299301
    300     auto* target = keyframeEffect.targetElementOrPseudoElement();
     302    auto target = keyframeEffect.targetStyleable();
    301303    if (!target)
    302304        return makeUnexpected("Animation for given animationId does not have a target"_s);
    303305
    304     return domAgent->pushNodePathToFrontend(errorString, target);
     306    return domAgent->pushStyleablePathToFrontend(errorString, *target);
    305307}
    306308
    … …  
    372374}
    373375
    374 void InspectorAnimationAgent::willApplyKeyframeEffect(Element& target, KeyframeEffect& keyframeEffect, ComputedEffectTiming computedTiming)
     376void InspectorAnimationAgent::willApplyKeyframeEffect(const Styleable& target, KeyframeEffect& keyframeEffect, ComputedEffectTiming computedTiming)
    375377{
    376378    auto* animation = keyframeEffect.animation();
    … …  
    422424    if (ensureResult.isNewEntry) {
    423425        if (auto* domAgent = m_instrumentingAgents.persistentDOMAgent()) {
    424             if (auto nodeId = domAgent->pushNodeToFrontend(&target))
     426            if (auto nodeId = domAgent->pushStyleableElementToFrontend(target))
    425427                event->setNodeId(nodeId);
    426428        }

  • trunk/Source/WebCore/inspector/agents/InspectorAnimationAgent.h

    r276154 r288623  
    4545class WebAnimation;
    4646
     47struct Styleable;
     48
    4749class InspectorAnimationAgent final : public InspectorAgentBase, public Inspector::AnimationBackendDispatcherHandler {
    4850    WTF_MAKE_NONCOPYABLE(InspectorAnimationAgent);
    … …  
    5961    Inspector::Protocol::ErrorStringOr<void> enable();
    6062    Inspector::Protocol::ErrorStringOr<void> disable();
    61     Inspector::Protocol::ErrorStringOr<Inspector::Protocol::DOM::NodeId> requestEffectTarget(const Inspector::Protocol::Animation::AnimationId&);
     63    Inspector::Protocol::ErrorStringOr<Ref<Inspector::Protocol::DOM::Styleable>> requestEffectTarget(const Inspector::Protocol::Animation::AnimationId&);
    6264    Inspector::Protocol::ErrorStringOr<Ref<Inspector::Protocol::Runtime::RemoteObject>> resolveAnimation(const Inspector::Protocol::Animation::AnimationId&, const String& objectGroup);
    6365    Inspector::Protocol::ErrorStringOr<void> startTracking();
    … …  
    6567
    6668    // InspectorInstrumentation
    67     void willApplyKeyframeEffect(Element&, KeyframeEffect&, ComputedEffectTiming);
     69    void willApplyKeyframeEffect(const Styleable&, KeyframeEffect&, ComputedEffectTiming);
    6870    void didChangeWebAnimationName(WebAnimation&);
    6971    void didSetWebAnimationEffect(WebAnimation&);

  • trunk/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp

    r288492 r288623  
    442442}
    443443
    444 static std::optional<Protocol::CSS::PseudoId> protocolValueForPseudoId(PseudoId pseudoId)
     444std::optional<Protocol::CSS::PseudoId> InspectorCSSAgent::protocolValueForPseudoId(PseudoId pseudoId)
    445445{
    446446    switch (pseudoId) {

  • trunk/Source/WebCore/inspector/agents/InspectorCSSAgent.h

    r278253 r288623  
    8585    static CSSStyleRule* asCSSStyleRule(CSSRule&);
    8686    static std::optional<Inspector::Protocol::CSS::LayoutContextType> layoutContextTypeForRenderer(RenderObject*);
     87
     88    static std::optional<Inspector::Protocol::CSS::PseudoId> protocolValueForPseudoId(PseudoId);
    8789
    8890    // InspectorAgentBase

  • trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.cpp

    r287327 r288623  
    105105#include "StyleResolver.h"
    106106#include "StyleSheetList.h"
     107#include "Styleable.h"
    107108#include "Text.h"
    108109#include "TextNodeTraversal.h"
    … …  
    539540}
    540541
     542static Element* elementToPushForStyleable(const Styleable& styleable)
     543{
     544    // FIXME: We want to get rid of PseudoElement.
     545    auto* element = &styleable.element;
     546
     547    if (styleable.pseudoId == PseudoId::Before)
     548        element = element->beforePseudoElement();
     549    else if (styleable.pseudoId == PseudoId::After)
     550        element = element->afterPseudoElement();
     551
     552    return element;
     553}
     554
     555Protocol::DOM::NodeId InspectorDOMAgent::pushStyleableElementToFrontend(const Styleable& styleable)
     556{
     557    auto* element = elementToPushForStyleable(styleable);
     558    return pushNodeToFrontend(element ?: &styleable.element);
     559}
     560
    541561Protocol::DOM::NodeId InspectorDOMAgent::pushNodeToFrontend(Node* nodeToPush)
    542562{
    … …  
    636656    Protocol::ErrorString ignored;
    637657    return pushNodePathToFrontend(ignored, nodeToPush);
     658}
     659
     660Ref<Protocol::DOM::Styleable> InspectorDOMAgent::pushStyleablePathToFrontend(Protocol::ErrorString errorString, const Styleable& styleable)
     661{
     662    auto* element = elementToPushForStyleable(styleable);
     663    auto nodeId = pushNodePathToFrontend(errorString, element ?: &styleable.element);
     664
     665    auto protocolStyleable = Protocol::DOM::Styleable::create()
     666        .setNodeId(nodeId)
     667        .release();
     668
     669    if (styleable.pseudoId != PseudoId::None) {
     670        if (auto pseudoId = InspectorCSSAgent::protocolValueForPseudoId(styleable.pseudoId))
     671            protocolStyleable->setPseudoId(*pseudoId);
     672    }
     673
     674    return protocolStyleable;
    638675}
    639676

  • trunk/Source/WebCore/inspector/agents/InspectorDOMAgent.h

    r279439 r288623  
    7676class ShadowRoot;
    7777
     78struct Styleable;
     79
    7880class InspectorDOMAgent final : public InspectorAgentBase, public Inspector::DOMBackendDispatcherHandler {
    7981    WTF_MAKE_NONCOPYABLE(InspectorDOMAgent);
    … …  
    185187    void styleAttributeInvalidated(const Vector<Element*>& elements);
    186188
     189    Inspector::Protocol::DOM::NodeId pushStyleableElementToFrontend(const Styleable&);
     190    Ref<Inspector::Protocol::DOM::Styleable> pushStyleablePathToFrontend(Inspector::Protocol::ErrorString, const Styleable&);
    187191    Inspector::Protocol::DOM::NodeId pushNodeToFrontend(Node*);
    188192    Inspector::Protocol::DOM::NodeId pushNodeToFrontend(Inspector::Protocol::ErrorString&, Inspector::Protocol::DOM::NodeId documentNodeId, Node*);

  • trunk/Source/WebInspectorUI/ChangeLog

    r288580 r288623  
     12022-01-26  Antoine Quint  <graouts@webkit.org>
     2
     3        [Web Inspector] Graphics tab should display pseudo-elements for more than ::before and ::after
     4        https://bugs.webkit.org/show_bug.cgi?id=235234
     5        <rdar://87766777>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Add a new `DOMStyleable` model class to match the new `DOM.Styleable` protocol type.
     10
     11        When calling Animation.requestEffectTarget(), we now use this new DOMStyleable class
     12        to display pseudo-elements other than ::before or ::after in the Graphics tab.
     13
     14        * UserInterface/Base/DOMUtilities.js:
     15        (WI.linkifyStyleable):
     16        * UserInterface/Main.html:
     17        * UserInterface/Models/Animation.js:
     18        (WI.Animation.prototype.requestEffectTarget):
     19        * UserInterface/Models/DOMStyleable.js: Added.
     20        (WI.DOMStyleable.prototype.fromPayload):
     21        (WI.DOMStyleable.prototype.get node):
     22        (WI.DOMStyleable.prototype.get pseudoId):
     23        (WI.DOMStyleable.prototype.get displayName):
     24        (WI.DOMStyleable):
     25        * UserInterface/Test.html:
     26        * UserInterface/Views/AnimationCollectionContentView.js:
     27        (WI.AnimationCollectionContentView.prototype._handleContentViewMouseEnter):
     28        * UserInterface/Views/AnimationContentView.js:
     29        (WI.AnimationContentView.prototype._refreshSubtitle):
     30        * UserInterface/Views/AnimationDetailsSidebarPanel.js:
     31        (WI.AnimationDetailsSidebarPanel.prototype._refreshIdentitySection):
     32
    1332022-01-25  Nikita Vasilyev  <nvasilyev@apple.com>
    234

  • trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js

    r253591 r288623  
    5858};
    5959
     60WI.linkifyStyleable = function(styleable)
     61{
     62    console.assert(styleable instanceof WI.DOMStyleable, styleable);
     63    let displayName = styleable.displayName;
     64    let link = document.createElement("span");
     65    link.append(displayName);
     66    return WI.linkifyNodeReferenceElement(styleable.node, link, {displayName});
     67};
     68
    6069WI.linkifyNodeReference = function(node, options = {})
    6170{

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r288243 r288623  
    420420    <script src="Models/DOMSearchMatchObject.js"></script>
    421421    <script src="Models/DOMStorageObject.js"></script>
     422    <script src="Models/DOMStyleable.js"></script>
    422423    <script src="Models/DOMTree.js"></script>
    423424    <script src="Models/DatabaseObject.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Models/Animation.js

    r276272 r288623  
    192192    }
    193193
     194    // COMPATIBILITY (iOS 15): effectTarget changed from DOM.NodeId to CSS.Styleable.
    194195    requestEffectTarget(callback)
    195196    {
    … …  
    209210
    210211        let target = WI.assumingMainTarget();
    211         target.AnimationAgent.requestEffectTarget(this._animationId, (error, nodeId) => {
    212             this._effectTarget = !error ? WI.domManager.nodeForId(nodeId) : null;
     212        target.AnimationAgent.requestEffectTarget(this._animationId, (error, styleable) => {
     213            // COMPATIBILITY (iOS 15): effectTarget changed from DOM.NodeId to DOM.Styleable.
     214            if (!isNaN(styleable))
     215                styleable = {nodeId: styleable};
     216
     217            this._effectTarget = !error ? WI.DOMStyleable.fromPayload(styleable) : null;
    213218
    214219            for (let requestEffectTargetCallback of this._requestEffectTargetCallbacks)

  • trunk/Source/WebInspectorUI/UserInterface/Test.html

    r286844 r288623  
    153153    <script src="Models/DOMNodeStyles.js"></script>
    154154    <script src="Models/DOMStorageObject.js"></script>
     155    <script src="Models/DOMStyleable.js"></script>
    155156    <script src="Models/DOMTree.js"></script>
    156157    <script src="Models/DebuggerData.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Views/AnimationCollectionContentView.js

    r255396 r288623  
    9797
    9898        let animation = contentView.representedObject;
    99         animation.requestEffectTarget((node) => {
    100             if (!node || !node.ownerDocument)
     99        animation.requestEffectTarget((styleable) => {
     100            if (!styleable.node || !styleable.node.ownerDocument)
    101101                return;
    102             node.highlight();
     102            styleable.node.highlight();
    103103        });
    104104    }

  • trunk/Source/WebInspectorUI/UserInterface/Views/AnimationContentView.js

    r276272 r288623  
    163163    _refreshSubtitle()
    164164    {
    165         this.representedObject.requestEffectTarget((domNode) => {
    166             this._animationTargetDOMNode = domNode;
     165        this.representedObject.requestEffectTarget((styleable) => {
     166            this._animationTargetDOMNode = styleable.node;
    167167
    168168            this._subtitleElement.removeChildren();
    169             if (domNode)
    170                 this._subtitleElement.appendChild(WI.linkifyNodeReference(domNode));
     169            if (styleable)
     170                this._subtitleElement.appendChild(WI.linkifyStyleable(styleable));
    171171        });
    172172    }

  • trunk/Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.js

    r270134 r288623  
    180180
    181181        this._targetRow.value = null;
    182         this._animation.requestEffectTarget((domNode) => {
    183             this._targetRow.value = domNode ? WI.linkifyNodeReference(domNode) : null;
     182        this._animation.requestEffectTarget((styleable) => {
     183            this._targetRow.value = WI.linkifyStyleable(styleable);
    184184        });
    185185    }
Note: See TracChangeset for help on using the changeset viewer.