Modified: trunk/Source/WebCore/inspector/front-end/CanvasProfileView.js (140159 => 140160)
--- trunk/Source/WebCore/inspector/front-end/CanvasProfileView.js 2013-01-18 17:04:53 UTC (rev 140159)
+++ trunk/Source/WebCore/inspector/front-end/CanvasProfileView.js 2013-01-18 17:05:12 UTC (rev 140160)
@@ -49,7 +49,7 @@
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));
@@ -57,6 +57,15 @@
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 @@
*/
_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 = ""
+ }
+
+ var selectedContextId = this._replayContextSelector.selectedOption().value || "auto";
+ var resourceState = this._currentResourceStates[selectedContextId];
+ if (resourceState)
+ this._replayImageElement.src = ""
+ else {
+ this._enableWaitIcon(true);
+ this._replayImageElement.src = "" // Empty transparent image.
+ CanvasAgent.getResourceState(this._traceLogId, selectedContextId, didReceiveResourceState.bind(this));
+ }
+ },
+
/**
* @param {boolean} forward
*/
@@ -137,18 +176,15 @@
_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 @@
function showWaitIcon()
{
this._replayImageElement.addStyleClass("wait");
- this._debugInfoElement.textContent = "";
+ this._debugInfoElement.addStyleClass("hidden");
delete this._showWaitIconTimer;
}
@@ -173,7 +209,7 @@
delete this._showWaitIconTimer;
}
this._replayImageElement.enableStyleClass("wait", enable);
- this._debugInfoElement.textContent = "";
+ this._debugInfoElement.enableStyleClass("hidden", enable);
}
},
@@ -183,15 +219,25 @@
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 = ""
+ this._onReplayContextChanged();
}
this._enableWaitIcon(true);
CanvasAgent.replayTraceLog(this._traceLogId, callNode.index, didReplayTraceLog.bind(this));
@@ -200,20 +246,48 @@
_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)
{
Modified: trunk/Source/WebCore/inspector/front-end/canvasProfiler.css (140159 => 140160)
--- trunk/Source/WebCore/inspector/front-end/canvasProfiler.css 2013-01-18 17:04:53 UTC (rev 140159)
+++ trunk/Source/WebCore/inspector/front-end/canvasProfiler.css 2013-01-18 17:05:12 UTC (rev 140160)
@@ -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);
