Skip to content
Permalink
Browse files
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):

Canonical link: https://commits.webkit.org/125522@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@140160 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
Andrey Adaykin committed Jan 18, 2013
1 parent 7bbfd83 commit da493fb91077fe090807ebfab923ec543af49fef
@@ -1,3 +1,30 @@
2013-01-18 Andrey Adaikin <aandrey@chromium.org>

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):

2013-01-18 Andrey Adaikin <aandrey@chromium.org>

Web Inspector: [Canvas] add getResourceInfo and getResourceState methods to the protocol
@@ -782,6 +782,8 @@ localizedStrings["First call."] = "First call.";
localizedStrings["Previous call."] = "Previous call.";
localizedStrings["Next call."] = "Next call.";
localizedStrings["Last call."] = "Last call.";
localizedStrings["Show screenshot of the last replayed resource."] = "Show screenshot of the last replayed resource.";
localizedStrings["Show screenshot of this context's canvas."] = "Show screenshot of this context's canvas.";
localizedStrings["Reload"] = "Reload";
localizedStrings["Binary File"] = "Binary File";
localizedStrings["Modification Time"] = "Modification Time";
@@ -49,14 +49,23 @@ WebInspector.CanvasProfileView = function(profile)
this._debugInfoElement = replayImageContainer.createChild("div");

var replayInfoContainer = this._splitView.secondElement();
var controlsContainer = replayInfoContainer.createChild("div", "canvas-replay-controls");
var controlsContainer = replayInfoContainer.createChild("div", "status-bar");
var logGridContainer = replayInfoContainer.createChild("div", "canvas-replay-log");

this._createControlButton(controlsContainer, "canvas-replay-first-step", WebInspector.UIString("First call."), this._onReplayFirstStepClick.bind(this));
this._createControlButton(controlsContainer, "canvas-replay-prev-step", WebInspector.UIString("Previous call."), this._onReplayStepClick.bind(this, false));
this._createControlButton(controlsContainer, "canvas-replay-next-step", WebInspector.UIString("Next call."), this._onReplayStepClick.bind(this, true));
this._createControlButton(controlsContainer, "canvas-replay-last-step", WebInspector.UIString("Last call."), this._onReplayLastStepClick.bind(this));

this._replayContextSelector = new WebInspector.StatusBarComboBox(this._onReplayContextChanged.bind(this));
this._replayContextSelector.createOption("<screenshot auto>", WebInspector.UIString("Show screenshot of the last replayed resource."), "");
controlsContainer.appendChild(this._replayContextSelector.element);

/** @type {!Object.<string, boolean>} */
this._replayContexts = {};
/** @type {!Object.<string, CanvasAgent.ResourceState>} */
this._currentResourceStates = {};

