Changeset 140160 in webkit


Ignore:
Timestamp:
Jan 18, 2013 9:05:12 AM (11 years ago)
Author:
aandrey@chromium.org
Message:

Web Inspector: [Canvas] UI: add a context selector to show screenshot of any canvas in the log
​https://bugs.webkit.org/show_bug.cgi?id=107274

Reviewed by Pavel Feldman.

Adding a canvas context selector to display in the replay image screenshot.
Drive-by: Reuse common CSS class "status-bar-item" to remove a lot of CSS duplication.

  • English.lproj/localizedStrings.js:
  • inspector/front-end/CanvasProfileView.js:

(WebInspector.CanvasProfileView):
(WebInspector.CanvasProfileView.prototype._createControlButton):
(WebInspector.CanvasProfileView.prototype._onReplayContextChanged):
(WebInspector.CanvasProfileView.prototype._onReplayFirstStepClick):
(WebInspector.CanvasProfileView.prototype._onReplayLastStepClick):
(WebInspector.CanvasProfileView.prototype._enableWaitIcon):
(WebInspector.CanvasProfileView.prototype._replayTraceLog.didReplayTraceLog):
(WebInspector.CanvasProfileView.prototype._replayTraceLog):
(WebInspector.CanvasProfileView.prototype._didReceiveTraceLog):
(WebInspector.CanvasProfileView.prototype._requestReplayContextInfo.didReceiveResourceInfo):
(WebInspector.CanvasProfileView.prototype._requestReplayContextInfo):

  • inspector/front-end/canvasProfiler.css:
  • inspector/front-end/inspector.css:

(.status-bar button.status-bar-item img):

