Timeline: add preview of painted picture for Paint event

Source/devtools/front_end/timeline/TimelineTracingView.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
  * @implements {WebInspector.TimelineModeView}
  * @implements {WebInspector.FlameChartDelegate}
@@ skipping 106 matching lines @@
         contentHelper.appendTextRow(WebInspector.UIString("Duration"), Number.millisToString(record.duration, true));
         if (!Object.isEmpty(record.args))
             contentHelper.appendElementRow(WebInspector.UIString("Arguments"), this._formatArguments(record.args));
         /**
          * @this {WebInspector.TimelineTracingView}
          */
         function reveal()
         {
             WebInspector.Revealer.reveal(new WebInspector.DeferredTracingLayerTree(this._tracingModel.target(), record.args["snapshot"]["active_tree"]["root_layer"]));
         }
-        if (record.name === "cc::LayerTreeHostImpl") {
+        /**
+         * @param {!Node=} node
+         * @this {WebInspector.TimelineTracingView}
+         */
+        function appendPreviewAndshowDetails(node)
+        {
+            if (node)
+                contentHelper.appendElementRow("Preview", node);
+            this._delegate.showInDetails(WebInspector.UIString("Selected Event"), contentHelper.element);
+        }
+        var recordTypes = WebInspector.TracingTimelineModel.RecordType;
+        switch (record.name) {
+        case recordTypes.PictureSnapshot:
+            WebInspector.TracingTimelineUIUtils._buildPicturePreviewContent(record.args["snapshot"]["skp64"], appendPreviewAndshowDetails.bind(this));
+            break;
+        case recordTypes.LayerTreeHostImplSnapshot:
             var link = document.createElement("span");
             link.classList.add("revealable-link");
             link.textContent = "show";
             link.addEventListener("click", reveal.bind(this), false);
             contentHelper.appendElementRow(WebInspector.UIString("Layer tree"), link);
-        } else if (record.name === "cc::Picture") {
-            var div = document.createElement("div");
-            div.className = "image-preview-container";
-            var img = div.createChild("img");
-            contentHelper.appendElementRow("Preview", div);
-            this._requestThumbnail(img, record.args["snapshot"]["skp64"]);
+            // Fall-through intended.
+        default:
+            this._delegate.showInDetails(WebInspector.UIString("Selected Event"), contentHelper.element);
         }
-        this._delegate.showInDetails(WebInspector.UIString("Selected Event"), contentHelper.element);
     },
 
     /**
      * @param {!Object} args
      * @return {!Element}
      */
     _formatArguments: function(args)
     {
         var table = document.createElement("table");
         for (var name in args) {
             var row = table.createChild("tr");
             row.createChild("td", "timeline-details-row-title").textContent = name + ":";
             var valueContainer = row.createChild("td", "timeline-details-row-data");
             var value = args[name];
             if (typeof value === "object" && value) {
                 var localObject = new WebInspector.LocalJSONObject(value);
                 var propertiesSection = new WebInspector.ObjectPropertiesSection(localObject, localObject.description);
                 valueContainer.appendChild(propertiesSection.element);
             } else {
                 valueContainer.textContent = String(value);
             }
         }
         return table;
     },
 
-    /**
-     * @param {!Element} img
-     * @param {string} encodedPicture
-     */
-    _requestThumbnail: function(img, encodedPicture)
-    {
-        var snapshotId;
-        LayerTreeAgent.loadSnapshot(encodedPicture, onSnapshotLoaded);
-        /**
-         * @param {string} error
-         * @param {string} id
-         */
-        function onSnapshotLoaded(error, id)
-        {
-            if (error) {
-                console.error("LayerTreeAgent.loadSnapshot(): " + error);
-                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);
-                return;
-            }
-            img.src = encodedBitmap;
-        }
-    },
-
     __proto__: WebInspector.VBox.prototype
 };
 
 /**
  * @constructor
  * @implements {WebInspector.FlameChartDataProvider}
  * @param {!WebInspector.TracingModel} model
  * @param {!WebInspector.TimelineModel} timelineModelForMinimumBoundary
  */
 WebInspector.TraceViewFlameChartDataProvider = function(model, timelineModelForMinimumBoundary)
@@ skipping 360 matching lines @@
     /**
      * @param {string} string
      * @return {string}
      */
     colorForString: function(string)
     {
         var hash = WebInspector.TraceViewPalette._stringHash(string);
         return this._palette[hash % this._palette.length];
     }
 };