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

Source/devtools/front_end/timeline/TimelineTraceEventBindings.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  */
 WebInspector.TimelineTraceEventBindings = function()
 {
     this._reset();
@@ skipping 10 matching lines @@
     BeginMainThreadFrame: "BeginMainThreadFrame",
     ActivateLayerTree: "ActivateLayerTree",
     DrawFrame: "DrawFrame",
     ScheduleStyleRecalculation: "ScheduleStyleRecalculation",
     RecalculateStyles: "RecalculateStyles",
     InvalidateLayout: "InvalidateLayout",
     Layout: "Layout",
     UpdateLayerTree: "UpdateLayerTree",
     PaintSetup: "PaintSetup",
     Paint: "Paint",
+    PaintImage: "PaintImage",
     Rasterize: "Rasterize",
     RasterTask: "RasterTask",
     ScrollLayer: "ScrollLayer",
-    DecodeImage: "DecodeImage",
-    ResizeImage: "ResizeImage",
     CompositeLayers: "CompositeLayers",
 
     ParseHTML: "ParseHTML",
 
     TimerInstall: "TimerInstall",
     TimerRemove: "TimerRemove",
     TimerFire: "TimerFire",
 
     XHRReadyStateChange: "XHRReadyStateChange",
     XHRLoad: "XHRLoad",
@@ skipping 25 matching lines @@
     WebSocketSendHandshakeRequest : "WebSocketSendHandshakeRequest",
     WebSocketReceiveHandshakeResponse : "WebSocketReceiveHandshakeResponse",
     WebSocketDestroy : "WebSocketDestroy",
 
     EmbedderCallback : "EmbedderCallback",
 
     CallStack: "CallStack",
     SetLayerTreeId: "SetLayerTreeId",
     TracingStartedInPage: "TracingStartedInPage",
 
+    DecodeImage: "Decode Image",
+    ResizeImage: "Resize Image",
+    DrawLazyPixelRef: "Draw LazyPixelRef",
+    DecodeLazyPixelRef: "Decode LazyPixelRef",
+
+    LazyPixelRef: "LazyPixelRef",
     LayerTreeHostImplSnapshot: "cc::LayerTreeHostImpl"
 };
 
 
 WebInspector.TimelineTraceEventBindings.prototype = {
     /**
      * @return {!Array.<!WebInspector.TracingModel.Event>}
      */
     mainThreadEvents: function()
     {
         return this._mainThreadEvents;
     },
 
     _reset: function()
     {
         this._resetProcessingState();
         this._mainThreadEvents = [];
     },
 
     _resetProcessingState: function()
     {
         this._sendRequestEvents = {};
         this._timerEvents = {};
         this._requestAnimationFrameEvents = {};
         this._layoutInvalidate = {};
         this._lastScheduleStyleRecalculation = {};
         this._webSocketCreateEvents = {};
+        this._paintImageEventByPixelRefId = {};
 
         this._lastRecalculateStylesEvent = null;
         this._currentScriptEvent = null;
         this._eventStack = [];
     },
 
     /**
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      */
     setEvents: function(events)
@@ skipping 29 matching lines @@
 
         switch (event.name) {
         case recordTypes.CallStack:
             var lastMainThreadEvent = this._mainThreadEvents.peekLast();
             if (lastMainThreadEvent)
                 lastMainThreadEvent.stackTrace = event.args.stack;
             break;
 
         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:
             this._timerEvents[event.args.data["timerId"]] = event;
             break;
 
         case recordTypes.TimerFire:
             event.initiator = this._timerEvents[event.args.data["timerId"]];
             break;
 
@@ skipping 20 matching lines @@
             var layoutInitator = event;
             var frameId = event.args.frame;
             if (!this._layoutInvalidate[frameId] && this._lastRecalculateStylesEvent && this._lastRecalculateStylesEvent.endTime >  event.startTime)
                 layoutInitator = this._lastRecalculateStylesEvent.initiator;
             this._layoutInvalidate[frameId] = layoutInitator;
             break;
 
         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.");
             break;
 
         case recordTypes.WebSocketCreate:
             this._webSocketCreateEvents[event.args.data["identifier"]] = event;
             break;
 
         case recordTypes.WebSocketSendHandshakeRequest:
         case recordTypes.WebSocketReceiveHandshakeResponse:
         case recordTypes.WebSocketDestroy:
             event.initiator = this._webSocketCreateEvents[event.args.data["identifier"]];
             break;
 
         case recordTypes.EvaluateScript:
         case recordTypes.FunctionCall:
             if (!this._currentScriptEvent)
                 this._currentScriptEvent = event;
             break;
 
         case recordTypes.SetLayerTreeId:
             this._inspectedTargetLayerTreeId = event.args["layerTreeId"];
             break;
 
         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;
     }
 }