Timeline: add preview of painted picture for Paint event

Source/devtools/front_end/timeline/TracingTimelineModel.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.
 
 /**
  * @param {!WebInspector.TracingModel} tracingModel
  * @constructor
  * @extends {WebInspector.TimelineModel}
  */
 WebInspector.TracingTimelineModel = function(tracingModel)
@@ skipping 14 matching lines @@
 
     RequestMainThreadFrame: "RequestMainThreadFrame",
     BeginFrame: "BeginFrame",
     BeginMainThreadFrame: "BeginMainThreadFrame",
     ActivateLayerTree: "ActivateLayerTree",
     DrawFrame: "DrawFrame",
     ScheduleStyleRecalculation: "ScheduleStyleRecalculation",
     RecalculateStyles: "RecalculateStyles",
     InvalidateLayout: "InvalidateLayout",
     Layout: "Layout",
+    UpdateLayer: "UpdateLayer",
     PaintSetup: "PaintSetup",
     Paint: "Paint",
     PaintImage: "PaintImage",
     Rasterize: "Rasterize",
     RasterTask: "RasterTask",
     ScrollLayer: "ScrollLayer",
     CompositeLayers: "CompositeLayers",
 
     ParseHTML: "ParseHTML",
 
@@ skipping 37 matching lines @@
     CallStack: "CallStack",
     SetLayerTreeId: "SetLayerTreeId",
     TracingStartedInPage: "TracingStartedInPage",
 
     DecodeImage: "Decode Image",
     ResizeImage: "Resize Image",
     DrawLazyPixelRef: "Draw LazyPixelRef",
     DecodeLazyPixelRef: "Decode LazyPixelRef",
 
     LazyPixelRef: "LazyPixelRef",
-    LayerTreeHostImplSnapshot: "cc::LayerTreeHostImpl"
+    LayerTreeHostImplSnapshot: "cc::LayerTreeHostImpl",
+    PictureSnapshot: "cc::Picture"
 };
 
 WebInspector.TracingTimelineModel.defaultTracingCategoryFilter = "*,disabled-by-default-cc.debug,disabled-by-default-devtools.timeline,disabled-by-default-devtools.timeline.frame";
 
 WebInspector.TracingTimelineModel.prototype = {
     /**
      * @param {boolean} captureStacks
      * @param {boolean} captureMemory
+     * @param {boolean} capturePictures
      */
-    startRecording: function(captureStacks, captureMemory)
+    startRecording: function(captureStacks, captureMemory, capturePictures)
     {
         var categories;
         if (WebInspector.experimentsSettings.timelineTracingMode.isEnabled()) {
             categories = WebInspector.TracingTimelineModel.defaultTracingCategoryFilter;
         } else {
             var categoriesArray = ["disabled-by-default-devtools.timeline", "disabled-by-default-devtools.timeline.frame", "devtools"];
             if (captureStacks)
                 categoriesArray.push("disabled-by-default-devtools.timeline.stack");
+            if (capturePictures)
+                categoriesArray.push("disabled-by-default-devtools.timeline.layers", "disabled-by-default-devtools.timeline.picture");
             categories = categoriesArray.join(",");
         }
         this._startRecordingWithCategories(categories);
     },
 
     stopRecording: function()
     {
         this._tracingModel.stop(this._didStopRecordingTraceEvents.bind(this));
     },
 
@@ skipping 126 matching lines @@
 
     _resetProcessingState: function()
     {
         this._sendRequestEvents = {};
         this._timerEvents = {};
         this._requestAnimationFrameEvents = {};
         this._layoutInvalidate = {};
         this._lastScheduleStyleRecalculation = {};
         this._webSocketCreateEvents = {};
         this._paintImageEventByPixelRefId = {};
-
+        this._lastPaintForLayer = {};
         this._lastRecalculateStylesEvent = null;
         this._currentScriptEvent = null;
         this._eventStack = [];
     },
 
     /**
      * @param {number} startTime
      * @param {?number} endTime
      * @param {!WebInspector.TracingModel.Thread} mainThread
      * @param {!WebInspector.TracingModel.Thread} thread
@@ skipping 119 matching lines @@
             if (!this._currentScriptEvent)
                 this._currentScriptEvent = event;
             break;
 
         case recordTypes.SetLayerTreeId:
             this._inspectedTargetLayerTreeId = event.args["layerTreeId"];
             break;
 
         case recordTypes.Paint:
             event.highlightQuad = event.args["data"]["clip"];
-            // Initionally fall through.
+            event.backendNodeId = event.args["data"]["nodeId"];
+            var layerUpdateEvent = this._findAncestorEvent(recordTypes.UpdateLayer);
+            if (!layerUpdateEvent || layerUpdateEvent.args["layerTreeId"] !== this._inspectedTargetLayerTreeId)
+                break;
+            this._lastPaintForLayer[layerUpdateEvent.args["layerId"]] = event;
+            break;
+
+        case recordTypes.PictureSnapshot:
+            var layerUpdateEvent = this._findAncestorEvent(recordTypes.UpdateLayer);
+            if (!layerUpdateEvent || layerUpdateEvent.args["layerTreeId"] !== this._inspectedTargetLayerTreeId)
+                break;
+            var paintEvent = this._lastPaintForLayer[layerUpdateEvent.args["layerId"]];
+            if (!paintEvent)
+                break;
+            paintEvent.picture = event.args["snapshot"]["skp64"];
+            break;
+
         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:
@@ skipping 257 matching lines @@
     {
         var tokens = [this.title()];
         var data = this._event.args.data;
         if (data) {
             for (var key in data)
                 tokens.push(data[key]);
         }
         return regExp.test(tokens.join("|"));
     }
 }