Changeset 219268 in webkit


Ignore:
Timestamp:
Jul 7, 2017 2:30:47 PM (7 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Show all elements currently using a given CSS Canvas
​https://bugs.webkit.org/show_bug.cgi?id=173965

Reviewed by Joseph Pecoraro.

Source/JavaScriptCore:

  • inspector/protocol/Canvas.json:
    • Add requestCSSCanvasClientNodes command for getting the node IDs all nodes using this canvas via -webkit-canvas.
    • Add cssCanvasClientNodesChanged event that is dispatched whenever a node is added/removed from the list of -webkit-canvas clients.

Source/WebCore:

Test: inspector/canvas/css-canvas-clients.html

  • css/CSSImageGeneratorValue.cpp:

(WebCore::CSSImageGeneratorValue::addClient):
(WebCore::CSSImageGeneratorValue::removeClient):

  • css/CSSImageGeneratorValue.h:

(WebCore::CSSImageGeneratorValue::clients):

  • html/HTMLCanvasElement.cpp:

(WebCore::HTMLCanvasElement::addObserver):
(WebCore::HTMLCanvasElement::removeObserver):
(WebCore::HTMLCanvasElement::cssCanvasClients):
Each time an observer is added/removed for a given HTMLCanvasElement, send an event to the
inspector frontend that the CSS canvas client nodes have changed. Additionally, anytime a
client/use is added/removed from one of the observing CSSCanvasValue, fire the same event.

  • css/CSSCanvasValue.h:

(isType):

  • html/HTMLCanvasElement.h:

(WebCore::CanvasObserver::isCSSCanvasValueObserver):
Allows type traits to distinguish CanvasObserver from CSSCanvasValue::CanvasObserverProxy.

  • inspector/InspectorCanvasAgent.h:
  • inspector/InspectorCanvasAgent.cpp:

(WebCore::InspectorCanvasAgent::requestCSSCanvasClientNodes):
(WebCore::InspectorCanvasAgent::didChangeCSSCanvasClientNodes):

  • inspector/InspectorInstrumentation.h:

(WebCore::InspectorInstrumentation::didChangeCSSCanvasClientNodes):

  • inspector/InspectorInstrumentation.cpp:

(WebCore::InspectorInstrumentation::didChangeCSSCanvasClientNodesImpl):
Notify the frontend that the list of client nodes has changed for the given canvas. Let the
frontend request the actual list of node IDs when it needs, possibly at a later time.

Source/WebInspectorUI:

  • UserInterface/Controllers/CanvasManager.js:

(WebInspector.CanvasManager.prototype.cssCanvasClientNodesChanged):

  • UserInterface/Models/Canvas.js:

(WebInspector.Canvas.prototype.requestCSSCanvasClientNodes):
(WebInspector.Canvas.prototype.cssCanvasClientNodesChanged):

  • UserInterface/Protocol/CanvasObserver.js:

(WebInspector.CanvasObserver.prototype.cssCanvasClientNodesChanged):

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Views/CanvasDetailsSidebarPanel.js:

(WebInspector.CanvasDetailsSidebarPanel):
(WebInspector.CanvasDetailsSidebarPanel.prototype.set canvas):
(WebInspector.CanvasDetailsSidebarPanel.prototype.initialLayout):
(WebInspector.CanvasDetailsSidebarPanel.prototype.layout):
(WebInspector.CanvasDetailsSidebarPanel.prototype._refreshCSSCanvasSection):
(WebInspector.CanvasDetailsSidebarPanel.prototype._formatMemoryRow):
Add CSS section for CSS canvases. Currently displays a list of node links, each of which is
using the selected canvas via -webkit-canvas.

  • UserInterface/Main.html:
  • UserInterface/Views/CanvasDetailsSidebarPanel.css: Added.

(.sidebar > .panel.details.canvas .details-section > .content .row.simple > .value > .node-link):

  • UserInterface/Controllers/DOMTreeManager.js:

(WebInspector.DOMTreeManager.prototype.ensureDocument):

  • UserInterface/Models/Canvas.js:

(WebInspector.Canvas.prototype.requestNode):

  • UserInterface/Views/SearchSidebarPanel.js:

(WebInspector.SearchSidebarPanel.prototype.performSearch):
Add convenience function that will call DOMAgent.getDocument with an empty function. Should
be used when it is necessary that the document has been sent to the frontend, but the
document node itself is not needed.

LayoutTests:

  • inspector/canvas/css-canvas-clients-expected.txt: Added.
  • inspector/canvas/css-canvas-clients.html: Added.
  • platform/mac/TestExpectations:
Location:
trunk
Files:
2 added
23 edited
1 copied

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r219267 r219268  
     12017-07-07  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Show all elements currently using a given CSS Canvas
     4        https://bugs.webkit.org/show_bug.cgi?id=173965
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * inspector/canvas/css-canvas-clients-expected.txt: Added.
     9        * inspector/canvas/css-canvas-clients.html: Added.
     10        * platform/mac/TestExpectations:
     11
    1122017-07-07  Matt Lewis  <jlewis3@apple.com>
    213

  • trunk/LayoutTests/platform/mac/TestExpectations

    r219107 r219268  
    11421142webkit.org/b/174066 inspector/canvas/create-context-webgl2.html [ Pass Timeout ]
    11431143webkit.org/b/174066 inspector/canvas/create-context-webgpu.html [ Pass Timeout ]
     1144webkit.org/b/174272 inspector/canvas/css-canvas-clients.html [ Pass Timeout ]
    11441145webkit.org/b/170615 inspector/codemirror/prettyprinting-css.html [ Pass Timeout ]
    11451146webkit.org/b/153460 inspector/codemirror/prettyprinting-css-rules.html [ Pass Timeout ]

  • trunk/Source/JavaScriptCore/ChangeLog

    r219263 r219268  
     12017-07-07  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Show all elements currently using a given CSS Canvas
     4        https://bugs.webkit.org/show_bug.cgi?id=173965
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * inspector/protocol/Canvas.json:
     9         - Add `requestCSSCanvasClientNodes` command for getting the node IDs all nodes using this
     10           canvas via -webkit-canvas.
     11         - Add `cssCanvasClientNodesChanged` event that is dispatched whenever a node is
     12           added/removed from the list of -webkit-canvas clients.
     13
    1142017-07-07  Mark Lam  <mark.lam@apple.com>
    215

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

    r219150 r219268  
    7474        },
    7575        {
     76            "name": "requestCSSCanvasClientNodes",
     77            "description": "Gets all the nodes that are using this canvas via -webkit-canvas.",
     78            "parameters": [
     79                { "name": "canvasId", "$ref": "CanvasId" }
     80            ],
     81            "returns": [
     82                { "name": "clientNodeIds", "type": "array", "items": { "$ref": "DOM.NodeId" } }
     83            ]
     84        },
     85        {
    7686            "name": "resolveCanvasContext",
    7787            "description": "Resolves JavaScript canvas context object for given canvasId.",
    … …  
    104114                { "name": "memoryCost", "type": "number", "description": "New memory cost value for the canvas in bytes." }
    105115            ]
     116        },
     117        {
     118            "name": "cssCanvasClientNodesChanged",
     119            "parameters": [
     120                { "name": "canvasId", "$ref": "CanvasId", "description": "Identifier of canvas that changed." }
     121            ]
    106122        }
    107123    ]

  • trunk/Source/WebCore/ChangeLog

    r219266 r219268  
     12017-07-07  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Show all elements currently using a given CSS Canvas
     4        https://bugs.webkit.org/show_bug.cgi?id=173965
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        Test: inspector/canvas/css-canvas-clients.html
     9
     10        * css/CSSImageGeneratorValue.cpp:
     11        (WebCore::CSSImageGeneratorValue::addClient):
     12        (WebCore::CSSImageGeneratorValue::removeClient):
     13        * css/CSSImageGeneratorValue.h:
     14        (WebCore::CSSImageGeneratorValue::clients):
     15        * html/HTMLCanvasElement.cpp:
     16        (WebCore::HTMLCanvasElement::addObserver):
     17        (WebCore::HTMLCanvasElement::removeObserver):
     18        (WebCore::HTMLCanvasElement::cssCanvasClients):
     19        Each time an observer is added/removed for a given HTMLCanvasElement, send an event to the
     20        inspector frontend that the CSS canvas client nodes have changed. Additionally, anytime a
     21        client/use is added/removed from one of the observing CSSCanvasValue, fire the same event.
     22
     23        * css/CSSCanvasValue.h:
     24        (isType):
     25        * html/HTMLCanvasElement.h:
     26        (WebCore::CanvasObserver::isCSSCanvasValueObserver):
     27        Allows type traits to distinguish CanvasObserver from CSSCanvasValue::CanvasObserverProxy.
     28
     29        * inspector/InspectorCanvasAgent.h:
     30        * inspector/InspectorCanvasAgent.cpp:
     31        (WebCore::InspectorCanvasAgent::requestCSSCanvasClientNodes):
     32        (WebCore::InspectorCanvasAgent::didChangeCSSCanvasClientNodes):
     33        * inspector/InspectorInstrumentation.h:
     34        (WebCore::InspectorInstrumentation::didChangeCSSCanvasClientNodes):
     35        * inspector/InspectorInstrumentation.cpp:
     36        (WebCore::InspectorInstrumentation::didChangeCSSCanvasClientNodesImpl):
     37        Notify the frontend that the list of client nodes has changed for the given canvas. Let the
     38        frontend request the actual list of node IDs when it needs, possibly at a later time.
     39
    1402017-07-07  Jer Noble  <jer.noble@apple.com>
    241

  • trunk/Source/WebCore/css/CSSCanvasValue.h

    r205093 r219268  
    4545    FloatSize fixedSize(const RenderElement*);
    4646
     47    HTMLCanvasElement* element() const { return m_element; }
     48
    4749    bool isPending() const { return false; }
    4850    void loadSubimages(CachedResourceLoader&, const ResourceLoaderOptions&) { }
    4951
    5052    bool equals(const CSSCanvasValue&) const;
    51 
    52 private:
    53     explicit CSSCanvasValue(const String& name)
    54         : CSSImageGeneratorValue(CanvasClass)
    55         , m_canvasObserver(*this)
    56         , m_name(name)
    57     {
    58     }
    5953
    6054    // NOTE: We put the CanvasObserver in a member instead of inheriting from it
    … …  
    7064        {
    7165        }
     66
     67        bool isCanvasObserverProxy() const final { return true; }
     68
     69        const CSSCanvasValue& ownerValue() const { return m_ownerValue; }
    7270
    7371    private:
    … …  
    8785        CSSCanvasValue& m_ownerValue;
    8886    };
     87
     88private:
     89    explicit CSSCanvasValue(const String& name)
     90        : CSSImageGeneratorValue(CanvasClass)
     91        , m_canvasObserver(*this)
     92        , m_name(name)
     93    {
     94    }
    8995
    9096    void canvasChanged(HTMLCanvasElement&, const FloatRect& changedRect);
    … …  
    106112SPECIALIZE_TYPE_TRAITS_CSS_VALUE(CSSCanvasValue, isCanvasValue())
    107113
     114SPECIALIZE_TYPE_TRAITS_BEGIN(WebCore::CSSCanvasValue::CanvasObserverProxy)
     115    static bool isType(const WebCore::CanvasObserver& canvasObserver) { return canvasObserver.isCanvasObserverProxy(); }
     116SPECIALIZE_TYPE_TRAITS_END()
     117

  • trunk/Source/WebCore/css/CSSImageGeneratorValue.cpp

    r218890 r219268  
    3535#include "CSSNamedImageValue.h"
    3636#include "GeneratedImage.h"
     37#include "HTMLCanvasElement.h"
     38#include "InspectorInstrumentation.h"
    3739#include "RenderElement.h"
    3840
    … …  
    7072    if (m_clients.isEmpty())
    7173        ref();
     74
    7275    m_clients.add(&renderer);
     76
     77    if (is<CSSCanvasValue>(this)) {
     78        if (HTMLCanvasElement* canvasElement = downcast<CSSCanvasValue>(this)->element())
     79            InspectorInstrumentation::didChangeCSSCanvasClientNodes(*canvasElement);
     80    }
    7381}
    7482
    … …  
    7684{
    7785    ASSERT(m_clients.contains(&renderer));
    78     if (m_clients.remove(&renderer) && m_clients.isEmpty())
     86    if (!m_clients.remove(&renderer))
     87        return;
     88
     89    if (is<CSSCanvasValue>(this)) {
     90        if (HTMLCanvasElement* canvasElement = downcast<CSSCanvasValue>(this)->element())
     91            InspectorInstrumentation::didChangeCSSCanvasClientNodes(*canvasElement);
     92    }
     93
     94    if (m_clients.isEmpty())
    7995        deref();
    8096}

  • trunk/Source/WebCore/css/CSSImageGeneratorValue.h

    r218588 r219268  
    4646    void addClient(RenderElement&);
    4747    void removeClient(RenderElement&);
     48    const HashCountedSet<RenderElement*>& clients() const { return m_clients; }
    4849
    4950    RefPtr<Image> image(RenderElement&, const FloatSize&);
    … …  
    6263    GeneratedImage* cachedImageForSize(FloatSize);
    6364    void saveCachedImageForSize(FloatSize, GeneratedImage&);
    64     const HashCountedSet<RenderElement*>& clients() const { return m_clients; }
    6565
    6666    // Helper functions for Crossfade and Filter.

  • trunk/Source/WebCore/html/HTMLCanvasElement.cpp

    r219078 r219268  
    3131#include "Blob.h"
    3232#include "BlobCallback.h"
     33#include "CSSCanvasValue.h"
    3334#include "CanvasGradient.h"
    3435#include "CanvasPattern.h"
    … …  
    4647#include "InspectorInstrumentation.h"
    4748#include "MIMETypeRegistry.h"
     49#include "RenderElement.h"
    4850#include "RenderHTMLCanvas.h"
    4951#include "RuntimeEnabledFeatures.h"
    … …  
    169171{
    170172    m_observers.add(&observer);
     173
     174    if (is<CSSCanvasValue::CanvasObserverProxy>(observer))
     175        InspectorInstrumentation::didChangeCSSCanvasClientNodes(*this);
    171176}
    172177
    … …  
    174179{
    175180    m_observers.remove(&observer);
     181
     182    if (is<CSSCanvasValue::CanvasObserverProxy>(observer))
     183        InspectorInstrumentation::didChangeCSSCanvasClientNodes(*this);
     184}
     185
     186HashSet<Element*> HTMLCanvasElement::cssCanvasClients() const
     187{
     188    HashSet<Element*> cssCanvasClients;
     189    for (auto& observer : m_observers) {
     190        if (!is<CSSCanvasValue::CanvasObserverProxy>(observer))
     191            continue;
     192
     193        auto clients = downcast<CSSCanvasValue::CanvasObserverProxy>(observer)->ownerValue().clients();
     194        for (auto& entry : clients) {
     195            if (Element* element = entry.key->element())
     196                cssCanvasClients.add(element);
     197        }
     198    }
     199    return cssCanvasClients;
    176200}
    177201

  • trunk/Source/WebCore/html/HTMLCanvasElement.h

    r217651 r219268  
    3333#include <memory>
    3434#include <wtf/Forward.h>
     35#include <wtf/HashSet.h>
    3536
    3637#if ENABLE(WEBGL)
    … …  
    5960    virtual ~CanvasObserver() { }
    6061
     62    virtual bool isCanvasObserverProxy() const { return false; }
     63
    6164    virtual void canvasChanged(HTMLCanvasElement&, const FloatRect& changedRect) = 0;
    6265    virtual void canvasResized(HTMLCanvasElement&) = 0;
    … …  
    7275    void addObserver(CanvasObserver&);
    7376    void removeObserver(CanvasObserver&);
     77    HashSet<Element*> cssCanvasClients() const;
    7478
    7579    unsigned width() const { return size().width(); }

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

    r219208 r219268  
    3030#include "CanvasRenderingContext2D.h"
    3131#include "Document.h"
     32#include "Element.h"
    3233#include "Frame.h"
    3334#include "InspectorDOMAgent.h"
    … …  
    171172}
    172173
     174void InspectorCanvasAgent::requestCSSCanvasClientNodes(ErrorString& errorString, const String& canvasId, RefPtr<Inspector::Protocol::Array<int>>& result)
     175{
     176    const CanvasEntry* canvasEntry = getCanvasEntry(canvasId);
     177    if (!canvasEntry) {
     178        errorString = ASCIILiteral("Invalid canvas identifier");
     179        return;
     180    }
     181
     182    result = Inspector::Protocol::Array<int>::create();
     183    for (Element* element : canvasEntry->element->cssCanvasClients()) {
     184        if (int documentNodeId = m_instrumentingAgents.inspectorDOMAgent()->boundNodeId(&element->document()))
     185            result->addItem(m_instrumentingAgents.inspectorDOMAgent()->pushNodeToFrontend(errorString, documentNodeId, element));
     186    }
     187}
     188
    173189static JSC::JSValue contextAsScriptValue(JSC::ExecState& state, CanvasRenderingContext* context)
    174190{
    … …  
    249265
    250266    m_canvasToCSSCanvasId.set(&canvasElement, name);
     267}
     268
     269void InspectorCanvasAgent::didChangeCSSCanvasClientNodes(HTMLCanvasElement& canvasElement)
     270{
     271    const CanvasEntry* canvasEntry = getCanvasEntry(canvasElement);
     272    if (!canvasEntry)
     273        return;
     274
     275    m_frontendDispatcher->cssCanvasClientNodesChanged(canvasEntry->identifier);
    251276}
    252277

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

    r219150 r219268  
    6464    void requestNode(ErrorString&, const String& canvasId, int* nodeId) override;
    6565    void requestContent(ErrorString&, const String& canvasId, String* content) override;
     66    void requestCSSCanvasClientNodes(ErrorString&, const String& canvasId, RefPtr<Inspector::Protocol::Array<int>>&) override;
    6667    void resolveCanvasContext(ErrorString&, const String& canvasId, const String* const objectGroup, RefPtr<Inspector::Protocol::Runtime::RemoteObject>&) override;
    6768
    … …  
    6970    void frameNavigated(Frame&);
    7071    void didCreateCSSCanvas(HTMLCanvasElement&, const String&);
     72    void didChangeCSSCanvasClientNodes(HTMLCanvasElement&);
    7173    void didCreateCanvasRenderingContext(HTMLCanvasElement&);
    7274    void didChangeCanvasMemory(HTMLCanvasElement&);

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

    r218908 r219268  
    10001000}
    10011001
     1002void InspectorInstrumentation::didChangeCSSCanvasClientNodesImpl(InstrumentingAgents* instrumentingAgents, HTMLCanvasElement& canvasElement)
     1003{
     1004    if (InspectorCanvasAgent* canvasAgent = instrumentingAgents->inspectorCanvasAgent())
     1005        canvasAgent->didChangeCSSCanvasClientNodes(canvasElement);
     1006}
     1007
    10021008void InspectorInstrumentation::didCreateCanvasRenderingContextImpl(InstrumentingAgents* instrumentingAgents, HTMLCanvasElement& canvasElement)
    10031009{

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

    r219051 r219268  
    248248
    249249    static void didCreateCSSCanvas(HTMLCanvasElement&, const String&);
     250    static void didChangeCSSCanvasClientNodes(HTMLCanvasElement&);
    250251    static void didCreateCanvasRenderingContext(HTMLCanvasElement&);
    251252    static void didChangeCanvasMemory(HTMLCanvasElement&);
    … …  
    424425
    425426    static void didCreateCSSCanvasImpl(InstrumentingAgents*, HTMLCanvasElement&, const String&);
     427    static void didChangeCSSCanvasClientNodesImpl(InstrumentingAgents*, HTMLCanvasElement&);
    426428    static void didCreateCanvasRenderingContextImpl(InstrumentingAgents*, HTMLCanvasElement&);
    427429    static void didChangeCanvasMemoryImpl(InstrumentingAgents*, HTMLCanvasElement&);
    … …  
    11901192        didCreateCSSCanvasImpl(instrumentingAgents, canvasElement, name);
    11911193}
    1192    
     1194
     1195inline void InspectorInstrumentation::didChangeCSSCanvasClientNodes(HTMLCanvasElement& canvasElement)
     1196{
     1197    FAST_RETURN_IF_NO_FRONTENDS(void());
     1198    if (InstrumentingAgents* instrumentingAgents = instrumentingAgentsForDocument(&canvasElement.document()))
     1199        didChangeCSSCanvasClientNodesImpl(instrumentingAgents, canvasElement);
     1200}
     1201
    11931202inline void InspectorInstrumentation::didCreateCanvasRenderingContext(HTMLCanvasElement& canvasElement)
    11941203{

  • trunk/Source/WebInspectorUI/ChangeLog

    r219259 r219268  
     12017-07-07  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Show all elements currently using a given CSS Canvas
     4        https://bugs.webkit.org/show_bug.cgi?id=173965
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Controllers/CanvasManager.js:
     9        (WebInspector.CanvasManager.prototype.cssCanvasClientNodesChanged):
     10        * UserInterface/Models/Canvas.js:
     11        (WebInspector.Canvas.prototype.requestCSSCanvasClientNodes):
     12        (WebInspector.Canvas.prototype.cssCanvasClientNodesChanged):
     13        * UserInterface/Protocol/CanvasObserver.js:
     14        (WebInspector.CanvasObserver.prototype.cssCanvasClientNodesChanged):
     15
     16        * Localizations/en.lproj/localizedStrings.js:
     17        * UserInterface/Views/CanvasDetailsSidebarPanel.js:
     18        (WebInspector.CanvasDetailsSidebarPanel):
     19        (WebInspector.CanvasDetailsSidebarPanel.prototype.set canvas):
     20        (WebInspector.CanvasDetailsSidebarPanel.prototype.initialLayout):
     21        (WebInspector.CanvasDetailsSidebarPanel.prototype.layout):
     22        (WebInspector.CanvasDetailsSidebarPanel.prototype._refreshCSSCanvasSection):
     23        (WebInspector.CanvasDetailsSidebarPanel.prototype._formatMemoryRow):
     24        Add CSS section for CSS canvases. Currently displays a list of node links, each of which is
     25        using the selected canvas via -webkit-canvas.
     26
     27        * UserInterface/Main.html:
     28        * UserInterface/Views/CanvasDetailsSidebarPanel.css: Added.
     29        (.sidebar > .panel.details.canvas .details-section > .content .row.simple > .value > .node-link):
     30
     31        * UserInterface/Controllers/DOMTreeManager.js:
     32        (WebInspector.DOMTreeManager.prototype.ensureDocument):
     33        * UserInterface/Models/Canvas.js:
     34        (WebInspector.Canvas.prototype.requestNode):
     35        * UserInterface/Views/SearchSidebarPanel.js:
     36        (WebInspector.SearchSidebarPanel.prototype.performSearch):
     37        Add convenience function that will call DOMAgent.getDocument with an empty function. Should
     38        be used when it is necessary that the document has been sent to the frontend, but the
     39        document node itself is not needed.
     40
    1412017-07-07  Joseph Pecoraro  <pecoraro@apple.com>
    242

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r219150 r219268  
    140140localizedStrings["Busy"] = "Busy";
    141141localizedStrings["CSP Hash"] = "CSP Hash";
     142localizedStrings["CSS"] = "CSS";
    142143localizedStrings["CSS Canvas"] = "CSS Canvas";
    143144localizedStrings["CSS canvas “%s”"] = "CSS canvas “%s”";
    … …  
    589590localizedStrings["Node"] = "Node";
    590591localizedStrings["Node Removed"] = "Node Removed";
     592localizedStrings["Nodes"] = "Nodes";
    591593localizedStrings["Not found"] = "Not found";
    592594localizedStrings["Number"] = "Number";

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js

    r218908 r219268  
    8585    }
    8686
     87    cssCanvasClientNodesChanged(canvasIdentifier)
     88    {
     89        // Called from WebInspector.CanvasObserver.
     90
     91        let canvas = this._canvasIdentifierMap.get(canvasIdentifier);
     92        console.assert(canvas);
     93        if (!canvas)
     94            return;
     95
     96        canvas.cssCanvasClientNodesChanged();
     97    }
     98
    8799    // Private
    88100

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js

    r213644 r219268  
    8686    }
    8787
     88    ensureDocument()
     89    {
     90        this.requestDocument(function(){});
     91    }
     92
    8893    pushNodeToFrontend(objectId, callback)
    8994    {

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

    r218839 r219268  
    4747    <link rel="stylesheet" href="Views/CallFrameView.css">
    4848    <link rel="stylesheet" href="Views/CanvasContentView.css">
     49    <link rel="stylesheet" href="Views/CanvasDetailsSidebarPanel.css">
    4950    <link rel="stylesheet" href="Views/ChartDetailsSectionRow.css">
    5051    <link rel="stylesheet" href="Views/CircleChart.css">

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

    r219078 r219268  
    4141        this._contextAttributes = contextAttributes || {};
    4242        this._memoryCost = memoryCost || NaN;
     43
     44        this._cssCanvasClientNodes = null;
    4345    }
    4446
    … …  
    141143        }
    142144
    143         WebInspector.domTreeManager.requestDocument((document) => {
    144             CanvasAgent.requestNode(this._identifier, (error, nodeId) => {
    145                 if (error) {
    146                     callback(null);
    147                     return;
    148                 }
    149 
    150                 this._domNode = WebInspector.domTreeManager.nodeForId(nodeId);
    151                 callback(this._domNode);
    152             });
     145        WebInspector.domTreeManager.ensureDocument();
     146
     147        CanvasAgent.requestNode(this._identifier, (error, nodeId) => {
     148            if (error) {
     149                callback(null);
     150                return;
     151            }
     152
     153            this._domNode = WebInspector.domTreeManager.nodeForId(nodeId);
     154            callback(this._domNode);
    153155        });
    154156    }
    … …  
    166168    }
    167169
     170    requestCSSCanvasClientNodes(callback)
     171    {
     172        if (!this._cssCanvasName) {
     173            callback([]);
     174            return;
     175        }
     176
     177        if (this._cssCanvasClientNodes) {
     178            callback(this._cssCanvasClientNodes);
     179            return;
     180        }
     181
     182        WebInspector.domTreeManager.ensureDocument();
     183
     184        CanvasAgent.requestCSSCanvasClientNodes(this._identifier, (error, clientNodeIds) => {
     185            if (error) {
     186                callback([]);
     187                return;
     188            }
     189
     190            clientNodeIds = Array.isArray(clientNodeIds) ? clientNodeIds : [];
     191            this._cssCanvasClientNodes = clientNodeIds.map((clientNodeId) => WebInspector.domTreeManager.nodeForId(clientNodeId));
     192
     193            callback(this._cssCanvasClientNodes);
     194        });
     195    }
     196
    168197    saveIdentityToCookie(cookie)
    169198    {
    … …  
    175204            cookie[WebInspector.Canvas.NodePathCookieKey] = this._domNode.path;
    176205
     206    }
     207
     208    cssCanvasClientNodesChanged()
     209    {
     210        // Called from WebInspector.CanvasManager.
     211
     212        if (!this._cssCanvasName)
     213            return;
     214
     215        this._cssCanvasClientNodes = null;
     216
     217        this.dispatchEventToListeners(WebInspector.Canvas.Event.CSSCanvasClientNodesChanged);
    177218    }
    178219};
    … …  
    194235WebInspector.Canvas.Event = {
    195236    MemoryChanged: "canvas-memory-changed",
     237    CSSCanvasClientNodesChanged: "canvas-css-canvas-client-nodes-changed",
    196238};

  • trunk/Source/WebInspectorUI/UserInterface/Protocol/CanvasObserver.js

    r218908 r219268  
    4242        WebInspector.canvasManager.canvasMemoryChanged(canvasId, memoryCost);
    4343    }
     44
     45    cssCanvasClientNodesChanged(canvasId)
     46    {
     47        WebInspector.canvasManager.cssCanvasClientNodesChanged(canvasId);
     48    }
    4449};

  • trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css

    r219267 r219268  
    2424 */
    2525
    26 WebInspector.CanvasObserver = class CanvasObserver
    27 {
    28     // Events defined by the "Canvas" domain.
    29 
    30     canvasAdded(canvas)
    31     {
    32         WebInspector.canvasManager.canvasAdded(canvas);
    33     }
    34 
    35     canvasRemoved(canvasId)
    36     {
    37         WebInspector.canvasManager.canvasRemoved(canvasId);
    38     }
    39 
    40     canvasMemoryChanged(canvasId, memoryCost)
    41     {
    42         WebInspector.canvasManager.canvasMemoryChanged(canvasId, memoryCost);
    43     }
    44 };
     26.sidebar > .panel.details.canvas .details-section > .content .row.simple > .value > .node-link {
     27    display: block;
     28}

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

    r218908 r219268  
    2828    constructor()
    2929    {
    30         super("canvas-details", WebInspector.UIString("Canvas"));
     30        super("canvas", WebInspector.UIString("Canvas"));
    3131
    3232        this.element.classList.add("canvas");
    … …  
    6565        }
    6666
    67         if (this._canvas)
     67        if (this._canvas) {
    6868            this._canvas.removeEventListener(WebInspector.Canvas.Event.MemoryChanged, this._canvasMemoryChanged, this);
     69            this._canvas.removeEventListener(WebInspector.Canvas.Event.CSSCanvasClientNodesChanged, this._refreshCSSCanvasSection, this);
     70        }
    6971
    7072        this._canvas = canvas || null;
    7173
    72         if (this._canvas)
     74        if (this._canvas) {
    7375            this._canvas.addEventListener(WebInspector.Canvas.Event.MemoryChanged, this._canvasMemoryChanged, this);
     76            this._canvas.addEventListener(WebInspector.Canvas.Event.CSSCanvasClientNodesChanged, this._refreshCSSCanvasSection, this);
     77        }
    7478
    7579        this.needsLayout();
    … …  
    8589        this._typeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"));
    8690        this._memoryRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Memory"));
     91        this._memoryRow.tooltip = WebInspector.UIString("Memory usage of this canvas");
    8792
    8893        let identitySection = new WebInspector.DetailsSection("canvas-details", WebInspector.UIString("Identity"));
    … …  
    105110        attributesSection.groups = [new WebInspector.DetailsSectionGroup([this._attributesDataGridRow])];
    106111        this.contentView.element.appendChild(attributesSection.element);
     112
     113        this._cssCanvasClientsRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Nodes"));
     114
     115        this._cssCanvasSection = new WebInspector.DetailsSection("canvas-css", WebInspector.UIString("CSS"));
     116        this._cssCanvasSection.groups = [new WebInspector.DetailsSectionGroup([this._cssCanvasClientsRow])];
     117        this._cssCanvasSection.element.hidden = true;
     118        this.contentView.element.appendChild(this._cssCanvasSection.element);
    107119    }
    108120
    … …  
    117129        this._refreshSourceSection();
    118130        this._refreshAttributesSection();
     131        this._refreshCSSCanvasSection();
    119132    }
    120133
    … …  
    240253    }
    241254
     255    _refreshCSSCanvasSection()
     256    {
     257        if (!this._canvas)
     258            return;
     259
     260        if (!this._canvas.cssCanvasName) {
     261            this._cssCanvasSection.element.hidden = true;
     262            return;
     263        }
     264
     265        this._cssCanvasClientsRow.value = emDash;
     266
     267        this._cssCanvasSection.element.hidden = false;
     268
     269        this._canvas.requestCSSCanvasClientNodes((cssCanvasClientNodes) => {
     270            if (!cssCanvasClientNodes.length)
     271                return;
     272
     273            let fragment = document.createDocumentFragment();
     274            for (let clientNode of cssCanvasClientNodes)
     275                fragment.appendChild(WebInspector.linkifyNodeReference(clientNode));
     276            this._cssCanvasClientsRow.value = fragment;
     277        });
     278    }
     279
    242280    _formatMemoryRow()
    243281    {
    … …  
    247285        }
    248286
    249         let canvasMemory = Number.bytesToString(this._canvas.memoryCost);
    250         this._memoryRow.value = canvasMemory;
    251         this._memoryRow.tooltip = WebInspector.UIString("Memory usage of this canvas");
     287        this._memoryRow.value = Number.bytesToString(this._canvas.memoryCost);
    252288    }
    253289

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

    r217733 r219268  
    279279
    280280        if (window.DOMAgent)
    281             WebInspector.domTreeManager.requestDocument(function(){});
     281            WebInspector.domTreeManager.ensureDocument();
    282282
    283283        if (window.PageAgent)
Note: See TracChangeset for help on using the changeset viewer.