var columns = { 0: {}, 1: {}, 2: {} };
columns[0].title = "#";
columns[0].sortable = true;
@@ -113,13 +122,43 @@ WebInspector.CanvasProfileView.prototype = {
*/
_createControlButton: function(parent, className, title, clickCallback)
{
var button = parent.createChild("button", "canvas-control-button");
var button = parent.createChild("button", "status-bar-item");
button.addStyleClass(className);
button.title = title;
button.createChild("img");
button.addEventListener("click", clickCallback, false);
},

_onReplayContextChanged: function()
{
/**
* @param {string?} error
* @param {CanvasAgent.ResourceState} resourceState
*/
function didReceiveResourceState(error, resourceState)
{
this._enableWaitIcon(false);
if (error)
return;

this._currentResourceStates[resourceState.id] = resourceState;

var selectedContextId = this._replayContextSelector.selectedOption().value;
if (selectedContextId === resourceState.id)
this._replayImageElement.src = resourceState.imageURL;
}

var selectedContextId = this._replayContextSelector.selectedOption().value || "auto";
var resourceState = this._currentResourceStates[selectedContextId];
if (resourceState)
this._replayImageElement.src = resourceState.imageURL;
else {
this._enableWaitIcon(true);
this._replayImageElement.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; // Empty transparent image.
CanvasAgent.getResourceState(this._traceLogId, selectedContextId, didReceiveResourceState.bind(this));
}
},

/**
* @param {boolean} forward
*/
@@ -137,18 +176,15 @@ WebInspector.CanvasProfileView.prototype = {

_onReplayFirstStepClick: function()
{
var rootNode = this._logGrid.rootNode();
var children = rootNode && rootNode.children;
var firstNode = children && children[0];
var firstNode = this._logGrid.rootNode().children[0];
if (firstNode)
firstNode.revealAndSelect();
},

_onReplayLastStepClick: function()
{
var rootNode = this._logGrid.rootNode();
var children = rootNode && rootNode.children;
var lastNode = children && children[children.length - 1];
var children = this._logGrid.rootNode().children;
var lastNode = children[children.length - 1];
if (lastNode)
lastNode.revealAndSelect();
},
@@ -161,7 +197,7 @@ WebInspector.CanvasProfileView.prototype = {
function showWaitIcon()
{
this._replayImageElement.addStyleClass("wait");
this._debugInfoElement.textContent = "";
this._debugInfoElement.addStyleClass("hidden");
delete this._showWaitIconTimer;
}

@@ -173,7 +209,7 @@ WebInspector.CanvasProfileView.prototype = {
delete this._showWaitIconTimer;
}
this._replayImageElement.enableStyleClass("wait", enable);
this._debugInfoElement.textContent = "";
this._debugInfoElement.enableStyleClass("hidden", enable);
}
},

@@ -183,15 +219,25 @@ WebInspector.CanvasProfileView.prototype = {
if (!callNode)
return;
var time = Date.now();
/**
* @param {string?} error
* @param {CanvasAgent.ResourceState} resourceState
*/
function didReplayTraceLog(error, resourceState)
{
if (callNode !== this._logGrid.selectedNode)
return;

this._enableWaitIcon(false);
if (error)
return;

this._currentResourceStates = {};
this._currentResourceStates["auto"] = resourceState;
this._currentResourceStates[resourceState.id] = resourceState;

this._debugInfoElement.textContent = "Replay time: " + (Date.now() - time) + "ms";
this._replayImageElement.src = resourceState.imageURL;
this._onReplayContextChanged();
}
this._enableWaitIcon(true);
CanvasAgent.replayTraceLog(this._traceLogId, callNode.index, didReplayTraceLog.bind(this));
@@ -200,20 +246,48 @@ WebInspector.CanvasProfileView.prototype = {
_didReceiveTraceLog: function(error, traceLog)
{
this._enableWaitIcon(false);
this._logGrid.rootNode().removeChildren();
if (error || !traceLog)
return;
var lastNode = null;
var calls = traceLog.calls;
for (var i = 0, n = calls.length; i < n; ++i)
this._logGrid.rootNode().appendChild(this._createCallNode(i, calls[i]));
var lastNode = this._logGrid.rootNode().children[calls.length - 1];
for (var i = 0, n = calls.length; i < n; ++i) {
var call = calls[i];
this._requestReplayContextInfo(call.contextId);
var gridNode = this._createCallNode(i, call);
this._logGrid.rootNode().appendChild(gridNode);
lastNode = gridNode;
}
if (lastNode)
lastNode.revealAndSelect();
},

/**
* @param {string} contextId
*/
_requestReplayContextInfo: function(contextId)
{
if (this._replayContexts[contextId])
return;
this._replayContexts[contextId] = true;
/**
* @param {string?} error
* @param {CanvasAgent.ResourceInfo} resourceInfo
*/
function didReceiveResourceInfo(error, resourceInfo)
{
if (error) {
delete this._replayContexts[contextId];
return;
}
this._replayContextSelector.createOption(resourceInfo.description, WebInspector.UIString("Show screenshot of this context's canvas."), contextId);
}
CanvasAgent.getResourceInfo(contextId, didReceiveResourceInfo.bind(this));
},

/**
* @param {number} index
* @param {Object} call
* @return {!WebInspector.DataGridNode}
*/
_createCallNode: function(index, call)
{
@@ -64,16 +64,6 @@
margin: -16px 0 0 -16px;
}

.canvas-replay-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 26px;
border: 1px solid #aaa;
background-image: -webkit-linear-gradient(rgb(243,243,243), rgb(235,235,235));
}

.canvas-replay-log {
position: absolute;
top: 24px;
@@ -82,34 +72,6 @@
bottom: 0;
}

.canvas-control-button {
display: inline-block;
position: relative;
width: 32px;
height: 24px;
padding: 0;
margin-left: -1px;
vertical-align: top;
background-color: transparent;
border: 0 transparent none;
border-left: 1px solid rgb(202, 202, 202);
border-right: 1px solid rgb(202, 202, 202);
}

.canvas-control-button:active {
background-color: rgb(163,163,163);
border-left: 1px solid rgb(120, 120, 120);
border-right: 1px solid rgb(120, 120, 120);
}

.canvas-control-button:disabled {
opacity: 0.5;
}

.canvas-control-button img {
margin-top: 1px;
}

.canvas-replay-first-step img {
content: url(Images/debuggerContinue.png);
-webkit-transform: rotate(180deg);
@@ -694,6 +694,10 @@ button.status-bar-item {
margin: 0 -1px;
}

.status-bar button.status-bar-item img {
margin-top: 1px;
}

.status-bar select.status-bar-item:active,
.status-bar button.status-bar-item:active {
background-color: rgb(163,163,163);

0 comments on commit da493fb

Please sign in to comment.