Changeset 218544 in webkit


Ignore:
Timestamp:
Jun 19, 2017 11:48:10 PM (7 years ago)
Author:
Devin Rousso
Message:

Web Inspector: create canvas content view and details sidebar panel
​https://bugs.webkit.org/show_bug.cgi?id=138941
<rdar://problem/19051672>

Reviewed by Joseph Pecoraro.

Source/JavaScriptCore:

  • inspector/protocol/Canvas.json:
    • Add an optional nodeId attribute to the Canvas type.
    • Add requestNode command for getting the node id of the backing canvas element.
    • Add requestContent command for getting the current image content of the canvas.

Source/WebCore:

Tests: inspector/canvas/requestContent.html

inspector/canvas/requestNode.html

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

(WebCore::InspectorCanvasAgent::requestNode):
Gets the node id of the backing canvas element.

(WebCore::InspectorCanvasAgent::requestContent):
Gets the current image content of the canvas.

(WebCore::InspectorCanvasAgent::frameNavigated):
(WebCore::InspectorCanvasAgent::didCreateCanvasRenderingContext):
Minor fixes from r218376 <​https://webkit.org/b/172623>.

(WebCore::InspectorCanvasAgent::buildObjectForCanvas):
Optionally send the nodeId of the backing canvas element if it is available.

  • inspector/InspectorInstrumentation.cpp:

(WebCore::InspectorInstrumentation::didCommitLoadImpl):

Source/WebInspectorUI:

  • UserInterface/Models/Canvas.js:

(WebInspector.Canvas):
(WebInspector.Canvas.fromPayload):
(WebInspector.Canvas.prototype.get displayName):
(WebInspector.Canvas.requestNode): Added.
(WebInspector.Canvas.prototype.requestContent): Added.
(WebInspector.Canvas.prototype.saveIdentityToCookie):

  • UserInterface/Controllers/CanvasManager.js:

(WebInspector.CanvasManager.prototype.canvasAdded):
(WebInspector.CanvasManager.prototype.canvasRemoved):

  • UserInterface/Models/Collection.js:
  • UserInterface/Models/Frame.js:

(WebInspector.Frame):
(WebInspector.Frame.prototype.get canvasCollection):
(WebInspector.Frame.prototype.commitProvisionalLoad):
Create a Collection for Canvas in each Frame, and modify it when canvas events are fired.

  • UserInterface/Views/CanvasContentView.css: Added.

(.content-view.canvas > .preview):
(.content-view.canvas > .preview > img):

  • UserInterface/Views/CanvasContentView.js: Added.

(WebInspector.CanvasContentView):
(WebInspector.CanvasContentView.prototype.get navigationItems):
(WebInspector.CanvasContentView.prototype.shown):
(WebInspector.CanvasContentView.prototype.hidden):
(WebInspector.CanvasContentView.prototype._showPreview):
(WebInspector.CanvasContentView.prototype._updateImageGrid):
(WebInspector.CanvasContentView.prototype._showGridButtonClicked):

  • UserInterface/Views/CanvasDetailsSidebarPanel.js: Added.

(WebInspector.CanvasDetailsSidebarPanel):
(WebInspector.CanvasDetailsSidebarPanel.prototype.inspect):
(WebInspector.CanvasDetailsSidebarPanel.prototype.get canvas):
(WebInspector.CanvasDetailsSidebarPanel.prototype.set canvas):
(WebInspector.CanvasDetailsSidebarPanel.prototype.initialLayout):
(WebInspector.CanvasDetailsSidebarPanel.prototype.layout):
(WebInspector.CanvasDetailsSidebarPanel.prototype._refreshIdentitySection):
(WebInspector.CanvasDetailsSidebarPanel.prototype._refreshSourceSection.this._canvas.requestNode.):
(WebInspector.CanvasDetailsSidebarPanel.prototype._refreshSourceSection):

  • UserInterface/Views/CanvasTreeElement.js: Added.

(WebInspector.CanvasTreeElement):

  • UserInterface/Views/FrameTreeElement.js:

(WebInspector.FrameTreeElement.prototype.onattach):
(WebInspector.FrameTreeElement.prototype.ondetach):
(WebInspector.FrameTreeElement.prototype.onpopulate):
(WebInspector.FrameTreeElement.prototype._canvasWasAdded):
(WebInspector.FrameTreeElement.prototype._canvasWasRemoved):
(WebInspector.FrameTreeElement):

  • UserInterface/Base/Main.js:
  • UserInterface/Views/ContentView.js:

(WebInspector.ContentView.createFromRepresentedObject):
(WebInspector.ContentView.isViewable):

  • UserInterface/Views/ResourceSidebarPanel.js:

(WebInspector.ResourceSidebarPanel):
(WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
(WebInspector.ResourceSidebarPanel.prototype._treeSelectionDidChange):

  • UserInterface/Views/ResourcesTabContentView.js:

(WebInspector.ResourcesTabContentView):
(WebInspector.ResourcesTabContentView.prototype.canShowRepresentedObject):
Show Canvas objects and tie them to the correct ContentView and TreeElement subclasses.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Main.html:
  • UserInterface/Images/Canvas.svg: Added.
  • UserInterface/Views/ResourceIcons.css:

(.canvas .icon):
Added new files/rules/strings related to Canvas UI.

  • UserInterface/Views/SettingsTabContentView.css:

(.content-view.settings .navigation-bar):

  • UserInterface/Base/Setting.js:
  • UserInterface/Views/SettingsTabContentView.js:

(WebInspector.SettingsTabContentView.prototype.initialLayout):
(WebInspector.SettingsTabContentView.prototype._createGeneralSettingsView):
(WebInspector.SettingsTabContentView.prototype._createDebugSettingsView):
Add an experimental settings toggle in the Debug view for showing canvas contexts.

  • UserInterface/Views/FolderizedTreeElement.js:

(WebInspector.FolderizedTreeElement.prototype._compareTreeElementsByMainTitle):
Drive-by fix: ensure that sorting also includes numbers, so that 1 < 2 < 10.

  • UserInterface/Views/ImageResourceContentView.js:

(WebInspector.ImageResourceContentView.prototype.shown):
(WebInspector.ImageResourceContentView.prototype.hidden):
(WebInspector.ImageResourceContentView.prototype._updateImageGrid):
(WebInspector.ImageResourceContentView.prototype._showGridButtonClicked):
(WebInspector.ImageResourceContentView):
Drive-by fix: change the activated state of the Show Grid navigation item if it changes
in another view.

LayoutTests:

  • inspector/canvas/requestContent-expected.txt: Added.
  • inspector/canvas/requestContent.html: Added.
  • inspector/canvas/requestNode-expected.txt: Added.
  • inspector/canvas/requestNode.html: Added.
Location:
trunk
Files:
9 added
24 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r218535 r218544  
     12017-06-19  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: create canvas content view and details sidebar panel
     4        https://bugs.webkit.org/show_bug.cgi?id=138941
     5        <rdar://problem/19051672>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        * inspector/canvas/requestContent-expected.txt: Added.
     10        * inspector/canvas/requestContent.html: Added.
     11        * inspector/canvas/requestNode-expected.txt: Added.
     12        * inspector/canvas/requestNode.html: Added.
     13
    1142017-06-19  Frederic Wang  <fwang@igalia.com>
    215

  • trunk/Source/JavaScriptCore/ChangeLog

    r218527 r218544  
     12017-06-19  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: create canvas content view and details sidebar panel
     4        https://bugs.webkit.org/show_bug.cgi?id=138941
     5        <rdar://problem/19051672>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        * inspector/protocol/Canvas.json:
     10         - Add an optional `nodeId` attribute to the `Canvas` type.
     11         - Add `requestNode` command for getting the node id of the backing canvas element.
     12         - Add `requestContent` command for getting the current image content of the canvas.
     13
    1142017-06-19  Yusuke Suzuki  <utatane.tea@gmail.com>
    215

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

    r218440 r218544  
    2323                { "name": "contextType", "$ref": "ContextType", "description": "The type of rendering context backing the canvas." },
    2424                { "name": "frameId", "$ref": "Network.FrameId", "description": "Parent frame identifier." },
     25                { "name": "nodeId", "$ref": "DOM.NodeId", "optional": true, "description": "The corresponding DOM node id." },
    2526                { "name": "cssCanvasName", "type": "string", "optional": true, "description": "The CSS canvas identifier, for canvases created with <code>document.getCSSCanvasContext</code>." }
    2627            ]
    … …  
    3536            "name": "disable",
    3637            "description": "Disables Canvas domain events."
     38        },
     39        {
     40            "name": "requestNode",
     41            "description": "Gets the NodeId for the canvas node with the given CanvasId.",
     42            "parameters": [
     43                { "name": "canvasId", "$ref": "CanvasId", "description": "Canvas identifier." }
     44            ],
     45            "returns": [
     46                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Node identifier for given canvas." }
     47            ]
     48        },
     49        {
     50            "name": "requestContent",
     51            "description": "Gets the data for the canvas node with the given CanvasId.",
     52            "parameters": [
     53                { "name": "canvasId", "$ref": "CanvasId", "description": "Canvas identifier." }
     54            ],
     55            "returns": [
     56                { "name": "content", "type": "string", "description": "Base64-encoded data of the canvas' contents." }
     57            ]
    3758        }
    3859    ],

  • trunk/Source/WebCore/ChangeLog

    r218535 r218544  
     12017-06-19  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: create canvas content view and details sidebar panel
     4        https://bugs.webkit.org/show_bug.cgi?id=138941
     5        <rdar://problem/19051672>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        Tests: inspector/canvas/requestContent.html
     10               inspector/canvas/requestNode.html
     11
     12        * inspector/InspectorCanvasAgent.h:
     13        * inspector/InspectorCanvasAgent.cpp:
     14        (WebCore::InspectorCanvasAgent::requestNode):
     15        Gets the node id of the backing canvas element.
     16
     17        (WebCore::InspectorCanvasAgent::requestContent):
     18        Gets the current image content of the canvas.
     19
     20        (WebCore::InspectorCanvasAgent::frameNavigated):
     21        (WebCore::InspectorCanvasAgent::didCreateCanvasRenderingContext):
     22        Minor fixes from r218376 <https://webkit.org/b/172623>.
     23
     24        (WebCore::InspectorCanvasAgent::buildObjectForCanvas):
     25        Optionally send the `nodeId` of the backing canvas element if it is available.
     26
     27        * inspector/InspectorInstrumentation.cpp:
     28        (WebCore::InspectorInstrumentation::didCommitLoadImpl):
     29
    1302017-06-19  Frederic Wang  <fwang@igalia.com>
    231

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

    r218440 r218544  
    2828
    2929#include "CanvasRenderingContext.h"
     30#include "CanvasRenderingContext2D.h"
    3031#include "Document.h"
    31 #include "DocumentLoader.h"
    3232#include "Frame.h"
    3333#include "InspectorDOMAgent.h"
    … …  
    9393}
    9494
     95void InspectorCanvasAgent::requestNode(ErrorString& errorString, const String& canvasId, int* nodeId)
     96{
     97    const CanvasEntry* canvasEntry = getCanvasEntry(canvasId);
     98    if (!canvasEntry) {
     99        errorString = ASCIILiteral("Invalid canvas identifier");
     100        return;
     101    }
     102
     103    int documentNodeId = m_instrumentingAgents.inspectorDOMAgent()->boundNodeId(&canvasEntry->element->document());
     104    if (!documentNodeId) {
     105        errorString = ASCIILiteral("Document has not been requested");
     106        return;
     107    }
     108
     109    *nodeId = m_instrumentingAgents.inspectorDOMAgent()->pushNodeToFrontend(errorString, documentNodeId, canvasEntry->element);
     110}
     111
     112void InspectorCanvasAgent::requestContent(ErrorString& errorString, const String& canvasId, String* content)
     113{
     114    const CanvasEntry* canvasEntry = getCanvasEntry(canvasId);
     115    if (!canvasEntry) {
     116        errorString = ASCIILiteral("Invalid canvas identifier");
     117        return;
     118    }
     119
     120    CanvasRenderingContext* context = canvasEntry->element->renderingContext();
     121    if (is<CanvasRenderingContext2D>(context)) {
     122        ExceptionOr<String> result = canvasEntry->element->toDataURL(ASCIILiteral("image/png"));
     123        if (result.hasException()) {
     124            errorString = result.releaseException().releaseMessage();
     125            return;
     126        }
     127        *content = result.releaseReturnValue();
     128    } else {
     129        // FIXME: <https://webkit.org/b/173569> Web Inspector: Support getting the content of WebGL/WebGL2/WebGPU contexts
     130        errorString = ASCIILiteral("Unsupported canvas context type");
     131    }
     132}
     133
    95134void InspectorCanvasAgent::frameNavigated(Frame& frame)
    96135{
    … …  
    106145    }
    107146
    108     if (!m_enabled) {
    109         m_canvasEntries.clear();
    110         return;
    111     }
    112 
    113147    for (auto* canvasElement : canvasesForFrame) {
    114148        auto canvasEntry = m_canvasEntries.take(canvasElement);
    115         m_frontendDispatcher->canvasRemoved(canvasEntry.identifier);
     149        if (m_enabled)
     150            m_frontendDispatcher->canvasRemoved(canvasEntry.identifier);
    116151    }
    117152}
    … …  
    133168
    134169    CanvasEntry newCanvasEntry("canvas:" + IdentifiersFactory::createIdentifier(), &canvasElement);
    135     if (m_canvasToCSSCanvasId.contains(&canvasElement))
    136         newCanvasEntry.cssCanvasName = m_canvasToCSSCanvasId.take(&canvasElement);
     170    newCanvasEntry.cssCanvasName = m_canvasToCSSCanvasId.take(&canvasElement);
    137171
    138172    m_canvasEntries.set(&canvasElement, newCanvasEntry);
    … …  
    230264    if (!canvasEntry.cssCanvasName.isEmpty())
    231265        canvas->setCssCanvasName(canvasEntry.cssCanvasName);
     266    else {
     267        InspectorDOMAgent* domAgent = m_instrumentingAgents.inspectorDOMAgent();
     268        int nodeId = domAgent->boundNodeId(&canvasElement);
     269        if (!nodeId) {
     270            if (int documentNodeId = domAgent->boundNodeId(&canvasElement.document())) {
     271                ErrorString ignored;
     272                nodeId = domAgent->pushNodeToFrontend(ignored, documentNodeId, &canvasElement);
     273            }
     274        }
     275
     276        if (nodeId)
     277            canvas->setNodeId(nodeId);
     278    }
    232279
    233280    return canvas;

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

    r218440 r218544  
    3939namespace WebCore {
    4040
    41 class DocumentLoader;
    4241class InspectorPageAgent;
    4342class WebGLRenderingContextBase;
    … …  
    5958    void enable(ErrorString&) override;
    6059    void disable(ErrorString&) override;
     60    void requestNode(ErrorString&, const String& canvasId, int* nodeId) override;
     61    void requestContent(ErrorString&, const String& canvasId, String* content) override;
    6162
    6263    // InspectorInstrumentation

  • trunk/Source/WebInspectorUI/ChangeLog

    r218521 r218544  
     12017-06-19  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: create canvas content view and details sidebar panel
     4        https://bugs.webkit.org/show_bug.cgi?id=138941
     5        <rdar://problem/19051672>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        * UserInterface/Models/Canvas.js:
     10        (WebInspector.Canvas):
     11        (WebInspector.Canvas.fromPayload):
     12        (WebInspector.Canvas.prototype.get displayName):
     13        (WebInspector.Canvas.requestNode): Added.
     14        (WebInspector.Canvas.prototype.requestContent): Added.
     15        (WebInspector.Canvas.prototype.saveIdentityToCookie):
     16
     17        * UserInterface/Controllers/CanvasManager.js:
     18        (WebInspector.CanvasManager.prototype.canvasAdded):
     19        (WebInspector.CanvasManager.prototype.canvasRemoved):
     20        * UserInterface/Models/Collection.js:
     21        * UserInterface/Models/Frame.js:
     22        (WebInspector.Frame):
     23        (WebInspector.Frame.prototype.get canvasCollection):
     24        (WebInspector.Frame.prototype.commitProvisionalLoad):
     25        Create a Collection for Canvas in each Frame, and modify it when canvas events are fired.
     26
     27        * UserInterface/Views/CanvasContentView.css: Added.
     28        (.content-view.canvas > .preview):
     29        (.content-view.canvas > .preview > img):
     30        * UserInterface/Views/CanvasContentView.js: Added.
     31        (WebInspector.CanvasContentView):
     32        (WebInspector.CanvasContentView.prototype.get navigationItems):
     33        (WebInspector.CanvasContentView.prototype.shown):
     34        (WebInspector.CanvasContentView.prototype.hidden):
     35        (WebInspector.CanvasContentView.prototype._showPreview):
     36        (WebInspector.CanvasContentView.prototype._updateImageGrid):
     37        (WebInspector.CanvasContentView.prototype._showGridButtonClicked):
     38        * UserInterface/Views/CanvasDetailsSidebarPanel.js: Added.
     39        (WebInspector.CanvasDetailsSidebarPanel):
     40        (WebInspector.CanvasDetailsSidebarPanel.prototype.inspect):
     41        (WebInspector.CanvasDetailsSidebarPanel.prototype.get canvas):
     42        (WebInspector.CanvasDetailsSidebarPanel.prototype.set canvas):
     43        (WebInspector.CanvasDetailsSidebarPanel.prototype.initialLayout):
     44        (WebInspector.CanvasDetailsSidebarPanel.prototype.layout):
     45        (WebInspector.CanvasDetailsSidebarPanel.prototype._refreshIdentitySection):
     46        (WebInspector.CanvasDetailsSidebarPanel.prototype._refreshSourceSection.this._canvas.requestNode.):
     47        (WebInspector.CanvasDetailsSidebarPanel.prototype._refreshSourceSection):
     48        * UserInterface/Views/CanvasTreeElement.js: Added.
     49        (WebInspector.CanvasTreeElement):
     50
     51        * UserInterface/Views/FrameTreeElement.js:
     52        (WebInspector.FrameTreeElement.prototype.onattach):
     53        (WebInspector.FrameTreeElement.prototype.ondetach):
     54        (WebInspector.FrameTreeElement.prototype.onpopulate):
     55        (WebInspector.FrameTreeElement.prototype._canvasWasAdded):
     56        (WebInspector.FrameTreeElement.prototype._canvasWasRemoved):
     57        (WebInspector.FrameTreeElement):
     58        * UserInterface/Base/Main.js:
     59        * UserInterface/Views/ContentView.js:
     60        (WebInspector.ContentView.createFromRepresentedObject):
     61        (WebInspector.ContentView.isViewable):
     62        * UserInterface/Views/ResourceSidebarPanel.js:
     63        (WebInspector.ResourceSidebarPanel):
     64        (WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
     65        (WebInspector.ResourceSidebarPanel.prototype._treeSelectionDidChange):
     66        * UserInterface/Views/ResourcesTabContentView.js:
     67        (WebInspector.ResourcesTabContentView):
     68        (WebInspector.ResourcesTabContentView.prototype.canShowRepresentedObject):
     69        Show Canvas objects and tie them to the correct ContentView and TreeElement subclasses.
     70
     71        * Localizations/en.lproj/localizedStrings.js:
     72        * UserInterface/Main.html:
     73        * UserInterface/Images/Canvas.svg: Added.
     74        * UserInterface/Views/ResourceIcons.css:
     75        (.canvas .icon):
     76        Added new files/rules/strings related to Canvas UI.
     77
     78        * UserInterface/Views/SettingsTabContentView.css:
     79        (.content-view.settings .navigation-bar):
     80
     81        * UserInterface/Base/Setting.js:
     82        * UserInterface/Views/SettingsTabContentView.js:
     83        (WebInspector.SettingsTabContentView.prototype.initialLayout):
     84        (WebInspector.SettingsTabContentView.prototype._createGeneralSettingsView):
     85        (WebInspector.SettingsTabContentView.prototype._createDebugSettingsView):
     86        Add an experimental settings toggle in the Debug view for showing canvas contexts.
     87
     88        * UserInterface/Views/FolderizedTreeElement.js:
     89        (WebInspector.FolderizedTreeElement.prototype._compareTreeElementsByMainTitle):
     90        Drive-by fix: ensure that sorting also includes numbers, so that 1 < 2 < 10.
     91
     92        * UserInterface/Views/ImageResourceContentView.js:
     93        (WebInspector.ImageResourceContentView.prototype.shown):
     94        (WebInspector.ImageResourceContentView.prototype.hidden):
     95        (WebInspector.ImageResourceContentView.prototype._updateImageGrid):
     96        (WebInspector.ImageResourceContentView.prototype._showGridButtonClicked):
     97        (WebInspector.ImageResourceContentView):
     98        Drive-by fix: change the activated state of the Show Grid navigation item if it changes
     99        in another view.
     100
    11012017-06-19  Devin Rousso  <drousso@apple.com>
    2102

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

    r218521 r218544  
    5656localizedStrings[", "] = ", ";
    5757localizedStrings["1 match"] = "1 match";
     58localizedStrings["2D"] = "2D";
    5859localizedStrings["Accessibility"] = "Accessibility";
    5960localizedStrings["Action"] = "Action";
    … …  
    137138localizedStrings["Busy"] = "Busy";
    138139localizedStrings["CSP Hash"] = "CSP Hash";
     140localizedStrings["CSS Canvas"] = "CSS Canvas";
     141localizedStrings["CSS canvas “%s”"] = "CSS canvas “%s”";
    139142localizedStrings["Cached"] = "Cached";
    140143localizedStrings["Call Frames Truncated"] = "Call Frames Truncated";
    … …  
    144147localizedStrings["Cancel Automatic Continue"] = "Cancel Automatic Continue";
    145148localizedStrings["Cancel comparison"] = "Cancel comparison";
     149localizedStrings["Canvas"] = "Canvas";
     150localizedStrings["Canvas %d"] = "Canvas %d";
     151localizedStrings["Canvas %s"] = "Canvas %s";
     152localizedStrings["Canvas:"] = "Canvas:";
     153localizedStrings["Canvases"] = "Canvases";
    146154localizedStrings["Cap"] = "Cap";
    147155localizedStrings["Caps"] = "Caps";
    … …  
    263271localizedStrings["Delete Node"] = "Delete Node";
    264272localizedStrings["Detach into separate window"] = "Detach into separate window";
     273localizedStrings["Detached"] = "Detached";
    265274localizedStrings["Details"] = "Details";
    266275localizedStrings["Did you mean “%s”?\nClick to replace."] = "Did you mean “%s”?\nClick to replace.";
    … …  
    562571localizedStrings["No Layer Available"] = "No Layer Available";
    563572localizedStrings["No Parameters"] = "No Parameters";
     573localizedStrings["No Preview Available"] = "No Preview Available";
    564574localizedStrings["No Properties"] = "No Properties";
    565575localizedStrings["No Properties \u2014 Click to Edit"] = "No Properties \u2014 Click to Edit";
    … …  
    752762localizedStrings["Show All Nodes (%d More)"] = "Show All Nodes (%d More)";
    753763localizedStrings["Show Console tab"] = "Show Console tab";
     764localizedStrings["Show Contexts in Resources Tab"] = "Show Contexts in Resources Tab";
    754765localizedStrings["Show Grid"] = "Show Grid";
    755766localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";

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

    r218440 r218544  
    11321132        || representedObject instanceof WebInspector.Resource
    11331133        || representedObject instanceof WebInspector.Script
    1134         || representedObject instanceof WebInspector.CSSStyleSheet)
     1134        || representedObject instanceof WebInspector.CSSStyleSheet
     1135        || representedObject instanceof WebInspector.Canvas)
    11351136        return WebInspector.ResourcesTabContentView;
    11361137

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

    r218159 r218544  
    122122    showScopeChainOnPause: new WebInspector.Setting("show-scope-chain-sidebar", true),
    123123    showImageGrid: new WebInspector.Setting("show-image-grid", false),
     124
     125    // Experimental
     126    experimentalShowCanvasContextsInResources: new WebInspector.Setting("experimental-show-canvas-contexts-in-resources", false),
    124127};

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

    r218440 r218544  
    5454        this._canvasIdentifierMap.set(canvas.identifier, canvas);
    5555
     56        canvas.frame.canvasCollection.add(canvas);
     57
    5658        this.dispatchEventToListeners(WebInspector.CanvasManager.Event.CanvasWasAdded, {canvas});
    5759    }
    … …  
    6567        if (!canvas)
    6668            return;
     69
     70        canvas.frame.canvasCollection.remove(canvas);
    6771
    6872        this.dispatchEventToListeners(WebInspector.CanvasManager.Event.CanvasWasRemoved, {canvas});

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

    r218440 r218544  
    4646    <link rel="stylesheet" href="Views/CallFrameTreeElement.css">
    4747    <link rel="stylesheet" href="Views/CallFrameView.css">
     48    <link rel="stylesheet" href="Views/CanvasContentView.css">
    4849    <link rel="stylesheet" href="Views/ChartDetailsSectionRow.css">
    4950    <link rel="stylesheet" href="Views/CircleChart.css">
    … …  
    509510    <script src="Views/CallFrameTreeElement.js"></script>
    510511    <script src="Views/CallFrameView.js"></script>
     512    <script src="Views/CanvasContentView.js"></script>
     513    <script src="Views/CanvasDetailsSidebarPanel.js"></script>
     514    <script src="Views/CanvasTreeElement.js"></script>
    511515    <script src="Views/ChartDetailsSectionRow.js"></script>
    512516    <script src="Views/CircleChart.js"></script>

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

    r218440 r218544  
    2626WebInspector.Canvas = class Canvas extends WebInspector.Object
    2727{
    28     constructor(identifier, contextType, frame, cssCanvasName)
     28    constructor(identifier, contextType, frame, {domNode, cssCanvasName} = {})
    2929    {
    3030        super();
    … …  
    3737        this._contextType = contextType;
    3838        this._frame = frame;
     39        this._domNode = domNode || null;
    3940        this._cssCanvasName = cssCanvasName || "";
    4041    }
    … …  
    5758
    5859        let frame = WebInspector.frameResourceManager.frameForIdentifier(payload.frameId);
    59         return new WebInspector.Canvas(payload.canvasId, contextType, frame, payload.cssCanvasName);
     60        return new WebInspector.Canvas(payload.canvasId, contextType, frame, {
     61            domNode: payload.nodeId ? WebInspector.domTreeManager.nodeForId(payload.nodeId) : null,
     62            cssCanvasName: payload.cssCanvasName,
     63        });
    6064    }
    6165
    … …  
    6670            return WebInspector.UIString("2D");
    6771        case WebInspector.Canvas.ContextType.WebGL:
    68             return WebInspector.UIString("WebGL");
     72            return WebInspector.unlocalizedString("WebGL");
    6973        default:
    7074            console.error("Invalid canvas context type", contextType);
    … …  
    8690    get displayName()
    8791    {
    88         if (this.cssCanvasName) {
    89             console.assert(!this._node, "Unexpected DOM node for CSS canvas.");
     92        if (this._cssCanvasName)
    9093            return WebInspector.UIString("CSS canvas “%s”").format(this._cssCanvasName);
     94
     95        if (this._domNode) {
     96            let idSelector = this._domNode.escapedIdSelector;
     97            if (idSelector)
     98                return WebInspector.UIString("Canvas %s").format(idSelector);
    9199        }
    92 
    93         // TODO:if the DOM node for the canvas is known and an id attribute value
    94         // exists, return the following: WebInspector.UIString("Canvas #%s").format(id);
    95100
    96101        if (!this._uniqueDisplayNameNumber)
    … …  
    99104    }
    100105
     106    requestNode(callback)
     107    {
     108        if (this._domNode) {
     109            callback(this._domNode);
     110            return;
     111        }
     112
     113        WebInspector.domTreeManager.requestDocument((document) => {
     114            CanvasAgent.requestNode(this._identifier, (error, nodeId) => {
     115                if (error) {
     116                    callback(null);
     117                    return;
     118                }
     119
     120                this._domNode = WebInspector.domTreeManager.nodeForId(nodeId);
     121                callback(this._domNode);
     122            });
     123        });
     124    }
     125
     126    requestContent(callback)
     127    {
     128        CanvasAgent.requestContent(this._identifier, (error, content) => {
     129            if (error) {
     130                callback(null);
     131                return;
     132            }
     133
     134            callback(content);
     135        });
     136    }
     137
    101138    saveIdentityToCookie(cookie)
    102139    {
    103140        cookie[WebInspector.Canvas.FrameURLCookieKey] = this._frame.url.hash;
     141
    104142        if (this._cssCanvasName)
    105143            cookie[WebInspector.Canvas.CSSCanvasNameCookieKey] = this._cssCanvasName;
     144        else if (this._domNode)
     145            cookie[WebInspector.Canvas.NodePathCookieKey] = this._domNode.path;
    106146
    107         // TODO: if the canvas has an associated DOM node, and the node path to the cookie.
    108147    }
    109148};
    … …  
    115154
    116155WebInspector.Canvas.ContextType = {
    117     Canvas2D: Symbol("canvas-2d"),
    118     WebGL: Symbol("webgl"),
     156    Canvas2D: "canvas-2d",
     157    WebGL: "webgl",
    119158};
     159
     160WebInspector.Canvas.ResourceSidebarType = "resource-type-canvas";

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

    r217258 r218544  
    118118    Script: (object) => object instanceof WebInspector.Script,
    119119    CSSStyleSheet: (object) => object instanceof WebInspector.CSSStyleSheet,
     120    Canvas: (object) => object instanceof WebInspector.Canvas,
    120121};

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

    r208246 r218544  
    4040        this._provisionalResourceCollection = new WebInspector.ResourceCollection;
    4141        this._extraScriptCollection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.Script);
     42        this._canvasCollection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.Canvas);
    4243
    4344        this._childFrameCollection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.Frame);
    … …  
    5960    get resourceCollection() { return this._resourceCollection; }
    6061    get extraScriptCollection() { return this._extraScriptCollection; }
     62    get canvasCollection() { return this._canvasCollection; }
    6163    get childFrameCollection() { return this._childFrameCollection; }
    6264
    … …  
    134136        this._provisionalResourceCollection = new WebInspector.ResourceCollection;
    135137        this._extraScriptCollection.clear();
     138        this._canvasCollection.clear();
    136139
    137140        this.clearExecutionContexts(true);

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

    r217258 r218544  
    5858            return new WebInspector.TextResourceContentView(representedObject, extraArguments);
    5959
     60        if (representedObject instanceof WebInspector.Canvas)
     61            return new WebInspector.CanvasContentView(representedObject, extraArguments);
     62
    6063        if (representedObject instanceof WebInspector.TimelineRecording)
    6164            return new WebInspector.TimelineRecordingContentView(representedObject, extraArguments);
    … …  
    240243        if (representedObject instanceof WebInspector.CSSStyleSheet)
    241244            return true;
     245        if (representedObject instanceof WebInspector.Canvas)
     246            return true;
    242247        if (representedObject instanceof WebInspector.TimelineRecording)
    243248            return true;

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

    r208520 r218544  
    238238
    239239        // Then sort by title.
    240         return a.mainTitle.localeCompare(b.mainTitle);
     240        return a.mainTitle.localeCompare(b.mainTitle, undefined, {numeric: true});
    241241    }
    242242

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

    r217258 r218544  
    5454        this.registerFolderizeSettings("extra-scripts", WebInspector.UIString("Extra Scripts"), this._frame.extraScriptCollection, WebInspector.ScriptTreeElement);
    5555
     56        if (window.CanvasAgent && WebInspector.settings.experimentalShowCanvasContextsInResources.value)
     57            this.registerFolderizeSettings("canvases", WebInspector.UIString("Canvases"), this._frame.canvasCollection, WebInspector.CanvasTreeElement);
     58
    5659        function forwardingConstructor(representedObject, ...extraArguments) {
    5760            if (representedObject instanceof WebInspector.CSSStyleSheet)
    … …  
    122125
    123126        WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetAdded, this._styleSheetAdded, this);
     127
     128        if (window.CanvasAgent && WebInspector.settings.experimentalShowCanvasContextsInResources.value) {
     129            this._frame.canvasCollection.addEventListener(WebInspector.Collection.Event.ItemAdded, this._canvasWasAdded, this);
     130            this._frame.canvasCollection.addEventListener(WebInspector.Collection.Event.ItemRemoved, this._canvasWasRemoved, this);
     131        }
    124132    }
    125133
    … …  
    127135    {
    128136        WebInspector.cssStyleManager.removeEventListener(WebInspector.CSSStyleManager.Event.StyleSheetAdded, this._styleSheetAdded, this);
     137
     138        if (window.CanvasAgent && WebInspector.settings.experimentalShowCanvasContextsInResources.value) {
     139            this._frame.canvasCollection.removeEventListener(WebInspector.Collection.Event.ItemAdded, this._canvasWasAdded, this);
     140            this._frame.canvasCollection.removeEventListener(WebInspector.Collection.Event.ItemRemoved, this._canvasWasRemoved, this);
     141        }
    129142
    130143        super.ondetach();
    … …  
    187200        }
    188201
     202        if (window.CanvasAgent && WebInspector.settings.experimentalShowCanvasContextsInResources.value) {
     203            for (let canvas of this._frame.canvasCollection.items)
     204                this.addChildForRepresentedObject(canvas);
     205        }
     206
    189207        const doNotCreateIfMissing = true;
    190208        WebInspector.cssStyleManager.preferredInspectorStyleSheetForFrame(this._frame, this.addRepresentedObjectToNewChildQueue.bind(this), doNotCreateIfMissing);
    … …  
    280298        this.addRepresentedObjectToNewChildQueue(event.data.styleSheet);
    281299    }
     300
     301    _canvasWasAdded(event)
     302    {
     303        this.addRepresentedObjectToNewChildQueue(event.data.item);
     304    }
     305
     306    _canvasWasRemoved(event)
     307    {
     308        this.removeChildForRepresentedObject(event.data.item);
     309    }
    282310};

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

    r218159 r218544  
    6060        this._imageElement.src = objectURL;
    6161        this._imageElement.setAttribute("filename", this.resource.urlComponents.lastPathComponent || "");
    62         this._toggleImageGrid();
     62        this._updateImageGrid();
    6363
    6464        this.element.appendChild(this._imageElement);
    … …  
    7171        super.shown();
    7272
    73         this._toggleImageGrid();
     73        this._updateImageGrid();
     74
     75        WebInspector.settings.showImageGrid.addEventListener(WebInspector.Setting.Event.Changed, this._updateImageGrid, this);
     76    }
     77
     78    hidden()
     79    {
     80        WebInspector.settings.showImageGrid.removeEventListener(WebInspector.Setting.Event.Changed, this._updateImageGrid, this);
     81
     82        super.hidden();
    7483    }
    7584
    7685    // Private
    7786
    78     _toggleImageGrid()
     87    _updateImageGrid()
    7988    {
    8089        if (!this._imageElement)
    8190            return;
    8291
    83         let activated = this._showGridButtonNavigationItem.activated;
    84        
     92        let activated = WebInspector.settings.showImageGrid.value;
     93        this._showGridButtonNavigationItem.activated = activated;
    8594        this._imageElement.classList.toggle("show-grid", activated);
    8695    }
    … …  
    8897    _showGridButtonClicked(event)
    8998    {
    90         WebInspector.settings.showImageGrid.value = this._showGridButtonNavigationItem.activated = !this._showGridButtonNavigationItem.activated;
     99        WebInspector.settings.showImageGrid.value = !this._showGridButtonNavigationItem.activated;
    91100
    92         this._toggleImageGrid();
     101        this._updateImageGrid();
    93102    }
    94103};

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

    r218042 r218544  
    7272}
    7373
     74.canvas .icon {
     75    content: url(../Images/Canvas.svg);
     76}
     77
    7478.large .resource-icon .icon {
    7579    content: image-set(url(../Images/DocumentGenericLarge.png) 1x, url(../Images/DocumentGenericLarge@2x.png) 2x);

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

    r217750 r218544  
    5151        }
    5252
     53        let canvasesScopeBarItem = new WebInspector.ScopeBarItem(scopeItemPrefix + WebInspector.Canvas.ResourceSidebarType, WebInspector.UIString("Canvases"));
     54        canvasesScopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol] = WebInspector.Canvas.ResourceSidebarType;
     55        scopeBarItems.insertAtIndex(canvasesScopeBarItem, scopeBarItems.length - 1);
     56
    5357        this._scopeBar = new WebInspector.ScopeBar("resource-sidebar-scope-bar", scopeBarItems, scopeBarItems[0], true);
    5458        this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
    … …  
    225229            if (treeElement instanceof WebInspector.ScriptTreeElement)
    226230                return selectedScopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol] === WebInspector.Resource.Type.Script;
     231
     232            if (treeElement instanceof WebInspector.CanvasTreeElement)
     233                return selectedScopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol] === WebInspector.Canvas.ResourceSidebarType;
    227234
    228235            console.assert(treeElement instanceof WebInspector.ResourceTreeElement, "Unknown treeElement", treeElement);
    … …  
    446453            || treeElement instanceof WebInspector.ScriptTreeElement
    447454            || treeElement instanceof WebInspector.CSSStyleSheetTreeElement
    448             || treeElement instanceof WebInspector.ContentFlowTreeElement) {
     455            || treeElement instanceof WebInspector.ContentFlowTreeElement
     456            || treeElement instanceof WebInspector.CanvasTreeElement) {
    449457            const cookie = null;
    450458            const options = {

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

    r217460 r218544  
    3131        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
    3232        let detailsSidebarPanelConstructors = [WebInspector.ResourceDetailsSidebarPanel, WebInspector.ProbeDetailsSidebarPanel];
     33
     34        if (window.CanvasAgent && WebInspector.settings.experimentalShowCanvasContextsInResources.value)
     35            detailsSidebarPanelConstructors.push(WebInspector.CanvasDetailsSidebarPanel);
    3336
    3437        // FIXME: Until ContentFlows are moved to the Elements tab, these details sidebar panels need to be included.
    … …  
    6770            || representedObject instanceof WebInspector.CSSStyleSheet
    6871            || representedObject instanceof WebInspector.ContentFlow
     72            || representedObject instanceof WebInspector.Canvas
    6973            || representedObject instanceof WebInspector.Collection;
    7074    }

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

    r216451 r218544  
    2828    padding-bottom: 6vh;
    2929    overflow-y: auto;
     30}
     31
     32.content-view.settings .navigation-bar {
     33    position: -webkit-sticky;
     34    top: 0;
     35    background-color: white;
    3036}
    3137

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

    r217625 r218544  
    165165        WebInspector.notifications.addEventListener(WebInspector.Notification.DebugUIEnabledDidChange, this._updateDebugSettingsViewVisibility, this);
    166166        this._updateDebugSettingsViewVisibility();
     167
     168        this.selectedSettingsView = this._settingsViews[0];
    167169    }
    168170
    … …  
    223225
    224226        this.addSettingsView(generalSettingsView);
    225         this.selectedSettingsView = generalSettingsView;
    226227    }
    227228
    … …  
    259260        layoutDirectionEditor.value = WebInspector.settings.layoutDirection.value;
    260261        layoutDirectionEditor.addEventListener(WebInspector.SettingEditor.Event.ValueDidChange, () => { WebInspector.setLayoutDirection(layoutDirectionEditor.value); });
     262
     263        if (window.CanvasAgent) {
     264            this._debugSettingsView.addSeparator();
     265
     266            this._debugSettingsView.addSetting(WebInspector.UIString("Canvas:"), WebInspector.settings.experimentalShowCanvasContextsInResources, WebInspector.UIString("Show Contexts in Resources Tab"));
     267        }
    261268
    262269        this.addSettingsView(this._debugSettingsView);
Note: See TracChangeset for help on using the changeset viewer.