Timeline: add preview of painted picture for Paint event

Source/devtools/front_end/timeline/TracingTimelineUIUtils.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.
 
 /**
  */
 WebInspector.TracingTimelineUIUtils = function() { }
 
 /**
  * @constructor
@@ skipping 22 matching lines @@
     eventStyles[recordTypes.EventDispatch] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Event"), categories["scripting"]);
     eventStyles[recordTypes.RequestMainThreadFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Request Main Thread Frame"), categories["rendering"]);
     eventStyles[recordTypes.BeginFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Frame Start"), categories["rendering"]);
     eventStyles[recordTypes.BeginMainThreadFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Frame Start (main thread)"), categories["rendering"]);
     eventStyles[recordTypes.DrawFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Draw Frame"), categories["rendering"]);
     eventStyles[recordTypes.ScheduleStyleRecalculation] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Schedule Style Recalculation"), categories["rendering"]);
     eventStyles[recordTypes.RecalculateStyles] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Recalculate Style"), categories["rendering"]);
     eventStyles[recordTypes.InvalidateLayout] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Invalidate Layout"), categories["rendering"]);
     eventStyles[recordTypes.Layout] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Layout"), categories["rendering"]);
     eventStyles[recordTypes.PaintSetup] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint Setup"), categories["painting"]);
+    eventStyles[recordTypes.UpdateLayer] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Update Layer"), categories["painting"]);
     eventStyles[recordTypes.Paint] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint"), categories["painting"]);
     eventStyles[recordTypes.Rasterize] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint"), categories["painting"]);
     eventStyles[recordTypes.RasterTask] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint"), categories["painting"]);
     eventStyles[recordTypes.ScrollLayer] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Scroll"), categories["rendering"]);
     eventStyles[recordTypes.CompositeLayers] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Composite Layers"), categories["painting"]);
     eventStyles[recordTypes.ParseHTML] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Parse HTML"), categories["loading"]);
     eventStyles[recordTypes.TimerInstall] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Install Timer"), categories["scripting"]);
     eventStyles[recordTypes.TimerRemove] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Remove Timer"), categories["scripting"]);
     eventStyles[recordTypes.TimerFire] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Timer Fired"), categories["scripting"]);
     eventStyles[recordTypes.XHRReadyStateChange] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("XHR Ready State Change"), categories["scripting"]);
@@ skipping 205 matching lines @@
  * @param {!WebInspector.TracingTimelineModel} model
  * @param {!WebInspector.Linkifier} linkifier
  * @param {function(!DocumentFragment)} callback
  * @param {boolean} loadedFromFile
  * @param {!WebInspector.Target} target
  */
 WebInspector.TracingTimelineUIUtils.buildTraceEventDetails = function(event, model, linkifier, callback, loadedFromFile, target)
 {
     var relatedNode = null;
     var barrier = new CallbackBarrier();
-    if (event.imageURL && !event.previewElement)
-        WebInspector.DOMPresentationUtils.buildImagePreviewContents(target, event.imageURL, false, barrier.createCallback(saveImage));
+    if (!event.previewElement) {
+        if (event.imageURL)
+            WebInspector.DOMPresentationUtils.buildImagePreviewContents(target, event.imageURL, false, barrier.createCallback(saveImage));
+        else if (event.picture)
+            WebInspector.TracingTimelineUIUtils._buildPicturePreviewContent(event.picture, barrier.createCallback(saveImage));
+    }
     if (event.backendNodeId)
         target.domModel.pushNodesByBackendIdsToFrontend([event.backendNodeId], barrier.createCallback(setRelatedNode));
     barrier.callWhenDone(callbackWrapper);
 
     /**
      * @param {!Element=} element
      */
     function saveImage(element)
     {
         event.previewElement = element || null;
@@ skipping 70 matching lines @@
         if (eventData["scriptName"])
             contentHelper.appendLocationRow(WebInspector.UIString("Location"), eventData["scriptName"], eventData["scriptLine"]);
         break;
     case recordTypes.ResourceSendRequest:
     case recordTypes.ResourceReceiveResponse:
     case recordTypes.ResourceReceivedData:
     case recordTypes.ResourceFinish:
         var url = (event.name === recordTypes.ResourceSendRequest) ? eventData["url"] : initiator.args.data["url"];
         if (url)
             contentHelper.appendElementRow(WebInspector.UIString("Resource"), WebInspector.linkifyResourceAsNode(url));
-        if (event.previewElement)
-            contentHelper.appendElementRow(WebInspector.UIString("Preview"), event.previewElement);
         if (eventData["requestMethod"])
             contentHelper.appendTextRow(WebInspector.UIString("Request Method"), eventData["requestMethod"]);
         if (typeof eventData["statusCode"] === "number")
             contentHelper.appendTextRow(WebInspector.UIString("Status Code"), eventData["statusCode"]);
         if (eventData["mimeType"])
             contentHelper.appendTextRow(WebInspector.UIString("MIME Type"), eventData["mimeType"]);
         if (eventData["encodedDataLength"])
             contentHelper.appendTextRow(WebInspector.UIString("Encoded Data Length"), WebInspector.UIString("%d Bytes", eventData["encodedDataLength"]));
         break;
     case recordTypes.EvaluateScript:
@@ skipping 15 matching lines @@
         relatedNodeLabel = WebInspector.UIString("Layer root");
         break;
     case recordTypes.PaintImage:
     case recordTypes.DecodeLazyPixelRef:
     case recordTypes.DecodeImage:
     case recordTypes.ResizeImage:
     case recordTypes.DrawLazyPixelRef:
         relatedNodeLabel = WebInspector.UIString("Image element");
         if (event.imageURL)
             contentHelper.appendElementRow(WebInspector.UIString("Image URL"), WebInspector.linkifyResourceAsNode(event.imageURL));
-        if (event.previewElement)
-            contentHelper.appendElementRow(WebInspector.UIString("Preview"), event.previewElement);
         break;
     case recordTypes.RecalculateStyles: // We don't want to see default details.
         contentHelper.appendTextRow(WebInspector.UIString("Elements affected"), event.args["elementCount"]);
         callStackLabel = WebInspector.UIString("Styles recalculation forced");
         break;
     case recordTypes.Layout:
         var beginData = event.args["beginData"];
         contentHelper.appendTextRow(WebInspector.UIString("Nodes that need layout"), beginData["dirtyObjects"]);
         contentHelper.appendTextRow(WebInspector.UIString("Layout tree size"), beginData["totalObjects"]);
         contentHelper.appendTextRow(WebInspector.UIString("Layout scope"),
@@ skipping 41 matching lines @@
     var eventStackTrace = event.stackTrace;
     if (eventStackTrace)
         contentHelper.appendStackTrace(callStackLabel || WebInspector.UIString("Call Stack"), eventStackTrace);
 
     var warning = event.warning;
     if (warning) {
         var div = document.createElement("div");
         div.textContent = warning;
         contentHelper.appendElementRow(WebInspector.UIString("Warning"), div);
     }
+    if (event.previewElement)
+        contentHelper.appendElementRow(WebInspector.UIString("Preview"), event.previewElement);
     fragment.appendChild(contentHelper.element);
     return fragment;
 }
 
 /**
  * @param {!WebInspector.TracingTimelineModel} model
  * @param {!WebInspector.TracingModel.Event} event
  * @return {!{ aggregatedStats: !Object, hasChildren: boolean }}
  */
 WebInspector.TracingTimelineUIUtils._aggregatedStatsForTraceEvent = function(model, event)
@@ skipping 20 matching lines @@
             if (!nextEvent.selfTime)
                 continue;
             if (i > index)
                 hasChildren = true;
             var category = WebInspector.TracingTimelineUIUtils.styleForTraceEvent(nextEvent.name).category.name;
             aggregatedStats[category] = (aggregatedStats[category] || 0) + nextEvent.selfTime;
         }
     }
     return { aggregatedStats: aggregatedStats, hasChildren: hasChildren };
 }
