Attachment 183456 Details for Bug 107274 – Patch

[patch] Patch

bug-107274-20130118193845.patch (text/plain), 12.97 KB, created by Andrey Adaikin on 2013-01-18 07:41:47 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Andrey Adaikin

Created: 2013-01-18 07:41:47 PST

Size: 12.97 KB

patch

obsolete

>Subversion Revision: 140145
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index e5f51457c23db946931e12e4d99549f5704c2c96..cb6335035f6f9a18dc55c1fabf1d1d66f73a28b2 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,5 +1,32 @@
> 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 NOBODY (OOPS!).
>+
>+        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
>         https://bugs.webkit.org/show_bug.cgi?id=107280
> 
>diff --git a/Source/WebCore/English.lproj/localizedStrings.js b/Source/WebCore/English.lproj/localizedStrings.js
>index f628ec84283b31aedb98fa7df6973f921f4d3749..850ecd07f70611d3e21319a17e9bdff293a4172c 100644
>--- a/Source/WebCore/English.lproj/localizedStrings.js
>+++ b/Source/WebCore/English.lproj/localizedStrings.js
>@@ -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";
>diff --git a/Source/WebCore/inspector/front-end/CanvasProfileView.js b/Source/WebCore/inspector/front-end/CanvasProfileView.js
>index b378177482f49211abe86df93037aed4587ed69d..4e6b3d5b4e4d659f9c25b7dd49954d5db4c20dc0 100644
>--- a/Source/WebCore/inspector/front-end/CanvasProfileView.js
>+++ b/Source/WebCore/inspector/front-end/CanvasProfileView.js
>@@ -49,7 +49,7 @@ 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));
>@@ -57,6 +57,15 @@ WebInspector.CanvasProfileView = function(profile)
>     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.dataURL;
>+        }
>+
>+        var selectedContextId = this._replayContextSelector.selectedOption().value || "auto";
>+        var resourceState = this._currentResourceStates[selectedContextId];
>+        if (resourceState)
>+            this._replayImageElement.src = resourceState.dataURL;
>+        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.dataURL;
>+            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)
>     {
>diff --git a/Source/WebCore/inspector/front-end/canvasProfiler.css b/Source/WebCore/inspector/front-end/canvasProfiler.css
>index 883015cc573f42dc2e4c843ad974b575c3e83dce..a58a27f8c723467df6546cb62c591a3338ef53cf 100644
>--- a/Source/WebCore/inspector/front-end/canvasProfiler.css
>+++ b/Source/WebCore/inspector/front-end/canvasProfiler.css
>@@ -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);
>diff --git a/Source/WebCore/inspector/front-end/inspector.css b/Source/WebCore/inspector/front-end/inspector.css
>index a4ef95a1719e2506c176ca7401e8af7578fc41ff..09f472efe65765d32387cb79c0c07f9421ea5393 100644
>--- a/Source/WebCore/inspector/front-end/inspector.css
>+++ b/Source/WebCore/inspector/front-end/inspector.css
>@@ -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);

Flags:

pfeldman: review+

Actions: View | Formatted Diff | Diff

Attachments on bug 107274: 183436 | 183450 | 183456