Location:
trunk/Source/WebCore
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r140157 r140160  
     12013-01-18  Andrey Adaikin  <aandrey@chromium.org>
     2
     3        Web Inspector: [Canvas] UI: add a context selector to show screenshot of any canvas in the log
     4        https://bugs.webkit.org/show_bug.cgi?id=107274
     5
     6        Reviewed by Pavel Feldman.
     7
     8        Adding a canvas context selector to display in the replay image screenshot.
     9        Drive-by: Reuse common CSS class "status-bar-item" to remove a lot of CSS duplication.
     10
     11        * English.lproj/localizedStrings.js:
     12        * inspector/front-end/CanvasProfileView.js:
     13        (WebInspector.CanvasProfileView):
     14        (WebInspector.CanvasProfileView.prototype._createControlButton):
     15        (WebInspector.CanvasProfileView.prototype._onReplayContextChanged):
     16        (WebInspector.CanvasProfileView.prototype._onReplayFirstStepClick):
     17        (WebInspector.CanvasProfileView.prototype._onReplayLastStepClick):
     18        (WebInspector.CanvasProfileView.prototype._enableWaitIcon):
     19        (WebInspector.CanvasProfileView.prototype._replayTraceLog.didReplayTraceLog):
     20        (WebInspector.CanvasProfileView.prototype._replayTraceLog):
     21        (WebInspector.CanvasProfileView.prototype._didReceiveTraceLog):
     22        (WebInspector.CanvasProfileView.prototype._requestReplayContextInfo.didReceiveResourceInfo):
     23        (WebInspector.CanvasProfileView.prototype._requestReplayContextInfo):
     24        * inspector/front-end/canvasProfiler.css:
     25        * inspector/front-end/inspector.css:
     26        (.status-bar button.status-bar-item img):
     27
    1282013-01-18  Andrey Adaikin  <aandrey@chromium.org>
    229

  • trunk/Source/WebCore/English.lproj/localizedStrings.js

    r140124 r140160  
    783783localizedStrings["Next call."] = "Next call.";
    784784localizedStrings["Last call."] = "Last call.";
     785localizedStrings["Show screenshot of the last replayed resource."] = "Show screenshot of the last replayed resource.";
     786localizedStrings["Show screenshot of this context's canvas."] = "Show screenshot of this context's canvas.";
    785787localizedStrings["Reload"] = "Reload";
    786788localizedStrings["Binary File"] = "Binary File";

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

    r140157 r140160  
    5050
    5151    var replayInfoContainer = this._splitView.secondElement();
    52     var controlsContainer = replayInfoContainer.createChild("div", "canvas-replay-controls");
     52    var controlsContainer = replayInfoContainer.createChild("div", "status-bar");
    5353    var logGridContainer = replayInfoContainer.createChild("div", "canvas-replay-log");
    5454
    … …  
    5757    this._createControlButton(controlsContainer, "canvas-replay-next-step", WebInspector.UIString("Next call."), this._onReplayStepClick.bind(this, true));
    5858    this._createControlButton(controlsContainer, "canvas-replay-last-step", WebInspector.UIString("Last call."), this._onReplayLastStepClick.bind(this));
     59
     60    this._replayContextSelector = new WebInspector.StatusBarComboBox(this._onReplayContextChanged.bind(this));
     61    this._replayContextSelector.createOption("<screenshot auto>", WebInspector.UIString("Show screenshot of the last replayed resource."), "");
     62    controlsContainer.appendChild(this._replayContextSelector.element);
     63
     64    /** @type {!Object.<string, boolean>} */
     65    this._replayContexts = {};
     66    /** @type {!Object.<string, CanvasAgent.ResourceState>} */
     67    this._currentResourceStates = {};
    5968
    6069    var columns = { 0: {}, 1: {}, 2: {} };
    … …  
    114123    _createControlButton: function(parent, className, title, clickCallback)
    115124    {
    116         var button = parent.createChild("button", "canvas-control-button");
     125        var button = parent.createChild("button", "status-bar-item");
    117126        button.addStyleClass(className);
    118127        button.title = title;
    119128        button.createChild("img");
    120129        button.addEventListener("click", clickCallback, false);
     130    },
     131
     132    _onReplayContextChanged: function()
     133    {
     134        /**
     135         * @param {string?} error
     136         * @param {CanvasAgent.ResourceState} resourceState
     137         */
     138        function didReceiveResourceState(error, resourceState)
     139        {
     140            this._enableWaitIcon(false);
     141            if (error)
     142                return;
     143
     144            this._currentResourceStates[resourceState.id] = resourceState;
     145
     146            var selectedContextId = this._replayContextSelector.selectedOption().value;
     147            if (selectedContextId === resourceState.id)
     148                this._replayImageElement.src = resourceState.imageURL;
     149        }
     150
     151        var selectedContextId = this._replayContextSelector.selectedOption().value || "auto";
     152        var resourceState = this._currentResourceStates[selectedContextId];
     153        if (resourceState)
     154            this._replayImageElement.src = resourceState.imageURL;
     155        else {
     156            this._enableWaitIcon(true);
     157            this._replayImageElement.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; // Empty transparent image.
     158            CanvasAgent.getResourceState(this._traceLogId, selectedContextId, didReceiveResourceState.bind(this));
     159        }
    121160    },
    122161
    … …  
    138177    _onReplayFirstStepClick: function()
    139178    {
    140         var rootNode = this._logGrid.rootNode();
    141         var children = rootNode && rootNode.children;
    142         var firstNode = children && children[0];
     179        var firstNode = this._logGrid.rootNode().children[0];
    143180        if (firstNode)
    144181            firstNode.revealAndSelect();
    … …  
    147184    _onReplayLastStepClick: function()
    148185    {
    149         var rootNode = this._logGrid.rootNode();
    150         var children = rootNode && rootNode.children;
    151         var lastNode = children && children[children.length - 1];
     186        var children = this._logGrid.rootNode().children;
     187        var lastNode = children[children.length - 1];
    152188        if (lastNode)
    153189            lastNode.revealAndSelect();
    … …  
    162198        {
    163199            this._replayImageElement.addStyleClass("wait");
    164             this._debugInfoElement.textContent = "";
     200            this._debugInfoElement.addStyleClass("hidden");
    165201            delete this._showWaitIconTimer;
    166202        }
    … …  
    174210            }
    175211            this._replayImageElement.enableStyleClass("wait", enable);
    176             this._debugInfoElement.textContent = "";
     212            this._debugInfoElement.enableStyleClass("hidden", enable);
    177213        }
    178214    },
    … …  
    184220            return;
    185221        var time = Date.now();
     222        /**
     223         * @param {string?} error
     224         * @param {CanvasAgent.ResourceState} resourceState
     225         */
    186226        function didReplayTraceLog(error, resourceState)
    187227        {
    188228            if (callNode !== this._logGrid.selectedNode)
    189229                return;
     230
    190231            this._enableWaitIcon(false);
    191232            if (error)
    192233                return;
     234
     235            this._currentResourceStates = {};
     236            this._currentResourceStates["auto"] = resourceState;
     237            this._currentResourceStates[resourceState.id] = resourceState;
     238
    193239            this._debugInfoElement.textContent = "Replay time: " + (Date.now() - time) + "ms";
    194             this._replayImageElement.src = resourceState.imageURL;
     240            this._onReplayContextChanged();
    195241        }
    196242        this._enableWaitIcon(true);
    … …  
    201247    {
    202248        this._enableWaitIcon(false);
    203         this._logGrid.rootNode().removeChildren();
    204249        if (error || !traceLog)
    205250            return;
     251        var lastNode = null;
    206252        var calls = traceLog.calls;
    207         for (var i = 0, n = calls.length; i < n; ++i)
    208             this._logGrid.rootNode().appendChild(this._createCallNode(i, calls[i]));
    209         var lastNode = this._logGrid.rootNode().children[calls.length - 1];
     253        for (var i = 0, n = calls.length; i < n; ++i) {
     254            var call = calls[i];
     255            this._requestReplayContextInfo(call.contextId);
     256            var gridNode = this._createCallNode(i, call);
     257            this._logGrid.rootNode().appendChild(gridNode);
     258            lastNode = gridNode;
     259        }
    210260        if (lastNode)
    211261            lastNode.revealAndSelect();
    … …  
    213263
    214264    /**
     265     * @param {string} contextId
     266     */
     267    _requestReplayContextInfo: function(contextId)
     268    {
     269        if (this._replayContexts[contextId])
     270            return;
     271        this._replayContexts[contextId] = true;
     272        /**
     273         * @param {string?} error
     274         * @param {CanvasAgent.ResourceInfo} resourceInfo
     275         */
     276        function didReceiveResourceInfo(error, resourceInfo)
     277        {
     278            if (error) {
     279                delete this._replayContexts[contextId];
     280                return;
     281            }
     282            this._replayContextSelector.createOption(resourceInfo.description, WebInspector.UIString("Show screenshot of this context's canvas."), contextId);
     283        }
     284        CanvasAgent.getResourceInfo(contextId, didReceiveResourceInfo.bind(this));
     285    },
     286
     287    /**
    215288     * @param {number} index
    216289     * @param {Object} call
     290     * @return {!WebInspector.DataGridNode}
    217291     */
    218292    _createCallNode: function(index, call)

  • trunk/Source/WebCore/inspector/front-end/canvasProfiler.css

    r139614 r140160  
    6565}
    6666
    67 .canvas-replay-controls {
    68     position: absolute;
    69     top: 0;
    70     left: 0;
    71     right: 0;
    72     height: 26px;
    73     border: 1px solid #aaa;
    74     background-image: -webkit-linear-gradient(rgb(243,243,243), rgb(235,235,235));
    75 }
    76 
    7767.canvas-replay-log {
    7868    position: absolute;
    … …  
    8171    right: 0;
    8272    bottom: 0;
    83 }
    84 
    85 .canvas-control-button {
    86     display: inline-block;
    87     position: relative;
    88     width: 32px;
    89     height: 24px;
    90     padding: 0;
    91     margin-left: -1px;
    92     vertical-align: top;
    93     background-color: transparent;
    94     border: 0 transparent none;
    95     border-left: 1px solid rgb(202, 202, 202);
    96     border-right: 1px solid rgb(202, 202, 202);
    97 }
    98 
    99 .canvas-control-button:active {
    100     background-color: rgb(163,163,163);
    101     border-left: 1px solid rgb(120, 120, 120);
    102     border-right: 1px solid rgb(120, 120, 120);
    103 }
    104 
    105 .canvas-control-button:disabled {
    106     opacity: 0.5;
    107 }
    108 
    109 .canvas-control-button img {
    110     margin-top: 1px;
    11173}
    11274

  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r138166 r140160  
    695695}
    696696
     697.status-bar button.status-bar-item img {
     698    margin-top: 1px;
     699}
     700
    697701.status-bar select.status-bar-item:active,
    698702.status-bar button.status-bar-item:active {
Note: See TracChangeset for help on using the changeset viewer.