Web Inspector: [Canvas] do not replace replay image with spinner icon
authoraandrey@chromium.org <aandrey@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 19 Feb 2013 14:31:43 +0000 (14:31 +0000)
committeraandrey@chromium.org <aandrey@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 19 Feb 2013 14:31:43 +0000 (14:31 +0000)
https://bugs.webkit.org/show_bug.cgi?id=110213

Reviewed by Pavel Feldman.

Otherwise it's visually hard to see changes in the replay image. Instead show a small spinner icon in the bottom right corner.

* inspector/front-end/CanvasProfileView.js:
(WebInspector.CanvasProfileView):
(WebInspector.CanvasProfileView.prototype._enableWaitIcon):
* inspector/front-end/canvasProfiler.css:
(#canvas-replay-image-container):
(.canvas-debug-info):
(.canvas-spinner-icon):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@143325 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/CanvasProfileView.js
Source/WebCore/inspector/front-end/canvasProfiler.css

index 50e34fb..7ca2385 100644 (file)
@@ -1,5 +1,22 @@
 2013-02-19  Andrey Adaikin  <aandrey@chromium.org>
 
+        Web Inspector: [Canvas] do not replace replay image with spinner icon
+        https://bugs.webkit.org/show_bug.cgi?id=110213
+
+        Reviewed by Pavel Feldman.
+
+        Otherwise it's visually hard to see changes in the replay image. Instead show a small spinner icon in the bottom right corner.
+
+        * inspector/front-end/CanvasProfileView.js:
+        (WebInspector.CanvasProfileView):
+        (WebInspector.CanvasProfileView.prototype._enableWaitIcon):
+        * inspector/front-end/canvasProfiler.css:
+        (#canvas-replay-image-container):
+        (.canvas-debug-info):
+        (.canvas-spinner-icon):
+
+2013-02-19  Andrey Adaikin  <aandrey@chromium.org>
+
         Web Inspector: [Canvas] UI: tweak replay control buttons behavior
         https://bugs.webkit.org/show_bug.cgi?id=110207
 
index 77e3d6a..947334a 100644 (file)
@@ -47,7 +47,8 @@ WebInspector.CanvasProfileView = function(profile)
     var replayImageContainer = this._splitView.firstElement();
     replayImageContainer.id = "canvas-replay-image-container";
     this._replayImageElement = replayImageContainer.createChild("image", "canvas-replay-image");
-    this._debugInfoElement = replayImageContainer.createChild("div");
+    this._debugInfoElement = replayImageContainer.createChild("div", "canvas-debug-info hidden");
+    this._spinnerIcon = replayImageContainer.createChild("img", "canvas-spinner-icon hidden");
 
     var replayInfoContainer = this._splitView.secondElement();
     var controlsContainer = replayInfoContainer.createChild("div", "status-bar");
@@ -238,23 +239,8 @@ WebInspector.CanvasProfileView.prototype = {
      */
     _enableWaitIcon: function(enable)
     {
-        function showWaitIcon()
-        {
-            this._replayImageElement.addStyleClass("wait");
-            this._debugInfoElement.addStyleClass("hidden");
-            delete this._showWaitIconTimer;
-        }
-
-        if (enable && this._replayImageElement.src && !this._showWaitIconTimer)
-            this._showWaitIconTimer = setTimeout(showWaitIcon.bind(this), 250);
-        else {
-            if (this._showWaitIconTimer) {
-                clearTimeout(this._showWaitIconTimer);
-                delete this._showWaitIconTimer;
-            }
-            this._replayImageElement.enableStyleClass("wait", enable);
-            this._debugInfoElement.enableStyleClass("hidden", enable);
-        }
+        this._spinnerIcon.enableStyleClass("hidden", !enable);
+        this._debugInfoElement.enableStyleClass("hidden", enable);
     },
 
     _replayTraceLog: function()
index 0527885..e14d165 100644 (file)
@@ -41,7 +41,7 @@
     text-align: center;
     background-color: black;
     overflow: hidden;
-    padding: 5px;
+    padding: 5px 5px 10px 5px;
     color: white;
 }
 
     display: block;
 }
 
-.canvas-replay-image.wait {
+.canvas-debug-info {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 6px;
+}
+
+.canvas-spinner-icon {
     content: url(Images/spinnerActiveSelected.gif);
-    zoom: inherit;
     position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -16px 0 0 -16px;
+    width: 16px;
+    right: 4px;
+    bottom: 4px;
 }
 
 .canvas-replay-log {