Changeset 143206 in webkit


Ignore:
Timestamp:
Feb 18, 2013 5:45:36 AM (11 years ago)
Author:
aandrey@chromium.org
Message:

Web Inspector: [Canvas] group replay log calls by frames
​https://bugs.webkit.org/show_bug.cgi?id=110101

Reviewed by Pavel Feldman.

Source/WebCore:

Group canvas replay log by frames, then by draw calls.

  • inspector/InjectedScriptCanvasModuleSource.js:

(.):

  • inspector/Inspector.json:
  • inspector/front-end/CanvasProfileView.js:

(WebInspector.CanvasProfileView):
(WebInspector.CanvasProfileView.prototype.dispose):
(WebInspector.CanvasProfileView.prototype._appendCallNode):
(WebInspector.CanvasProfileView.prototype._appendDrawCallGroup):

LayoutTests:

  • inspector/profiler/canvas-profiler-test.js:
  • inspector/profiler/canvas2d/canvas-replay-log-grid-expected.txt:
  • inspector/profiler/canvas2d/canvas-replay-log-grid.html:
  • inspector/profiler/canvas2d/canvas-stack-trace-expected.txt:
Location:
trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r143205 r143206  
     12013-02-18  Andrey Adaikin  <aandrey@chromium.org>
     2
     3        Web Inspector: [Canvas] group replay log calls by frames
     4        https://bugs.webkit.org/show_bug.cgi?id=110101
     5
     6        Reviewed by Pavel Feldman.
     7
     8        * inspector/profiler/canvas-profiler-test.js:
     9        * inspector/profiler/canvas2d/canvas-replay-log-grid-expected.txt:
     10        * inspector/profiler/canvas2d/canvas-replay-log-grid.html:
     11        * inspector/profiler/canvas2d/canvas-stack-trace-expected.txt:
     12
    1132013-02-18  Ádám Kallai  <kadam@inf.u-szeged.hu>
    214

  • trunk/LayoutTests/inspector/profiler/canvas-profiler-test.js

    r141403 r143206  
    6565        call.value ? "value:" + call.value.description : "",
    6666        call.isDrawingCall ? "isDrawingCall:true" : "",
     67        call.isFrameEndCall ? "isFrameEndCall:true" : "",
    6768        "sourceURL:" + formatSourceURL(call.sourceURL),
    6869        "lineNumber:" + call.lineNumber,

  • trunk/LayoutTests/inspector/profiler/canvas2d/canvas-replay-log-grid-expected.txt

    r143000 r143206  
    33Bug 109592
    44
    5    |         Draw call group #1 |                                |
    6  1 |                beginPath() | canvas-replay-log-grid.html:26 |
    7  2 |       rect(0, 0, 100, 100) | canvas-replay-log-grid.html:27 |
    8  3 |    context.fillStyle = red | canvas-replay-log-grid.html:28 |
    9  4 |                     fill() | canvas-replay-log-grid.html:29 |
    10    |         Draw call group #2 |                                |
    11  5 |                beginPath() | canvas-replay-log-grid.html:26 |
    12  6 |         rect(5, 5, 95, 95) | canvas-replay-log-grid.html:27 |
    13  7 |  context.fillStyle = green | canvas-replay-log-grid.html:28 |
    14  8 |                     fill() | canvas-replay-log-grid.html:29 |
    15    |         Draw call group #3 |                                |
    16  9 |                beginPath() | canvas-replay-log-grid.html:26 |
    17 10 |       rect(10, 10, 90, 90) | canvas-replay-log-grid.html:27 |
    18 11 |   context.fillStyle = blue | canvas-replay-log-grid.html:28 |
    19 12 |                     fill() | canvas-replay-log-grid.html:29 |
    20    |         Draw call group #4 |                                |
    21 13 |                beginPath() | canvas-replay-log-grid.html:26 |
    22 14 |       rect(15, 15, 85, 85) | canvas-replay-log-grid.html:27 |
    23 15 | context.fillStyle = yellow | canvas-replay-log-grid.html:28 |
    24 16 |                     fill() | canvas-replay-log-grid.html:29 |
     5   |                   Frame #1 |                                | |
     6   |         Draw call group #1 |                                | |
     7 1 |                beginPath() | canvas-replay-log-grid.html:26 | |
     8 2 |       rect(0, 0, 100, 100) | canvas-replay-log-grid.html:27 | |
     9 3 |    context.fillStyle = red | canvas-replay-log-grid.html:28 | |
     10 4 |                     fill() | canvas-replay-log-grid.html:29 | |
     11   |         Draw call group #2 |                                | |
     12 5 |                beginPath() | canvas-replay-log-grid.html:26 | |
     13 6 |         rect(5, 5, 95, 95) | canvas-replay-log-grid.html:27 | |
     14 7 |  context.fillStyle = green | canvas-replay-log-grid.html:28 | |
     15 8 |                     fill() | canvas-replay-log-grid.html:29 | |
     16   |                   Frame #2 |                                | |
     17   |         Draw call group #3 |                                | |
     18 9 |                beginPath() | canvas-replay-log-grid.html:26 | |
     1910 |       rect(10, 10, 90, 90) | canvas-replay-log-grid.html:27 | |
     2011 |   context.fillStyle = blue | canvas-replay-log-grid.html:28 | |
     2112 |                     fill() | canvas-replay-log-grid.html:29 | |
     22   |         Draw call group #4 |                                | |
     2313 |                beginPath() | canvas-replay-log-grid.html:26 | |
     2414 |       rect(15, 15, 85, 85) | canvas-replay-log-grid.html:27 | |
     2515 | context.fillStyle = yellow | canvas-replay-log-grid.html:28 | |
     2616 |                     fill() | canvas-replay-log-grid.html:29 | |
     27   |         Draw call group #5 |                                | |
     2817 |                beginPath() | canvas-replay-log-grid.html:26 | |
     2918 |       rect(20, 20, 80, 80) | canvas-replay-log-grid.html:27 | |
     3019 |  context.fillStyle = black | canvas-replay-log-grid.html:28 | |
     3120 |                     fill() | canvas-replay-log-grid.html:29 | |
    2532

  • trunk/LayoutTests/inspector/profiler/canvas2d/canvas-replay-log-grid.html

    r143000 r143206  
    4343    profilesPanel._onProfileTypeSelected({data: profileType});
    4444
     45    InspectorTest.override(profileType, "_isSingleFrameMode", function() { return false; }, true /*sticky*/);
    4546    InspectorTest.addSniffer(profileType, "_didStartCapturingFrame", didStartCapturingFrame);
    4647    profilesPanel.toggleRecordButton();
    … …  
    5354        traceLogId = profileHeader.traceLogId();
    5455        profilesPanel.showProfile(profileHeader);
    55         InspectorTest.evaluateInConsole("doSomeCanvasCalls(4)", didSomeCanvasCalls);
     56        InspectorTest.addSniffer(profileHeader, "_updateCapturingStatus", didReceiveFirstFrame);
     57        InspectorTest.evaluateInConsole("doSomeCanvasCalls(2)");
    5658    }
    57     function didSomeCanvasCalls()
     59    function didReceiveFirstFrame(traceLog)
    5860    {
    59         InspectorTest.addSniffer(profileHeader, "_updateCapturingStatus", onUpdateCapturingStatus);
     61        if (!traceLog || traceLog.calls.length < 2) {
     62            InspectorTest.addSniffer(profileHeader, "_updateCapturingStatus", didReceiveFirstFrame);
     63            return;
     64        }
     65        InspectorTest.evaluateInConsole("doSomeCanvasCalls(3)", didSecondFrameCalls);
     66    }
     67    function didSecondFrameCalls()
     68    {
     69        InspectorTest.addSniffer(profileHeader, "_updateCapturingStatus", didReceiveSecondFrame);
    6070        profilesPanel.toggleRecordButton();
    6171    }
    62     function onUpdateCapturingStatus()
     72    function didReceiveSecondFrame()
    6373    {
    6474        if (profileHeader._alive) {
    65             InspectorTest.addSniffer(profileHeader, "_updateCapturingStatus", onUpdateCapturingStatus);
     75            InspectorTest.addSniffer(profileHeader, "_updateCapturingStatus", didReceiveSecondFrame);
    6676            return;
    6777        }
    … …  
    112122                line += alignText(textRows[i][j], textWidths[j]);
    113123            }
     124            if (line)
     125                line += "|";
    114126            InspectorTest.addResult(line);
    115127        }

  • trunk/LayoutTests/inspector/profiler/canvas2d/canvas-stack-trace-expected.txt

    r140679 r143206  
    77  {Call}  functionName:"rect"  arguments:[0,0,100,100]  sourceURL:"canvas-stack-trace.html"  lineNumber:20  columnNumber:13
    88  {Call}  property:"fillStyle"  value:red  sourceURL:"canvas-stack-trace.html"  lineNumber:21  columnNumber:23
    9   {Call}  functionName:"fill"  arguments:[]  isDrawingCall:true  sourceURL:"canvas-stack-trace.html"  lineNumber:22  columnNumber:13
     9  {Call}  functionName:"fill"  arguments:[]  isDrawingCall:true  isFrameEndCall:true  sourceURL:"canvas-stack-trace.html"  lineNumber:22  columnNumber:13
    1010

  • trunk/Source/WebCore/ChangeLog

    r143204 r143206  
     12013-02-18  Andrey Adaikin  <aandrey@chromium.org>
     2
     3        Web Inspector: [Canvas] group replay log calls by frames
     4        https://bugs.webkit.org/show_bug.cgi?id=110101
     5
     6        Reviewed by Pavel Feldman.
     7
     8        Group canvas replay log by frames, then by draw calls.
     9
     10        * inspector/InjectedScriptCanvasModuleSource.js:
     11        (.):
     12        * inspector/Inspector.json:
     13        * inspector/front-end/CanvasProfileView.js:
     14        (WebInspector.CanvasProfileView):
     15        (WebInspector.CanvasProfileView.prototype.dispose):
     16        (WebInspector.CanvasProfileView.prototype._appendCallNode):
     17        (WebInspector.CanvasProfileView.prototype._appendDrawCallGroup):
     18
    1192013-02-18  Christophe Dumez  <ch.dumez@sisa.samsung.com>
    220

  • trunk/Source/WebCore/inspector/InjectedScriptCanvasModuleSource.js

    r141884 r143206  
    27212721    /** @type {!Cache} */
    27222722    this._replayablesCache = new Cache();
     2723    /** @type {!Object.<number, boolean>} */
     2724    this._frameEndCallIndexes = {};
    27232725}
    27242726
    … …  
    27632765    {
    27642766        this._replayableCalls.push(call.toReplayable(this._replayablesCache));
     2767    },
     2768
     2769    addFrameEndMark: function()
     2770    {
     2771        var index = this._replayableCalls.length - 1;
     2772        if (index >= 0)
     2773            this._frameEndCallIndexes[index] = true;
     2774    },
     2775
     2776    /**
     2777     * @param {number} index
     2778     * @return {boolean}
     2779     */
     2780    isFrameEndCallAt: function(index)
     2781    {
     2782        return !!this._frameEndCallIndexes[index];
    27652783    }
    27662784}
    … …  
    28492867/**
    28502868 * @constructor
     2869 * @param {function()} callback
     2870 */
     2871function ZeroTimeoutCallback(callback)
     2872{
     2873    this._callback = callback;
     2874    this._scheduled = false;
     2875}
     2876
     2877ZeroTimeoutCallback.prototype = {
     2878    schedule: function()
     2879    {
     2880        if (this._scheduled)
     2881            return;
     2882        this._scheduled = true;
     2883        var callback = this._onCallback.bind(this);
     2884        // We need a fastest async callback, whatever fires first.
     2885        // Usually a postMessage should be faster than a setTimeout(0).
     2886        var channel = new MessageChannel();
     2887        channel.port1.onmessage = callback;
     2888        channel.port2.postMessage("");
     2889        inspectedWindow.setTimeout(callback, 0);
     2890    },
     2891
     2892    cancel: function()
     2893    {
     2894        this._scheduled = false;
     2895    },
     2896
     2897    _onCallback: function()
     2898    {
     2899        if (!this._scheduled)
     2900            return;
     2901        this._scheduled = false;
     2902        this._callback();
     2903    }
     2904}
     2905
     2906/**
     2907 * @constructor
    28512908 */
    28522909function ResourceTrackingManager()
    … …  
    28552912    this._stopCapturingOnFrameEnd = false;
    28562913    this._lastTraceLog = null;
     2914    this._frameEndScheduler = new ZeroTimeoutCallback(this.markFrameEnd.bind(this));
    28572915}
    28582916
    … …  
    28992957        this._capturing = false;
    29002958        this._stopCapturingOnFrameEnd = false;
     2959        this._frameEndScheduler.cancel();
     2960        if (this._lastTraceLog)
     2961            this._lastTraceLog.addFrameEndMark();
    29012962    },
    29022963
    … …  
    29423003            return;
    29433004        this._lastTraceLog.addCall(call);
    2944         if (this._stopCapturingOnFrameEnd && this._lastTraceLog.size() === 1) {
    2945             this._stopCapturingOnFrameEnd = false;
    2946             this._setZeroTimeouts(this.stopCapturing.bind(this, this._lastTraceLog));
    2947         }
    2948     },
    2949 
    2950     /**
    2951      * @param {function()} callback
    2952      */
    2953     _setZeroTimeouts: function(callback)
    2954     {
    2955         // We need a fastest async callback, whatever fires first.
    2956         // Usually a postMessage should be faster than a setTimeout(0).
    2957         var channel = new MessageChannel();
    2958         channel.port1.onmessage = callback;
    2959         channel.port2.postMessage("");
    2960         inspectedWindow.setTimeout(callback, 0);
     3005        this._frameEndScheduler.schedule();
     3006    },
     3007
     3008    markFrameEnd: function()
     3009    {
     3010        if (!this._lastTraceLog)
     3011            return;
     3012        this._lastTraceLog.addFrameEndMark();
     3013        if (this._stopCapturingOnFrameEnd)
     3014            this.stopCapturing(this._lastTraceLog);
    29613015    }
    29623016}
    … …  
    30693123        if (!traceLog)
    30703124            return "Error: Trace log with the given ID not found.";
     3125
     3126        // Ensure last call ends a frame.
     3127        traceLog.addFrameEndMark();
    30713128
    30723129        var replayableCalls = traceLog.replayableCalls();
    … …  
    30983155            item.lineNumber = callFrame.lineNumber;
    30993156            item.columnNumber = callFrame.columnNumber;
     3157            item.isFrameEndCall = traceLog.isFrameEndCallAt(i);
    31003158            result.calls.push(item);
    31013159        }

  • trunk/Source/WebCore/inspector/Inspector.json

    r143186 r143206  
    34943494                    { "name": "result", "$ref": "CallArgument", "optional": true },
    34953495                    { "name": "isDrawingCall", "type": "boolean", "optional": true },
     3496                    { "name": "isFrameEndCall", "type": "boolean", "optional": true },
    34963497                    { "name": "property", "type": "string", "optional": true },
    34973498                    { "name": "value", "$ref": "CallArgument", "optional": true },

  • trunk/Source/WebCore/inspector/front-end/CanvasProfileView.js

    r143000 r143206  
    9191    /** @type {!Array.<WebInspector.DataGridNode>} */
    9292    this._drawCallGroups = [];
     93    /** @type {!Array.<WebInspector.DataGridNode>} */
     94    this._frameGroups = [];
    9395
    9496    this._splitView.show(this.element);
    … …  
    107109        this._logGridNodes = [];
    108110        this._drawCallGroupNodes = [];
     111        this._frameGroups = [];
    109112        this._linkifier.reset();
    110113    },
    … …  
    370373            drawCallGroup.drawCallGroupIndex = index;
    371374            this._drawCallGroups.push(drawCallGroup);
    372             this._logGrid.rootNode().appendChild(drawCallGroup);
     375            this._appendDrawCallGroup(drawCallGroup);
    373376        }
    374377        drawCallGroup.appendChild(gridNode);
     378    },
     379
     380    /**
     381     * @param {!WebInspector.DataGridNode} drawCallGroup
     382     */
     383    _appendDrawCallGroup: function(drawCallGroup)
     384    {
     385        var frameGroup = this._frameGroups.peekLast();
     386        if (frameGroup) {
     387            var lastDrawCallGroup = frameGroup.children.peekLast();
     388            var lastNode = lastDrawCallGroup && lastDrawCallGroup.children.peekLast();
     389            if (lastNode && lastNode.call.isFrameEndCall)
     390                frameGroup = null;
     391        }
     392        if (!frameGroup) {
     393            var index = this._frameGroups.length;
     394            var data = {};
     395            data[0] = "";
     396            data[1] = "Frame #" + (index + 1);
     397            data[2] = "";
     398            frameGroup = new WebInspector.DataGridNode(data);
     399            frameGroup.selectable = true;
     400            frameGroup.frameGroupIndex = index;
     401            this._frameGroups.push(frameGroup);
     402            this._logGrid.rootNode().appendChild(frameGroup);
     403        }
     404        frameGroup.appendChild(drawCallGroup);
    375405    },
    376406
Note: See TracChangeset for help on using the changeset viewer.