DevTools: added support for image url & node in tracing-based timeline

Source/devtools/front_end/timeline/TimelineTraceEventBindings.js

Index: Source/devtools/front_end/timeline/TimelineTraceEventBindings.js
diff --git a/Source/devtools/front_end/timeline/TimelineTraceEventBindings.js b/Source/devtools/front_end/timeline/TimelineTraceEventBindings.js
index 8640f1adc31b6d17d4d0887e894282b757fc1901..f56b3e73b75ffa73c3836203bfeea29fb4709d56 100644
--- a/Source/devtools/front_end/timeline/TimelineTraceEventBindings.js
+++ b/Source/devtools/front_end/timeline/TimelineTraceEventBindings.js
@@ -28,11 +28,10 @@ WebInspector.TimelineTraceEventBindings.RecordType = {
     UpdateLayerTree: "UpdateLayerTree",
     PaintSetup: "PaintSetup",
     Paint: "Paint",
+    PaintImage: "PaintImage",
     Rasterize: "Rasterize",
     RasterTask: "RasterTask",
     ScrollLayer: "ScrollLayer",
-    DecodeImage: "DecodeImage",
-    ResizeImage: "ResizeImage",
     CompositeLayers: "CompositeLayers",
 
     ParseHTML: "ParseHTML",
@@ -78,6 +77,12 @@ WebInspector.TimelineTraceEventBindings.RecordType = {
     SetLayerTreeId: "SetLayerTreeId",
     TracingStartedInPage: "TracingStartedInPage",
 
+    DecodeImage: "Decode Image",
+    ResizeImage: "Resize Image",
+    DrawLazyPixelRef: "Draw LazyPixelRef",
+    DecodeLazyPixelRef: "Decode LazyPixelRef",
+
+    LazyPixelRef: "LazyPixelRef",
     LayerTreeHostImplSnapshot: "cc::LayerTreeHostImpl"
 };
 
@@ -105,6 +110,7 @@ WebInspector.TimelineTraceEventBindings.prototype = {
         this._layoutInvalidate = {};
         this._lastScheduleStyleRecalculation = {};
         this._webSocketCreateEvents = {};
+        this._paintImageEventByPixelRefId = {};
 
         this._lastRecalculateStylesEvent = null;
         this._currentScriptEvent = null;
@@ -154,12 +160,15 @@ WebInspector.TimelineTraceEventBindings.prototype = {
 
         case recordTypes.ResourceSendRequest:
             this._sendRequestEvents[event.args.data["requestId"]] = event;
+            event.imageURL = event.args.data["url"];
             break;
 
         case recordTypes.ResourceReceiveResponse:
         case recordTypes.ResourceReceivedData:
         case recordTypes.ResourceFinish:
             event.initiator = this._sendRequestEvents[event.args.data["requestId"]];
+            if (event.initiator)
+                event.imageURL = event.initiator.imageURL;
             break;
 
         case recordTypes.TimerInstall:
@@ -200,6 +209,8 @@ WebInspector.TimelineTraceEventBindings.prototype = {
         case recordTypes.Layout:
             var frameId = event.args["beginData"]["frame"];
             event.initiator = this._layoutInvalidate[frameId];
+            if (event.args["endData"])

[yurys, 2014/06/02 11:22:24]

endData always exists for Layout event, no need to check.

[caseq, 2014/06/02 11:57:19]

Done.

+                event.backendNodeId = event.args["endData"]["rootNode"];
             this._layoutInvalidate[frameId] = null;
             if (this._currentScriptEvent)
                 event.warning = WebInspector.UIString("Forced synchronous layout is a possible performance bottleneck.");
@@ -228,9 +239,55 @@ WebInspector.TimelineTraceEventBindings.prototype = {
         case recordTypes.TracingStartedInPage:
             this._mainThread = event.thread;
             break;
+
+        case recordTypes.Paint:
+        case recordTypes.ScrollLayer:
+            event.backendNodeId = event.args["data"]["nodeId"];
+            break;
+
+        case recordTypes.PaintImage:
+            event.backendNodeId = event.args["data"]["nodeId"];
+            event.imageURL = event.args["data"]["url"];
+            break;
+
+        case recordTypes.DecodeImage:
+        case recordTypes.ResizeImage:
+            var paintImageEvent = this._findAncestorEvent(recordTypes.PaintImage);
+            if (!paintImageEvent) {
+                var decodeLazyPixelRefEvent = this._findAncestorEvent(recordTypes.DecodeLazyPixelRef);
+                paintImageEvent = decodeLazyPixelRefEvent && this._paintImageEventByPixelRefId[decodeLazyPixelRefEvent.args["LazyPixelRef"]];
+            }
+            if (!paintImageEvent)
+                break;
+            event.backendNodeId = paintImageEvent.backendNodeId;

[yurys, 2014/06/02 11:22:24]

Would it make sense to write initiator instead:

event.initiator = paintImageEvent?

[caseq, 2014/06/02 11:57:19]

Discussed this offline and decided not to do it now.

+            event.imageURL = paintImageEvent.imageURL;
+            break;
+
+        case recordTypes.DrawLazyPixelRef:
+            var paintImageEvent = this._findAncestorEvent(recordTypes.PaintImage);
+            if (!paintImageEvent)
+                break;
+            this._paintImageEventByPixelRefId[event.args["LazyPixelRef"]] = paintImageEvent;
+            event.backendNodeId = paintImageEvent.backendNodeId;
+            event.imageURL = paintImageEvent.imageURL;
+            break;
         }
         if (this._mainThread === event.thread)
             this._mainThreadEvents.push(event);
+    },
+
+    /**
+     * @param {string} name
+     * @return {?WebInspector.TracingModel.Event}
+     */
+    _findAncestorEvent: function(name)
+    {
+        for (var i = this._eventStack.length - 1; i >= 0; --i) {
+            var event = this._eventStack[i];
+            if (event.name === name)
+                return event;
+        }
+        return null;
     }
 }