+
+/**
+ * @param {string} encodedPicture
+ * @param {function(!Element=)} callback
+ */
+WebInspector.TracingTimelineUIUtils._buildPicturePreviewContent = function(encodedPicture, callback)
+{
+    var snapshotId;
+
+    LayerTreeAgent.loadSnapshot(encodedPicture, onSnapshotLoaded);
+    /**
+     * @param {string} error
+     * @param {string} id
+     */
+    function onSnapshotLoaded(error, id)
+    {
+        if (error) {
+            console.error("LayerTreeAgent.loadSnapshot(): " + error);
+            callback();
+            return;
+        }
+        snapshotId = id;
+        LayerTreeAgent.replaySnapshot(snapshotId, onSnapshotReplayed);
+    }
+
+    /**
+     * @param {string} error
+     * @param {string} encodedBitmap
+     */
+    function onSnapshotReplayed(error, encodedBitmap)
+    {
+        LayerTreeAgent.releaseSnapshot(snapshotId);
+        if (error) {
+            console.error("LayerTreeAgent.replaySnapshot(): " + error);
+            callback();
+            return;
+        }
+        var container = document.createElement("div");
+        container.className = "image-preview-container";
+        var img = container.createChild("img");
+        img.src = encodedBitmap;
+        callback(container);
+    }
+}