Diff
Modified: trunk/Source/WebCore/ChangeLog (139613 => 139614)
--- trunk/Source/WebCore/ChangeLog 2013-01-14 15:24:56 UTC (rev 139613)
+++ trunk/Source/WebCore/ChangeLog 2013-01-14 15:37:40 UTC (rev 139614)
@@ -1,3 +1,46 @@
+2013-01-14 Andrey Adaikin <[email protected]>
+
+ Web Inspector: [Canvas] UI: add control buttons for doing the replay steps
+ https://bugs.webkit.org/show_bug.cgi?id=106788
+
+ Reviewed by Pavel Feldman.
+
+ Adding UI control buttons for doing the Canvas replay steps.
+ Drive-by: fixed a bug in DataGrid (found by the JSCompiler).
+
+ * inspector/front-end/CanvasProfileView.js:
+ (WebInspector.CanvasProfileView):
+ (WebInspector.CanvasProfileView.prototype._createControlButton):
+ (WebInspector.CanvasProfileView.prototype._onReplayStepClick):
+ (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.CanvasProfileType.prototype._updateDecorationElement):
+ * inspector/front-end/DOMExtension.js:
+ (Element.prototype.enableStyleClass):
+ * inspector/front-end/DataGrid.js:
+ (WebInspector.DataGrid.prototype.setRootNode):
+ (WebInspector.DataGrid.prototype._startEditingColumnOfDataGridNode):
+ (WebInspector.DataGrid.prototype.moveToNextIfNeeded):
+ (WebInspector.DataGrid.prototype._editingCommitted):
+ (WebInspector.DataGridNode):
+ * inspector/front-end/canvasProfiler.css:
+ (.canvas-replay-image):
+ (.canvas-replay-image.wait):
+ (.canvas-replay-controls):
+ (.canvas-replay-log):
+ (.canvas-control-button):
+ (.canvas-control-button:active):
+ (.canvas-control-button:disabled):
+ (.canvas-control-button img):
+ (.canvas-replay-first-step img):
+ (.canvas-replay-next-step img):
+ (.canvas-replay-prev-step img):
+ (.canvas-replay-last-step img):
+
2013-01-14 Tommy Widenflycht <[email protected]>
MediaStream API: Update the track accessors on MediaStream to match the latest specification
Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js (139613 => 139614)
--- trunk/Source/WebCore/English.lproj/localizedStrings.js 2013-01-14 15:24:56 UTC (rev 139613)
+++ trunk/Source/WebCore/English.lproj/localizedStrings.js 2013-01-14 15:37:40 UTC (rev 139614)
@@ -777,6 +777,10 @@
localizedStrings["Canvas calls instrumentation"] = "Canvas calls instrumentation";
localizedStrings["Capturing\u2026"] = "Capturing\u2026";
localizedStrings["There is an uninstrumented canvas on the page. Reload the page to instrument it."] = "There is an uninstrumented canvas on the page. Reload the page to instrument it.";
+localizedStrings["First call."] = "First call.";
+localizedStrings["Previous call."] = "Previous call.";
+localizedStrings["Next call."] = "Next call.";
+localizedStrings["Last call."] = "Last call.";
localizedStrings["Reload"] = "Reload";
localizedStrings["Binary File"] = "Binary File";
localizedStrings["Modification Time"] = "Modification Time";
Modified: trunk/Source/WebCore/inspector/front-end/CanvasProfileView.js (139613 => 139614)
--- trunk/Source/WebCore/inspector/front-end/CanvasProfileView.js 2013-01-14 15:24:56 UTC (rev 139613)
+++ trunk/Source/WebCore/inspector/front-end/CanvasProfileView.js 2013-01-14 15:37:40 UTC (rev 139614)
@@ -43,6 +43,20 @@
this._linkifier = new WebInspector.Linkifier();
this._splitView = new WebInspector.SplitView(false, "canvasProfileViewSplitLocation", 300);
+ var replayImageContainer = this._splitView.firstElement();
+ replayImageContainer.id = "canvas-replay-image-container";
+ this._replayImageElement = replayImageContainer.createChild("image", "canvas-replay-image");
+ this._debugInfoElement = replayImageContainer.createChild("div");
+
+ var replayInfoContainer = this._splitView.secondElement();
+ var controlsContainer = replayInfoContainer.createChild("div", "canvas-replay-controls");
+ 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));
+
var columns = { 0: {}, 1: {}, 2: {} };
columns[0].title = "#";
columns[0].sortable = true;
@@ -56,19 +70,9 @@
this._logGrid = new WebInspector.DataGrid(columns);
this._logGrid.element.addStyleClass("fill");
- this._logGrid.show(this._splitView.secondElement());
+ this._logGrid.show(logGridContainer);
this._logGrid.addEventListener(WebInspector.DataGrid.Events.SelectedNode, this._replayTraceLog.bind(this));
- var replayImageContainer = this._splitView.firstElement();
- replayImageContainer.id = "canvas-replay-image-container";
-
- this._replayImageElement = document.createElement("image");
- this._replayImageElement.id = "canvas-replay-image";
-
- replayImageContainer.appendChild(this._replayImageElement);
- this._debugInfoElement = document.createElement("div");
- replayImageContainer.appendChild(this._debugInfoElement);
-
this._splitView.show(this.element);
this._enableWaitIcon(true);
@@ -102,13 +106,61 @@
},
/**
+ * @param {Element} parent
+ * @param {string} className
+ * @param {string} title
+ * @param {function(this:WebInspector.CanvasProfileView)} clickCallback
+ */
+ _createControlButton: function(parent, className, title, clickCallback)
+ {
+ var button = parent.createChild("button", "canvas-control-button");
+ button.addStyleClass(className);
+ button.title = title;
+ button.createChild("img");
+ button.addEventListener("click", clickCallback, false);
+ },
+
+ /**
+ * @param {boolean} forward
+ */
+ _onReplayStepClick: function(forward)
+ {
+ var selectedNode = this._logGrid.selectedNode;
+ if (!selectedNode)
+ return;
+ var nextNode = forward ? selectedNode.traverseNextNode(false) : selectedNode.traversePreviousNode(false);
+ if (nextNode)
+ nextNode.revealAndSelect();
+ else
+ selectedNode.reveal();
+ },
+
+ _onReplayFirstStepClick: function()
+ {
+ var rootNode = this._logGrid.rootNode();
+ var children = rootNode && rootNode.children;
+ var firstNode = children && 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];
+ if (lastNode)
+ lastNode.revealAndSelect();
+ },
+
+ /**
* @param {boolean} enable
*/
_enableWaitIcon: function(enable)
{
function showWaitIcon()
{
- this._replayImageElement.className = "wait";
+ this._replayImageElement.addStyleClass("wait");
this._debugInfoElement.textContent = "";
delete this._showWaitIconTimer;
}
@@ -120,7 +172,7 @@
clearTimeout(this._showWaitIconTimer);
delete this._showWaitIconTimer;
}
- this._replayImageElement.className = enable ? "wait" : "";
+ this._replayImageElement.enableStyleClass("wait", enable);
this._debugInfoElement.textContent = "";
}
},
@@ -133,6 +185,8 @@
var time = Date.now();
function didReplayTraceLog(error, dataURL)
{
+ if (callNode !== this._logGrid.selectedNode)
+ return;
this._enableWaitIcon(false);
if (error)
return;
@@ -153,12 +207,14 @@
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];
- if (lastNode) {
- lastNode.reveal();
- lastNode.select();
- }
+ if (lastNode)
+ lastNode.revealAndSelect();
},
+ /**
+ * @param {number} index
+ * @param {Object} call
+ */
_createCallNode: function(index, call)
{
var traceLogItem = document.createElement("div");
@@ -294,11 +350,8 @@
{
function callback(error, result)
{
- var showWarning = (!error && result);
- if (showWarning)
- this._decorationElement.removeStyleClass("hidden");
- else
- this._decorationElement.addStyleClass("hidden");
+ var hideWarning = (error || !result);
+ this._decorationElement.enableStyleClass("hidden", hideWarning);
}
CanvasAgent.hasUninstrumentedCanvases(callback.bind(this));
},
Modified: trunk/Source/WebCore/inspector/front-end/DOMExtension.js (139613 => 139614)
--- trunk/Source/WebCore/inspector/front-end/DOMExtension.js 2013-01-14 15:24:56 UTC (rev 139613)
+++ trunk/Source/WebCore/inspector/front-end/DOMExtension.js 2013-01-14 15:37:40 UTC (rev 139614)
@@ -144,6 +144,9 @@
return { container: node, offset: offset };
}
+/**
+ * @param {string} className
+ */
Element.prototype.removeStyleClass = function(className)
{
this.classList.remove(className);
@@ -156,17 +159,36 @@
this.className = this.className.replace(regex, " ");
}
+/**
+ * @param {string} className
+ */
Element.prototype.addStyleClass = function(className)
{
this.classList.add(className);
}
+/**
+ * @param {string} className
+ * @return {boolean}
+ */
Element.prototype.hasStyleClass = function(className)
{
return this.classList.contains(className);
}
/**
+ * @param {string} className
+ * @param {*} enable
+ */
+Element.prototype.enableStyleClass = function(className, enable)
+{
+ if (enable)
+ this.addStyleClass(className);
+ else
+ this.removeStyleClass(className);
+}
+
+/**
* @param {number|undefined} x
* @param {number|undefined} y
*/
Modified: trunk/Source/WebCore/inspector/front-end/DataGrid.js (139613 => 139614)
--- trunk/Source/WebCore/inspector/front-end/DataGrid.js 2013-01-14 15:24:56 UTC (rev 139613)
+++ trunk/Source/WebCore/inspector/front-end/DataGrid.js 2013-01-14 15:37:40 UTC (rev 139614)
@@ -233,6 +233,9 @@
}
WebInspector.DataGrid.prototype = {
+ /**
+ * @param {!WebInspector.DataGridNode} rootNode
+ */
setRootNode: function(rootNode)
{
if (this._rootNode) {
@@ -240,6 +243,7 @@
this._rootNode.dataGrid = null;
this._rootNode._isRoot = false;
}
+ /** @type {!WebInspector.DataGridNode} */
this._rootNode = rootNode;
rootNode._isRoot = true;
rootNode.hasChildren = false;
@@ -248,6 +252,9 @@
rootNode.dataGrid = this;
},
+ /**
+ * @return {!WebInspector.DataGridNode}
+ */
rootNode: function()
{
return this._rootNode;
@@ -281,6 +288,7 @@
_startEditingColumnOfDataGridNode: function(node, columnOrdinal)
{
this._editing = true;
+ /** @type {WebInspector.DataGridNode} */
this._editingNode = node;
this._editingNode.select();
@@ -358,7 +366,7 @@
return this._startEditingColumnOfDataGridNode(currentEditingNode, prevEditableColumn);
var lastEditableColumn = this._nextEditableColumn(this._columnsArray.length, true);
- var nextDataGridNode = currentEditingNode.traversePreviousNode(true, null, true);
+ var nextDataGridNode = currentEditingNode.traversePreviousNode(true, true);
if (nextDataGridNode)
return this._startEditingColumnOfDataGridNode(nextDataGridNode, lastEditableColumn);
return;
@@ -1050,17 +1058,22 @@
this._shouldRefreshChildren = true;
this._data = data || {};
this.hasChildren = hasChildren || false;
+ /** @type {!Array.<WebInspector.DataGridNode>} */
this.children = [];
this.dataGrid = null;
this.parent = null;
+ /** @type {WebInspector.DataGridNode} */
this.previousSibling = null;
+ /** @type {WebInspector.DataGridNode} */
this.nextSibling = null;
this.disclosureToggleWidth = 10;
}
WebInspector.DataGridNode.prototype = {
+ /** @type {boolean} */
selectable: true,
+ /** @type {boolean} */
_isRoot: false,
get element()
@@ -1539,6 +1552,13 @@
}
},
+ /**
+ * @param {boolean} skipHidden
+ * @param {WebInspector.DataGridNode=} stayWithin
+ * @param {boolean=} dontPopulate
+ * @param {Object=} info
+ * @return {WebInspector.DataGridNode}
+ */
traverseNextNode: function(skipHidden, stayWithin, dontPopulate, info)
{
if (!dontPopulate && this.hasChildren)
@@ -1574,6 +1594,11 @@
return (!skipHidden || node.revealed) ? node.nextSibling : null;
},
+ /**
+ * @param {boolean} skipHidden
+ * @param {boolean=} dontPopulate
+ * @return {WebInspector.DataGridNode}
+ */
traversePreviousNode: function(skipHidden, dontPopulate)
{
var node = (!skipHidden || this.revealed) ? this.previousSibling : null;
Modified: trunk/Source/WebCore/inspector/front-end/canvasProfiler.css (139613 => 139614)
--- trunk/Source/WebCore/inspector/front-end/canvasProfiler.css 2013-01-14 15:24:56 UTC (rev 139613)
+++ trunk/Source/WebCore/inspector/front-end/canvasProfiler.css 2013-01-14 15:37:40 UTC (rev 139614)
@@ -45,7 +45,7 @@
color: white;
}
-#canvas-replay-image {
+.canvas-replay-image {
zoom: 100;
height: auto;
width: auto;
@@ -55,7 +55,7 @@
display: block;
}
-#canvas-replay-image.wait {
+.canvas-replay-image.wait {
content: url(Images/spinnerActiveSelected.gif);
zoom: inherit;
position: absolute;
@@ -63,3 +63,63 @@
left: 50%;
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;
+ left: 0;
+ right: 0;
+ 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);
+}
+.canvas-replay-next-step img {
+ content: url(Images/debuggerStepInto.png);
+}
+.canvas-replay-prev-step img {
+ content: url(Images/debuggerStepOut.png);
+}
+.canvas-replay-last-step img {
+ content: url(Images/debuggerContinue.png);
+}
